- 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
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,
- the layout areas,
- the popups,
- 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
To use planes in WEBDEV, the management of planes must be enabled for the desired element:
- Open the element description window.
- In the "UI" tab, select "Enable management of planes".
- Validate the element description window.
- 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 "delayed loading".
If "Delayed loading of plane content" is checked when planes are enabled, two new events are associated with the element:
- Delayed loading of a plane (Server) in AJAX.
- Delayed loading of a plane (Browser).
In these events, you can use Plan
to identify the active plane. This allows you to run only the initialization process of the controls located in the relevant plane.
// Code de chargement différé (serveur) de CELL_DIVERS
CASE 1 // Affichage de la liste des clients
CASE 2 // Affichage des commandes du client sélectionné
IdClient is int = TABLE_Client.COL_Numclient
CASE 3 // Détail de la commande
NumCde is int = TABLE_Commande.COL_NumCommande
- 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.
- 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.
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:
- Select the controls.
- "Associate with a plane" in the context menu of selection.
- "Associate with a plane" in the context menu of control.
- In the window that is displayed, choose:
- one of the available planes.
- several planes (to do so, keep the Ctrl key down while selecting planes).
- 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:
- Select (if necessary) the element for which the planes must be displayed.
- 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
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.
// 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, Plan
must be called in browser code or in Ajax server code.
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.
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.