ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Editors / Window editor and page editor / Page editor
  • Overview
  • Creating a layout in WEBDEV
  • Create a new layout for a WEBDEV page (Mobile-friendly website)
  • Creating a new layout to print a page
  • Create a new layout to integrate a WEBDEV page in a WINDEV window
  • Create a new layout to integrate a WEBDEV page in a WINDEV Mobile window
  • Using layouts in the editor
  • View two layouts simultaneously in the editor
  • Managing controls in the layouts
  • Context menu of controls specific to layouts
  • Context menu of layouts
  • Specific controls (Mobile-friendly websites)
  • Comparing pages with layouts
  • Managing layouts at runtime
  • Default operating mode
  • Special case: Print layout
  • Programming
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
A layout allows you to define several views of a page without duplicating it.
By using layouts in a WEBDEV project, you can use many features:
  • create "mobile friendly" sites. In this case, you can define two layouts:
    • a specific view for Desktop mode,
    • a specific view for Mobile mode, etc.
  • print a "clean" version of the page. In this case, you can create a specific layout for printing the page content.
  • Integrate a page into a WINDEV or WINDEV Mobile application. In this case, you can create a specific layout to integrate the page into a window.
Important: In a WEBDEV project, layouts are another way to make a mobile-friendly site. Unlike Responsive Web Design (RWD) mode, layouts have no constraints on the order of controls.
Thus, layouts allow you to:
  • make designs that cannot be easily made in RWD.
  • effortlessly create elements in one layout and hide them in another layout.
For more details on the advantages of layouts for mobile-friendly websites, see Mobile-friendly website: available methods.
This help page presents:
Remark: You can also create layouts in WINDEV and WINDEV Mobile projects. For more details, see Using layouts in WINDEV and WINDEV Mobile.
Creating a layout in WEBDEV

Create a new layout for a WEBDEV page (Mobile-friendly website)

To create a new layout for a page:
  1. Open the relevant page in the editor.
  2. On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add a layout".
  3. The layout creation window appears:
  4. Specify the type of screen for which the layout must be created. You can also specify the minimum width of the screen.
  5. Validate.
  6. On the right, the editor displays the different layouts available for the page. Double-clicking the badge of the desired layout allows you to open it in the editor and modify it.
Caution: Layouts are not available on pages in Responsive Web Design mode and on internal pages.. Layouts are available on page templates.
Remark: Several WEBDEV tutorials allow you to discover and handle layouts:

Creating a new layout to print a page

To create a new layout for printing the content of a page:
  1. Open the relevant page in the editor.
  2. On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add a print layout".
  3. A "Print" layout is automatically created. On the right, the editor displays the different layouts available for the page. You can double-click the "Print" layout to open it and modify it in the editor.
    This makes it possible to keep only the controls needed for printing in this layout.
Remarks
  • Layouts are not available on pages in Responsive Web Design mode and on internal pages.. Layouts are available on the page templates.
  • The print layout will be automatically used when the user prints the corresponding page. For example, unnecessary controls (buttons, links, etc.) can be hidden in the print layout.

Create a new layout to integrate a WEBDEV page in a WINDEV window

To create a new layout to integrate a WEBDEV page into a WINDEV window:
  1. Open the relevant page in the editor.
  2. On the "Page" tab, in the "Layouts" group, expand "Layouts" and select "Add layout to integrate page into WINDEV".
  3. A "For WINDEV" layout is automatically created. On the right, the editor displays the different layouts available for the page. To edit the "For WINDEV" layout, double-click its thumbnail. This layout makes it possible to keep only the controls needed to display the page in the WINDEV application.
Remarks
  • Layouts are not available on pages in Responsive Web Design mode and on internal pages.. Layouts are available on the page templates.
  • The layout for WINDEV applications will be automatically used when the page is integrated into a "WEBDEV Page" control in the WINDEV project.

Create a new layout to integrate a WEBDEV page in a WINDEV Mobile window

To create a new layout to integrate a WEBDEV page into a WINDEV Mobile window:
  1. Open the relevant page in the editor.
  2. On the "Page" tab, in the "Layouts" group, expand "Layouts" and select:
    • "Add layout to integrate page into WINDEV Mobile (Phone)".
    • "Add layout to integrate page into WINDEV Mobile (Tablet)".
  3. A "WINDEV Mobile (Tablet)" or "WINDEV Mobile (Phone)" layout is automatically created. On the right, the editor displays the different layouts available for the page. You can double-click the thumbnail of the WINDEV Mobile layout to open and edit it. This layout makes it possible to keep only the controls needed to display the page in the WINDEV Mobile application.
Remarks
  • Layouts are not available on pages in Responsive Web Design mode and on internal pages.. Layouts are available on the page templates.
  • The layout for WINDEV applications will be automatically used when the page is integrated into a "WEBDEV Page" control in the WINDEV project.
Using layouts in the editor

View two layouts simultaneously in the editor

By default, only the layout currently being edited can be viewed in the page editor.
To view (and edit) two layouts simultaneously:
  1. Right-click the thumbnail of the layout you want to open.
  2. Select "Edit (split view)".
  3. Both layouts are displayed in the editor.

Managing controls in the layouts

