ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WINDEV concepts / Part 1 - Main concepts
  • Creating a window
  • Creating blank windows
  • Internal window
  • Window based on a window template
  • Simple operations on a window from the editor
  • Main characteristics of a window
  • Characteristics
  • Description window
  • Displaying the characteristics
  • Characteristics by tab
  • Window and image
  • Overview
  • Setting the background image
  • Clipped window
  • Opening a "popup" window
  • Overview
  • Dim disabled windows
  • Internal window
  • Window templates
  • Events associated with windows
  • Default events
  • Optional events
  • Context menus
  • Context menu edit windows
  • Available features
  • Default system context menu
  • Main menus
  • Overview
  • Vocabulary associated with the main menus
  • Available features
  • Menu options
  • Overview
  • Handling menu options in the editor
  • Handling menu options programmatically
  • The status bar
  • Status bar description window
  • Type of cell in the status bar
  • Characteristics of the cells in the status bar
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
8. Windows in practice
Previous pageTable of contentsNext page
The purpose of a window is to display, present or allow users to enter information. This information can come from data files in an analysis, external files, queries, etc.
There are multiple options to create the windows of a project in WINDEV:
  • Create a blank window with the wizard.
  • Build all the windows of the application from the analysis description.
  • Create a window from the analysis description (with or without code).
  • Create standard windows.
  • Create windows based on a template, etc.
Regardless of the method used, the window can be modified once it has been created: you can add, modify or delete controls and change the characteristics of the window.
For more details on how to manipulate controls in a window, see Controls in practice.
This chapter presents the following topics:
Creating a window
WINDEV allows you to create several types of windows:
  • Blank windows, without controls.
  • Windows created via the RAD methodology.
  • Internal windows. These windows can be used in "Internal Window" controls.
  • Windows based on a window template.
  • Windows imported from a non-WINDEV application.
This paragraph explains how to create blank windows, internal windows or windows based on a template. For more details, see the online help.

Creating blank windows

To create a blank window:
  1. Click Create an element in the quick access buttons. The new element window appears: click "Window" then "Window". The window creation wizard opens.
  2. Choose the "Blank" type.
  3. Select the window skin template.
  4. Validate the window creation. A blank window is created in the editor. The save window appears automatically.
  5. Specify the window title and name. The window corresponds to a ".WDW" file. By default, this file will be created in the main project directory. This name will be used to handle the window.
  6. Validate the window.
  7. Create the controls in the window.
Remark: The main characteristics of the windows are available in the online help. The different types of controls are presented in Controls in practice.

Internal window

An internal window is a window without title bar or status bar that will be directly included in the other windows of your application via the "Internal window" control.
This allows you to include a window (and its code) in another window.
To create an internal window:
  1. Click Create an element in the quick access buttons. The new element window appears: click "Window" then "Window". The window creation wizard starts.
  2. Select the "Internal window" tab.
  3. Select the type of window and the associated skin template.
  4. Validate. The save window appears automatically.

Window based on a window template

WINDEV also allows you to create a window based on a window template. In this case, simply select the desired window template. The window templates contain the graphic elements and code common to all the windows in the application.
To create a window based on a window template:
  1. Click in the quick access buttons. The new element window appears: click "Window" then "Window". The window creation wizard opens.
  2. Select the "Based on a template" tab.
  3. Select the desired template and the associated skin template.
  4. Validate. The save window appears automatically.
Changes made to a window template are automatically applied to all the windows that use the template.
Window templates allow you to keep the style book defined for an application.
Simple operations on a window from the editor
The window editor allows you to perform the following actions on the windows:
  • Open a window in the editor: All you have to do is double-click the window name in the "Project explorer" pane.
  • Resize a window.
  • Save and copy a window.
  • Import and export a window.
  • Change the tab order.
For more details, see the online help.
Main characteristics of a window

Characteristics

A window can include all types of controls. A window can:
  • be resizable: the end user will be able to change the window size. Depending on the anchors defined for each control, the position of the controls can change when the window is resized (see Controls in practice).
  • include a background image: this image is displayed in the window background and the controls will be positioned over the image. You can also define the resize options via the 9-slice scaling mode. For more details, see Window and image.
  • be clipped: the window will have custom shapes (window shaped like a circle, a computer, etc.). For more details, see Clipped window.
  • include a drop-down menu: this menu allows users to quickly access the main functionalities of the application. To create a drop-down menu in a window, go to the "Window" tab, "Bars and menus" group, expand "Main menu" and select "Add main menu". The first option appears in the window. The options can be manipulated via the context menu. Then, the menu options can be manipulated programmatically. For more details, see The menus.
  • include a status bar: the status bar will display the help message associated with the different controls in the window. This bar can also be used to display additional information. For more details, see The status bar.
  • be multilingual: all the languages defined for the window will be available for all its controls. A window can be associated with more languages than the project (windows shared between several projects for example). For more details, see Multilingual applications.
  • be automatically dimmed when it becomes inaccessible. This feature is called DDW, which stands for Dim Disabled Windows. For more details, see Dim disabled windows.
  • allow drag and drop. For more details, see the online help.
  • allow end users to change the UI. For more details, see the online help.
Remark: To force an action on a window, simply set a Button control of this window to "Automatic execution" mode. For more details, see Controls in practice.

Description window

The description window includes several tabs that group all the characteristics that can be configured for the window.
Remark: You can also view and/or change the characteristics of a window in the modifier. For more details, see the online help.

Displaying the characteristics

To open the description window:
  • double-click the window background.
  • select "Description" in the context menu of the window.
  • select the window and press Alt + Enter.

Characteristics by tab

This section presents the different categories of the characteristics displayed by each tab. For more details on the options available in each tab, see the online help.
General tab
The "General" tab allows you to specify the window name and title.
UI tab
The "UI" tab allows you to define the parameters of the window interface:
  • visibility of the window,
  • position of the window,
  • right click, mouse cursor,
  • association with a context menu, etc.
Details tab
The "Details" tab allows you to define the different window settings:
  • type of window
  • Allow end users to modify the UI,
  • animation,
  • automatic closing.
Image tab
This tab allows you to define:
  • the window background image,
  • the image of the sizing handle,
  • the window icon.
Languages tab
This tab shows the languages supported by the window as well as the language displayed in the editor. You can add, change or remove languages.
Notes tab
The "Notes" tab allows you to describe the window. This information will be printed in the technical documentation of the project, window, etc..
Help tab
The "Help" tab allows you to associate a context-sensitive file with the window. This help file contains the context-sensitive help pages displayed by each control.
Style tab
The "Style" tab allows you to define the window style:
  • Show the title bar.
  • Show icons.
  • Show the status bar, etc.
Window and image

Overview

To customize the style of the windows in your applications, WINDEV allows you to use:
  • background colors. Several standard colors can be used. The background color is configured in the "Style" tab of the window description.
  • images. These images are used as the window background. The controls are displayed over the image. The background image can be set in the "Image" tab of the window.
Remark: To customize your windows, you can also use a skin template or a window template.

Setting the background image

The settings are defined in the "Image" tab of the window description.
You can set the background image by selecting a file or by choosing an image from the image catalog. The main image formats that can be displayed are: BMP, JPEG, TIFF or GIF.
You can also drag the image from the file explorer and drop it onto the WINDEV window.
The options available for the image are:
  • Management of multilingual images.
  • Display mode.
  • Position.
  • Transparency.
  • Symmetry.
  • 9-slice scaling.
  • Clipping the window according to the background image.
Management of multilingual images
A different background image can be displayed according to the program runtime language. The display characteristics can be specific to each language.
To define a multilingual background image:
  1. Click the button to the right of the background image name.
  2. In the menu that appears, select "Multilingual".
  3. Choose the appropriate image for each language defined in your window.
  4. Validate. The "Multilingual Value" text appears in the background image field.
Display mode
An image can be displayed in a window according to several display modes. These display modes produce different results:
  • 100%: the image is displayed at 100% from the upper-left corner of the window.
  • 100% Centered: the image is displayed at 100% and is centered in the window.
  • Stretched: the image is stretched to occupy all the space in the window.
  • Tiled: the image is displayed at 100% and is repeated in the background of the window to occupy all the available space.
  • Homothetic: the image is proportionally enlarged to be entirely displayed in the window.
  • Homothetic centered: the image is homothetic and it is centered in the window.
  • Homothetic extended: the image is proportionally enlarged so that the smallest side of the image is entirely displayed in the window.
  • Homothetic centered extended: the image is proportionally enlarged and centered in the window.
  • Homothetic without enlargement: if the image can be entirely displayed in the window, it is displayed at 100%. If the image is larger than the window, it is automatically resized to be displayed in its entirety.
  • Homothetic centered without enlargement: the image is centered without enlargement.
In homothetic mode, the "High-quality display (HQ)" option allows improving the image quality when it is reduced from its original size.
Position
This parameter sets the position of the upper-left corner of the image, relative to the window area.
These options will be kept even if the image is modified programmatically (Image property).
Transparency
The transparency options for the background image are as follows:
  • Transparent magenta: The magenta color in the image will be transparent when the image is displayed in the editor or at runtime.
    Transparency: noneTransparent magenta

  • Top left pixel: all pixels with the same color as the top left pixel of the image will be transparent.
These options will be kept even if the image is modified programmatically (Image property).
Symmetry
The symmetry options are used to change the orientation of the image in the image file. These options will be kept even if the image is modified programmatically (Image property).
Initial image:
Vertical symmetry
Horizontal and vertical symmetry

9-slice scaling
If this option is selected, the 9-slice scaling mode will be used on the background image of the window.
The 9-slice scaling method consists in dividing the background image into 9 areas.
9-slice scaling layout
For each area, you can define whether the section of the image corresponding to the area must be displayed or not: simply click the area to make it visible or invisible. If the image section is not displayed, it will be replaced by the background color of the window or control.
The margins are used to define the size of each area. You have the ability to enter the values of the different areas or to move the line corresponding to the margin.
When resizing the window, only the areas 2, 4, 6, 8 and 5 are resized to occupy the entire space:
Resize in 9-slice scaling mode
The 9-slice scaling method is used to manage the behavior of each area when resizing the window. For each area, the image will be enlarged:
  • by repeating the image that constitutes the area
  • by stretching the image that constitutes the area

Clipped window

WINDEV allows you to clip windows. The windows will have custom shapes (window shaped like a circle, a computer, etc.).
The window shape is defined by an image. In this image, define the color that will be used to define the transparent areas ("Light magenta" for example). All these areas will be invisible when the window is displayed at runtime: the window will be clipped.
Caution: The image borders must be as sharp as possible (no gradient, etc.) to avoid any unexpected display effects when previewing or opening the clipped window.
The window clipping is configured in the "Image" tab of the description window.
Opening a "popup" window

Overview

WINDEV gives you the ability to open "popup" windows.
A "popup" window is a small window that opens above the current window. In most cases, this window allows users to select a value. Then, it returns the value selected by the user to the main window. This window closes automatically when the user clicks inside or outside the popup window.
For example:
Remark: The characteristics of a popup window are as follows:
  • by default, it appears below the control that opens it (above or to the left if there is not enough space below the control).
    The initial position can be changed programmatically.
  • it closes automatically when it loses focus or when Close is called.
  • only the closing icon is displayed in the title bar of the window (if the title bar was defined in the style).
