PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WINDEV 26 feature!
  • In this lesson you will learn the following concepts
  • Overview
  • Opening project
  • My first window: entering and displaying data
  • Overview
  • Creating the window
  • Entering and displaying a value
  • Improving the window
  • WINDEV: Main concepts and terminology
  • Main concepts
  • Terminology
Lesson 1.2. My first window
In this lesson you will learn the following concepts
  • How to create a window.
  • How to enter and display text.
Lesson duration

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
To start working with WINDEV, we are going to create a window.

Note

Windows make it possible to display or enter information on the screen. The user can directly interact with the windows via controls, buttons, etc.
We will see how to:
  • Open a project,
  • Create and save a window,
  • Enter and display data.
These first operations will present the main concepts for developing with WINDEV. Full topics will be presented in the following sections.

Opening project

  • Start WINDEV 26. Go the WINDEV home page if necessary: press Ctrl + <.
  • Open the "WD My First Windows" project.
    To do so, go to the home page and click "Tutorial", then in "Part 1 - Lesson 1.2. My first window", double-click "My first windows (Exercise)".

Important

In this section, we will focus on the creation of simple windows. The "WD My First Windows" project is an empty project that was already created. In another lesson, we will see how to create a project.

Answer

A corrected project is available. This project contains the different windows created in this lesson. To open the corrected project, go to the home page and click "Tutorial", then in "Part 1 - Lesson 1.2. My first window", double-click "My first windows (Answers)".
My first window: entering and displaying data

Overview

We will create the following window:
My first window
This window allows users to enter their first name and display a welcome message with the "Display" button.
You may think this is too basic but we advise you to create this window. You will be surprised by how intuitive and easy it is to use the WINDEV editor. Furthermore, this window will allow you to discover concepts that are fundamental for the rest of this tutorial.

Creating the window

  • To create the window:
    1. Click Create an element in the quick access buttons of the WINDEV menu:
      Quick access buttons
    2. The element creation window appears. This window is used to create all elements that can be associated with a project.
    3. Click "Window" then "Window". The window creation wizard starts.
    4. Select "Blank" in the list of "standard" windows displayed on the left. The "Phoenix" skin template is selected by default in the list of skin templates on the right. You can choose another skin template from the list.
      Window creation wizard

      Note

      Skin templates allow you to quickly create outstanding interfaces. A skin template defines the window style as well as the style of all controls that will be used in this window. Thus, the interface will always be cohesive and beautiful.
    5. Validate the window creation wizard ("OK" button). The window is automatically created in the editor. The save window appears. This window is used to specify:
      • The element title. This title will be displayed in the window title bar.
      • The element name. This name corresponds to the logical element name. This name will be used to handle the element by programming.
      • The element location. This location corresponds to the directory in which the element is saved.
    6. Enter "My first window" in the title of the element (in this case, the element corresponds to the WINDEV window). The element name ("WIN_My_first_window") is filled automatically.

      Note

      Let's take a look at the window name proposed by WINDEV: this name starts with the letters "WIN_". This prefix is automatically added because the project uses a code style.
      The code style is used to define a prefix for each type of object, allowing you to quickly identify the element:
      • a window starts with "WIN_",
      • a Button control starts with "BTN_",
      • etc.
      If you do not want to use this code style, you can simply disable it: on the "Project" pane, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
    7. In this example, we will use a shorter window name: replace "WIN_My_first_window" by "WIN_Welcome".
      Save an element
    8. Click "OK" to validate the information shown in the save window.

Entering and displaying a value

To enter and display a value, you must create:
  • a control where users will enter their first name. This type of control is an "Edit control".
  • a Button control to display the first name entered.
  • To create the edit control:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Edit" (click the arrow):
      Creating an edit control
      A list of preset edit controls is displayed.

      Note

      This list displays different edit controls that can be used directly. These controls are also available in the Smart controls. The different controls can be tested directly: simply click the "GO" icon that appears when the control is hovered over.
    2. In the search box at the top of the list of preset controls, enter "Simple text edit". The corresponding control appears in the list.
    3. Click the "Simple text edit" control. The control will follow the movement of the mouse.
    4. Move the mouse to the position where the control is to be created (e.g. at the top of the window). To drop the control in the window, simply click again.
    5. Right-click the control that was just created. The context menu of the control appears. Select "Description" in the context menu. The edit control description window appears.
    6. Enter the following control details:
      Edit control description
      • The control name: "EDT_FirstName" (1).
      • The control caption: "First name" (2).
      • This control type: text (3).
    7. Validate the control description window ("OK"). The control appears in the window editor.
