- Overview
- 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
- Overview
- Creating areas
- Handling the areas
- Description window of the area
- Semantics associated with an area
Editing pages: zoning mode
 Not available
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 controls".
- Validate.
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. Note: 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 Overview 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 areas are used to define the architecture of the page: header, footer, ... These zones are materialized and they can be easily handled in the editor. For example, enlarging the header area automatically moves the areas located below: page body and footer. Creating areas To create areas, you must use the tool for drawing areas (  or "Page .. Zoning .. Draw the zoning"). - The cursor turns into a pen when you click this icon.
- To draw the areas, all you have to do is click inside the page and move the mouse:
- a move to the left or to the right is used to created a vertical area,
- a move to the top or to the bottom is used to created an horizontal area.
The areas can be moved if necessary. Notes: - Areas can be created only if "Edit in zoning" is selected in the description window of the page ("Page .. Description", "General" tab).
- You have the ability to create 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 the areas To handle the areas and to define their characteristics in the editor, you must switch to zoning edit mode: - via "Page .. Zoning .. Zoning mode" or 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 area is hatched. In this case, the controls found in the area cannot be handled. To handle the controls, you must go back to the standard edit mode (Alt + Z or "Page" tab.
- the popup menu of the area is used to:
- Display the description window of the area.
- Anchor the area.
- Delete the area. If an area is deleted, all the controls found in the area are kept.
- Divide the area vertically or horizontally.
Description window of the area The description window of the area is accessible via the popup menu of the area (if the "zoning" mode is enabled). The main information found in this window is as follows: - "General" tab: This tab is used to specify the name of the area, to indicate the semantics associated with the area and to list the controls found in the area.
- "GUI" tab: This tab is used to define the anchoring of the area.
- "Style" tab: This tab is used to define the alignment and overflow options of the area, the background image of the area and the border of the area. These options avoid the use of a cell.
Note: The characteristics of an area can be modified by programming via several WLanguage properties. See Properties associated with an area for more details. Semantics associated with an area WebDev gives you the ability to associate a specific HTML 5 semantics with each area. This information is optional and it is mainly used to optimize the referencing by the search engines (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).
Related Examples:
|
Complete examples (WEBDEV): WW_Forum_AWP
[ + ] This example proposes the main features of a user forum (creation of forums, topics and messages, moderator, search, etc.). Some of the features used by WW_FORUM_AWP: - Full-text search - Rich controls - Loopers - POPUP pages - AJAX - ...
|
|
|
|