...
Change
...
log:
...
Date: |
|---|
...
Author: |
|---|
...
Version: |
|---|
...
Changes: |
|---|
...
Completed | Ext. | Int. | Is in Core | Jira Ref. | |
|---|---|---|---|---|---|
|
...
|
...
0.1 |
...
Doc. |
...
created |
...
Yes | x |
| N/A |
|
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:
| Code Block |
|---|
<?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>
{code}
|
Two
...
things
...
worth
...
noting
...
here:
...
- The
...
- CSS
...
- is
...
- fetched
...
- from
...
- the
...
- resource
...
- library
...
- in
...
- the
...
- style
...
- tag.
...
- Same
...
- procedure
...
- for
...
- Javascripts
...
- and
...
- additional
...
- CSS.
...
- 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.
| Child pages (Children Display) |
|---|