ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WINDEV concepts / Part 1 - Main concepts
  • Creating a control
  • Different types of window controls
  • 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
  • Rulers
  • Snap-on grid
  • Real-time interface checker
  • Advanced interface checker
  • Alignment options
  • Control edit options in a window
  • Making a control visible/invisible
  • Locking/Unlocking a control
  • Framing a control
  • Anchoring controls
  • Anchoring a control in the editor
  • Example of control anchors
  • 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/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
11. Controls in practice
Previous pageTable of contentsNext page
WINDEV includes different types of controls that can be easily used in your windows. These controls can be created via the "Creation" tab of the ribbon.
All controls can be handled programmatically.
Creating a control

Different types of window controls

The following controls are available in the WINDEV window editor:
  • Edit control,
  • Static,
  • Button,
  • Image,
  • Image Editor,
  • HTML Editor,
  • Radio Button,
  • Check Box,
  • List Box,
  • Combo Box,
  • ListView,
  • Sidebar,
  • Drawer,
  • Web Camera,
  • Conference control,
  • OLE control,
  • ActiveX,
  • Shape,
  • Bar Code,
  • HTML Display control,
  • Supercontrol,
  • Organizer,
  • Scheduler,
  • Rating,
  • Pivot Table,
  • Dashboard,
  • Table,
  • Spreadsheet,
  • Word Processing,
  • Gantt Chart,
  • TreeView Table,
  • TreeView,
  • Diagram Editor,
  • 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,
  • Control template,
  • Layout control,
  • Dockable panel,
  • PDF Reader.
  • Kanban
All controls can be handled programmatically.
For more details, see the online help 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" tab of the WINDEV menu.
  2. The shape of the new control appears under the cursor.
  3. Click where you want to create the control. 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

All the controls in a window can be bound to a data file item, EXCEPT the following:
  • Button
  • Timeline
  • Shape
  • Dashboard
  • Tab
  • Xaml
  • Toolbar
  • Carousel
  • Map
  • Cube
  • Ribbon
  • HTML Display control
  • Splitter
  • Layout 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 "File" tab of the control description window.
Control characteristics
All the controls in the window editor include a description window. This window has several tabs that group the characteristics that can be set on one or multiple 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.

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.
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 window is opened,
  • Control visibility,
  • Control size,
  • Alignment, etc.
Details tab
The "Details" tab allows you to define the different parameters of the control:
  • input options,
  • Drag and drop, etc.
The content of this tab depends on the type of the current control.
Binding tab
This 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.).
Notes tab
The "Notes" tab allows you to describe the control operating mode in detail. This information will be included in the technical documentation (project documentation, window documentation, etc.).
Help tab
The "Help" tab allows you to enter and set the types of help systems 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.
  • A help window with a specific title, displayed when pressing the F1 key.
A control can also be associated with a specific help page from a CHM help file. This help page will be displayed:
  • as a context-sensitive help (tooltip displayed upon request), if a help file was defined for the window.
  • as a help page. In this case, use WHelp to display the help page.
Style tab
The "Style" tab allows you to define the style of the different control elements. This tab lets you:
  • 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.
  • Apply an existing style to the control: simply select the style to apply.
  • Create or change a style: the created or modified style is updated for all project controls that use this 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 (different color depending on the skin template used) allow you to distinguish and resize the selected control.
  • White handles are used in two cases:
    • simple selection: the selected control is in read-only mode. For example, these handles may appear if the control is selected and its description window is open. In this case, the control cannot be directly modified or moved in the editor.
    • multiple selection: the selected control is part of a multiple selection, but it is not the first control selected.
    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 control selected in 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 controls,
  • Change the text of the controls,
  • Show an advanced tooltip (when the cursor hovers over the control) with: the control name, position, size, anchors and initial state.
  • Use a control outside the window. This control will be visible in edit mode and invisible at runtime.
Remark: You can use a control outside the window to:
  • associate it with the window without displaying it at runtime. This allows you to use the content of the control programmatically (like a variable).
  • display new controls in a window when resizing it.
Aligning controls
By aligning controls, you can create "professional" and outstanding interfaces. WINDEV includes the following features to help you design great UIs:

Rulers

You can display alignment rulers in the window 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 window.
Displaying the rulers
To display the rulers, go to the "Display" tab, "Help for edit" group and check "Rulers". Two types of markers can be used:
  • markers, which allow you to align and place the controls inside the windows using the associated guides.
  • border markers, which allow you to obtain a border of the same size on each side of the window. A guide allows you to view the border area.