Dim disabled windows
Your application opens several windows at the same time and you don't know which one to use ?
The inactive windows can be automatically dimmed. This feature allows you to always know which window to use.
This feature is called DDW, which stands for Dim Disabled Windows.
For example:
Step 1: You change the customer information and then click "Validate".
Step 2: A window prompts you to confirm or cancel the changes. The main window (in the background) has become unavailable. It is automatically dimmed. You immediately identify the window that must be used.
The DDW features are available for the entire project or they can be customized for each window.
You can also set the DDW feature programmatically.
For more details, see the online help.
Internal window
Internal windows allow you to dynamically share the same UI section in one or more applications.
The UI to be used multiple times is created in an "Internal Window".
This UI can be used in the different windows of your application via the "Internal Window" control.
Remark: The internal window can come from a component.
For more details, see the online help.
Window templates
WINDEV allows you to create window templates. These templates contain the graphic elements and code common to all the windows in your application.
Changes made to a window template are automatically applied to all the windows that use the template.
Window templates allow you to keep the style book defined for an application.
Using window templates in your applications allows you to:
  • create windows more easily.
  • set the layout of the windows.
  • easily update the application style book.
A window template is as easy to create as a window. To create a window from a template, select "Based on a template".
By default, all changes made to the template are applied to the windows that use it. However, it is possible to define particular cases in a specific window by overriding the template elements.
For more details, see the online help.
Events associated with windows

Default events

The following events appear by default in the WINDEV code editor:
  • Global declarations:
    Declaration of variables global to the window.
  • End of initialization:
    Executed when opening the window, before the code for gaining focus. The initialization event of the window controls is executed after this code.
  • Request for refreshing the display:
    Used to group the code for updating the window controls: contents of controls, state (visible, grayed out...), text to refresh, etc, ...
    This event is started upon request by the following functions:
  • Close a child window:
    Run when closing a child window opened from the current window.
  • Closing:
    Executed when closing the window. Remark: resuming the input in one of the window controls in this code prevents the window from closing.
  • Set the Value property (internal windows only)
    Executed when a value is assigned to the Value property in the Internal Window control.
  • Get the Value property (internal windows only)
    Executed when the Value property is used in read mode in the Internal Window control.

Optional events

Several optional events can be added. Simply:
  1. Click "Add other events to" at the bottom of the list of events displayed in the code editor.
  2. The optional events window appears.
  3. Select the optional event(s) to add and validate.
  4. The selected events are automatically added after the default events.
You can manage, for example:
  • gain and loss of focus,
  • changes in one of the window controls,
  • window size changes,
  • mouse hover over the window,
  • left mouse button down, up, double click,
  • right mouse button down, up, double click,
  • mouse wheel, etc.
Context menus
The user can open a context menu by pressing the right mouse button. This menu allows users to easily access the specific features of a window or control.
WINDEV allows you to manage two types of context menus:
  • system context menus managed by Windows. These context menus appear when the user right-clicks on some types of controls (Edit control, Table, etc.). For more details, see Default system context menu.
  • custom context menus managed by WINDEV. These menus are created in the window editor and can be manipulated programmatically.
WINDEV allows you to create custom context menus and associate them with:
  • one or more controls in a window.
  • a window.
For example:

Context menu edit windows

WINDEV allows you to create and modify custom context menus in a specific edit window. To better understand how to manage custom context menus, let's take a look at the vocabulary related to this edit window:

Available features

WINDEV allows you to:
  • Create a custom context menu.
  • Associate a custom context menu with one or more elements (window or controls).
  • Edit a custom context menu.
  • Open the description window of a custom context menu.
  • Delete a custom context menu.
For more details, see the online help.

Default system context menu

The following types of controls have a default system context menu (displayed if no custom context menu is associated with the control):
  • Edit control:
    For more details on the translation of this menu, see the online help.
  • table column:
    For more details on the translation of this menu, see the online help.
  • ActiveX control:Remark: The system context menu displayed depends on the ActiveX program associated with the control.
This default context menu can be disabled from the editor or in the code.
Main menus

Overview

