ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Page
  • Overview
  • Creating pages in "Responsive (zoning and layouts)" mode
  • How to create pages using the zoning mode?
  • "Responsive (zoning and layouts)" mode: Reference size of pages
  • Creating and handling the layout areas in the editor
  • Overview
  • Creating layout areas
  • Context menu of the layout area
  • Description window of the layout area
  • Semantics associated with a layout area ("Details" tab)
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
"Responsive (zoning and layouts)" is the default page editing mode. This editing mode allows you to easily handle pages in the editor. There are many features in this mode:
  • optimized page generation.
  • ability to set a reference page size,
  • ability to define layout areas,
  • intuitive control anchors, etc
  • anchors (mobile-friendly sites),
  • ...
Creating pages in "Responsive (zoning and layouts)" mode

How to create pages using the zoning mode?

By default, all pages are generated using the "Responsive (zoning and layouts)" mode. You can choose this mode in the page description window:
  1. Open the page description window ("Description" in the context menu of the page).
  2. In the "General" tab, select "Responsive (zoning and layouts)".
  3. Validate.
The advantages of this mode include:
  • consistent page layouts in the editor and at runtime.
  • the ability to freely manipulate controls.
  • clear and simple code.

"Responsive (zoning and layouts)" mode: Reference size of pages

When editing a page in "Responsive (zoning and layouts)" mode, you can set the page size:
  • by directly resizing the page with the mouse.
  • by specifying the page size in the status bar of the editor:
The controls are positioned in relation to the page and to its size defined in the editor.
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 "Responsive (zoning and layouts)" mode makes page editing easier by using "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

There are two methods to create layout areas.
  • Method 1:
    • On the "Creation" tab, in the "Containers" group, expand "Zoning":
      • To create a horizontal area, click "Divide horizontally".
      • To create a vertical area, click "Divide vertically".
      • To create a horizontal subdivision, click "Subdivide horizontally".
      • To create a vertical subdivision, click "Subdivide vertically".
    • The cursor turns into a pencil.
    • Click the page where you want to create the area. If necessary, areas can be resized and moved.
  • Method 2:
    • On the "Page" tab, in the "Edit" group, expand "Zoning":
      • To create a horizontal area, click "Divide horizontally".
      • To create a vertical area, click "Divide vertically".
      • To create a horizontal subdivision, click "Subdivide horizontally".
      • To create a vertical subdivision, click "Subdivide vertically".
    • The cursor turns into a pencil.
    • Click the page where you want to create the area. If necessary, areas can be resized and moved.
Remarks:
  • The "Divide" option divides an existing layout area into two separate areas.
  • The "Subdivide" option creates two new areas, but keeps the original area. This means there will be three areas after this option is used: the original area, and the two new areas it now contains.
  • You can create layout areas:
    • in pages and page templates,
    • in popup pages,
    • in "containers": cells, supercontrols, loopers, control templates, ...
  • You cannot create areas in internal pages.

Context menu of the layout area

The context menu of a layout area allows you to perform several operations:
  1. Click the layout area. The selected area is highlighted.
  2. Right-click the area. The context menu appears:
    This menu allows you to:
    • Open the description window of the layout area.
    • Anchor the layout area.
    • Split the layout area vertically or horizontally.
Remark: To delete the layout area, simply press the Delete key. The controls contained in a layout area are kept when the area is deleted.

Description window of the layout area

The description window of the layout area can be accessed via the context menu.
This window contains the following sections:
  • "General" tab: This tab allows you to specify the name of the layout area, and lists the controls it contains.
  • "UI" tab: This tab allows you define the options for the anchors of the layout area, the pinned mode and the management of planes.
  • "Details" tab: This tab allows you to specify the semantic elements associated with 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.
Remark: The characteristics of a layout area can be modified through programming with several WLanguage properties. For more details, see Properties associated with a layout area.

Semantics associated with a layout area ("Details" tab)

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

Last update: 06/26/2023

Send a report | Local help