PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Creating a window
  • Creating blank windows
  • Internal window
  • Window based on a window template
  • Simple operations on a window from the editor
  • Main window characteristics
  • Characteristics
  • Description window
  • Displaying the characteristics
  • Characteristics by tab
  • Window and image
  • Overview
  • Configuring the background image
  • Clipped window
  • Opening a "popup" window
  • Overview
  • Dim disabled windows
  • Internal window
  • Window templates
  • Events associated with windows
  • Events managed by default
  • Optional events
  • The popup menus
  • Window for editing popup menus
  • Available features
  • Default system popup menu
  • The main menus
  • Overview
  • Vocabulary associated with the main menus
  • Available features
  • The menu options
  • Overview
  • Managing the menu options in the editor
  • Handling the menu options by programming
  • The status bar
  • Description window of status bar
  • Type of cell in the status bar
  • Characteristics of a cell in the status bar
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
8. The windows in practice
Previous pageTable of contentsNext page
The purpose of a window is to display, present or type information. This information can come from data files found in an analysis, external files, queries, etc.
WINDEV proposes several solutions to create the project windows:
  • Create a blank window with the wizard.
  • Build all the application windows from the analysis description.
  • Create a window from the analysis description (with or without its code).
  • Create standard windows.
  • Create windows based on a template, etc.
Regardless of the method used, the window can be modified after its creation: you have the ability to add, modify or delete controls and to modify the window characteristics.
See The controls in practice for more details.
This chapter presents the following topics:
Creating a window
WINDEV allows you to create several types of windows:
  • Blank windows, without control.
  • Windows created by RAD/RID.
  • Internal windows. These windows can be used in the "Internal Window" controls.
  • Windows based on a window template.
  • Windows imported from a non-WINDEV application.
This paragraph presents the creation of blank windows, internal windows or windows based on a template. See the online help for more details.

Creating blank windows

To create a blank window:
  1. Click among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Window". The window creation wizard starts.
  2. Choose the "Blank" type.
  3. Specify the skin template of window.
  4. Validate the window creation. A blank window is created in the editor. The window for saving an element 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. Confirm the window save.
  7. Create the controls in the window.
Note: The main characteristics of windows are presented in the online help. The different types of controls are presented in The controls in practice.

Internal window

An internal window is a window without title bar and without 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 among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Window". The wizard for window creation starts.
  2. Select the "Internal window" tab.
  3. Select the type of window and the associated skin template.
  4. Validate. The window for saving an element appears automatically.

Window based on a window template

WINDEV also allows you to create a window based on a window template. In this case, all you have to do is select the requested window template. The window templates contain all the graphic elements and the code common to all windows found in your application.
To create a window based on a window template:
  1. Click among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Window". The window creation wizard starts.
  2. Select the "Based on a template" tab.
  3. Select the requested template and the associated skin template.
  4. Validate. The window for saving an element appears automatically.
The modifications performed in a window template are automatically applied to all windows that use this template.
A window template allows you to comply with the style book defined for an application.
Simple operations on a window from the editor
The window editor allows you to perform the following operations 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.
  • Modify the tab order.
See the online help for more details.
Main window characteristics

Characteristics

A window can include all types of controls. A window can:
  • be resizable: the end-user will be able to increase or reduce the window size. Depending on the anchoring characteristics defined for each control, the position of controls in the window can change when the window is resized (see The controls in practice).
  • include a background image: this image is displayed in window background and the controls are superimposed on this image. You also have the ability to define the characteristics of resize operation via the 9-image mode. See Window and image for more details.
  • be clipped: the window will have custom shapes (window shaped like a circle, a computer, etc.). See Clipped window for more details.
  • include a drop-down menu: this menu allows the users to quickly access the main application features. To create a drop-down menu in a window, go to the "Window" pane, "Bars and menus", expand "Main menu" and select "Add the main menu". The first option is displayed in the window. The options can be handled via the popup menu of options. Then, the menu options can be handled by programming. See The menus for more details.
  • include a status bar: this status bar will display the help message associated with the different window controls. This status bar can also be used to display additional information. See The status bar for more details.
  • be multilingual: all languages defined for the window will be available for all window controls. A window can be associated with more languages than the project (windows shared between several projects for example). See Multilingual applications for more details.
  • be automatically grayed when it becomes inaccessible. This feature is called DDW, which stands for Dim Disabled Windows. See Dim disabled windows for more details.
  • allow drag and drop. See the online help for more details.
  • allow the interface to be modified by the end user. See the online help for more details.
