|
- Overview of the Cell control
- Control in a dynamic or static page
- Creating a Cell control
- Cell with relative positioning
- Events managed by default
- Swapping
Overview of the 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 laterThe color (or the background image) of the cell can be selected in the "Style" tab of the description window of control.  New in version 16The color (or the background image) of the cell can be selected in the "Style" tab of the description window of control. - not move the controls next to a Looper control.
Versions 17 and laterRemark: If the page uses the " Zoning" mode, the Cell control becomes useless. Simply define a specific area on the page for the controls located next to the Looper control. New in version 17Remark: If the page uses the " Zoning" mode, the Cell control becomes useless. Simply define a specific area on the page for the controls located next to the Looper control. Remark: If the page uses the "Zoning" mode, the Cell control becomes useless. Simply define a specific area on the page for the controls located next to the Looper control. - move up the controls found below a Drawer control when it is collapsed.
- communicate with the user.
Versions 17 and laterRemark: it is recommended to use a Popup control to communicate with the user. New in version 17Remark: it is recommended to use a Popup control to communicate with the user. Remark: it is recommended to use a Popup control to communicate with the user. - define an HTML table in a static page, etc.
Remark: 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. To create a Cell control: - On the "Creation" pane, in the "Containers" group, click "Cell".
- Click where you want to create the control in the page. The control appears in the editor.
To view the control characteristics, select "Description" in the popup menu of the control. Cell with relative positioning Versions 15 and laterThe 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: - Display the description window of the cell.
- In the "General" tab, specify the positioning of controls:
- Free (by default).
- Relative, from right to left.
- Relative, from left to right.
- Type the size of inside margin of cell (in pixels) in the "Style" tab ("Margins" element).
- Validate
Remark: In a cell with relative positioning, the rules of resizable areas continue to apply. New in version 15The 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: - Display the description window of the cell.
- In the "General" tab, specify the positioning of controls:
- Free (by default).
- Relative, from right to left.
- Relative, from left to right.
- Type the size of inside margin of cell (in pixels) in the "Style" tab ("Margins" element).
- Validate
Remark: In a cell with relative positioning, the rules of resizable 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: - Display the description window of the cell.
- In the "General" tab, specify the positioning of controls:
- Free (by default).
- Relative, from right to left.
- Relative, from left to right.
- Type the size of inside margin of cell (in pixels) in the "Style" tab ("Margins" element).
- Validate
Remark: In a cell with relative positioning, the rules of resizable areas continue to apply. Events managed by default WEBDEV manages the following events by default: | | | Event | Runtime condition |
|---|
| Initialization (Server code) | Run when opening the page | Versions 17 and laterClick (Browser code) New in version 17Click (Browser code) Click (Browser code) | Run when clicking the cell or a control in the cell. | Versions 19 and laterMouse move (Browser code) New in version 19Mouse move (Browser code) Mouse move (Browser code) | Run when moving the mouse in the cell or in a control in the cell. |
Remark: No code is available in a static page. WEBDEV allows you to automatically create a Cell control from a selection: - Select the controls that must be included in the cell.
- On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a Cell control from the selection".
Related Examples:
|
Unit examples (WEBDEV): Displaying a popup menu
[ + ] This example presents the display of a "popup menu" when a click is performed on a button.
|
|
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.
|
|
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.
|
|
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.
|
|
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...
|
|
|
|
| |
| Click [Add] to post a comment |
|
| |
|
| |
| |
| |
| |
| |
| |
| | |
| |