- Creating a control
- Creating a new control
- Creating a control associated with an item
- Characteristics of a control
- Displaying the characteristics
- Characteristics by tab
- Handling controls in the editor
- Control handles
- Available operations
- Aligning controls
- Snap-on 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" pane of the WEBDEV ribbon.
All controls can be handled through programming.
The following controls are available in the WEBDEV page editor:
- Formatted display control,
- Control Template control,
- Image gallery Looper control,
Creating a new control
To create a control
- Select the type of control to be created via the corresponding icon in the "Creation" pane of the WEBDEV menu.
- The shape of the new control appears under the cursor.
- Click the position where the control will be created in the page. The control is automatically created.
Remark: Other creation modes are available. For more details, see the online help.
Creating a control associated with an item
Except for the following controls, all page controls can be associated with an item from a data file:
- Cell control and HTML Table control
Several methods can be used to create a control associated with an item (or to retrieve an item):
- Drag and Drop the item from the "Analysis" pane.
- Using the "Binding" tab of the control description window.
Characteristics of a control
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.
Remark: You also have the ability to see and/or modify the characteristics of one or more controls in the modifier. For more details, see the online help.
Displaying the characteristics
To open a control description window:
- double-click the control.
- select "Description" in the context menu.
- select the control and press Alt + Enter.
- 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 open 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.
The "General" tab is used to specify the name and all the display characteristics of the control (text, input mask, etc.).
The "UI" tab is used to define the parameters of the control interface:
- Initial state of the control when the page is opened,
- Control visibility,
- Control size,
- Anchoring, etc.
The "Details" tab is used to define the different control parameters:
- input parameters,
- Allow indirections, ...
The content of this tab depends on the type of the current control.
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.
The "Content" tab is available for page controls only.
The "Content" tab is used 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 and Table controls only).
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 by the mouse cursor.
- A help message, displayed in the status bar when the control gains focus.
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.
The "Style" tab is used to define the style of the different control elements. This tab is used to:
- Modify the control aspect: simply select the control element to be modified and then its style characteristics. Only the aspect of the current control is modified.
- Create or modify a style.
- Choose a style.
Handling controls in the editor
When a control was just created or when it is selected, it is displayed with handles. The handles are used to:
- view the size of a control,
- modify the size of a control.
The colors of the handles are used to identify the actions that can be performed:
- The black handles are used to view and resize a control.
- The white handles can only be used to see a control. For example, when selecting several controls, the white handles indicate that the selected controls cannot be resized.
This type of handles is also displayed when a page is read-only for the developer: the controls cannot be modified.
- The gray handles indicate the first selected control during a multiple selection. This control will be the reference control.
The page editor is used to:
- Select one or more controls (with the lasso for example).
- Group selected controls.
- Move a control.
- Modify the control caption.
- Display an advanced tooltip when hovering 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:
The alignment rulers can be displayed in the page editor.
These rulers have snap-on guides: any control that comes close to a guide is automatically "snapped" by it. This feature allows you to easily position, align or resize controls in a page.
Displaying the rulers
To display the rulers, go to the "Display" tab, "Help for edit" group and check "Rulers". Two types of guides can be used:
- the guides, used to align and organize the controls inside the pages.
- the border guides, used to define a border of identical size on each side of the page.
Remark: To show or hide the page guides, select "Show guides" in the context menu of the rulers. Guides are always enabled even if they are not visible: any control moved toward a marker is automatically snapped by it.
The markers can be easily handled with the mouse in the editor. When a marker is hovered by the mouse, the cursor turns into a double arrow.
The snap-on grid is used to place vertical and horizontal markers in the page. The created controls are attracted to these markers, as if the controls and the markers were magnetic. The snap-on grid is used to align the controls according to the markers.
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 proposes to apply, to the current page or to the selected controls, the interface rules from the Windows standard: alignment of controls, standardization of button sizes, etc.
To align multiple controls, WEBDEV allows you to define:
- a preset alignment (available on the "Alignment" or "Modification" panes, 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:
- the horizontal or vertical alignment: controls can be aligned to the left from the beginning of the control or from the input area. They can also be aligned to the right according to the end of the control or input area.
- the even spacing: the spacing between controls is adapted in order to be the same between each control (horizontally or vertically).
- the size: the size of the selected controls automatically adapts to obtain controls with the same height and/or width.
- the reference control: to align and define the size of the controls, the reference control can be:
- the first selected control,
- the last selected control,
- the largest selected control,
- the most top left selected control.
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 "Help for edit" group, specified 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 are used to configure:
- the display options.
- the magnetism of controls.
- the click and double-click operations on the controls.
- the options for control selection.
These display options are used to customize the operations performed on the controls in the window editor.
To display these options, on the "Display" pane, click the dialog box launcher
of the "Options" group.
The pages of a WEBDEV site can be resized at runtime: the browser can be resized, the site can be displayed on different platforms (iPhone, PC, etc.). The anchoring mechanism allows controls to automatically adapt their size and position when the page is resized.
The anchoring of a control is defined via several parameters:
- the control anchoring: this parameter defines the modification that will be applied to the control according to the change of the page size. The control can move left and/or down and can be enlarged vertically and/or horizontally.
- the control width and/or height: this parameter is used to define the behavior of the control when 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 one or more controls 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: allows you to define the position of the control when the browser is resized.
- horizontal anchors: allows you to 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: allows you to 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).
Remark: To define the anchoring of the controls, you can also use positioning tables. For more details, see Positioning table