Note: To force an action on a window, all you have to do is define a button of this window in "Automatic execution" mode. See The controls in practice for more details.

Description window

This window includes several tabs that group all configurable window characteristics.
Note: You also have the ability to see and/or modify the window characteristics in the modifier. See the online help for more details.

Displaying the characteristics

To display the description window:
  • double-click the window background.
  • select "Description" from the popup menu of window (right mouse click).
  • select the window and press Alt + Enter.

Characteristics by tab

This paragraph presents the different categories of characteristics displayed by each tab. See the online help for more details about the characteristics found in each tab.
General tab
The "General" tab is used to specify the window name and title.
GUI tab
The "GUI" tab is used to define the parameters of window interface:
  • visibility of window,
  • position of window,
  • management of right click, of mouse cursor,
  • association with a popup menu, etc.
Details tab
The "Details" tab is used to define the different window parameters:
  • interface modification by the end user,
  • animation,
  • automatic closing.
Image tab
This tab is used to configure:
  • the background image of window,
  • the image of sizing handle,
  • the window icon.
Languages tab
This tab is used to find out the languages supported by the window as well as the language displayed in the editor. You have the ability to add, modify or delete languages.
Notes tab
The "Notes" tab is used to describe the operating mode of window. This information will be printed in the program documentation (project documentation, window documentation, etc.).
Help tab
The "Help" tab is used 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 is used to define the window style:
  • Presence of title bar.
  • Presence of different icons.
  • Presence of status bar, etc.
Window and image

Overview

To optimize the style of your screens, WINDEV allows you to use:
  • background colors. Several standard colors can be used. The background color is configured in the "Style" tab of the description window of window.
  • images in your windows. These images are used as background image of the window. Your controls are displayed above this image. The configuration of the background image is performed in the "Image" tab of window.
Notes:
  • If necessary, WINDEV also gives you the ability to use the XP/Vista style and theme in your windows. See the online help for more details.
  • To customize your windows, you also have the ability to use a skin template or a window template.

Configuring the background image

The configuration is performed in the "Image" tab of window description.
You h ave the ability to select the file corresponding to the background image or a catalog image. The main image formats that can be displayed are: BMP, JPEG, TIFF or GIF.
You can also Drag and Drop the image file found in the explorer toward the WINDEV window.
The options available for the image are:
  • Management of multilingual images.
  • Display mode.
  • Position.
  • Transparency.
  • Symmetry.
  • 9-image mode.
  • Clipping the window according to the background image.
Management of multilingual images
A different background image can be displayed according to the runtime language of program. The display characteristics can be specific to each language.
To define a multilingual background image::
  1. Click the icon found on the right of the name of background image.
  2. Select the "Multilingual" option.
  3. Choose the appropriate image for each language defined in your window.
  4. Validate. The "Multilingual value" caption appears in the control for defining background images.
Display mode
An image can be displayed in a window according to several display modes. These display modes produce different effects:
  • 100%: the image is displayed at 100% from the top left corner of Image control.
  • Centered: the image is displayed at 100% and it is centered in the Image control.
  • Stretched: the image is stretched to occupy the entire surface of Image control.
  • Tiled: the image is displayed at 100% and it is tiled in the Image control to occupy the entire surface.
  • Homothetic: the image is proportionally enlarged to be entirely displayed in the Image control.
  • Homothetic extended: the image is proportionally enlarged in order for the smallest image side to be entirely displayed in the Image control.
  • Homothetic centered: the image is homothetic and it is centered in the Image control.
  • Homothetic centered extended: the image is extended and it is centered in the Image control.
  • Homothetic without increasing size: if the image can be entirely displayed in the window, it is displayed at 100%. If the image is bigger than the window, it is automatically reduced proportionally in order to be entirely displayed.
  • Homothetic centered without enlargement: the image is centered and homothetic without enlargement.
