This document covers the following topics:
Currently, there are the following types of containers:
ROWAREA and COLAREA
These are containers holding a title. The graphic area represented by
the container is surrounded by a border. The content of the area container can
be reduced by clicking on the title - and resized by clicking again on the
title.
ROWTABAREA and COLTABAREA
These are containers holding different pages (TABPAGE elements) which
can be toggled.
ROWTABLE0 and COLTABLE0
These are containers you do not see; i.e. a container does not have
any borders or any special coloring. Use it just for arranging elements inside
the container.
ROWDYNAVIS and COLDYNAVIS
This is a container that is the same as the ROWTABLE0 or COLTABLE0
container but with an additional feature: You can control the visibility of the
whole container dynamically by an adapter property. Use this container if you
want to display or hide a certain area of your screen depending on some
business logic.
A typical example is an address management: the user enters an address located in the United States. Therefore, an additional area has to appear in which the user enters the state information. For other countries, this area is not required and should not be visible.
The containers have a row implementation and a column implementation.
Row containers occupy the whole available width they can obtain. They are placed directly in other containers. You can place several row containers inside one container. Therefore, they are arranged one below the other.
Example:
<pagebody>
<rowarea name="Area 1">
</rowarea>
<rowarea name="Area 2">
</rowarea>
<rowarea name="Area 3">
</rowarea>
</pagebody>
The above XML layout produces the following HTML page:
Column containers are placed inside rows, i.e. into TR rows or ITR rows. You can place several column containers inside one row. Therefore, they are arranged in a way that one column container follows the other horizontally.
Example:
<pagebody>
<itr width="100%">
<colarea name="Area 1" width="33%">
</colarea>
<hdist>
</hdist>
<colarea name="Area 2" width="33%">
</colarea>
<hdist>
</hdist>
<colarea name="Area 3" width="33%">
</colarea>
</itr>
</pagebody>
The above XML layout produces the following HTML page:
With column containers, you have to specify the width (either as a pixel
value or as a percentage value) of the container. Note that - if using
percentage widths - you have to place them into an ITR row that itself occupies
the whole available width (itr width="100%").
It is possible to use row and column containers in combination. The following example combines the two examples shown above.
<pagebody>
<rowarea name="Area1">
</rowarea>
<rowarea name="Area 2">
</rowarea>
<rowarea name="Area 3">
</rowarea>
<itr width="100%">
<colarea name="Area 1" width="33%">
</colarea>
<hdist>
</hdist>
<colarea name="Area 2" width="33%">
</colarea>
<hdist>
</hdist>
<colarea name="Area 3" width="33%">
</colarea>
</itr>
</pagebody>
The HTML page looks as follows:
It is possible to nest containers - one into another - in any way. Example:
<pagebody>
<rowarea name="Level 1">
<rowarea name="Level 2">
<rowarea name="Level 3">
<itr width="100%">
<colarea name="Left" width="50%">
</colarea>
<hdist>
</hdist>
<colarea name="Right" width="50%">
</colarea>
</itr>
</rowarea>
</rowarea>
</rowarea>
</pagebody>
The above XML code produces the following HTML page:
