- 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
- The handles of controls
- Available operations
- Aligning controls
- The rulers
- Snap-on grid
- Real-time interface checker
- Advanced interface checker
- The alignment options
- The configurable zoom
- Options for editing the controls in a page
- Anchoring controls
- Anchoring a control in the editor
14. The controls in practice
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 by programming. The following controls are available in the page editor of WEBDEV: | | | | | | - Formatted display control,
| | | | | | | | | | | | | - Scrolling Banner control,
| | | | | | - Control Template control,
| | | | | | | | | | | | | | | | | | | - Image gallery Looper control,
| | | | | | | | | | | |
Creating a new control To create a control: - Select the type of control to create using the corresponding icon in the "Creation" pane of the WEBDEV menu.
- The shape of new control appears under the mouse cursor.
- Click the position where the control will be created in the page. The control is automatically created.
Remark: Other creation modes are available. See the online help for more details. Creating a control associated with an item Except for the following controls, all page controls can be associated with an item found in 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 from the "Analysis" pane.
- Via the "File" tab in the description window of control.
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. See the online help for more details. Displaying the characteristics To display the description window of a control: - double-click the control.
- select "Description" from the popup menu of control (right mouse click).
- 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 displayed at the same time. Each description window displays the characteristics of one or more controls.
Characteristics by tab This paragraph presents the different categories of characteristics displayed by each tab. See the online help for more details. General tab The "General" tab is used to specify the control name and all display characteristics of control (caption, input mask, ...). UI tab The "UI" tab is used to define the parameters of control interface: - Initial status of control when opening the page,
- Visibility of control,
- Size of control,
- Anchoring, ...
Details tab The "Details" tab is used to define the different control parameters: - input parameters,
- Drag and Drop, ...
The content of this tab depends on the type of current control. Link tab The "Link" tab is used to select the item (from a data file or a view) to with the control is linked. Depending on the current record, the content of linked item will be displayed in the control. The link can be single-file or multifile. Content tab The "Content" tab is available for page controls only. The "Content" tab is used to define: - the initial content of control (for the edit controls only).
- the data source used to fill the control (for List box, Combo Box and Table controls only).
Note/Help tab The "Note/Help" tab is used to: - describe the operating mode of control. This information will be printed in the program documentation (project documentation, page documentation, ...).
- 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 takes focus.
Advanced tab The "Advanced" tab is used to enter the HTML code generated before and after the control. Style tab The "Style" tab is used to define the style of different control elements. This screen is used to: - Modify the control aspect: all you have to do is select the control element to modify, then its style characteristics. Only the aspect of current control is modified.
- Create or modify a style.
- Choose a style.
Handling controls in the editor The handles of controls 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 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.
Available operations 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, its position, its size, its initial status (if the control is invisible).
The alignment of controls allows you to create "professional" and outstanding interfaces. Several WEBDEV tools can be used to create standard interfaces: The rulers 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 the controls found in a page. Displaying the rulers To display the rulers, on the "Display" pane, in the "Help for edit" group, 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 see the page with or without its guides, select "Show guides" from the popup menu of rulers. Visible or not, the guides are always enabled: any control moved toward a marker is automatically snapped by it. Handling markers 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. Snap-on grid 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 presentation rules issued from the Windows standard: alignment of controls, standardization of button sizes, ... The alignment options To align several controls, WEBDEV proposes: - a preset alignment (available on the "Alignment" pane or on the "Modification" pane, in the "Alignment" group).
- a custom alignment (available on the "Alignment" pane, in the "Other alignments" group). The custom alignment allows you to use specific alignment properties.
When using the custom alignment, you have the ability to define: - the horizontal or vertical alignment: the controls that can be aligned to left according to the start of control or to the start of input area. They can also be aligned to right according to the end of control or to the end of input area.
- the regular spacing: the spacing between controls is adapted in order to be the same between each control (horizontally or vertically).
- the size: the size of selected controls is automatically adapted in order for the controls to have the same height and/or the same width.
- the reference control: for the alignment and the size of controls, the reference control can be:
- the first selected control,
- the last selected control,
- the largest selected control,
- the control found in the most top left position of selected controls.
The configurable 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" pane, in the "Help for edit" group, specify the requested zoom factor.
- enter the requested 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 the 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  group icon of "Options" group. The pages of a WEBDEV site can be resized at run time: the browser can be resized, the site can be displayed on different platforms (iPhone, PC, ...). The anchoring mechanism is used to automatically adapt the size and position of controls when resizing the page.
The anchoring of a control is managed via several parameters: - the control anchoring: this parameter is used to define the modification that will be applied to the control according to the change of the page size. The control can move to left and/or to bottom, it can be enlarged in width and/or in height.
- the management of width and/or height: this parameter is used to manage the behavior of the control when resized. The height or the width can be adapted to the control content or to the browser. You also have the ability to 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 anchoring of controls:
- in the "UI" tab of the control description window ( "Description" from the popup menu).
- via "Anchor" from the popup menu (right click) of control.
- Choose the desired type of anchoring In the window that appears.
Three types of anchoring can be defined:- position anchoring: allows you to define the position of the control when resizing.
- anchor in width: allows you to define the width behavior of the control when resizing. The control can:
- keep its width,
- adapt to content,
- change along with the browser.
- anchor in height: allows you to define the height behavior of the control when resizing. The control can:
- keep its height,
- adapt to content,
- change along with the browser.
- It is also possible to define the behavior of the control when its content is larger than it is. You can:
- stretch 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 "Anchors" option is enabled (on the "Display" pane, in the "Show (all the controls)" group), the anchoring signs are automatically displayed in the control (red arrows).
Remark: To manage the anchoring of controls, you can also use the positioning tables. See the online help for more details. |
|
|