PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Creating a control
  • The different types of window controls
  • 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
  • Edit options of controls in a window
  • Making a control visible/invisible
  • Locking/Unlocking a control
  • Framing (or not) a control
  • Anchoring controls
  • Anchoring a control in the editor
  • Example for configuring the anchoring of controls
  • Automatic execution of a Button control
  • Implementation
  • Programming
  • AAF: Automatic Application Feature
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
10. The controls in practice
Previous pageTable of contentsNext page
WINDEV proposes several types of controls that can easily be included in your windows. These controls can be created via the "Creation" pane of WINDEV ribbon.
All controls can be handled by programming.
Creating a control

The different types of window controls

The following controls are available in the WINDEV window editor:
  • Edit control,
  • Static,
  • Button,
  • Image,
  • Image Editor,
  • Radio Button,
  • Check Box,
  • List Box,
  • Combo Box,
  • ListView,
  • Sidebar,
  • Drawer,
  • Web Camera,
  • Conference control,
  • OLE control,
  • ActiveX,
  • Shape,
  • Bar Code,
  • HTML control,
  • Supercontrol,
  • Organizer,
  • Scheduler,
  • Rating,
  • Pivot Table,
  • Dashboard,
  • Table,
  • Spreadsheet,
  • Word Processing,
  • PDF Reader,
  • Gantt Chart,
  • TreeView Table,
  • TreeView,
  • Organization chart,
  • Progress Bar,
  • Looper,
  • Multiline zone,
  • Scrollbar,
  • Slider,
  • Spin,
  • TimeLine,
  • Tab,
  • Ribbon,
  • Internal Window control,
  • Toolbar,
  • Splitter,
  • Chart,
  • Map,
  • Carousel,
  • Cube,
  • Widget,
  • Xaml,
  • Calendar,
  • Internal Window,
  • Control Template,
  • Layout control,
  • Dockable Panel.
All controls can be handled by programming.
See the online help for more details about each type of control, their main characteristics and their programming in WLanguage.

Creating a new control

To create a control:
  1. Select the type of control to create via the corresponding icon in the "Creation" pane of WINDEV menu.
  2. The shape of new control appears under the mouse cursor.
  3. Click the position where the control will be created in the window. 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

All window controls can be associated with a file item EXCEPT FOR:
  • Button
  • Timeline
  • Shape
  • Dashboard
  • Tab
  • Xaml
  • Toolbar
  • Carousel
  • Map
  • Cube
  • Ribbon
  • HTML control
  • Splitter
  • Layout 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 the controls found in a window. This window includes several tabs that group the configurable characteristics of one or more controls.
Note: 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.
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 control status when opening the window,
  • Visibility of control,
  • Size of control,
  • Alignment, ...
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
This tab is used to select the item (found in a data file or in 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 multi-file.
Content tab
This tab is available for the window 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).
Notes tab
The "Notes" tab is used to describe the operating mode of control. This information will be printed in the program documentation (project documentation, window documentation, etc.).
Help tab
The "Help" tab is used to type and configure the types of help systems 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.
  • A help window with a specific title, displayed when pressing the F1 key.
A control can also be associated with a specific help page, found in a help file in CHM format. This help page will be displayed:
  • in the format of a context-sensitive help (tooltip displayed upon request), if a help file was defined for the window.
  • in the format of a help page. WHelp will have to be used to display the help page.
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.
  • Apply an existing style to the control: all you have to do is select the style to apply.
  • Create or modify a style: the created or modified style is updated for all project controls that use this 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 window is in read-only mode 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 window editor allows you 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 a control is hovered by the mouse cursor, containing: the control name, its position, its size, its anchoring, its initial status.
  • Using an off-window control. This control will be visible in edit, it will not be visible at runtime.
Remark: An "off-window" control is used to:
  • keep a control in a window without displaying it at runtime. This allows you to use the control content in programming (like a variable).
  • display new controls in a window when resizing this window.
Aligning controls
The alignment of controls allows you to create "professional" and outstanding interfaces. To help you build standard interfaces, WINDEV proposes the following tools:

The rulers

In the window editor, you have the ability to display alignment rulers.
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 window.
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 in the windows.
  • the border guides, used to define a border of the same size on each side of the window.
Remark: To see the window with or without its guides, select "Guide visible" 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.
For example, for a window:
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 position vertical and horizontal markers in the window. 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 window, 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 window.

Advanced interface checker

The advanced interface checker is a tool used to harmonize the positioning of controls in the different application windows.
The advanced interface checker proposes to apply, to the current window or to the selected controls, the presentation rules issued from the Windows standard: control alignment, standardization of Button control sizes, etc.

The alignment options

To align several controls, WINDEV 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 one with the white handles).
    • the last selected control.
    • the largest selected control.
    • the control found in the most top left position of selected controls.
Edit options of controls in a window
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.
  • the position of window when it is opened.
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.

Making a control visible/invisible

To make a control visible/invisible in the window editor:
  1. Select the control in the editor.
  2. On the "Modification" pane, in the "Help for edit" group, check/uncheck "Visible (editor)".

Locking/Unlocking a control

