PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
  • Creating a control
  • 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
  • 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 (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
11. 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 the WINDEV ribbon.
All controls can be handled by programming.
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,
  • 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.
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 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 window controls can be associated with a file item EXCEPT FOR:
  • Button
  • Timeline
  • Shape
  • Dashboard
  • Tab
  • Xaml
  • Toolbar
  • Carousel
  • Map
  • Cube
  • Ribbon
  • HTML Display 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.
  • Using the "File" tab of the control description window.
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.
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.
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 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.
General tab
The "General" tab is used to specify the name and all the display characteristics of the control (text, input mask, etc.).
UI tab
The "UI" tab is used to define the parameters of the control interface:
  • Initial control status when opening the window,
  • Control visibility,
  • Control size,
  • Alignment, ...
Details tab
The "Details" tab is used to define the different control parameters:
  • input parameters,
  • 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 set to a single file or to multiple files.
Content tab
This tab is available for the window controls only.
The "Content" tab is used to define:
  • the initial content of the control (for 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 control operating mode in detail. 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 the different control elements. This screen 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.
  • 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

Control handles

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 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 mode and invisible 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:

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 the controls found in a window.
Displaying the rulers
To display the rulers, go to the "Display" pane, "Help for edit" group and 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 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.
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.

Alignment options

To align several controls, WINDEV proposes:
  • a preset alignment (available on the "Alignment" or "Modification" panes, 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. 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 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 the 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 dialog box launcher of 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" 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. With the anchoring mechanism, controls are automatically resized and positioned when the window is resized.
The anchoring of a control includes two parameters:
  • the control anchoring: used to define the modification that will be applied to the control according to the new 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 control description window ("Description" in the context menu).
    • via "Anchor" in the context menu of the control (right click).
  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 the 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 "Anchor" option is enabled (on the "Display" pane, in the "Show (all controls)" group), the anchor 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 vertically and horizontally ( ).
  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: The anchoring of the controls can be configured with several WLanguage properties 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 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" 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
Comments
Click [Add] to post a comment