The control caption is truncated in the editor.
  • To display the control properly:
    1. Select the control (click on it).
    2. Right-click to open the context menu and select "Adapt size".
    3. The control is immediately resized and displays the entire caption.
    Remark: You can also manually resize the control input area:
    1. Select the control.
    2. Place the cursor on one of the handles on the right of the control (small square). The cursor turns into an arrow.
    3. Hold down the left mouse button to resize the control.
    4. Release the mouse button once the control is resized.
  • To create the "Display" Button control:
    1. On the "Creation" pane, in the "Usual controls" group, click Create a Button control.
    2. Move the control in the window. Click where you want to create the Button control (e.g., on the right of the Edit control).
    3. Click the control that was just created. The text displayed in the control becomes editable.

      Tip

      To quickly edit the control caption, you also have the ability to:
      • Select the control.
      • Press the Enter or Space key.
    4. Enter the caption: "Display". The name of the Button control automatically becomes "BTN_Display".
    5. The control name is displayed:
      • in the tooltip that appears when you hover the control:
        Tooltip when hovering the control
      • in the editor status bar:
        Status bar

        Note

        If you use a 4K screen, the elements in the editor are automatically zoomed. The zoom level used depends on the Windows display settings.
  • We are going to display the text typed in a dialog box (a mini-window proposed by the system). To do so, we will use a WLanguage function: Info.

    Note

    WLanguage is the programming language used by WINDEV. It is a 5th-generation language (5GL) that includes highly sophisticated commands.
    Main WLanguage conventions
    • WLanguage doesn't use end of line characters.
    • The '//' characters are used to comment out lines of code. These lines of code are not interpreted. They provide better code readability.
    • In the WLanguage functions, the parameters passed to the function are enclosed in brackets.
    • Parameters are separated by commas.
    • WLanguage is not case sensitive.
    • "Spaces" are not interpreted.
    • Points are used as decimal separators.
    • WLanguage functions are in English. They are also available in French.
    • A prefix is used to group WLanguage functions by family ("Win" for functions that manipulate windows, "email" for functions that manipulate emails, etc.).
    1. Select the "Display" Button control with the mouse.
    2. Open the context menu of the control (right click).
    3. Select "Code". This option opens the WINDEV code editor. This editor is used to type all WLanguage statements.

      Note

      The code editor proposes different events for each type of control. These are the WLanguage events related to the control.
      Thus, two events are displayed for the Button control:
      • Initializing,
      • Click, run when the user clicks the button.
      Remark: Additional events can be added if necessary.
    4. Write the following WLanguage code in the "Click BTN_Display" event:
      Info("Hello ", EDT_FirstName)
Remark on the assisted input: When the first two characters are typed, WINDEV opens a list with all the WLanguage elements that contain these characters. The assisted development is a very powerful feature. No more mistakes when entering the name of an element: the syntax errors are reduced. Simply select the desired word and press Enter to validate. You can focus on the algorithm.

Note

This is why the code style is so important. All elements handled in the application code use the same standard so they can be easily identified when writing code.

Note

When writing this code in the code editor, you may have noticed that the different elements use different colors. This is called syntax highlighting. The code editor allows you to easily identify the different elements handled by the code. When the code editor is in dark theme:
  • the WLanguage functions are colored in blue,
  • the character strings (between quotes) are colored in purple,
  • the names of controls are colored in cyan.
Info displays the message passed as a parameter on one or more lines. Our message is built from the text "Hello " and from the value of "EDT_FirstName" control. The "," sign separates the parameters of Info. Each parameter is displayed on a different line

Note

In this example, the text is displayed in a system window but it can also be displayed it in a window created with WINDEV.
  • Let's now test the window:
    1. Click Test window in the quick access buttons (or press F9).
    2. The window that was just created is automatically saved and then executed.
      My first window
    3. Type your first name.
    4. Click "Display".
    5. Validate the system window that is displayed (click the "OK" button).
Any developer knows that running a program test can be a long and tiresome job. In WINDEV, a SINGLE CLICK allows you to run the test of window, report or procedure currently created. This is both simple and fast!
  • Close the test window: click the window close button ("x" button in the title bar).
  • The WINDEV editor is redisplayed. Close the code editor: on the "Home" pane, in the "General" group, click "Close".
  • An error is displayed in the "Compilation errors" pane. This error indicates that the window can be resized while no anchoring is defined. Don't worry: this error will be processed in the next paragraph.

Note

When developing an application, WINDEV informs you of the possible problems that may occur in your application via the "Compilation errors" pane.
This pane presents different types of errors:
  • Compilation errors: The errors indicate a major problem (programming errors, etc.). The project test or execution will not operate.
  • Compilation warning: The warnings indicate programming cases that may trigger unexpected behaviors.
  • Compilation information: The information explains the compiler choices or provides tips for improving the code.
  • UI errors: The UI compilation errors inform you of the possible problems detected in your interfaces: images not found, truncated text, etc.
  • Programming standard errors: These errors indicate when the programming standard selected in the project description is not respected (“Compilation” tab).
  • Automatic test errors: These errors indicate a problem when running automatic tests.

Improving the window

During this first test, you have noticed that:
  • your window is too big,
  • your window can be resized but it only contains two controls,
  • the first name is displayed with the case used in the edit control. We are going to force the use of an uppercase letter at the beginning of the word.