To lock/unlock a control in the window editor:
  1. Select the control in the editor.
  2. On the "Modification" pane, check/uncheck "Locked".
A locked control is a control that cannot be selected with the lasso. For example, you may want to lock a tab. When several controls displayed in a tab are selected with the lasso, the tab is not automatically selected. All other operations can be performed on a locked control.

Framing (or not) a control

To frame (or not) a control in the window editor:
  1. Select the control in the editor.
  2. On the "Modification" pane, check/uncheck "Framed".
Framing a control allows you to easily view all the controls of a window (especially Image controls).
Anchoring controls
The windows of a WINDEV application can be resized at runtime. The anchoring mechanism is used to automatically adapt the size and position of controls when resizing the window.
The management of control anchoring includes two parameters:
  • the control anchoring: used to define the modification that will be applied to the control according to the change of window size. The control can be moved to the left or to the bottom, its size can be increased in width and/or in height, ...
  • the anchor rate: used to manage the percentage by which the control is moved or stretched. This parameter allows you to:
    • keep a control centered in width in the window regardless of its size.
    • proportionally enlarge some window controls.
These parameters can be configured:
  • in the window editor.
  • by programming with the WLanguage properties.

Anchoring a control in the editor

To anchor a control:
  1. Select one or more controls to anchor.
  2. Define the anchoring of controls:
    • in the "UI" tab of the description window of control ("Description" from the popup menu of control).
    • via "Anchor" from the popup menu (right click) of control.
  3. In this window, choose the type of anchoring that will be used. The most common options are represented by icons:
    No anchor: The control is not modified when the window is resized. No anchoring option is selected.
    Width: The control stretches to the right when the window is enlarged. To change the speed at which a control stretches in relation to the window, use the anchor rate in width.
    Right: The controls moves to the right when the window is enlarged. To make the control move slower or faster, use the anchor rate to right.
    Centered in width: The control remains centered in width in the window regardless of the window width.
    Height: The control stretches toward the bottom when the window height is enlarged. To change the speed at which a control stretches in relation to the window, use the anchor rate in height.
    Width and Height: The control stretches to the right and to the bottom when the window is enlarged. To change the speed at which a control stretches in relation to the window, use the anchor rate in height and the anchor rate in width.
    Height and Right: The control stretches to the bottom and moves to the right when the window is enlarged. To make the control move slower or faster, use the anchor rate to right. To change the speed at which a control stretches in relation to the window, use the anchor rate in height.
    Vertical Distribution: This option is available only when several controls are selected. The anchoring options are used to keep a vertical distribution of selected controls when the window is enlarged in height.
    Bottom: The control moves to the bottom when the window is enlarged toward the bottom. To make the control move slower or faster, use the anchor rate to bottom.
    Width and Bottom: The control stretches to the right and moves to the bottom when the window is enlarged. To make the control move slower or faster, use the anchor rate to bottom. To change the speed at which a control stretches in relation to the window, use the anchor rate in width.
    Right and Bottom: The control moves to the right and to the bottom when the window is enlarged. To make the control move slower or faster, use the anchor rate to bottom and the anchor rate to right.
    Horizontally centered at bottom: The control remains centered in width in the window regardless of the window width. However, the control is anchored at bottom and it moves to bottom when the window is enlarged.
    To make the control move slower or faster, use the anchor rate to bottom.
    Centered in height: The control remains centered in height in the window regardless of the window height.
    Horizontal Distribution: This option is available only when several controls are selected. The anchoring options are used to keep an horizontal distribution of selected controls when the window is enlarged.
    Vertically centered to right: The control remains centered in height in the window regardless of window height.
    However, the control is anchored to right and it moves to right when the window is enlarged. To make the control move slower or faster, use the anchor rate to right.
    Centered: The control remains centered in height and in width in the window regardless of the window size.

  4. Define (if necessary) the different anchor rates.
  5. 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).

Example for configuring the anchoring of controls

Let's see a detailed example that illustrates the possibilities of anchoring controls in the windows.
Initial window:
Enlarged window:
To obtain this result:
  1. Select the Button controls [<-] and [->]: these controls must be centered in height and in width ( ).
  2. Select the two List Box controls: these controls must be anchored to right, in width and in height ("to the right", "in width" and "in height" options checked).
  3. Select the three Button controls: these controls must stretch proportionally to the right ( ).
Remark: Several WLanguage properties allow you to configure the anchor of controls by programming.
Automatic execution of a Button control
To force an action on a window, simply set a Button control of this window to "Automatic execution" mode. The principle is straightforward, if no button has been used after a given time, the "Automatic execution" process of the Button control is automatically run. At runtime, the duration is automatically decremented. When it reaches zero, the code of the Button control is automatically run.

Implementation

To run the code of a Button control automatically:
  1. Define which Button control must be run automatically.
  2. In the window description ("Details" tab of description window), specify:
    • the time before the automatic execution of the Button control.
    • the name of the Button control to be run.
  3. At runtime, the remaining time is automatically displayed.

Programming

You can also define an automatic validation Button control using DelayBeforeClosing.

AAF: Automatic Application Feature

This feature is also directly accessible to the end user. It can request a Button control to be automatically run after a specific duration.
Previous pageTable of contentsNext page
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment