NaturalONE Version 8.3.7
 —  Natural for Ajax  —

Overview of Different Containers

This document covers the following topics:


Different Kind of Containers

Currently, there are the following types of containers:

Top of page

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:

graphics/image040.png

Top of 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:

graphics/image041.png

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

Top of page

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:

graphics/image042.png

Top of page

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:

graphics/image043.png

Top of page