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 windowLayout tab hasof twoan fields:HTML activity

The window has two fields:
- layout type - has three options: 
MAIN, NORMAL,-* 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 using a zuml tag and providing a custom source location, as in the code below:
{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" />  
{code}

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