PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
New WINDEV, WEBDEV, WINDEV Mobile 23 feature!
  • 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
  • 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 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

WINDEVAndroidiPhone/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.
WEBDEV - Server codeWEBDEV - Browser code The Layout control cannot be found in a Looper control.
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).
WEBDEV - Server codePHP The "General" tab is also used to define the CSS style of current cell.

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.
  • Align 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.
    • WINDEVAndroidiPhone/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.
      WINDEVAndroidiPhone/iPad The option "Reduce the parent" is used 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 the cell controls must be hidden either in the "Global declarations" process of window, or in the "Initializing" process of 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 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.
WINDEVAndroidiPhone/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 in order to have no empty area and it also resizes the window, allowing to restore 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, ...).
Layout control and Responsive Web Design
WEBDEV - Server code
The layout control is available in Responsive Web Design mode. You have the ability to configure by blade:
  • the height and the maximum height of cells,
  • the layout of Layout control (horizontal or vertical).
You have the ability to hide cells when loading the blade by using the "Whenever changing blade" process 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 required version
  • Version 23
This page is also available for…
Comments
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
May 18 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
May 18 2018