Page Comparison

{noprint}{float:right|width=300px|background=lightgrey|border=solid blue 2px|margin=10px|padding=8px}
*Contents*
{toc:all=true|depth=4|excerpt=true|indent=14px}
{float}{noprint}
*Change log:*
|| *Date:* || *Author:* || *Version:* || *Changes:* || Completed || *Ext.* || *Int.* || *Is in Core* || Jira Ref. ||
| {page-info:created-date|dateFormat=dd MMMM yyyy} | {page-info:created-user} | 0.1 | Doc. created | Yes/No | x | | N/A | |

h2. 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.

h2. 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|zk:2 Creating the Web Workflow] first.

h3. 3 - Developing a web page

h4. 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)


!wf-builder-html-page-layout.jpg|border=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:

{code}
<?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>
{code}


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.

!wf-builder-zone-setup.jpg|border=1!
*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.

h4. 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:

{code}
<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>
{code}

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

h5. Loading css files

This can be done by using a zuml tag and providing a custom source location, as in the code below:
{code}
 custom ZKoss component that has to be defined at the top of the script. The syntax is:
{code}
<?component name="cmsCss" macroURI="~./com/CDRator/components/cms/css.zul" inline="true"?>
{code} 

Using the above declared component, images can be loaded as follows:
{code}
<cmsCss resourcePath="path_to_css_resource/css_resource_name"/>
{code}

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

Example:

{code}
<cmsCss resourceId="css/default/style.css"/>
{code}

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

h5. 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:
{code}
<?component name="cmsImage" macroURI="~./com/CDRator/components/cms/image.zul" inline="true"?>
{code} 

Using the above declared component, images can be loaded as follows:
{code}
<cmsImage resourcePath="path_to_image_resource/image_resource_name"/>
{code}

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

Example:

{code}
<cmsImage resourcePath="jpg/memorystick_lille.jpg"/>
{code}

h5. 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:
{code}
<?component name="cmsArticle" macroURI="~./com/CDRator/components/cms/article.zul" inline="true"?>
{code} 

Using the above declared component, images can be loaded as follows:
{code}
<cmsArticle resourceId="article_name"/>
{code}

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

Example:

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

h5. 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. 

{code}
<style src="servlet/RetrieveResource?resourceId=path_to_css_resource" />  
{code}

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

Example:

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

_Tip: It's recommended for css resources to be loaded in the template, to be rendered as soon as possible_{code}
#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;
}
{code}