PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview of the Layout control
  • Creating a Layout control
  • Creating the control
  • Creating a Layout control by refactoring
  • Layout control in a Looper control
  • Characteristics of the Layout control
  • General tab
  • Details tab
  • Example of different types of overflow
  • Layout control and Responsive Web Design
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 of the Layout control
The Layout control simplifies the implementation of dynamic UIs where controls are displayed and/or hidden by programming. When a control becomes invisible (via ..Visible for example), the Layout control is used to automatically reposition all the other controls in order to keep a cohesive interface and avoid "spaces".
Layout controls are available in vertical and horizontal mode.
The Layout control is composed of cells. These cells contain the controls found in the Layout control. Each cell can contain any type of control, including another Layout control. The controls can be shown or hidden.
The cells can be created via the "General" tab in the description window or in the popup menu of the Layout control.
Creating a Layout control

Creating the control

To create a Layout control:
  1. On the "Creation" pane, in the "Containers" group, expand "Layout" and choose the orientation: horizontal or vertical.
  2. Click where the control will be created in the window or page. The control appears in the editor.
    Remark: The dimensions of the control are optimized to take up the available space at the specified position. If necessary, resize the control using the handles.
  3. Add cells in the Layout control. These cells can be added:
    • via the popup menu of the control ("Insert a cell").
    • via the "General" tab of the control description ("Add" button).
  4. Add controls in the cells of the Layout control.
  5. Set the anchors of the controls in the Layout control, and specify how they adapt to content. For more details, see:
To view the control characteristics, select "Description" in the popup menu of the control.
To handle the Layout control, see Handling a Layout control by programming.

Creating a Layout control by refactoring

A Layout control can also be created using existing controls:
  1. Select the controls that will be included in the Layout control.
  2. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a layout from the selection".
  3. A Layout control is automatically created and a cell is created for each control on a different row.

Layout control in a Looper control

WINDEVAndroidiPhone/iPad A Layout control can be used in a Looper control:
  • Create a Looper control.
  • In the control description window, go to the "Content" tab and check "Use an internal window per row (LooperAddIW function)".
  • Create an internal window. This internal window will contain the Layout control with the necessary controls.
See Displaying a different content on each row for more details.
WEBDEV - Server codeWEBDEV - Browser code A Layout control cannot be used in a Looper control.
Characteristics of the Layout control
The characteristics of the Layout control can be found in the "General" and "Details" tabs of the control description window.

General tab

The "General" tab allows you to manage the different cells in the Layout control. You can:
  • add, duplicate or delete cells.
  • modify the order of the cells using the arrows.
  • modify the parameters of the current cell. You can:
    • Make the cell visible or not (initial state).
    • Define the height and the maximum height of the cell:
      • The height corresponds to the minimum size of the cell.
      • The maximum height of the cell cannot be exceeded if it is specified.
    • Occupy the entire available space. This option is available if "In case of overflow: Enlarge control and push surrounding controls" has not been selected ("Details" tab in the control description window).
WEBDEV - Server codePHP The CSS style of the current cell can also be configured in the "General" tab.

Details tab

The layout parameters of the control can be defined in the "Details" tab. The available options are:
  • Layout: Used to specify whether the Layout control manages the layout of controls vertically or horizontally.
    • Horizontal: Cells are displayed on a single row and span the entire height of the control. Only the width can be modified.
    • Vertical: Cells are displayed on a single column and span the entire width of the control. Only the height can be modified.
  • Fix the cells: Used to specify the alignment of cells in the control according to the selected layout.
    • In a vertical layout, cells can be aligned to the top or to the bottom.
    • In a horizontal layout, cells can be aligned to the left or to the right.
  • Management of overflow:
    • Enlarge control and push surrounding controls: the control is enlarged in order to display all cells.
      • If there are other controls below or to the right, they are "pushed".
      • If one or more cells are reduced, the Layout control is resized without shrinking beyond its initial size.
      • The controls below or to the right are moved according to the new size.
      • The window is never reduced.
    • Display a scrollbar automatically: the client area of the control is enlarged, and scrollbars are displayed in order to scroll in the control.
    • Truncate the content: No adaptation is applied, cells are truncated.
    • WINDEVAndroidiPhone/iPad The option "Reduce the parent" allows you to reduce the parent if necessary. If the window is the parent, the reduction will be applied only when the window is initialized.
      Remark: When this option is enabled, the cells or cell controls must be hidden in the "Global declarations" event of the window, or in the "Initializing" event of the controls.
  • Margin between cells: Specing between cells in the Layout control. This spacing is expressed in pixels. It can be modified by programming via ..MarginInterCell.
