Using layouts in WINDEV and WINDEV Mobile

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help

Editors

Window editor and page editor

Using layouts in WINDEV and WINDEV Mobile

Overview

Implementation

Handling layouts

Managing layouts at runtime

See also

Using layouts in WINDEV and WINDEV Mobile

Overview

Layouts are used 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:

select the layout to display with WinChangeLayout.
find out the current layout with WinCurrentLayout.

This help page presents:

How to create a layout for a WINDEV Mobile window.
How to create a layout for a WINDEV window.
How to create a layout for an internal window.
How to handle layouts in the editor.
How to handle layouts at runtime.

Remark: You can also create layouts in WEBDEV projects to get mobile-friendly websites. For more details, see WEBDEV layouts.

Implementation

Creating a new layout for a WINDEV Mobile window

To create a new layout for a window:

Open the relevant window in the editor.
On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts".
The wizard for adding a layout starts. Pass the presentation step if necessary.
The wizard prompts you to select an option to manage the differences between phones and tablets.
You can:
- 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).
Go to the next step of the wizard.
The wizard prompts you to select an option to manage the Portrait/Landscape orientation of the application.
You can:
- 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).
Go to the next step of the wizard.
The wizard proposes to use a different presentation for each platform used (for example, a presentation for iOS and a presentation for Android).
Select the desired option and go to the next step of the wizard.
Validate the wizard.
The different layouts are created if necessary.
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.

Tip:

The creation of a layout is based on the current edit platform. It is faster to position on the layout that is the closest one graphically in order to limit the modifications.
To customize the controls found in the different layouts, we advise you to start with the largest and most complete layout then create the other layouts by reducing or hiding elements.

Creating a new layout for a WINDEV window

To create a new layout for a window:

Open the relevant window in the editor.
On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts".
If the WINDEV project contains no mobile platform, the window for creating a layout is displayed. Click "Add" to add a new layout.
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.
  You can:
  - 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. Go 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.
  You can:
  - 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. Go 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. Validate the wizard.
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.

Creating a new layout for an internal window

In mobile, the internal windows are used by several features: detailed window in a table, appointment in a Scheduler control, ...

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:

Open the relevant internal window in the editor.
On the "Window" tab, in the "Layouts" group, expand "Layouts" and select "Add layouts".
The window for adding layouts is displayed.

Click "Create" to add a new layout.
Validate the window.
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 modified in a layout is moved or modified only in that layout.
The automatic dissociation is enabled by default for all the controls. If this mode is enabled, the changes made in one of the pages in the layout will not be applied to the others.

For changes (position or other) to be applied in all the other layouts, you can disable the automatic disassociation (

): the next change 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 the font: used to dissociate the 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.

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.

The "Layouts" context menu includes other options:

Hide in this layout: Hides the selected control in the current layout.
Show in all layouts: Shows the current control in all layouts.

Remark: This context menu is available for a selection of controls.

Limitation: For Chart controls, the properties of the title and legend cannot be dissociated between layouts.

Special case of the Action Bar

The Action Bar control is available in Android and iOS.

When generating the application, the native control corresponding to the current platform will be automatically selected.

Context menu of layouts

You can manage layouts via the context menu of the thumbnails:

You can:

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 the layout in double-view mode: the two layouts can be displayed and edited simultaneously.
Create a new layout from the current layout.
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.

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 is automatically modified when the device switches from portrait mode to landscape mode.

The layout settings can be defined for each platform ("Description" in the context menu of the layout title bar):

The Phone / Tablet distinction only applies to the size of the window in the editor. This information is ignored at runtime.

These parameters are taken into account to choose the layout at runtime:

Minimum size of device on which the layout can be used.
Operating system. If "Multi OS" is selected, the layout can be used on all OS. You have the ability to select specific systems (the proposed systems correspond to the platforms defined for the project).
Window orientation.
Edit platform.

The order of parameters taken into account depends on the type of window run. Therefore:

If the window is intended for mobile devices (maximized or not), the following criteria are taken into account: the system, the orientation and the platform size.
If the window is intended for Windows, the following criteria are taken into account: the system. The biggest window is chosen. If several windows have the same size, the choice is made according to the orientation.

The distinction between platform sizes (tablet/phone) is ignored at runtime. The largest layout is used.

Remark: If the chosen layout is not suitable, you can force the use of a given layout programmatically.

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).