The "High Quality Display" option is used to improve the quality of the image in homothetic mode when this one is reduced in relation to its initial size.
Position
This parameter is used to define the position of the top left corner of image in relation to the window surface.
These options will be stored even if the image is modified by programming (..Image).
Transparency
The transparency options for the background image are as follows:
  • Transparent magenta: The magenta color found in the image will be transparent when the image is displayed in the editor or at run time.
Transparency: noneTransparent magenta

  • Top left pixel: all pixels with the same color as the top left pixel of image will be transparent.
These options will be stored even if the image is modified by programming (..Image).
Symmetry
The symmetry options are used to change the orientation of image found in the image file. These options will be stored even if the image is modified by programming (..Image).
Initial image:
Symmetry
vertical
Symmetry
horizontal
Symmetry
horizontal
and vertical
XXXIMAGEXXX

9-image mode
If this option is selected, the 9-image mode will be used on the background image of window.
The 9-image mode consists in dividing the background image into 9 areas.
For each area, you can define whether the section of the image corresponding to the area must be displayed or not (check the name of area to display it). If the image section is not displayed, it will be replaced by the background color of window.
Margins are used to define the size of each area.
When resizing the window, only areas 2, 4, 6, 8 and 5 change size to fit the entire space:
The 9-slice scaling mode is used to manage the way each area works when resizing the window.
For each area:
  • 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 displaying the window at run time: 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 of window.
Opening a "popup" window

Overview

WINDEV gives you the ability to open "popup" windows.
A "popup" window corresponds to a small window that is opened above the current window. In most cases, this window allows the user to perform a selection. This window returns the value selected by the user to the main window. This window is automatically closed as soon as a left mouse click is performed (inside the popup window or not).
For example:
Note: The characteristics of a popup window are as follows:
  • opened by default below the control that opens the window (or above the control or on the left of the control if there is not enough space below the control).
    The opening position can be modified by programming.
  • automatic closing as soon as the window loses focus or during the call to Close.
  • only the closing icon is displayed in the title bar of 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 modify the information regarding a customer then you click the "Validate" button.
Step 2: A window asks you to confirm or cancel these modifications. 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 act on the DDW feature by programming.
See the online help for more details.
Internal window
The internal windows are used to dynamically share an interface section inside one or more applications.
The interface that will be used several times is created in an "Internal Window" window.
This interface is used in the different windows of your application via the "Internal window" control.
Note: The window to merge can come from a component.
See the online help for more details.
Window templates
WINDEV allows you to create window templates. These templates contain the graphic elements and the code common to all the windows found in your application.
The modifications performed in a window template are automatically applied to all windows that use this template.
A window template allows you to comply with the style book defined for an application.
Using window templates in your applications allows you to:
  • simplify the creation of application windows.
  • simplify the layout of application windows.
  • simplify the update of application style book.
A window template is as easy to create as a window. To create a window from a template, all you have to do is choose "Based on a template".
By default, any modification performed in the template is applied to the windows that use it. However, special cases can be managed in a specific window by overloading the template elements.
See the online help for more details.
Events associated with windows

Events managed by default

WINDEV manages the following events by default (in order of appearance in the code editor):
  • Global declarations:
    Declaring the variables global to the window
  • End of initialization:
    Run when opening the window, before the code for taking focus. The initialization event of window controls is run after this code.
  • Closing:
    Run when closing the window. Note: resuming the input in one of the window control in this code prevents the window from closing.
  • Request for refreshing the display:
    Used to group the code for updating the window controls: content of controls, status (visible, grayed, etc.), caption to refresh, etc, ...
    This event is started upon request by the following functions:
  • Assigning the ..Value property (internal window only)
    Run when using the ..Value property in assignment on the Internal Window control.
  • Retrieving the ..Value property (internal window only)
    Run when using the ..Value property in read-only on the Internal Window control.

Optional events

Several optional events can be managed. Simply:
  1. Click on the link "Add other processes to" at the bottom of the list of events displayed in the code editorClick on "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:
  • the gain and loss of focus,
  • the modification of one of the window controls,
  • the modification of window size,
  • the window rollover with the mouse,
  • the left mouse button down, up, with double click,
  • the right mouse button down, up, with double click,
  • the mouse wheel, etc.
The popup menus
A popup menu can be opened by the user via a right mouse click. This menu allows the users to easily access the specific features of a window or window control.
WINDEV allows you to manage two types of popup menus:
  • the system popup menus managed by Windows. These popup menus are displayed during a right click on some types of controls (edit control, table, etc.). See Default system popup menu for more details.
  • the custom popup menus managed by WINDEV. These menus are created in the window editor and they can be handled by programming.