WINDEVAndroidiPhone/iPad Remarks:
  • Caution: a Layout control cannot be enlarged if the window is maximized without scrollbar (because the window cannot be enlarged).
  • To reduce a window after it has been opened (e.g., after hiding the controls), use LayoutAdaptSize.
  • Special case: RTF Static control: In Windows 7 (and earlier), the width of an RTF Static control cannot be calculated. Therefore, the width of the control cannot be adapted.

Example of different types of overflow

Example: A Layout control is created in the window editor.
Layout control: Example of different types of overflow
This Layout control contains:
  • Several cells used to display the different form controls.
  • An horizontal Layout control containing 2 buttons, displayed (or not) according to the presence of phone number and/or email address.
Example 1: Enlarge control and push surrounding controls
  • During a test (Go), the window displays all controls.
    Enlarge control and push surrounding controls
  • When the phone number and email address are deleted, the Layout control is reduced but the window stays the same size.
  • When the phone number, email address and comment are added, the Layout control is enlarged, as well as the window.
    Enlarge control and push surrounding controls
Example 2: Display a scrollbar automatically
  • During a test (Go), the window displays all controls.
  • When a comment is added, a scrollbar automatically appears in the Layout control in order to scroll through the different elements.
    Display a scrollbar automatically
Example 3: Truncate the content
  • During a test (Go), the window displays all controls.
  • When a comment is added, the content that overflows the Layout control is not displayed.
WINDEVAndroidiPhone/iPad Example 4: Enlarge control and push surrounding controls with an option to reduce the window by programming
  • During a test (Go), the window displays all controls.
  • When the phone number and email address are deleted, the Layout controls is reduced, as well as the window.
    When the Email and Phone controls are deleted, LayoutAdaptSize resizes the Layout control to avoid having an empty area. It also resizes the window, allowing it to return to its initial size.
  • When the phone number, email address and comment are added, the Layout control is enlarged, as well as the window.
Caution: This feature must be used with great care: depending on the content of the window (besides the Layout control), unexpected effects may appear (e.g. reduced window even if some controls must be displayed on another plane).
WEBDEV - Server code
Layout control and Responsive Web Design
The layout control is available in Responsive Web Design mode. The following settings can be configured by slice:
  • height and maximum height of cells,
  • layout of the Layout control (horizontal or vertical).
You can hide cells when the slice is changed by using the event "Whenever changing slice" associated with the page.
Related Examples:
The Layout control Unit examples (WINDEV): The Layout control
[ + ] Using the Layout control
The Layout Control Unit examples (WEBDEV): The Layout Control
[ + ] Using the Layout control
The Layout control Unit examples (WINDEV Mobile): The Layout control
[ + ] Using a Layout control
Minimum version required
  • Version 23
This page is also available for…
Comments
Video Layout
https://youtu.be/yf8JnaFicEw

https://windevdesenvolvimento.blogspot.com/2019/05/dicas-2108-windev-webdev-mobile-dicas.html
amarildo
14 May 2019
WINDEV MOBILE
Cuando pones el control en Windev Mobile compilado para IOS, el sistema no hace scroll en el dispositivo final. ¿Alguien sabe si es algún error del control? La opción que no funciona es "Display a scrollbar automatically".
PEDRO REYES
22 Feb. 2019
mostrando string mais de uma Linha com layout
Video mostrando string mais de uma Linha com layout

https://youtu.be/LefbqYuncYs

Grupo Privado Amarildo Mestre Jedi

https://groups.google.com/d/forum/amarildowindev
De matos
18 May 2018
NESSA AULA VOU MOSTRAR Layout
Video mostrando o funcionamento do Layout

https://www.youtube.com/channel/UCQGPHrppG5XKoRbeOIgLJEA

Grupo Privado Amarildo Mestre Jedi

https://groups.google.com/d/forum/amarildowindev
De matos
18 May 2018