PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview of Layout control
  • Creating a Layout control
  • Creating the control
  • Creating the Layout control by refactoring
  • Layout control in a Looper control
  • Characteristics of Layout control
  • General tab
  • Details tab
  • Example of different types of overflow
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 Layout control
The Layout control simplifies the implementation of dynamic GUIs 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 an harmonious interface and to avoid "holes".
The Layout control is available in vertical and horizontal mode.
The Layout control includes cells containing the controls found in the Layout control. Each cell can contain any control, including another Layout control. These controls can be visible or not.
These cells can be created via the "General" tab in the description window of Layout control or via the popup menu of 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 the position where the control will be created in the window or page. The control appears in creation mode.
    Note: The dimensions of created control are optimized in order to occupy the available space at the specified position. If the control size does not suit you, resize the control via its handles.
  3. Add the cells into the Layout control. These cells can be added:
    • via the popup menu of control ("Insert a cell" option).
    • via the "General" tab of control description ("Add" button).
  4. Add the controls into the different cells found in the Layout control.
  5. Configure the anchor of controls found in the Layout control, especially the adaptation to content. For more details, see:
To display the control characteristics, select "Description" from the popup menu of control.
To handle the Layout control, see Handling a Layout control by programming.

Creating the Layout control by refactoring

The Layout control can also be created from 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. The Layout control is automatically created and a cell is created for each control found on a different line.

Layout control in a Looper control

AndroidiPhone/iPad A Layout control can be used in a Looper control: to do so, use a Looper control whose content corresponds to "Use an internal window per row". In this case, the internal window will contain the Layout control with the necessary controls. See Displaying a different content on each row for more details.
Characteristics of Layout control
The characteristics of Layout control are grouped in the "General" tab and "Details" tab of the description window of control.

General tab

The "General" tab is used to manage the different cells found in the Layout control. You can:
  • add, duplicate or delete a cell via the different buttons.
  • modify the order of cells via the arrow buttons.
  • modify the parameters of current cell. You can:
    • Make the cell visible or not (initial status).
    • Define the height and the maximum height of cell:
      • The height corresponds to the minimum size of cell.
      • The maximum height of cell cannot be exceeded if it is specified.
    • Occupy the entire available space. This option is available if "In case of overflow: Enlarge or reduce the control, move the controls around" was not selected ("Details" tab in the description window of control).

Details tab

The "Details" tab is used to define the parameters regarding the presentation of Layout control. The available options are as follows:
  • Layout: Used to specify whether the Layout control manages the layout of controls vertically or horizontally.
    • Horizontal: The cells are displayed on a single row and they occupy the entire control height. Only the width can be modified.
    • Vertical: The cells are displayed on a single column and they occupy the entire control width. Only the height can be modified.
  • Fix the cells: Used to specify the alignment of cells in the control according to the selected layout.
    • If the layout is vertical, the cells can be aligned to top or bottom.
    • If the layout is horizontal, the cells can be aligned to left or right.
  • Management of overflow:
    • Enlarging the control moves the controls around: the control is enlarged in order to display all cells.
      • If controls are found below the control or on the right of control, they are "pushed".
      • If one or more cells are reduced, the Layout control is resized without being reduced below its initial size.
      • The controls found below or to right are moved according to the change of size applied.
      • The window is never reduced.
    • Display a scrollbar automatically: the client area of control is enlarged and scrollbars are displayed in order to scroll in the control.
    • Truncate the content: No adaptation is performed, the display of cells is truncated.
    • AndroidiPhone/iPad Enlarging or reducing the control moves the controls around: the control is enlarged or reduced in order to display all the cells.
      • If controls are found below the control or on the right of control, they are "pushed".
      • If one or more cells are reduced, the Layout control is resized.
      • The controls found below or to right are moved according to the change of size applied.
      • The window can be enlarged or reduced.
      AndroidiPhone/iPad The option "Reduce the parent" allows you to reduce the parent if necessary. If the parent is the window, the reduction will be applied when initializing the window.
      Note: When this option is enabled, the cells or cell controls must be hidden either in the event "Global declarations" 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.
AndroidiPhone/iPad Notes:
  • 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 its opening (once controls have been hidden for example), use LayoutAdaptSize. This function is available from version 230050.
  • Special case: RTF Static control: In Windows 7 (and earlier), the width of an RTF Static control cannot be calculated. Therefore, the adaptation of control in width cannot be done.

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: Enlarging the control moves the controls around
  • At Go, the window displays all controls.
    Enlarging the control moves the controls around
  • When deleting the phone number and the email address, the Layout controls is reduced but the window keeps the same size.
  • When adding the phone number, the email address and a comment, the Layout control is enlarged, as well as the window.
    Enlarging the control moves the controls around
Example 2: Display a scrollbar automatically
  • At Go, the window displays all controls.
  • When adding a comment, a scrollbar is automatically displayed in the Layout control in order to scroll the different elements displayed.
    Display a scrollbar automatically
Example 3: Truncate the content
  • At Go, the window displays all controls.
  • When adding a comment, the content that does not fit inside the Layout control is not displayed.
AndroidiPhone/iPad Example 4: Enlarging or reducing the control moves the controls aroundExample 4: Enlarging the control moves the controls around while managing the window reduction by programming
  • At Go, the window displays all controls.
  • When deleting the phone number and the email address, the Layout controls is reduced, as well as the window.
    Indeed, when deleting the control, 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 adding the phone number, the email address and a comment, the Layout control is enlarged, as well as the window.
Caution: This feature must be used with great care: indeed, according to the window content, unexpected effects can occur (reduced window while controls must be displayed on another plane, ...).
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