Using Templates,Articles and Resources

Change log:

1 - Purpose of Document

This document provides the overall technical details and design of implementing and using the functionality as specified in section 2 - Introduction. This document will not cover implementation details – for this the code base should be inspected.

2 - Introduction

Using the workflow builder we will cover all the steps and aspects of creating, designing and styling of a web page. The following sections require an existing web workflow with at least a Html Activity so it's recommended to go through this [section] first.

3 - Developing a web page

3.1 - Setting up the web page

1. Open an existing web workflow or create a new one
2. Open an existing HTML activity from the web workflow at step 1 by double clicking on it. This will open a dialog window with multiple tabs, Layout being the focus in this step (Figure 1)

Figure 1. The Layout tab of an HTML activity

The window has two fields:

• layout type - has three options: 
  • MAIN - the page will be used as a layout page
  • NORMAL - this is the default selection if nothing is chosen from the list
  • MENU - the page can be used as <zone> activity
• layout main page - contains the name of the template that defines the layout

An example of zul coding of the 4-zones template is listed below:

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <div height="100%" width="100%">
		<grid width="100%" height="100%">
			<rows>
				<row>
					<cell colspan="2" width="100%">
						<zone id="NORTH" />
					</cell>
				</row>
				<row>
					<cell>
						<zone id="WEST" />
					</cell>
					<cell height="100%">
						<zone id="CENTER" />
					</cell>
				</row>
                <row>
					<cell colspan="2" width="100%">
						<zone id="SOUTH" />
					</cell>
				</row>
			</rows>
		</grid>
	</div>
</zk>

3. After selecting the layout, the zones(tiles) that fill the layout must be configured. This is done by double clicking the activity and navigating to General tab. The General tab will display placeholders for all the zones that are in the template selected in step 2. A zone can be filled either with static content from an Article or with dynamic content from another HTML activity. When a zone is configured as an Article type, the list of articles is loaded from the Resource Library. When a Zone is configured as Activities, the list is populated with the HTML Activities in the current workflow that are defined as MENU in the Layout tab. Figure 2 shows how to select the zones.

Figure 2. Zone setup window

Note: Remember that for HTML activities to become available as zones they have to be configured as MENU in the layout tab

As you may have noticed, even if we have defined four zones in the template , the zone with the id CENTER is not configured in the General tab. By (framework) convention the <zone id="CENTER" /> will always be opened and handled in the Setup HTML tab.

3.2 - Coding the web page

This can be done either from Resource Library by editing articles/templates/resources or directly from the workflow builder, in the Setup HTML tab. An article allows zuml/html syntax and was extended to support CDRator special tags (LABELS, CONDITIONS, BLOCKS). An example of mixed zuml and CDRator Labels and Conditions is shown below:

<zk>
	<panel width="100%">
		<panelchildren>
			<div>
			***IF@COMMIT***
				<grid zclass="none" width="600px;">
					<columns>
						<column></column>
						<column></column>
					</columns>
					<rows>
						<row>
							<label value="Order time" style="font-weight:bold"/>
							<label value="***LABEL@ORDERED_TIME***"/>
						</row>
					</rows>
				</grid>
			***END@COMMIT***
			</div>
		</panelchildren>
	</panel>
</zk>

In the following sections we will focus on using resources from the Resource Library.

Loading css files

This can be done by using a custom ZKoss component that has to be defined at the top of the script. The syntax is:

<?component name="cmsCss" macroURI="~./com/CDRator/components/cms/css.zul" inline="true"?>

Using the above declared component, images can be loaded as follows:

<cmsCss resourcePath="path_to_css_resource/css_resource_name"/>

where: path_to_css_resource is the path to an existing css resource in Resource Library, starting from Resources/<WEBAPP> folder

Example:

<cmsCss resourceId="css/default/style.css"/>

Tip: It's recommended for css resources to be loaded in the template, to be rendered as soon as possible

Loading/using images

This can be done by using a custom ZKoss component that has to be defined at the top of the script. The syntax is:

<?component name="cmsImage" macroURI="~./com/CDRator/components/cms/image.zul" inline="true"?>

Using the above declared component, images can be loaded as follows:

<cmsImage resourcePath="path_to_image_resource/image_resource_name"/>

where: path_to_image_resource is the path to an existing resource in Resource Library, starting from Resources/<WEBAPP> folder

Example:

<cmsImage resourcePath="jpg/memorystick_lille.jpg"/>

Including other articles from the resource library

This can be done by using a custom ZKoss component that has to be defined at the top of the script. The syntax is:

<?component name="cmsArticle" macroURI="~./com/CDRator/components/cms/article.zul" inline="true"?>

Using the above declared component, images can be loaded as follows:

<cmsArticle resourceId="article_name"/>

where: article_name is the exact name of the article in the Resource Library

Example:

<cmsArticle resourceId="SELFCARE-WEB-Open-Center-FAQ"/>

Generic way of loading resources

There are some places where custom Zkoss components cannot be used to load a resource, as src attributes on images or background images in css files. For this the user has to use the standard servlet that loads resources.

<style src="servlet/RetrieveResource?resourceId=path_to_resource" />

where: servlet/RetrieveResource?resourceId= is the standard string of accessing resources from the resource library and
path_to_resource is the path to an existing resource in Resource Library, starting from Resources/<WEBAPP> folder

Example:

<style src="servlet/RetrieveResource?resourceId=css/default/style.css" /> <!-- Example of loading a css from the resource library-->

#topmenu{
	width:980px;
	height:60px;
	/*Example of setting the background image*/
	background-image:url("RetrieveResource?resourceId=png/menu_back_01.png");
	position:relative;
	top:60px;
	z-index:200;
	font-family:Helvetica,Arial;
	font-size:14px;
}