WINDEV allows you to create custom popup menus and to associate these popup menus:
  • with one or more controls found in a window.
  • with a window.
For example:

Window for editing popup menus

WINDEV allows you to create and modify custom popup menus in a specific edit window. To better understand the management of custom popup menus, let's take a look at the vocabulary linked to this edit window:

Available features

WINDEV allows you to:
  • Create a custom popup menu.
  • Associate a custom popup menu with one or more elements (window or controls).
  • Edit a custom popup menu.
  • Display the description window of a custom popup menu.
  • Delete a custom popup menu.
See the online help for more details.

Default system popup menu

The following types of controls have a default system popup menu (displayed if no custom popup menu is associated with the control):
  • an edit control:
See the online help for more details.
  • a table column:
See the online help for more details.
  • an ActiveX control:
Note: The system popup menu displayed depends on the ActiveX associated with the control.
an HTML control:
Note: The system popup menu displayed is the one of Internet Explorer. It depends on the object that is selected in the page (image, text, link, etc.).
This default popup menu can be disabled from the editor or by programming.
The main menus

Overview

A main menu is necessarily associated with a window. This menu is displayed below the title bar of the window in WINDEV. In most cases, the applications contain a menu window. This window only contains a main menu and it is used to access the other application windows.
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.
See the online help for more details.
Special case: Utility menu
WINDEV allows you to automatically insert a "tool" menu ("?" type) in your application. On the "Window" pane, in the group "Bars and menus", expand "Main menu" and select "Add the "?" menu".
The menu options

Overview

A menu (main menu or popup menu) includes one or more options and sub-options. Each option is used to run a WLanguage code.
In the editor, the operations performed on the menu options are the same for a main menu and for a custom popup menu.
To handle the menu options, all you have to do is 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.
  • a custom popup menu of a window: on the "Window" pane, in the "Bars and menus" group, expand "Popup menus" and select "<NamePopupMenu>".

Managing the 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 sub-menu.
  • Delete a menu option.
The options can also be handled in the window editor and their characteristics can be modified via a description window.
The description window of menu options allows you to:
  • modify the caption of option.
  • 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 the menu options without sub-menu can start a WLanguage process.
See the online help for more details.

Handling the menu options by programming

The method for handling a menu option is identical for the popup menus and for the main menus.
To handle a menu option by programming, use the following notation:
  • "<OptionName>" if the menu option is handled from the window.
  • "<WindowName>.<MenuName>.<OptionName>" if the option is handled from another window.
The status bar
In the status bar of a window, you have the ability to display:
  • an information message linked to the current control. This message is entered in the "Help" tab of the description window of control.
    The message will be displayed in the status bar when the control is selected by the user.
  • a specific information message. This message is displayed by programming with Message.
  • a progress bar. This progress bar is displayed by programming with ProgressBar.
To display various information at the same time, you have the ability to divide the status bar into several boxes ("Insert a cell" from the popup menu of status bar).

Description window of status bar

The description window of a status bar is used to:
  • add and/or delete cells.
  • modify the order of cells.
  • specify the information that will be displayed for each cell.
See the online help for more details.

Type of cell in the status bar

The type of cell is used to display:
  • The progress bar. This progress bar will be run when using ProgressBar.
  • The help message associated with the control with focus. This help message is defined in the "Help" tab of control or by programming using ..Message.
  • The date of current computer.
  • The time of current computer.
  • The cursor position in the current edit control (Column and Row of Caret).
  • The status of Shift key, indicating whether the Caps Lock key is enabled or not.
  • The status of Ins key, indicating whether the Ins key is enabled or not.
  • The name of current user in an application that is using the user groupware.
Two specific options are also available:
  • By programming: The information displayed in the status bar is specified by programming (Message for example).
  • The update event: The "Whenever updated" 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 a cell in the status bar

The description window of status bar also allows you to define the display characteristics of cells found in the status bar.
  • 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 anchor of the cell (its operating mode when resizing the window).
All these characteristics can be handled by programing via the properties available for the cells in the status bars.
Previous pageTable of contentsNext page
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment