- Creating a control
- Creating a new control
- Creating a control associated with an item
- Control characteristics
- Viewing characteristics
- Characteristics by tab
- Handling controls in the editor
- Control handles
- Available operations
- Aligning controls
- Snap to grid
- Real-time interface checker
- Advanced interface checker
- Alignment options
- Customizable zoom
- Options for editing controls in a page
- Anchoring controls
- Anchoring a control in the editor
WEBDEV proposes several types of controls that can be easily included in your pages. These controls can be created via the "Creation" tab of the WEBDEV ribbon. All controls can be handled programmatically. The following controls are available in the WEBDEV page editor: | | | | | | - Formatted display control,
| | | | | | | | | | | | | | | | | | | | | - Control Template control,
| | | | | | | | | | | | | | | | | | - Image gallery Looper control,
| | | |  New in version 2025Code Editor control,
| | | | | | | | |
Creating a new control To create a control: - Select the type of control to be created via the corresponding icon in the "Creation" tab of the WEBDEV menu.
- The shape of the new control appears under the cursor.
- Click at the desired location to create the control in the page. The control is automatically created.
Note: Other creation modes are available. For more details, see the online help. Creating a control associated with an item All the types of controls in a page can be bound to a data file item, except the following: | | | | | | | | | - Cell control and HTML Table control
| | |
There are multiple methods to create a control that is bound to an item: - Drag and drop the item from the "Analysis" pane.
- Using the "Binding" tab of the control description window.
The description window can be displayed for all page controls. This window includes several tabs that group the configurable characteristics of one or more controls. Note: You can also view and/or change the characteristics of one or more controls in the "Modifier" pane. For more details, see the online help. Viewing characteristics To open a control description window: - double-click the control.
- select "Description" in the context menu.
- select the control and press Alt + Enter.
Remarks: - The description window can be displayed for a set of selected controls. Only the characteristics common to the selected controls will be displayed.
- Several description windows can be opened at the same time. Each description window displays the characteristics of one or more controls.
Characteristics by tab This section presents the different categories of the characteristics displayed by each tab. For more details, see the online help. General tab The "General" tab allows you to specify the name and the display characteristics of the control (caption, input mask, etc.). UI tab The "UI" tab allows you to define the parameters of the control interface: - Initial state of the control when the page is opened,
- Control visibility,
- Control size,
- Anchoring, etc.
Details tab The "Details" tab allows you to define the different parameters of the control: - input options,
- allow indirections, etc.
The content of this tab depends on the type of the current control. Binding tab The "Binding" tab allows you to select the item (from a data file or query) to which the control is bound. Depending on the current record, the content of the bound item will be displayed in the control. The binding can be established to a single file or to multiple files. Content tab The "Content" tab allows you to define: - the initial content of the control (for Edit controls only).
- the data source used to populate the control (for List Box, Combo Box, Table controls, etc.).
Help tab The "Help" tab allows you to: - describe the operating mode of the control. This information will be printed in the technical documentation (project documentation, page documentation, etc.).
- configure all types of help associated with the control. A control can have:
- A tooltip, displayed when the control is hovered over by the mouse cursor.
- A help message, displayed in the status bar when the control gains focus.
Advanced tab The "Advanced" tab is used to enter the HTML code generated before and after the control. It also allows you to enter the value added in the 'class' attribute of the control. Style tab The "Style" tab allows you to define the style of the different control elements. This tab lets you: - Modify the control appearance. Simply select the desired control element and modify the style characteristics. Only the appearance of the current control is modified.
- Create or change a style.
- Choose a style.
Handling controls in the editor Control handles Handles appear around new or selected controls. Handles allow you to: - view the control size,
- change the control size.
The colors of the handles identify the actions that can be performed: - The black handles are used to view and resize the controls.
- The white handles simply highlight the controls. For example, when selecting several controls, the white handles indicate that the selected controls cannot be resized.
These handles are also displayed when a page is read-only. This means controls cannot be resized. - The gray handles indicate the first control selected in a multiple selection. This control will be the reference control.
Available operations The page editor is used to: - Select one or more controls (with the lasso for example).
- Group selected controls.
- Move a control.
- Change the control caption.
- Show an advanced tooltip when hovering over a control. This tooltip contains the control name, position, size, and initial state (if the control is invisible).
Control alignment allows you to create "professional" and cohesive UIs. You can create standard interfaces using the following WEBDEV tools: Snap to grid The grid helps you place vertical and horizontal guides in the page. When you create new controls, they snap to the guides, as if they were magnetic. The grid allows you to align the controls according to the guides. Real-time interface checker When a control is moved in a page, guides are automatically displayed by the real-time interface checker. The objects snap to the guides, allowing you to align the moved control with the other controls found in the page. Advanced interface checker The advanced interface checker is a tool used to standardize the layout of controls in the different site pages. The advanced interface checker suggests applying Windows layout rules to the current page or to the selected controls. These rules include alignment of controls, ability to match button sizes, etc. Alignment options To align multiple controls, WEBDEV allows you to define: - a preset alignment (available on the "Alignment" or "Modification" tabs, in the "Depth and Alignment" group).
- a custom alignment (available on the "Alignment" tab, in the "Other alignments" group). The custom alignment allows you to use specific alignment properties.
In the custom alignment, you can define: - horizontal or vertical alignment: Controls can be aligned to the left from the beginning of the control or input area. They can also be aligned to the right according to the end of the control or input area.
- even spacing: Controls will be evenly spaced horizontally or vertically.
- size: Selected controls are automatically resized to the same width and/or height.
- reference control: To align and set the size of controls, the reference control can be:
- the first selected control,
- the last selected control,
- the largest selected control,
- the control at the uppermost left position in the selection.
Customizable zoom A zoom factor can be specified to reduce or enlarge the display of the current page. To specify a precise zoom factor, you can: - on the "Display" tab, in the "Editing help" group, specify the desired zoom factor.
- enter the zoom factor in the status bar of the editor (bottom right).
- press the Ctrl key and change the zoom factor with the mouse wheel while holding down the Ctrl key.
Options for editing controls in a page These display options are used to customize the operations performed on the controls in the page editor. The edit options allow you to set: - the display options.
- the snap-to behavior of the controls.
- the clicks and double-clicks on the controls.
- the control selection options.
These display options are used to customize the operations performed on the controls in the window editor. To open these options, go to the "Display" tab and click the dialog box launcher (  ) in the "Options" group. The size of the pages of a WEBDEV website can change at runtime. For example, when the browser is resized, when the site is run on different platforms (iPhone, PC, etc.). By setting anchors, controls are automatically resized and positioned when the page is resized.
The anchoring of a control is defined via several parameters: - anchoring: This parameter defines how the control reacts as the page is resized. The control can move left and/or down and can stretch horizontally and/or vertically.
- width and or height: This parameter defines how the control is resized. The height or the width can be adapted to the control content or to the browser. You can also define the minimum control size.
These parameters can be configured in the page editor. Anchoring a control in the editor To anchor a control: - Select the controls you want to anchor.
- Define the control anchoring options:
- in the "UI" tab of the control description window ("Description" in the context menu).
- via "Anchor" in the context menu of the control (right click).
- Choose the desired type of anchoring in the window that appears.
Three types of anchors can be defined:- Position anchors: These define the position of the control when the browser is resized.
- Horizontal anchors: These define how the control will react (horizontally) when the browser is resized. The control can:
- keep the same width,
- adapt to the content,
- change along with the browser.
- Vertical anchors: These define how the control will react (vertically) when the browser is resized. The control can:
- keep the same height,
- adapt to the content,
- change along with the browser.
- It is also possible to define the behavior of the control when its content overflows. You can:
- enlarge the control and push the other controls in the page,
- truncate the content,
- always enable a scrollbar,
- display a scrollbar only when the content is larger than the control.
- Validate. If the "Anchor" option is enabled (on the "Display" tab, in the "Show (all controls)" group), the anchor signs are automatically displayed in the control (red arrows).
|
|
|