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}{table-plus:enableSorting=false|width=665}

{table-plus}
In the process of developing web applications an important step is to handle the way the pages look. This is handled by different type of web resources: css, js, images, swf. The management of those web resources is done by using a web application called *Resource Library*. 

h2. Starting Resource Library

Starting the Resource Library is simply a matter of accessing the Workflow Builder URL and providing the workflow hookpoint as a parameter to that page, more specifically the URL is:

{code}
http://<HOSTNAME>:<PORT>/<WEBAPP>/state.zul?TARGET=WEB.RL
{code}

where&nbsp;<WEBAPP> is the context where the workflow builder is deployed.

The Resource Library requires authentication so the first page is the Login (figure 1):

 !wf_login.png|border=1!
Figure 1: The Workflow Builders requires the operator to authenticate.

Once the operator has been authenticated, the first screen shown is the content of Resource Library (Figure 2).

!resource_library_open.jpg|border=1!


Figure 2: The Resource Library allows operators to browse through resources.

All the resources have their own properties, like Name, Type, References and Version. They are explained in the table below.

|| Property || Description ||
| Name | Name of the resource. |
| Type | The type of the resource. It can be Article, Template or other resource (Image, Item, Properties, CSS). |
| References | The name of other resources that hold a reference to this resource. |
| Version | The current version of this resource. |

h2. Resource Categories


h3. 1. Templates

The layout of the web pages follows the *Template* pattern. This way the layout and the design of the web page can be changed very easy. A template is a zk page that defines placeholders for different regions of the web page, regions that are defined in the framework as *zones*. In the figure below you can see a 4-region page: the header, the upper-left menu, the lower left menu and the center.

!rl-template-example.jpg|border=1!

Figure 3. Template with 4-zone layout.

h4. Template Actions

To *add* a template the user has to:
* in the left menu of the Resource Library select Template(see figure 2)
* click on *Add* button (see figure 2)

To *edit* a template the user has to:
* either double-click on the template name or
* select a template, open the contextual menu by right-clicking on the template name and then select *Edit*

To *delete* a template the user has to:
* select a template, open the contextual menu by right-clicking on the template name and then select *Delete*

Other actions like *Preview*, *Copy*/*Cut*/*Paste* and *Show revisions* are available for templates as convenient actions.

_Notes: Template names have to be unique. A Template can contain any zkoss markup plus CDRator templates special tags (labels, conditions, blocks)_

h3. 2. Articles

These are static ZKoss scripts that are used to fill the zones in a template. They fit as tiles in the layout and can easily be changed, thus changing the page looks and functions. Below there is an article example.


!rl-article-example.jpg|border=1!

Figure 4. Article example - can be used for the header zone.

h4. Article actions

To *add* an article the user has to:
* in the left menu of the Resource Library select Article(see figure 2)
* click on *Add* button (see figure 2)

To *edit* a article the user has to:
* either double-click on the article name or
* select an article, open the contextual menu by right-clicking on the article name and then select *Edit*

To *delete* an article the user has to:
* select an article, open the contextual menu by right-clicking on the article name and then select *Delete*

Other actions like *Preview*, *Copy*/*Cut*/*Paste* and *Show revisions* are available for articles as convenient actions.

_Notes: Article names have to be unique. An Article can contain any zkoss markup plus CDRator templates special tags (labels, conditions, blocks)_

h3. 3. Other Resources

A web page can contain some other resources as css, images, swf, property files and so on. The framework handles those resources by uploading them into the database and represents them in Resource Library using a folder-like structure (figure 5). The first level under Resources folder *must* be the context of the web application that is using those resources.


!rl-other-resources.jpg|border=1!
Figure 5. Example of resources folder structure

Figure 5 depicts a setup for 2 web applications: workflow-builder (that is running under http://<HOSTNAME>:<PORT>/*workflow-builder*/) and selfcare-web (that is running under http://<HOSTNAME>:<PORT>/*selfcare-web*/). If the context of these applications changes, then corresponding resource folder has to be renamed accordingly.

h4. Other Resources Actions

To *add* an folder to the resource hierarchy the user has to:
* in the left menu of the Resource Library select a folder under Resources(see figure 2)
* open the contextual menu by right-clicking on the folder name and then select *Add*

To *upload* an resource the user has to:
* have a folder under Resources\<WEBAPP> selected from the left menu of the Resource Library (see figure 2)
* click on *Add* button (see figure 2). In the upload dialog that opens (figure 6), the user has to choose a file to upload and click *OK*. The type of the resource is automatically detected but it also can be changed by the user at upload time.

!rl-resource-upload.jpg|border=1!

Figure 6. Upload resource item window

To *edit* a resource the user has to:
* either double-click on the resource name or
* select an resource, open the contextual menu by right-clicking on the resource name and then select *Edit*

The *Edit* operation is dependent of the resource type. For example, for resources of type IMAGE/ITEM/JAR the edit allows only the change of the name. For the other types Edit action opens a simple text editor that allows the changing of content.

To *delete* a resource the user has to:
* select a resource, open the contextual menu by right-clicking on the article name and then select *Delete*
The Delete action is also available for deleting entire folders from the Resource Library.

To *import* resources the user has to:
* in the left menu of the Resource Library select a folder under Resources(see figure 2)
* open the contextual menu by right-clicking on the folder name and then select *Upload ZIP*.

This action will load the content of the zip archive under the selected folder, maintaining the folder structure of the zip archive. At import time the user has the choice of selecting the whole content of the zip archive or only desired items from the archive. Figure 7 shows the upload zip file wizard steps.

_Note: Uploading the same zip archive multiple times will overwrite the previous uploaded files/folders_

!rl-upload-zip.jpg|border=1!

To *export* resources the user has to:
* in the left menu of the Resource Library select a folder under Resources(see figure 2)
* open the contextual menu by right-clicking on the folder name and then select *Export ZIP*.

This action will pack the content of the selected folder (with all sub-folders) into a zip archive and offer it for download, maintaining the folder structure from the Resource Library.
Uploading and exporting resources are two very useful operations for migrating the entire Resource Library or making backups of it.
Articles and Templates do not make the object of uploading/exporting as zip files as they are managed by the workflow-builder import/export operations.

Other actions like *Preview*, *Copy*/*Cut*/*Paste* and *Show revisions* are available for resources as convenient actions.

h2. Prerequisites

To use the Resource Library, authentication is performed so valid operators are required.
The resource library runs in a browser so check the supported browser list at [http://confluence.cdrator.com/display/cdrwf/Supported+Platforms].