Remark: To show or hide the window 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.
Example in a window:
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 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 improve the layout of the controls in the different windows of the application.
This interface checker also enables you to apply the interface rules from the Windows standard to the current window or to the selected controls: control alignment, button sizes, etc.

Alignment options

To align multiple controls, WINDEV includes:
  • a preset alignment (available on the "Alignment" or "Modification" tab, 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 one with the white handles).
    • the last selected control.
    • the largest selected control.
    • the most top left selected control.
Control edit options in a window
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.
  • the position of the window when it is opened.
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.

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" tab, 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" tab, in the "Help for edit" group, check/uncheck "Locked".
A locked control cannot be selected by clicking and dragging over it. Let's look at an example with a Tab control. When you click and drag over multiple controls in a tab pane, the Tab control is not automatically selected.
All other operations can be performed on a locked control.

Framing a control

To frame a control in the window editor:
  1. Select the control in the editor.
  2. On the "Modification" tab, in the "Help for edit" group, check/uncheck "Outlined".
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. With the anchoring mechanism, controls are automatically resized and positioned when the window is resized.
The anchors of a control include two settings:
  • the type of anchor: defines the control behavior based on the new window size. The control can move to the left and/or to the bottom, it can be enlarged in width and/or in height.
  • the anchor rate: defines how much a control stretches or moves. This option allows you to:
    • keep a control centered horizontally in the window regardless of its size.
    • proportionally enlarge some controls.
These settings can be defined:
  • in the window editor.
  • through programming with the WLanguage properties.

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. In the window that appears, select the type of anchors to be applied. The most common options are represented by different icons:
    No anchors: The control does not change when the window is resized. No anchoring option is selected.
    Width: The control stretches to the right when the window is enlarged. Set the "width" anchor rate to define how much a control stretches relative to the window.
    Right: The control moves to the right when the window is enlarged. Set the "right" anchor rate to define how much the control moves.
    Horizontally centered: The control remains centered horizontally regardless of the width of the window.
    Height: The control stretches downward when the window is vertically enlarged. Set the "height" anchor rate to define how much a control stretches relative to the window.
    Width and height: The control stretches to the right and downward when the window is enlarged. Set the "width" and "height" anchor rates to define how much a control stretches relative to the window.
    Height and right: The control stretches downward and moves to the right when the window is enlarged. Set the "right" anchor rate to define how much the control moves. Set the "height" anchor rate to define how much a control stretches relative to the window.
    Vertical distribution: This option is available only when multiple controls are selected. The selected controls stretch downward and are distributed proportionally when the window is enlarged vertically.
    Bottom: The control moves down when the window is enlarged downward. Set the "bottom" anchor rate to define how much the control moves.
    Width and bottom: The control stretches to the right and moves downward when the window is enlarged. Set the "bottom" anchor rate to define how much the control moves. Set the "width" anchor rate to define how much a control stretches relative to the window.
    Right and bottom: The control moves to the right and down when the window is enlarged. Set the "bottom" and "right" anchor rates to define how much the control moves.
    Horizontally centered at bottom: The control remains centered horizontally regardless of the width of the window. However, the control is anchored to the bottom and moves down when the window is enlarged.
    Set the "bottom" anchor rate to define how much the control moves.
    Vertically centered: The control remains centered vertically regardless of the height of the window.
    Horizontal distribution: This option is available only when multiple controls are selected. The selected controls stretch to the right and are distributed horizontally when the window is enlarged.
    Vertically centered to right: The control remains centered vertically regardless of the height of the window.
    However, the control is anchored to the right and moves right when the window is enlarged. Set the "right" anchor rate to define how much the control moves.
    Centered: The control remains centered vertically and horizontally regardless of the size of the window.

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

Example of control anchors

The following example shows how controls are anchored in a window.
Initial window:
Enlarged window:
To obtain this result:
  1. Select the [<-] and [->] Button controls: center these controls vertically and horizontally ().
  2. Select the two List Box controls: anchor these controls to the right, horizontally and vertically (check the "right", "width" and "height" options).
  3. Select the three Button controls: these controls must stretch to the right proportionally ().
Remark: The anchors of the controls can be set programmatically using different WLanguage properties.
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 very simple, if no button has been used for a given period of time, the click code of the Button control associated with the "Automatic execution" will be automatically executed.
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 the 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 users. They can request a Button control to be automatically run after a specific duration.
Previous pageTable of contentsNext page
Comments
Click [Add] to post a comment

Last update: 09/20/2023

Send a report | Local help