Layouts are dissociated by default ():
  • A control created in one layout is created in all layouts, with the same characteristics (size, position, etc.).
  • A control moved or resized in a layout is moved or resized only in that layout.
  • The automatic dissociation is enabled by default for all the controls. With this mode, when a control is moved or resized in one of the pages in the layout, the changes will not be applied in the other pages.
If you want size or position changes to be applied in all the other layouts, you can disable the automatic disassociation (): the next size or position changes will be applied in all the layouts. A red triangle may appear when a control is selected. It indicates that the control has been dissociated, and that any changes made to it will be applied only in the current layout.
Tip: Toast messages appear regularly to remind you if the changes made to a control are applied in other layouts, depending on the control disassociation options.

Context menu of controls specific to layouts

The "Layouts" context menu also allows you to dissociate specific characteristics of controls.
. These options are as follows:
  • Dissociate position: If this option is selected, the control will be moved only in the current layout. If this option is not selected, the control will be moved in all the layouts.
  • Dissociate size: If this option is selected, the control will be resized only in the current layout. If this option is not selected, the control will be resized in all the layouts.
  • Dissociate anchors: If this option is selected, the anchors of the control will be changed only in the current layout. If this option is not selected, the anchors of the control will be changed in all the layouts.
  • Dissociate style: If this option is selected, the changes made to the style of the control will be applied only in the current layout. If this option is not selected, the changes made to the style of the control will be applied in all the layouts.
  • Dissociate rich content: If this option is selected, the rich content of the control will be modified only in the current layout. If this option is not selected, the rich content of the control will be modified in all the layouts.
Remark: When the automatic dissociation mode is disabled, and a specific dissociation is disabled via the context menu, the changes made in the current layout will be automatically applied in all the layouts. For example, if the "Dissociate position" option was enabled and then disabled for a given control, the next change made to the position of the control will be applied in all layouts.
The "Layouts" context menu includes other options:
  • Edit dissociated properties: Shows the list of dissociated properties for the selected control, with the corresponding values for the current layout. You can change some values for the current layout.
  • Visibility by layout: Shows or hides the selected control in specific layouts.
  • Hide in this layout: Hides the selected control in the current layout.
  • Show in all layouts: Shows the current control in all layouts.
  • Show invisible controls: Shows controls that are hidden in the current layout. These controls appear grayed out. They disappear next time the layout is displayed.
Remark: This context menu is available for a selection of controls.
Limit: For Chart controls, the properties of the title and legend cannot be dissociated between layouts.

Context menu of layouts

You can manage layouts via the context menu of the thumbnails.
It is possible to:
  • View and edit the layout description. For more details, see Layout settings.
  • View the list of dissociated controls.
  • Open a layout to edit it.
  • Edit the layout in split view mode: the two layouts can be displayed and edited simultaneously.
  • Create a new layout from the current layout.
  • Disable this layout. A red "X" appears in the layout icon and the layout cannot be used at runtime. However, it will still be available in the editor.
    Remark: This option can be useful when a page inherits one or more page templates with layouts. This allows you to keep only the desired layouts.
  • Delete the selected layout.
  • Display proportional thumbnails.
  • Refresh automatically: Used to refresh the layout as soon as a modification is performed in the window.
  • Refresh this layout: Used to immediately refresh the layout.
  • Refresh all: Used to immediately refresh all the layouts.

Specific controls (Mobile-friendly websites)

Some advanced controls (Looper, Table control, Horizontal Menu, etc.) require more specific actions than simply dissociating the size or anchors. In this case, you can click to manage the options that can be dissociated. This allows you to set a specific value for each layout, if necessary.
For the Table control, you can group columns vertically to adapt the table to mobile devices.
For the Looper control, you can set a specific number of columns by layout.
To handle menus, WEBDEV provides you with a specific control for layouts: the Navigation Bar control. The Navigation Bar control is used to create a menu area that can easily adapt to the browser size. This area can contain all types of controls. The characteristics of this control can also be defined from the description window.
Remark: Several WEBDEV tutorials allow you to discover and handle layouts:

Comparing pages with layouts

WINDEV Mobile allows you to compare two projects, two project elements, etc. For more details, see Project comparator.
When two pages containing layouts are compared, the differences on each layout are clearly indicated.
Managing layouts at runtime

Default operating mode

The initial layout is automatically selected according to:
  • the size of the browser,
  • the size of the page (in the editor).
The layout is automatically modified according to the size of the browser.
The layout settings can be defined according to the size of the browser ("Description" in the context menu of the layout title bar).
These parameters are taken into account to choose the layout at runtime.
Remark: If the chosen layout is not suitable, you can force the use of a given layout programmatically.

Special case: Print layout

If a "Print" layout has been created on a page, this layout will automatically be used when the user selects the "Print" option in the context menu of the browser (or presses Ctrl + P). In this case, only the controls shown in the layout will be printed.

Programming

You can:
  • force the layout to be used (PageChangeLayout). Simply indicate the number of the layout to use as parameter. This number is specified in the layout title bar.
  • get the current layout (PageCurrentLayout).
Related Examples:
WW_Layouts Training (WEBDEV): WW_Layouts
[ + ] This example contains a website that can be displayed on mobile devices.
The website uses WEBDEV layouts to adapt its UI.
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.
Minimum version required
  • Version 25
Comments
Click [Add] to post a comment

Last update: 12/02/2023

Send a report | Local help