PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview of Cell control
  • Control in a dynamic or static page
  • Creating a Cell control
  • Cell with relative positioning
  • Processes managed by default
  • Swapping
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 Cell control

Control in a dynamic or static page

The Cell control contains controls.
The Cell control is used to:
  • define a color area. Controls can be positioned on this area.
    Versions 16 and later
    The color (or the background image) of the cell can be selected in the "Style" tab of the description window of control.
    New in version 16
    The color (or the background image) of the cell can be selected in the "Style" tab of the description window of control.
    The color (or the background image) of the cell can be selected in the "Style" tab of the description window of control.
  • avoid moving the controls found beside a looper.
    Versions 17 and later
    From version 17, the cells can be replaced by the generation in Zoning mode.
    New in version 17
    From version 17, the cells can be replaced by the generation in Zoning mode.
    From version 17, the cells can be replaced by the generation in Zoning mode.
  • move up the controls found below a Drawer control when this one is collapsed.
  • communicate with the user.
    Versions 17 and later
    From version 17, we recommend that you use a Popup control to communicate with the user.
    New in version 17
    From version 17, we recommend that you use a Popup control to communicate with the user.
    From version 17, we recommend that you use a Popup control to communicate with the user.
  • define a HTML table in a static page, ...
Note: The controls are associated with a cell. The option "The control can be overlaid" must not be checked for the controls associated with the Cell control. Indeed, if this option is checked, the control will not be associated with the cell.
Creating a Cell control
To create a Cell control:
  1. In the page editor, click (or select "Insert .. Control .. Cell").On the "Creation" pane, in the "Containers" group, click "Cell".
  2. Click the position where the control will be created in the page. The control appears in creation mode.
To display the control characteristics, select "Description" from the popup menu of control.
Cell with relative positioning
Versions 15 and later
The Cell control can be used in "relative positioning" mode.
In this mode, the controls located inside the cell are dynamically positioned from left to right and from top to bottom according to their size. This mode is used to eliminate the empty space left by an invisible control.
To define a cell in "relative positioning" mode:
  1. Display the description window of the cell.
  2. In the "General" tab, check "Relative positioning of controls".In the "General" tab, specify the positioning of controls:
    • Free (by default).
    • Relative, from right to left.
    • Relative, from left to right.
  3. Type the size of inside margin of cell (in pixels).Type the size of inside margin of cell (in pixels) in the "Style" tab ("Margins" element).
  4. Validate
Note: In a cell for relative positioning, the rules of extensible areas continue to apply.
New in version 15
The Cell control can be used in "relative positioning" mode.
In this mode, the controls located inside the cell are dynamically positioned from left to right and from top to bottom according to their size. This mode is used to eliminate the empty space left by an invisible control.
To define a cell in "relative positioning" mode:
  1. Display the description window of the cell.
  2. In the "General" tab, check "Relative positioning of controls".In the "General" tab, specify the positioning of controls:
    • Free (by default).
    • Relative, from right to left.
    • Relative, from left to right.
  3. Type the size of inside margin of cell (in pixels).Type the size of inside margin of cell (in pixels) in the "Style" tab ("Margins" element).
  4. Validate
Note: In a cell for relative positioning, the rules of extensible areas continue to apply.
The Cell control can be used in "relative positioning" mode.
In this mode, the controls located inside the cell are dynamically positioned from left to right and from top to bottom according to their size. This mode is used to eliminate the empty space left by an invisible control.
To define a cell in "relative positioning" mode:
  1. Display the description window of the cell.
  2. In the "General" tab, check "Relative positioning of controls".In the "General" tab, specify the positioning of controls:
    • Free (by default).
    • Relative, from right to left.
    • Relative, from left to right.
  3. Type the size of inside margin of cell (in pixels).Type the size of inside margin of cell (in pixels) in the "Style" tab ("Margins" element).
  4. Validate
Note: In a cell for relative positioning, the rules of extensible areas continue to apply.
Processes managed by default
WEBDEV manages the following processes by default:
ProcessRuntime condition
Initialization (Server code)Run when opening the page
Versions 17 and later
Click (Browser code)
New in version 17
Click (Browser code)
Click (Browser code)		Run during the click in the cell or in a control found in the cell.
Versions 19 and later
Mouse moved (Browser code)
New in version 19
Mouse moved (Browser code)
Mouse moved (Browser code)		Run when moving the mouse in the cell or in a cell control.
Note: No code is available in a static page.
Swapping
WEBDEV allows you to automatically create a Cell control from a selection:
  1. Select the controls that must be included in the cell.
  2. 2. Select "Control .. Refactoring .. Create a cell from the selection".On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a cell from the selection".
Related Examples:
Displaying a popup menu Unit examples (WEBDEV): Displaying a popup menu
[ + ] This example presents the display of a "popup menu" when a click is performed on a button.
The Cell control (Popup) Unit examples (WEBDEV): The Cell control (Popup)
[ + ] This example explains how to display the details in a popup cell.
The details are displayed in a movable cell made visible during the click.
Custom tooltip Unit examples (WEBDEV): Custom tooltip
[ + ] This example explains how to display a custom tooltip when an element is hovered by the mouse cursor.
The custom tooltip is a cell that is:
- displayed during the "Mouse over" event,
- hidden during the "Mouse out" event.
The Cell control (Move) Unit examples (WEBDEV): The Cell control (Move)
[ + ] This example explains how to use a movable cell.
This cell is moved by the mouse or by programming.
The Cell control (Animations) Unit examples (WEBDEV): The Cell control (Animations)
[ + ] This example explains how to create "furtive cells" in your WEBDEV sites.
A furtive cell is a cell that appears at the bottom of the page and that remains displayed during a given time.
These cells can be used to display notifications, adverts...
See also
Minimum required version
  • Version 9
Comments
Click [Add] to post a comment