ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
This content has been translated automatically.  Click here  to view the French version.
Help / Editors / Window editor and page editor / Window editor
  • Overview
  • Implementation
  • Creating a new layout for a WINDEV window
  • Creating a new layout for an internal window
  • Handling layouts
  • Managing controls in the layouts
  • Context menu of controls specific to layouts
  • Context menu of layouts
  • Comparing windows with layouts
  • Managing layouts at runtime
  • Default operating mode
  • Programming
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
Layouts allow you to define several views of a window in the same project, without duplicating the window.
Thus, in a WINDEV or WINDEV Mobile application, you can define, for example:
  • a specific view for portrait mode,
  • a specific view for landscape mode,
  • a phone-specific view,
  • a view specific to the tablet,
  • ...
At runtime, you can:
This help page presents:
Note: It is also possible to create layouts in WEBDEV projects to create "mobile friendly" sites.. For more details, see WEBDEV layouts.
Implementation
WINDEV

Creating a new layout for a WINDEV window

To create a new layout for a window:
  1. Open the relevant window in the editor.
  2. On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts".
  3. If the WINDEV project contains no mobile platform, the window for creating a layout is displayed. Click "Add" to add a new layout.
  4. If the WINDEV project contains at least one mobile platform, the layout wizard starts. Pass the presentation step if necessary.
    1. The wizard prompts you to select an option to manage the differences between phones and tablets.
      It is possible to:
      • Choose the current platform only (phone only or tablet only).
      • Create layouts (because the controls are organized differently on the tablet and on the phone).
      • Use the anchors only (because the anchors are sufficient to reposition the controls in the window according to its size).
    2. Proceed to the next step of the wizard.
    3. The wizard prompts you to select an option to manage the Portrait/Landscape orientation of the application.
      It is possible to:
      • Create layouts (because the controls are organized differently on the tablet and on the phone).
      • Use the anchors only (because the anchors are sufficient to reposition the controls in the window according to its orientation).
    4. Proceed to the next step of the wizard.
    5. The wizard proposes to use a different presentation for each platform used (for example, a presentation for iOS and a presentation for Android).
    6. Select the desired option and go to the next step of the wizard.
    7. Finish the wizard.
  5. The editor displays (on the right) the different layouts that can be used for the window. Double-clicking the badge of the desired layout allows you to open it in the editor and modify it.
WINDEV

Creating a new layout for an internal window

Many mobile functions use internal windows: detail windows in a table, appointments in a Scheduler control, etc.
Using layouts on the internal windows allows you to propose an interface for the portrait mode and for the landscape mode.
To create a new layout for an internal window:
  1. Open the relevant internal window in the editor.
  2. On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts".
  3. The window for adding layouts is displayed.
    Click "Create" to add a new layout.
  4. Validate the window.
  5. The editor displays (on the right) the different layouts that can be used for the internal window.
    • Double-clicking the badge of the desired layout allows you to open it in the editor and modify it.
    • The "Description" option in the context menu of the layout title bar allows you to define the layout parameters.
Handling layouts

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 windows in the layout, the changes will not be applied in the other windows.
So that a field modification (position or size) is carried over to all layouts, it is possible to remove the automatic dissociation (): the next modification of size or position will be carried out on all 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.
Conseil: Toasts appear regularly to inform you of the influence of field modifications in other layouts, depending on whether or not automatic dissociation and/or field dissociation options have been activated..

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 field position will only be modified on 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 field size will be modified only on the current layout.. If this option is not selected, the control will be resized in all the layouts.
  • Dissociate anchor: If this option is selected, the field anchor will be modified only on the current layout.. If this option is not selected, the anchors of the control will be changed in all the layouts.
  • Dissociate font: dissociate font in one or more layouts. You can for example use a specific font for Android and another font for iOS. It is also possible to specify a font size for each layout.
Note: If the automatic disassociation mode is not activated, when a disassociation is deactivated via the context menu, the characteristic for the current layout is automatically applied to all layouts..
The "Layouts" context menu includes other options:
  • Make invisible in this layout: Makes the selected field invisible in the current layout..
  • Make visible in all layouts: Makes the current field visible in all layouts.
Note: This context menu is available for a selection of fields..
Limitation: For Chart control fields, it is not possible to dissociate title and Legend properties between several layouts..

Context menu of layouts

You can manage layouts via the context menu of the thumbnails:
It is possible to:
  • View the layout description and modify it. For more details, see Layout settings.
  • Activate the layout, which means display it in order to modify it.
  • Activate dual-view layout: both layouts can be displayed and modified in parallel.
  • Create a new layout from the current layout.
  • Delete the selected layout.
  • Display proportional thumbnails.
  • Automatic refresh: Refreshes the layout as soon as a change is made in the window..
  • Refresh this layout: Immediately refreshes the layout.
  • Refresh all: Allows you to immediately refresh all layouts.

Comparing windows with layouts

WINDEV and WINDEV Mobile allow you to compare two projects, two elements of a project, etc. For more details, see Project comparator.
When comparing windows containing layouts, the differences found for each layout are listed.
Managing layouts at runtime

Default operating mode

The initial layout is automatically selected according to:
  • the system,
  • the orientation,
  • the platform size,
  • the size of the window or page (in the editor).
The layout settings can be defined for each platform ("Description" in the context menu of the layout title bar):

Programming

You can:
  • force the layout to be used (WinChangeLayout). Simply indicate the number of the layout to use as parameter. This number is specified in the layout title bar.
  • get the current layout (WinCurrentLayout).
See also
Minimum version required
  • Version 19
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 09/30/2024

Send a report | Local help