PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | French EN
  • 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 layout areas
  • Handling layout areas
  • Description window of the layout area
  • Semantics associated with a layout area
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
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:
  1. Display the description window of the page ("Description" from the popup menu of the page).
  2. In the "General" tab, select "Edit in "zoning", positioning by blocks and anchoring on controls".
  3. 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 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, simply use the area drawing tool ( or "Page .. Zoning .. Draw the zoning").
  1. The cursor turns into a pen when clicking this icon.
  2. To draw the areas, simply click on 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.
To create layout areas:
  1. Display the page in "Zoning" mode ( "Zoning" tab at the top of the page).
  2. On the "Creation" pane, in the "Zoning" group, click "Split".
  3. By clicking on this option, the cursor changes to a pencil.
  4. To draw the areas, simply click on 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:
  • Layout areas can be created only if "Edit in zoning" is selected in the page description window ("Page .. Description", "General" tab). Layout areas can only be created if "Zoning: pixel-precise positioning and control anchoring" 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:
  • via "Page .. Zoning .. Zoning mode" or Alt + Z. on the "Page" pane, in the "Edit" group, expand "Zoning" and click "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:
    • Display 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.
  • "GUI" 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.
Note: The characteristics of a layout area can be modified by programming with several WLanguage properties. See Properties associated with a layout area for more details.

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).
Related Examples:
WW_Forum_AWP 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
- ...
Minimum version required
  • Version 17
Comments
Click [Add] to post a comment