PC SOFT

ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
  • Overview
  • Implementation
  • Creating a new layout for a Mobile window
  • Creating a new layout for a window
  • Creating a new layout for an internal window
  • Creating a new layout for a page
  • Creating a new layout to print a page
  • Handling layouts
  • Managing controls in the layouts
  • Special case of the Action Bar
  • Characteristics of layouts
  • Comparing windows or 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
Layouts are used to define several views of a window/page in the same project without duplicating this window/page.
WINDEVWINDEV Mobile 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 view specific to the phone,
  • a view specific to the tablet,
  • ...
At runtime, you can:
Versions 25 and later
WEBDEV - Server code WEBDEV offers several solutions to create mobile-friendly sites: Responsive Web Design (or RWD), Dynamic serving and layouts.
In a WEBDEV site, you can define:
  • a specific view for Desktop mode,
  • a specific view for mobile mode, etc
  • Versions 26 and later
    a specific view for printing the content of a page.
    New in version 26
    a specific view for printing the content of a page.
    a specific view for printing the content of a page.
At runtime, you can:
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.
New in version 25
WEBDEV - Server code WEBDEV offers several solutions to create mobile-friendly sites: Responsive Web Design (or RWD), Dynamic serving and layouts.
In a WEBDEV site, you can define:
  • a specific view for Desktop mode,
  • a specific view for mobile mode, etc
  • Versions 26 and later
    a specific view for printing the content of a page.
    New in version 26
    a specific view for printing the content of a page.
    a specific view for printing the content of a page.
At runtime, you can:
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.
WEBDEV - Server code WEBDEV offers several solutions to create mobile-friendly sites: Responsive Web Design (or RWD), Dynamic serving and layouts.
In a WEBDEV site, you can define:
  • a specific view for Desktop mode,
  • a specific view for mobile mode, etc
  • Versions 26 and later
    a specific view for printing the content of a page.
    New in version 26
    a specific view for printing the content of a page.
    a specific view for printing the content of a page.
At runtime, you can:
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.
This help page presents:
Implementation
Universal Windows 10 AppAndroidiPhone/iPad

Creating a new layout for a Mobile 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".
    Add layouts
  3. The wizard for adding a layout starts. Pass the presentation step if necessary.
  4. The wizard proposes to manage the differences between phone and 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 step of the wizard.
  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 step of the wizard.
  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 desired option and go to the next step of the wizard.
  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. 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.
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" 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 proposes to manage the differences between phone and 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 step of the wizard.
    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 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.
  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.
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" 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 proposes to manage the differences between phone and 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 step of the wizard.
    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 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.
  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 a 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 proposes to manage the differences between phone and 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 step of the wizard.
    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 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.
  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.
Versions 22 and later
WINDEVWINDEV Mobile

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" 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.
New in version 22
WINDEVWINDEV Mobile

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" 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.
WINDEVWINDEV Mobile

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" 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.
Versions 25 and later
WEBDEV - Server code

Creating a new layout for a page

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 layout from active view".
  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.
Remarks
Layouts are not available:
  • on pages in Responsive Web Design mode.
  • on internal pages.
  • on page templates.
New in version 25
WEBDEV - Server code

Creating a new layout for a page

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 layout from active view".
  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.
Remarks
Layouts are not available:
  • on pages in Responsive Web Design mode.
  • on internal pages.
  • on page templates.
WEBDEV - Server code

Creating a new layout for a page

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 layout from active view".
  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.
Remarks
Layouts are not available:
  • on pages in Responsive Web Design mode.
  • on internal pages.
  • on page templates.
Versions 26 and later
WEBDEV - Server code

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 internal pages, page templates or pages in Responsive Web Design mode.
  • 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.
New in version 26
WEBDEV - Server code

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 internal pages, page templates or pages in Responsive Web Design mode.
  • 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.
WEBDEV - Server code

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 internal pages, page templates or pages in Responsive Web Design mode.
  • 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.
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. Right-click to open the context menu.
  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.
    • Hide in this layout: hides the control in one or more layouts.
    • Show in all layouts: shows the control in all layouts.
Remarks:
  • This context menu is available for a selection of controls.
  • you can also use the icon located in the title bar of the layout being edited. Clicking this icon automatically dissociates the size and/or position of the selected control during the first modification (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.
AndroidiPhone/iPad

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 context menu of thumbnails for the available layouts allows you to manage the layouts:
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 modified in parallel.
  • Create a new layout from the current layout.
  • Versions 26 and later
    WEBDEV - Server code Add a print layout.
    New in version 26
    WEBDEV - Server code Add a print layout.
    WEBDEV - Server code Add a print layout.
  • Versions 27 and later
    WEBDEV - Server code Disable the layout. A red "X" appears in the layout icon and the layout cannot be used in execution. 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.
    New in version 27
    WEBDEV - Server code Disable the layout. A red "X" appears in the layout icon and the layout cannot be used in execution. 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.
    WEBDEV - Server code Disable the layout. A red "X" appears in the layout icon and the layout cannot be used in execution. 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.
  • 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 or pages with layouts

WINDEV Mobile allows you to compare two projects, two project elements, ... 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,
  • WEBDEV - Server code the size of the browser,
  • the size of the window or page (in the editor).
The layout changes automatically:
  • WINDEV Mobile when the device switches from portrait to landscape mode.
  • Versions 25 and later
    WEBDEV - Server code according to the size of the browser.
    New in version 25
    WEBDEV - Server code according to the size of the browser.
    WEBDEV - Server code according to the size of the browser.
The layout parameters can be defined ("Description" in the context menu of the layout title bar):
  • WINDEVWINDEV Mobile for each platform:
  • WEBDEV - Server code according to the size of the browser.
These parameters are taken into account to choose the layout at runtime:
  • Minimum size of device on which the layout can be started.
  • WINDEVAndroidiPhone/iPad 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).
  • AndroidiPhone/iPad Window orientation.
  • WINDEVAndroidiPhone/iPad Edit platform.
WINDEVAndroidiPhone/iPad 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.
Versions 26 and later

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.
New in version 26

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.

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:
See also
Minimum version required
  • Version 19
This page is also available for…
Comments
Click [Add] to post a comment