PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview
  • Implementation
  • Creating a new layout for a page
  • Handling layouts
  • Managing controls in the layouts
  • Characteristics of layouts
  • Comparing windows or pages with layouts
  • Managing layouts at runtime
  • 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
Layouts are used to define several views of a window/page in the same project without duplicating this window/page.
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.
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.
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.
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
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" pane, 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" pane, 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" pane, 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.
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 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.
Remarks:
  • 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.

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. 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.
  • Create 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 or pages 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 runtime

Default operating mode

The initial layout is automatically chosen 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:
  • 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 layout title bar popup menu):
  • 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.

Programming

You can:
Minimum version required
  • Version 19
This page is also available for…
Comments
Click [Add] to post a comment