- Generation in Zoning mode and generation in Positioning Table mode
- How to use the generation in zoning mode?
- Differences in edit and in generation
- "Zoning" mode: Reference size of pages
- Creating and handling the layout areas in the editor
- Creating layout areas
- Handling layout areas
- Description window of the layout area
- Semantics associated with a layout area
Editing pages: zoning mode
The edit mode in Zoning mode becomes available from version 17. This edit mode is used to:
- simplify the edit and the modification of a page in the editor.
- optimize the generation of the page.
- propose new features such as:
- ability to define a reference size for the pages,
- ability to define layout areas,
- propose a simplified anchoring of controls, ...
Generation in Zoning mode and generation in Positioning Table mode
How to use the generation in zoning mode?
By default, all the pages created from WEBDEV 17 use the generation in zoning mode. To use this generation mode with pages created with earlier versions, you must:
- Display the description window of the page ("Description" from the popup menu of the page).
- In the "General" tab, select "Edit in "zoning", positioning by blocks and anchoring on the controls".
Differences in edit and in generation
In "Mode compatible with version 16", the generation of pages uses the mechanism of positioning tables. In this generation mode, the positions of controls are linked together. Thereforen, there is a risk of interaction between controls.
For example, a Looper control and links are positioned side by side in a page.
At run time, according to the position of the links and to the size of the looper, the links are not positioned properly.
In this mode, to get a proper positioning, we advise you to include the controls in cells.
In "zoning" mode, the generation of pages does not use the mechanism of positioning tables. The benefits of this mode are:
- the layout of pages at run time is nearly identical to their layout in the editor.
- greater freedom when handling the controls.
- easier generated code.
In this mode, the cells are no longer required to perform the layout (the cells are no longer used to avoid the layout problems).
For example, by modifying the generation mode of the page containing a looper and links, the result is as follows:
"Zoning" mode: Reference size of pages
In zoning mode, when editing a page in the editor, you have the ability to define the size of the page:
- by using the mouse and by resizing the page.
- by indicating the new dimensions of the page in the status bar of the editor:
The controls are positioned in relation to the page and to its size defined in the editor.
Remark: In "Mode compatible with version16", the different controls found in the page defined the size of the page. Adding a control into the page could modify the entire layout. In this case, a cell was used to define the size of the page.
Usign a reference size for the page is used to:
- automatically display scrollbars if necessary when the page is displayed in a specific browser (display in the browser of an iPhone for example).
- manage the anchors.
Creating and handling the layout areas in the editor
The Zoning mode brings benefits at generation level and it is also used to simplify the edit of a page by using the new concept of "layout areas". These layout areas allow you, for example, to define the page architecture: header, footer, ... These layout areas are clearly represented and can be easily handled in the editor.
For example, increasing the height of the header area will automatically move the layout areas below it: page body and footer.
Creating layout areas
To create layout areas:
- Display the page in "Zoning" mode ( "Zoning" tab at the top of the page).
- On the "Creation" pane, in the "Zoning" group:
- To create a horizontal area, click on "Cut Horizontally".
- To create a vertical zone, click on "Cut Vertical"..
- Cursor turns into a pencil.
- Click in the page to create the area at the click position.
If necessary, areas can be resized and moved.
- Layout areas can only be created if "Zoning: pixel-precise positioning" is selected in the page description window.
- It is possible to create layout areas:
- in the pages and in the page templates,
- in the popup pages,
- in the "containers": cells, supercontrols, loopers, control templates, ... No area can be created in the internal pages.
Handling layout areas
To handle layout areas and to define their characteristics in the editor, you must switch to zoning edit mode:
- under the "Page" pane, in the "Edit" group, scroll down "Zoning" and click on "Zoning Mode" (or use the shortcut Alt + Z)
- by clicking the "Zoning" tab in the editor (the "Page" tab is used to go back to the mode for handling the page controls):
When the zoning mode is enabled in edit:
- each selected layout area is hatched. In this case, it is not possible to handle the controls in the layout area. To handle the controls, you must go back to the standard edit mode (Alt + Z or "Page" tab.
- the popup menu of the layout area allows you to:
- Open the description window of the layout area.
- Anchor the layout area.
- Delete the layout area. If a layout area is deleted, its controls will not be lost.
- Split the layout area vertically or horizontally.
Description window of the layout area
The description window of the layout area is accessible via the popup menu of the layout area (only if the "zoning" edit mode is activated).
The main information found in this window is as follows:
- "General" tab: This tab allows you to specify the name of the layout area, indicate the semantics associated with it, and lists the controls it contains.
- "UI" tab: This tab allows you to define the anchoring of the layout area.
- "Style" tab: This tab is used to define the alignment and overflow options of the layout area, its background image and its border. These options avoid the use of a cell.
Semantics associated with a layout area
WEBDEV gives you the ability to associate a specific HTML 5 semantics with each layout area.
This information is optional and it is mainly used to improve SEO (Search Engine Optimization).
This information can also be used to improve the accessibility of a site (for example, a site will know the title of the page and it will be able to enlarge it in "accessibility" mode).
Complete examples (WEBDEV): WW_Forum_AWP