ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
Help / WEBDEV concepts / Part 2 - Developing a site
  • Creating a control
  • Creating a new control
  • Creating a control associated with an item
  • Control characteristics
  • Displaying the characteristics
  • Characteristics by tab
  • Handling controls in the editor
  • Control handles
  • Available operations
  • Aligning controls
  • Rulers
  • 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
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
14. Controls in practice
Previous pageTable of contentsNext page
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 through programming.
Creating a control
The following controls are available in the WEBDEV page editor:
  • Static control,
  • Scheduler control,
  • Text Area control,
  • Calendar control,
  • Formatted display control,
  • Chart control,
  • Button control,
  • Bar Code control,
  • Link control,
  • Progress Bar control,
  • Image control,
  • Cell control,
  • Popup control,
  • Tab control,
  • Thumbnail control,
  • Drawer control,
  • Peeling Corner control,
  • Sliding Banner control,
  • Social Network control,
  • Image Editor control,
  • Multimedia control,
  • Diagram Editor control,
  • Web Camera control,
  • Internal Page control,
  • Edit control,
  • Control Template control,
  • Combo Box control,
  • Supercontrol,
  • List Box control,
  • HTML Table control,
  • Rating control,
  • Menu,
  • Captcha control,
  • Pager control,
  • Radio Button control,
  • Site Map control,
  • Check Box control,
  • Breadcrumb control,
  • Slider control,
  • HTML control,
  • Looper control,
  • IFrame control,
  • Linear Looper control,
  • Image gallery Looper control,
  • Table control,
  • TreeView Table control,
  • New in version 28
    Flexbox control,
  • Java Applet control,
  • TreeView control,
  • Line control,
  • Dashboard control,
  • "Web component" control,
  • Organizer control,
  • Layout control.

Creating a new control

To create a control:
  1. Select the type of control to be created via the corresponding icon in the "Creation" tab of the WEBDEV menu.
  2. The shape of the new control appears under the cursor.
  3. 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:
  • Button control,
  • "Web component" control
  • Tab control
  • Site Map control
  • Line control
  • Pager control
  • HTML control
  • Cell control and HTML Table control
  • Java Applet 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.
Control characteristics
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 can also view and/or change 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.
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 all the display characteristics of the control (text, 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 parameters,
  • Allow indirections, ...
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 is used to:
  • Change the control aspect: simply select the control element to be modified, and then choose the style characteristics. Only the aspect of the current control is modified.
  • Create or modify 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.
    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 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.
  • Display an advanced tooltip when hovering a control. This tooltip contains: the control name, position, size and initial state (if the control is invisible).
Aligning controls
Control alignment allows you to create "professional" and cohesive UIs. You can create standard interfaces using the following WEBDEV tools:

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 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.
Handling markers
The markers can be easily handled with the mouse in the editor. When a marker is hovered over 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 interface rules from the Windows standard: alignment of controls, standardization of 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:
  • 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.

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 "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 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.
Anchoring controls
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 anchors: 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:
  1. Select the controls you want to anchor.
  2. 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).
  3. 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.
  4. 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.
  5. 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.
Previous pageTable of contentsNext page
Comments
Click [Add] to post a comment

Last update: 01/03/2023

Send a report | Local help