Layout of a Page

After adding a page to a channel and editing its properties, it is necessary to layout and instantiate it with service interfaces, giving functionality to the page.

The layout of a page resembles the creation of several tables aligned one below the other. These tables are called “Areas” and can have various columns, which, in turn, can contain multiple interfaces.

Consider "Area 0" with its respective "Column 0" and "Column 1". These two columns will be created when two interfaces are instantiated side by side in the same area (Area 0).

The page layout occurs in edit mode. To do this, you must click on Edit Layout located in the command bar of the administrative area of a channel.

The command bar displays six actions that the portal administrator can use to view the page layout:

Actions on the left side:

• Edit: Activates the page edit mode, making it possible to change the layout by adding areas and service interface instances;
• Save: Confirms the changes to the layout made in edit mode;
• Cancel: Cancels the changes made.

Actions on the right side:

• View page: Allows you to see the result of the page layout (preview), without saving the changes made;
• View grids: Allows you to see the result of the page layout, similar to the View page mode, with the difference of displaying dotted lines between areas, delimiting them;
• View page structure: Displays the names of the instantiated interfaces and the delimitations between areas.

To modify the layout, select the desired page and click the Edit button in the command bar.

The browser will display only channels and service instances.

When Edit is selected for a page, a box corresponding to the area is displayed, allowing for the filling of interface instances. To add more areas, you must select the arrows located on the left side of the area.

As mentioned above, a column corresponds to an instantiated interface. In an area, there can also be two rows, corresponding to two instantiated interfaces one below the other.

To specify the exact width (in pixels) or relative (in percentage) of a column, simply enter the value (without unit) for pixels or with "%" for percentage, in the field created above each one.

You can, by right-clicking on the left side of the area (area properties) or at the top of it (column properties), specify the name of a class implemented in CSS, which is applied to the channel or page. This class will be responsible for changes in the layout of the area.