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 need 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. As you can see, the page is using the "SELFCARE - new Global TEMPLATE" (the contents of which is listed above) and populating only the NORTH and CENTER section. NORTH is using 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.

Please consult the sub pages for more details.