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. 

Starting Resource Library

To start 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:

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

where <WEBAPP> is the context where the workflow builder is deployed.

The Resource Library requires authentication so the first page is the Login (figure 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).

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.

Resource categories

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.

Figure 3. Template with 4-zones layout.

Template actions

To *add*a template the user has to:

• have Template resource selected from the left menu of the Resource Library (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 to ease the work.

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

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.

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

Article actions

To add an article the user has to:

• have Article resource selected from the left menu of the Resource Library (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 a 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 to ease the work.

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

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.

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.