Overview of Different Containers

#### Search Results

Search

# Overview of Different Containers

This document covers the following topics:

- Different Kind of Containers

- Row Containers

- Column Containers

- Row and Column Containers in Combination

- Nesting Containers

## Different Kind of Containers

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.

## Row Containers

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

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%"`).

## Row and Column Containers in Combination

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:

## Nesting Containers

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:

### On this page

- Different Kind of Containers
- Row Containers
- Column Containers
- Row and Column Containers in Combination
- Nesting Containers