We are going to improve the interface of this window.
  • To reduce the window size in the editor:
    1. Click the window: handles appear around the window.
    2. Click the handle at the bottom right and reduce the size of the window by holding down the left mouse button.
  • To prevent the window from being resized at runtime:
    1. Double-click the window. The description window appears.
    2. In the "General" tab, uncheck "Resizable" (simply click on the option).
    3. Validate.

      Note

      Tips for improving the interface and the ergonomics will be presented in a next chapter.
  • Run the test of this window to see the result at runtime.
  • Close the test window to go back to the editor.
  • We are now going to force the use of an uppercase letter when entering and displaying the first name.

    Note

    By default, characters will be entered in upper or lower case depending on the state of the CAPSLOCK key. This type of input can cause problems when performing a search for example.
    WINDEV lets you define an input mask on a control. The input mask is used to automatically format the value entered without coding.
  • To modify the input mask:
    1. Double-click the "First name" control. The control description window appears.
    2. In the "General" tab, expand the "Input mask" list and choose "1st letter in caps.".
      Input mask
    3. Validate the control description window.
    4. In the editor, the mask name is automatically displayed in the control.
  • Run the test of this window to see the result at runtime.
    Window test
Your first window was successfully created. In the rest of this lesson, we are going to discover new WINDEV concepts.
  • Validate the message and close the test window (click the "X" icon in the upper-right corner of the window). The editor is redisplayed.
  • Close the "WIN_Welcome" window displayed in the editor: on the "Home" pane, in the "General" group, click "Close".

Note

An example for each type of control
Two types of controls have been used in this lesson: an edit control and a Button control.
WINDEV offers more than fifty controls. Several unit examples are available, allowing you to discover the use of each type of control.
  • To open a unit example:
    1. Go to the WINDEV home page (press Ctrl + <).
    2. Click "Open an example" if necessary.
    3. The list of complete, training and unit examples is displayed.
    4. In the "Unit examples" category, select and and double-click the desired example (e.g. "The TreeView control"): the corresponding window is automatically opened in the editor.
Remark: To make things easy, all the unit examples of the controls contain the name of the control: TreeView, Camera, etc.
  • Close the project: on the "Home" pane, in the "General" group, click "Close" and select "Close project".
WINDEV: Main concepts and terminology
After these exercises, let's take a look at the main concepts and the terminology specific to WINDEV.

Main concepts

WINDEV allows you to easily create an application. But what is an Application?
An application is a tool used to automatically perform tasks and actions. An application includes an executable program (or a set of executable programs), libraries, data files, ...
An executable program is a file made of elements that can be directly handled by the user (windows, report views, etc.). It is what the end user of an application starts.
To create an executable, WINDEV proposes to create a project. A project links and organizes the different program elements. The executable program will be created from the project.
If your application uses data, WINDEV allows you to define the database structure via the analysis. The WINDEV analysis contains the description of the data files (also known as "Tables" in several databases). These data files will contain the application data.

Note

Describing the data files in the analysis does not mean that they are created. The data files are physically created when the application is run.
One or more WINDEV projects can be linked to the same analysis. In this case, we talk of shared analysis. For example, an application for business management can be divided into several executable modules. Each module uses the same analysis (at runtime, each executable can also use the same data files).
WINDEV project and Analysis

Terminology

As already seen, a WINDEV project (linked to an analysis if necessary) is used to create an application. Before we actually start working with WINDEV, let's go back to the vocabulary used in WINDEV. Some terms are specific to WINDEV and may not have the same meaning as the terms used in other development environments.
The following terms are used in the analysis:
  • Data file: The analysis is used to describe the structure of database files. A "Data file" corresponds to a "table" in some databases.
    In WINDEV, "Table" represents a graphic object used to see the content of a data file in a table and/or to enter rows. A table can be used to type the order details for example.
  • Record: A record is sometimes called row. A data file record corresponds to all items defined for the data file.
  • Item: In the analysis, an item represents a section of a data file. All items found in a data file are used to define the structure of a record.
  • Key/Index: With WINDEV and its HFSQL database, the concept of index is linked to the concept of key. The concept of key is part of the item characteristics. Keys are used to improve the speed for accessing data and to simplify loop through operations on data files. In WINDEV, if an HFSQL data file includes several key items, a single index file will be created at runtime.
The following terms are used in windows and reports:
  • Window: Windows make it possible to display or enter information on the screen. Windows are also called "Screens" or "Dialog boxes". The user can directly interact with the windows via controls, buttons, etc.
  • Report: Reports are used to get a custom view of information. This information can come from the database, text files and controls in the windows, ... Reports can be previewed, printed on paper, generated in PDF or HTML, etc.
  • Control: "Control" is the term used to identify the different graphic objects displayed in a window or report.
  • Skin template: Skin templates are used define the application style: visual appearance of windows, buttons, controls, etc.
  • Style: Styles group the graphic characteristics of an element: background image, border, font, ... The styles of the different elements in the interface of a WINDEV application are grouped in a style sheet.

Important

In an application, the "CustomerName" entity can correspond to:
  • the name of a window control,
  • the name of a report control,
  • the item of a data file,
  • a variable defined by the developer.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 26
Comments
Click [Add] to post a comment