The Layout View lets you organize view components in the page using the 960 Grid System. The 960 Grid System (http://960.gs) is very popular CSS framework for defining page layout and is known for its ease and flexibility. The framework is a set of style sheets with CSS rules. It provides two grids: one formed by 12 columns and the other formed by 16 columns; in both grids, the width of the container remains always at 960px.
In the following picture, you can see an extract of a 12 Column Grid. You can, for example, divide the page into 2 columns and choose the most appropriate combination for the size of each column.
Structure of the Layout View
The WebRatio Layout View is composed of four sections: the pool on the left, the main grid at the right, the toolbar, and the breadcrumb links.
The pool shows all the view components included in the selected page. The view components listed are the ones having a graphic rendering, which means that some of them are excluded (e.g., Selector Component, Time Component, etc). The Details Component and the Form Component have some sub-elements representing attributes, fields and navigation flows.
This lets the modeler add in the main grid not only the entire component, but also the sub-elements. In addition, the following predefined elements are present:
- Grid. It is a subgrid, composed of 12 columns. It has all the functionality of the main grid, and it is based on the 960 Grid System as well.
- Cell. This is a space where you can place items. It is used mainly to group items and apply a cell template to them. Read the "Getting started with Cell templates" article for further information.
- Custom locations. A custom location is an additional location defined in the page layout, besides the main grid, where the designer may insert view components. The pool contains the list of all custom locations available in the Style Project applied to the Web Project. Refer to the "Getting started with the Style Project" article for further information. You can view the used custom locations in the Locations Overview section.
The Main Grid represents the "content" part of the page where it's possible to add view components. By default, the main grid contains all view components included in the current page placed one under the other. It’s possible to reorganize the view components inside the main grid by using the most common instruments (adding/removing rows, resizing items) and so on.
The toolbar contains the most common commands to work with the Layout View. The most interesting option is the "Up" command, which allows to go back to the upper element when you are seeing the content of a nested Grid or of a Cell.
The breadcrumbs show the navigation path inside the grid (e.g., Page → Form Component ) and the current position. For example, the following breadcrumbs indicate that you are seeing one Cell placed inside the page "Page".
The generation process generates the pages of the Web application. The page will contain the HTML code related to the model elements. Each element is placed in a specific position in the page according to organization set on the Grid and Custom Location inside the Layout View. The Grid structure becomes a set of <div> tag having the CSS classes of the 960 Grid System. Each <div> tag contains a view component. Let's see an example.
The picture below shows a Page Grid containing some elements that should be placed in two columns. Both the "Details Company" details component and "Related Employees" list component have to be positioned on the right of the "Companies List" list component. The generator will group the "Details Company" and "Related Employees" components into a cell.
<link href="builtin/960_Fluid_Nestable.css" type="text/css" rel="stylesheet">
<link href="builtin/grid_elements.css" type="text/css" rel="stylesheet">
<div class="grid_6 alpha agrd_12">
<!-- HTML code of the "Companies List" component -->
<div class="grid_6 omega container_6 agrd_12">
<div class="grid_6 alpha omega agrd_12">
<!-- HTML code of the "Details Company" component -->
<div class="grid_6 alpha omega agrd_12">
<!-- HTML code of the "Related Employees" component -->
- Lines 3-4. These lines import the extended 960 Grid System stylesheets.
- Line 9. This line defines the main page container. The class "container_12" means 12 columns' width.
- Line 10. This line defines the container of the "Companies List" component. The class "grid_6" means 6 columns width.
- Line 13. This line defines an implicit cell. The elements inside the result page cannot have a fixed height due to specific limitations of the 960 Grid System and more generally the presentation approach of the browser. The height of an element inside the Grid is exploited during the generation phase for maintaining the relationships among the elements (e.g., the side-by-side relationships among some elements). In this case, the generator adds an implicit cell and groups the elements that have to be managed in a unified way.
- Lines 14-20. This lines define the container of the "Details Company" and "Related Employees" components.
This section shows the usage of the Layout View and of the Grid through some examples. For each one you can see the organization in the Layout View and the result in the Web browser page.
Employee Form: position form elements manually
Product Form: position the Label, Value and Error form elements
The added value of this example, with respect to the previous, is the possibility to individually position the label, value, and error.
Sales Manager Details: position the Label, Value details elements
Product Page: control the positioning and the relationships among elements