Styling Guide

Change log:

Introduction to the Framework for Designers

A page in the Rator Web Framework is generated from templates and articles. Both are written in the zul format, a subset of XML. Templates usually include Javascript and CSS ressources and define placeholders that consist of articles. Everything is editable using the resource library.

A standard website will usually have one global template that defines the overall layout and include the main CSS. Example:

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <style src="servlet/RetrieveResource?resourceId=css/default/style.css" />
    <vbox align="stretch" width="100%">
        <cell zclass="vbox-layout-cell1">
            <zone id="NORTH" />
        </cell>
        <cell zclass="vbox-layout-cell2">
            <hbox hflex="true">
                <cell width="15%">
                    <zone id="EAST" />
            		<zone id="SOUTH-EAST" />
                </cell>
                <cell height="100%" width="100%" style="vertical-align:top;padding-left:5px;border-left:1px dashed #e2e2e2">
                    <zone id="CENTER" />
                </cell>
            </hbox>
        </cell>
    </vbox>
</zk>

Two things worth noting here:

1. The CSS is fetched from the resource library in the style tag. Same procedure for Javascripts and additional CSS.
2. The overall layout contains four sections:
   • NORTH
   • EAST
   • SOUTH-EAST
   • CENTER

Most of the overall styling can be done by simply modifying the global template and CSS. To make changes to the overall markup though, you have to understand how page content is defined.

Activities and Articles

The content of each section is defined in an HTML activity in a workflow. Under normal circumstances it is not necessary to modify workflows to style a website, but in some cases you will need to configure a different header for a section of the site or populate the SOUTH-EAST section with a new feature etc. This will be dealt with in more depth later, but to illustrate how a single page layout is configured, here is a screenshot. The page uses the "SELFCARE - new Global TEMPLATE" (the contents of which is listed above) and populating only the NORTH and CENTER section. NORTH uses the SELFCARE_WEB-OPEN-header-nologin article that can be edited the resource library. The content of the CENTER section is the activity itself, and it is edited either directly in the activity (View tab) or in the resource library. The View tab shows the article name as well as the contents.

From Browser to Article: Locating the Right Resource

We are currently expanding the framework to generate comments in the final HTML that will show the resource library paths of templates and articles used to generate the html. This will make the task of locating the right article from looking at the browser as simple as viewing the source and doing a search.

In the current version your only point of reference is the URL. The last part of the URL will be something like: state.zul?TARGET=WEB.SELFCARE_SIGNUP_TEST. This tells you that the system will load the page with the "hookpoint key" SELFCARE_SIGNUP_TEST in the group WEB.

Now go to the hookpoint explorer (link above the resource library in the main tree of the workflow admin), locate the "WEB" group and search the list of hookpoints. Double click the hookpoint to show what workflow it maps to, then go to the workflow builder and open the workflow.

The workflow contains a number of html activities, the name of the transition (the lines between the boxes) is visible in the URL. Open the activity and consult the View and Layout tabs to see how that page is rendered.

Further Reading

Please consult the sub-pages for more details on using the resource library and page composition.

• Common ZKoss Components
• How to Build and Change ZKoss Theme
• Resource Library
• Using Templates, Articles and Resources