PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Implementation
  • Creating a new layout
  • Creating a new layout for a window
  • Creating a new layout for a window
  • Creating a new layout for an internal window
  • Handling layouts
  • Managing controls in the layouts
  • Special case of the Action Bar
  • Characteristics of layouts
  • Comparing windows with layouts
  • Managing layouts at run time
  • Default operating mode
  • Programming
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
The layout is used to define several views of a window in the same project without duplicating this window.
This gives you the ability to define:
  • a specific view for the portrait mode,
  • a specific view for the landscape mode,
  • a view specific to the phone,
  • a view specific to the tablet,
  • ...
At run time, you can:
This help page presents:
Versions 20 and later
Universal Windows 10 App This feature is now available for the Windows Phone applications.
New in version 20
Universal Windows 10 App This feature is now available for the Windows Phone applications.
Universal Windows 10 App This feature is now available for the Windows Phone applications.
Versions 21 and later
Universal Windows 10 App This function is now available in Universal Windows 10 App mode.
New in version 21
Universal Windows 10 App This function is now available in Universal Windows 10 App mode.
Universal Windows 10 App This function is now available in Universal Windows 10 App mode.
Implementation

Creating a new layout

To create a new layout:
  1. Open the relevant window in the editor.
  2. On the "Window" pane, in the "Layouts" group, expand "Layouts" and select "Add layouts".
  3. In the window that is displayed, select the platform and the orientation of the new layout to create.
    Notes:
    • If your project is developed for a single platform (Android for example), a layout can be created for one of the available phone or tablet models.
    • If your project is multi-platform (Android and iOS for example), a specific layout can be created for each platform. See Project configuration for more details.
  4. Validate.
  5. The editor displays (on the right) the different layouts that can be used for the window. A double click on the badge of requested layout is used to display in the editor in order to 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.
AndroidiPhone/iPadUniversal Windows 10 App

Creating a new layout for a window

To create a new layout for a window:
  1. Open the relevant window in the editor.
  2. On the "Window" pane, in the "Layouts" group, expand "Layouts" and select "Add layouts".
    Adding layouts
  3. The wizard for adding a layout starts. Pass the presentation step if necessary.
  4. The wizard proposes to manage the differences between the phone and the tablet.
    Tablet/Phone differences
    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).
  5. Go to the next wizard step.
  6. The wizard proposes to manage the Portrait/Landscape orientation of application.
    Portrait/Landscape
    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).
  7. Go to the next wizard step.
  8. The wizard proposes to use a different presentation for each platform used (for example, a presentation for iOS and a presentation for Android).
    Operating system
  9. Select the requested option and go to the next wizard step.
  10. Validate the wizard.
  11. The different layouts are created if necessary.
    Layouts
  12. The editor displays (on the right) the different layouts that can be used for the window. A double click on the badge of requested layout is used to display in the editor in order to 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.
Versions 22 and later
WINDEV

Creating a new layout for a window

To create a new layout for a window:
  1. Open the relevant window in the editor.
  2. On the "Window" pane, 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 wizard for adding a layout starts. Pass the presentation step if necessary.
    1. The wizard proposes to manage the differences between the phone and the tablet.
      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 wizard step.
    3. The wizard proposes to manage the Portrait/Landscape orientation of 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 wizard step.
    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 requested option and go to the next wizard step.
    7. Validate the wizard.
  5. The editor displays (on the right) the different layouts that can be used for the window. A double click on the badge of requested layout is used to display in the editor in order to modify it.
New in version 22
WINDEV

Creating a new layout for a window

To create a new layout for a window:
  1. Open the relevant window in the editor.
  2. On the "Window" pane, 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 wizard for adding a layout starts. Pass the presentation step if necessary.
    1. The wizard proposes to manage the differences between the phone and the tablet.
      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 wizard step.
    3. The wizard proposes to manage the Portrait/Landscape orientation of 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 wizard step.
    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 requested option and go to the next wizard step.
    7. Validate the wizard.
  5. The editor displays (on the right) the different layouts that can be used for the window. A double click on the badge of requested layout is used to display in the editor in order to modify it.
WINDEV

Creating a new layout for a window

To create a new layout for a window:
  1. Open the relevant window in the editor.
  2. On the "Window" pane, 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 wizard for adding a layout starts. Pass the presentation step if necessary.
    1. The wizard proposes to manage the differences between the phone and the tablet.
      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 wizard step.
    3. The wizard proposes to manage the Portrait/Landscape orientation of 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 wizard step.
    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 requested option and go to the next wizard step.
    7. Validate the wizard.
  5. The editor displays (on the right) the different layouts that can be used for the window. A double click on the badge of requested layout is used to display in the editor in order to modify it.
