ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Plane
  • Overview
  • Implementation: Enabling the management of planes
  • How to?
  • Delayed plane load
  • Special cases
  • Operations in the editor
  • Assigning one or more controls to one or more planes
  • Selecting the plane displayed in the editor
  • Changing plane through programming
  • Changing plane in an element
  • Effects when changing plane
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
The planes are used to group the element controls. A plane is a "layer" of an element. Each element can be made of several planes.
WEBDEV proposes the management of planes for the following elements:
  • the pages,
  • the internal pages,
  • cells,
  • the layout areas,
  • the popups,
  • supercontrols,
  • control templates,
  • the page templates.
The controls can be positioned on different planes. A single plane can be displayed at a time in the page editor and when running the site.
Each element control can:
  • belong to a plane. This control will be displayed when the corresponding plane is enabled (which means visible).
  • belong to several planes. This control will be displayed when one of the planes associated with the control is enabled (which means visible).
Implementation: Enabling the management of planes

How to?

To use planes in WEBDEV, the management of planes must be enabled for the desired element:
  1. Open the element description window.
  2. In the "UI" tab, select "Enable management of planes".
  3. Validate the element description window.
  4. The planes are available for the element. If the display of planes is allowed in the editor, the digit 1 used to identify the first plane appears at the top right of element.
    Remark: To display the plane number in the editor, go to the "Display" tab, "Show (all controls)" group and check "Planes".
When the management of planes is enabled, you can create the desired controls and associate them with the different planes.

Delayed plane load

When enabling planes, you can check "Delayed loading of plane content".
This option is used to load data from planes faster. Indeed, if the planes contain a lot of data to display, the page may take quite long to load. You can improve this by loading the data only when the relevant plane is displayed: this is called "lazy loading".
If "Delayed loading of plane content" is checked when planes are enabled, two new events are associated with the element:
  • Defer loading of a plane (Server) in AJAX.
  • Defer loading of a plane (Browser).
In these events, you can use the Plane property to identify the active plane. This allows you to run only the initialization process of the controls located in the relevant plane.
Code example:
// Code for delayed load (server) of CELL_VARIOUS
SWITCH CELL_VARIOUS.Plane
CASE 1 // Displaying the list of customers
  ProcLoadCustomerTable()
CASE 2 // Displaying the orders of the selected customer
  CustomerID is int = TABLE_Customer.COL_CustomerNum
  ProcLoadCustomerOrd(CustomerID)
CASE 3 // Order details
OrdNum is int = TABLE_Order.COL_OrderNum
ProcLoadOrderDetails(OrdNum)
END

Special cases

  • Looper control: You can use planes for each row. Simply create a cell for each row. This cell contains the planes to display. A "Plane" attribute is used to manage the number of the plane displayed.
  • Table control: You have the ability to use planes in a container column, by using a cell for example.
  • Zoning:
    • If the planes are managed at page level, the zoning is defined for each plane.
    • Several planes can be used in each layout area.
  • Scrolling Banner control: The Sliding Banner control uses planes to display the different elements of the banners. In this case, the management of planes is specific. For more details, see The Sliding Banner control.
Operations in the editor

Assigning one or more controls to one or more planes

Case 1: Creating controls:
When creating a control on an element containing planes, the created control is automatically associated with the visible plane.
Case 2: Associating existing controls with one or more planes:
To assign one or more controls to one or more planes:
  1. Select the controls.
  2. Select:
    • "Associate .. with a plane" in the context menu of the selection.
    • "Associate .. with a plane" in the context menu of the control.
  3. In the window that appears, choose:
    • one of the available planes.
    • several planes (to do so, keep the Ctrl key down while selecting planes).
  4. Validate.
Remarks:
  • A control positioned on an element containing planes is always associated with a plane.
    There is no plane 0, used to make a control visible regardless of the plane displayed. To manage this case, all you have to do is define different areas, for example an area containing no plane and an area containing planes.
  • If a control is associated with several planes, it automatically become stackable.
  • The number of planes is unlimited. However, the page editor may prevent you from selecting the planes greater than 98.
  • A control can also be assigned to a plane from the control description window ("UI" tab, "Plane").
  • When assigning a control to a plane, the plane to which the control is assigned is automatically displayed in the editor.
  • The assignments window lists the planes used then the blank planes. The buttons found at the bottom of this window simplify the move between the different types of planes.

Selecting the plane displayed in the editor

To display a specific plane in the editor, you can:
  1. Select (if necessary) the element for which the planes must be displayed.
  2. Press the PgDn and PgUp keys. These keys are used to display the different planes of the current element (or the different planes of the parent control of the selection).
If the display of planes is allowed in the editor, the number of the current plane is displayed at the top right of element.
Changing plane through programming
The Plane property allows you to:
  • find out and change the current plane of an element.
  • find out the plane associated with a control.

Changing plane in an element

Changing plane in an element can be performed at any time. A Button control is often used to change planes.
Example:
// Switch to plane 4 for adding orders
PAGE_CRM.CELL_OrdCell.Plane = 4
The change of plane is immediate: only the controls associated with the plane are displayed.

Effects when changing plane

The change of plane can be done with effects. you have the ability to define effects:
  • for the element that manages the planes. In the "Style" tab, you must:
    • select the "Effects" element.
    • click "Add an effect".
    • select an effect for changing planes and configure it via the "Details" button. You have the ability to specify how the effect will be triggered (change of plane, go to previous plane, ...)
  • for the elements found in the plane, by managing specific effects for the appearance or disappearance of controls. In the "Style" tab, you must:
    • select the "Effects" element.
    • click "Add an effect".
    • select an appearance or disappearance effect and configure it via the "Details" button: several animations are proposed.
Caution: The effects operate only if the page is not re-displayed. In order for the effect to be visible, the Plane property must be called in browser code or in Ajax server code.
Related Examples:
WW_Rewali Complete examples (WEBDEV): WW_Rewali
[ + ] This example is a site for travel booking.

It proposes travels at very attractive prices.
You have the ability to choose the travel duration, the start dates, then validate the purchase until the payment via Paypal.

It is using the "scrolling banner" control and the planes.
WW_Wizard Training (WEBDEV): WW_Wizard
[ + ] WEBDEV allows you to create your own Web wizards, via the WLanguage PageDisplayDialog function that is used to display a page in a modal way.

This allows you to establish a dialog with the user.
To go from a wizard plane to another one, all you have to do is use the concept of plane found in WEBDEV.
Minimum version required
  • Version 22
Comments
Obs
Os planes normalmente se usa uma quantidade limitada no máximo 3 onde pode por na plane 1 o table grid, na plane 2 os campos do formulário e na plane 3 o select view.

Lembro que a janela só vai abrir se todo o oconteudo for carregado na memória, deve ser usado com extrema prudência.


A limited number of planes are normally used, at most 3, where you can put the table grid on plane 1, the form fields on plane 2 and the select view on plane 3.

Remember that the window will only open if all the content is loaded into memory, it must be used with extreme caution.

Boller
15 Mar. 2024

Last update: 06/23/2023

Send a report | Local help