|
|
|
|
|
- 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 to 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 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. Different types of window controls The following controls are available in the WINDEV window editor: | | - Edit control.
- Static Text control.
- Button.
New in version 2025Segmented Button. - Image.
- Image editor.
- HTML Editor.
- Code editor.
- Radio Button.
- Check Box.
- List Box.
- Combo Box.
- ListView.
- Sidebar.
- Drawer.
- Web Camera.
- Conference control.
- OLE control.
- 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.
- ActiveX.
|
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: - Select the type of control to create via the corresponding icon in the "Creation" tab of the WINDEV menu.
- The shape of the new control appears under the cursor.
- Click where you want to create the control. The control is automatically created.
Note: 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: 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.
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. Note: You can also view and/or change the characteristics of one or more controls in the "Modifier" pane.
For more details, see The "Modifier"pane. 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: - Modify the control appearance. Simply select the desired control element and modify the style characteristics. Only the appearance of the current control is modified.
- Apply an existing style to the control. Simply select the style you want to apply.
- Create or modify a style. All the controls in the project that use this style are updated.
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 allow you to distinguish and resize the selected control. These handles may be of a different color depending on the skin template.
- White handles are used in two cases:
- single 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.
These handles are also displayed when a window is read-only. This means controls cannot be resized. - 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 hovering over the control) containing 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.
Note: 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.
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-to guides. When you move a control near a guide it snaps to the guide. Ruler guides are placed via position markers. 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.
Note: To show or hide the window guides, select "Show guides" in the context menu of the rulers. Controls snap to nearby guides even if the guides are not visible. 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 to grid The grid helps you place vertical and horizontal guides in the window. When you create new controls, they snap to the guides, as if they were magnetic. The grid allows you to align the controls according to the guides. Real-time interface checker When you move a control in a window, the real-time interface checker automatically displays guides. These snap-to guides allow you to align the control with the other controls found in the window. Advanced interface checker The advanced interface checker is a tool that allows you to improve the layout of controls in the different windows of the application. The advanced interface checker suggests applying Windows layout rules to the current window or to the selected controls. These rules include alignment of controls, ability to match 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: - horizontal or vertical alignment: Controls can be aligned to the left from the beginning of the control or input area. They can also be aligned to the right according to the end of the control or input area.
- even spacing: Controls will be evenly spaced horizontally or vertically.
- size: Selected controls are automatically resized to the same width and/or height.
- reference control: To align and set 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 at the uppermost left position in the selection.
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: - Select the control in the editor.
- 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: - Select the control in the editor.
- 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: - Select the control in the editor.
- On the "Modification" tab, in the "Help for edit" group, check/uncheck "Outlined".
Adding an outline makes it easier to see all the controls in a window. The windows of a WINDEV application can be resized at runtime. By setting anchors, controls are automatically resized and positioned when the window is resized. The anchors of a control include two settings: - the anchor type: This setting defines how the control is resized when the parent window is resized. The control can be moved to the left and/or down, be stretched horizontally or vertically, etc.
- the anchor percentage: This value defines how much a control moves or stretches. 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: - Select the controls you want to anchor.
- 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).
- In the window that appears, select the type of anchors to be applied. The most common options are represented by different icons:
- If necessary, define the different anchor percentages.
- 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. To obtain this result: - Select the [<-] and [->] Button controls. Center these controls vertically and horizontally (
). - Select the two List Box controls and anchor them to the right, horizontally and vertically (check the "right", "width" and "height" options).
- Select the 3 Button controls. These controls must stretch to the right proportionally (
).
Note: Several WLanguage properties allow you to anchor controls programmatically. 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: - Define which Button control must be run automatically.
- 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.
- At runtime, the remaining time is automatically displayed.
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|