Versions 22 and later

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:
  1. Open the relevant internal window in the editor.
  2. On the "Window" pane, in the "Layouts" group, expand "Layouts" and select "Add layouts".
  3. The window for adding layouts is displayed.
    Click "Add" 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.
    • A double click on the badge of requested layout is used to display in the editor in order to modify it.
    • The "Description" option (found in the popup menu of title bar of the layout) is used to define the layout parameters.
New in version 22

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:
  1. Open the relevant internal window in the editor.
  2. On the "Window" pane, in the "Layouts" group, expand "Layouts" and select "Add layouts".
  3. The window for adding layouts is displayed.
    Click "Add" 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.
    • A double click on the badge of requested layout is used to display in the editor in order to modify it.
    • The "Description" option (found in the popup menu of title bar of the layout) is used to define the layout parameters.

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:
  1. Open the relevant internal window in the editor.
  2. On the "Window" pane, in the "Layouts" group, expand "Layouts" and select "Add layouts".
  3. The window for adding layouts is displayed.
    Click "Add" 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.
    • A double click on the badge of requested layout is used to display in the editor in order to modify it.
    • The "Description" option (found in the popup menu of title bar of the layout) is used to define the layout parameters.
Handling layouts

Managing controls in the layouts

By default:
  • A control created in a layout is created in all the layouts.
  • A control is positioned at the same location in all the layouts. It includes the same width and height properties.
  • A control moved in a layout is moved in all layouts.
In order for a control to have specific properties and position according to the layouts, it must be dissociated. Several options are available.
To handle a control in an independent way in the different layouts:
  1. Select the control.
  2. Display the popup menu (right mouse click).
  3. In the "Layouts" menu, the different possibilities are displayed::
    • Dissociate the position: used to modify the control position in one or more layouts.
    • Dissociate the size: used to modify the control size in one or more layouts.
    • Dissociate the anchor: used to dissociate the anchor in one or more layouts.
    • Versions 20 and later
      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.
      New in version 20
      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.
      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.
    • Make invisible in this layout: used to make the control visible or invisible in one or more layouts.
Notes:
  • This popup menu is available for a selection of controls.
  • you also have the ability to use the icon found in the title bar of the layout currently edited. A click on this icon is used to automatically dissociate the size and/or position of the selected control during the first modification (performed with the mouse or with the keyboard).
Limit: For the Chart controls, the properties of the title and the properties of the legend cannot be dissociated between several 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.

Characteristics of layouts

The popup menu of thumbnails for the available layouts is used to manage the layouts:
You can:
  • View the layout description and modify it. View the layout description and modify it. See Layout parameters for more details.
  • 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 modified in parallel.
  • Creating a new layout.
  • Delete the selected layout.
  • Versions 23 and later
    Display proportional thumbnails.
    New in version 23
    Display proportional thumbnails.
    Display proportional thumbnails.
  • Versions 21 and later
    Refresh automatically: Used to refresh the layout as soon as a modification is performed in the window.
    New in version 21
    Refresh automatically: Used to refresh the layout as soon as a modification is performed in the window.
    Refresh automatically: Used to refresh the layout as soon as a modification is performed in the window.
  • Versions 21 and later
    Refresh this layout: Used to immediately refresh the layout.
    New in version 21
    Refresh this layout: Used to immediately refresh the layout.
    Refresh this layout: Used to immediately refresh the layout.
  • Versions 21 and later
    Refresh all: Used to immediately refresh all the layouts.
    New in version 21
    Refresh all: Used to immediately refresh all the layouts.
    Refresh all: Used to immediately refresh all the layouts.

Comparing windows with layouts

WINDEV Mobile allows you to compare two projects, two project elements, ... See Project comparator for more details.
When comparing windows containing layouts, the differences found for each layout are listed.
Managing layouts at run time

Default operating mode

The initial layout is automatically chosen according to the platform, the screen orientation and size.
The layout is automatically modified when the device switches from portrait mode to landscape mode.
The initial layout is automatically chosen according to:
  • the system,
  • the orientation,
  • the platform size,
  • the window size (in the editor).
The layout is automatically modified when the device switches from portrait mode to landscape mode.
The layout parameters can be defined for each platform ("Description" from the popup menu of the title bar of the layout):
These parameters are taken into account to choose the layout at run time:
  • Minimum size of device on which the layout can be started.
  • Operating system. If "Multi OS" is selected, the layout can be started 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 a maximized mobile window, the following criteria are taken into account: the system, the orientation and the platform size.
  • If the window is a Windows window, 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.
  • If the window is a non-maximized mobile window, the following criteria are taken into account: the system, the orientation and the platform size.

Programming

You can:
  • force the layout to use with WinChangeLayout. This function expects the number of the layout to use in parameter. This number is specified in the title bar of layout.
  • Versions 20 and later
    find out the current layout with WinCurrentLayout.
    New in version 20
    find out the current layout with WinCurrentLayout.
    find out the current layout with WinCurrentLayout.
See also
Minimum version required
  • Version 19
This page is also available for…
Comments
Click [Add] to post a comment