A main menu is always associated with a window. In WINDEV, this menu is displayed below the window title bar. In most cases, the applications contain a menu window. This window only contains a main menu and is used to access the other windows of the application.
For example:

Vocabulary associated with the main menus

To easily handle a main menu, you must be familiar with the following vocabulary:

Available features

WINDEV allows you to:
  • Create a main menu.
  • Edit a main menu.
  • Delete a main menu.
For more details, see the online help.
Special case: Tool menu
WINDEV allows you to automatically insert a "tool" menu ("?" type) in your application. On the "Window" tab, in the group "Bars and menus", expand "Main menu" and select "Add the "?" menu".
Menu options

Overview

A menu (main menu or context menu) includes one or more options and sub-options. Each option runs a WLanguage code.
In the editor, you can handle menu options in the same way for both main menus and custom context menus.
To handle the menu options, simply edit the relevant menu.
To edit (or display in the editor):
  • the main menu of a window:
    • open the relevant window in WINDEV.
    • select one of the menu options. The options and the sub-options are automatically displayed.
  • the custom context menu of a window: on the "Window" tab, in the "Bars and menus" group, expand "Popup menus" and select "<ContextMenuName>".

Handling menu options in the editor

The window editor allows you to easily perform the following operations:
  • Add a menu option.
  • Add a separator.
  • Add a submenu.
  • Delete a menu option.
The menu options can also be defined in the window editor, and their characteristics can be modified via a description window.
The description window of the menu options allows you to:
  • change the option caption.
  • check or uncheck a menu option.
  • associate an image with a menu option.
  • associate a keyboard shortcut with a menu option.
You also have the ability to associate a WLanguage code with a menu option. Only menu options without submenus can start a WLanguage process.
For more details, see the online help.

Handling menu options programmatically

Options are manipulated in the same way in context menus and main menus.
To programmatically manipulate a menu option, use the following syntax:
  • "<OptionName>" if the menu option is handled from the window.
  • "<WindowName>.<MenuName>.<OptionName>" if the option is handled from another window.
The status bar
The status bar of a window can display:
  • an information message linked to the current control. This message can be entered in the "Help" tab of the control description window.
    The message will be displayed in the status bar when the user selects the control.
  • a specific information message. This message is displayed programmatically with Message.
  • a progress bar. This progress bar is displayed programmatically with ProgressBar.
To display different types of information simultaneously, you can divide the status bar into several cells ("Insert a cell" in the context menu of the status bar).

Status bar description window

The description window of a status bar allows you to:
  • add and/or delete cells.
  • change the order of the cells.
  • specify the information that will be displayed for each cell.
For more details, see the online help.

Type of cell in the status bar

The type of allows you to display:
  • The progress bar. This progress bar will be run when using ProgressBar.
  • The help message associated with the control that has focus. This help message is defined in the "Help" tab of the control or in the code using the Message property.
  • The date of the current computer.
  • The time of the current computer.
  • The cursor position in the current Edit control ("Column and row of the caret" option).
  • The status of the Caps Lock key that indicates whether it is enabled or not.
  • The status of the Insert key, which indicates if it is enabled.
  • The name of the current user in an application that uses the User Groupware.
Two specific options are also available:
  • Programmatically: The information displayed in the status bar is specified programmatically (using Message for example).
  • The update event: The "Whenever updating" event is automatically associated with the cell of the status bar. This event is run on a regular basis. This event can contain the elements that will be displayed in the cell, for example.

Characteristics of the cells in the status bar

The status bar description window also allows you to define the display characteristics of the cells.
  • The position of the cell in the status bar.
  • The background image of the cell.
  • The background color of the cell.
  • The width of the cell.
  • Whether the cell is editable.
  • The anchors of the cell (its behavior when the window is resized).
All these characteristics can be handled programmatically via the properties available for the cells in the status bars.
Previous pageTable of contentsNext page
Comments
Click [Add] to post a comment

Last update: 09/15/2023

Send a report | Local help