ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
New WINDEV 2024 feature!
Help / WINDEV Tutorial / Tutorial - WINDEV overview
  • Lesson 2 - My first window
  • Overview
  • Opening the example project
  • First window: entering and displaying data
  • How to create the window?
  • Entering and displaying a value
  • Improving the window
  • Changes to be made to the window
  • Changes to be made to the controls
  • To sum up
  • Further information

Tutorial - WINDEV overview

Lesson 2 - My first window
We will cover the following topics:
  • How to create a window.
  • How to enter and display text.
Durée de la leçon 30 min
Overview
To get started with WINDEV, we'll simply create a window, test it and enter some data. These first steps will introduce you to the basics of WINDEV development. In the following tutorials, you'll be able to tackle more comprehensive subjects.
Reminder: Windows make it possible to display or enter information on the screen. The user can directly interact with the windows through graphic objects known as "controls", such as Edit controls, buttons, etc.

Opening the example project

Open the "WD My first windows" project:
  1. Go to the WINDEV home page (Ctrl + <).
  2. Click "Tutorial", then in "Tutorial - Discover WINDEV (Lesson 2): My first window", double-click "My first windows - Exercise".
In this lesson, we will focus on how to create simple windows. Therefore, we will work with a ready-to-use project that contains no elements.
We will see how to create a project in Creating a WINDEV project and its analysis.
First window: entering and displaying data
Here's the window we are going to create:
My first window
This window allows users to enter their first name and display a welcome message with the "Display" button.

How to create the window?

You can create a window directly from the quick access buttons:
  1. Click Create an element in the quick access buttons:
    Quick access buttons
    The new element window appears. This window allows you to create all the elements of the project.
  2. Click "Window" then "Window". The window creation wizard opens.
  3. Select "Blank".
    Window creation wizard
  4. Confirm ("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 programmatically.
  • The element location. This is where the element will be saved.
In this example:
  1. 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 automatically filled in.
    Save window
  2. Confirm ("OK" button)
Key information:
The window name (that will be used in the code) is created automatically from the element title. If you want, you can simply write a name different from the element title.

Entering and displaying a value

The first window has now been created. We are now going to create the different window controls. These controls will be used to display or enter data.
The window will contain the following controls:
  • a control where users will enter their first name. To do so, we will use an "Edit control".
  • a Button control to display the first name entered.
First control: Edit control
Let's start by creating the Edit control where the user will enter their name:
  1. On the "Creation" tab, in the "Usual controls" group, expand "Edit" (click the arrow):
    Create an Edit control
    A list of preset edit controls is displayed.
    Key information
    This list contains a number of ready-to-use Edit controls (Smart controls). To test any control, simply click the "GO" icon that appears when hovering over each option.
  2. In the search box at the top of the list of preset controls, enter "Plain text edit". The corresponding control appears in the list.
  3. Click the "Plain text edit" control. The control will follow the mouse cursor.
  4. Click where you want to create the control, for example, at the top of the window. The control appears with a box and sizing handles to indicate that it is selected.
    Selected control
How to select a control?
Simply click a control to select it. Selection handles then appear around the control. If the control is already selected, you can click the control again to edit the caption (we will cover this later in this tutorial).
By default, the caption of this new control is "Text". Let's change this caption to "First name". To do this, we'll use the control description window.
  1. Right-click the control previously created. The context menu of the control appears.
  2. In this context menu, select "Description". The Edit control description window appears.
  3. Enter the following control details:
    Edit control description
    • The control name: "EDT_FirstName" (1).
    • The control caption: "First name" (2).
    • The control type: text (3).
  4. Click OK to confirm changes in the control description window. The control appears in the window editor.
The text of the Edit control is modified in the window editor, but appears truncated.
Truncated text
To display the control properly:
  1. Select the control, if necessary
  2. Right-click to open the context menu and select "Adapt size".
  3. The control is immediately resized and displays the entire caption.
    Resized control
Second control: Button
To create the "Display" Button control:
  1. On the "Creation" tab, in the "Usual controls" group, click Create a Button control.
    Key information:
    To create any control in WINDEV, go to the "Creation" tab: this tab contains all the available controls.
  2. Position the control in the window: click where you want to create the Button control (e.g., to the right of the Edit control).
  3. Click the control that was just created. The text displayed in the control becomes editable.
  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 displayed when hovering over the control
    • in the editor status bar:
      Status bar

Displaying data
Let's display the text entered by the user using a dialog box (a small window defined by the operating system). To do so, we will use the Info WLanguage function.
  1. Select the "Display" Button control.
  2. Right-click the control to open its context menu.
  3. Select "Code". This option opens the WINDEV code editor.
    The code editor lets you write all WLanguage instructions, organized in events associated with controls.
  4. Write the following WLanguage code in the "Click BTN_Display" event:
    Info("Hello ", EDT_FirstName)
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.
First test
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.
    Window test
  3. Type your first name.
  4. Click "Display".
  5. Click "OK" to confirm and close the system window.
  6. Close the test window: click the window close button ("x" button in the title bar).
The WINDEV editor is displayed again. Close the code editor: on the "Home" tab, in the "General" group, click "Close".
An error is displayed in the "Compilation errors" pane. This error indicates that the window is resizable but no anchors have been defined. Don't worry: we will address this error later in the tutorial.
Throughout the development process, WINDEV highlights potential issues in your application, via the "Compilation errors" pane. For more details, see Project compilation: Warnings, Errors, Information, Programming standard, etc..
Improving the window
In this first test, you may 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 capitalize each word.
We will take a quick look at the UI of this window.

Changes to be made to the window

First, we will reduce the size of the window in the editor. As the editor reflects what we will see at runtime, this means the window will be resized when the application is run:
  1. Click the window in the editor: handles appear around the window.
  2. Reduce the size of the window by dragging the handle at the bottom right.
    Resizing the window
Now, we need to prevent the user from resizing the window: we only need to change one option.
  1. Double-click the window. The description window opens.
  2. In the "General" tab, uncheck "Resizable" (simply click on the option).
  3. Validate.
    We will go into details about UI and UX later in this tutorial.
Test this window again to see the result at runtime (). The result appears immediately.
My first window
Close the test window to go back to the editor.

Changes to be made to the controls

We are now going to force the use of an uppercase letter when entering and displaying the first name.
WINDEV lets you define an input mask on a control. The input mask is used to automatically format the value entered without coding.
To change the input mask of the control:
  1. Double-click the "First name" control. The control description window appears.
  2. In the "General" tab, expand the "Input mask" list and choose "Capitalize 1st letter".
    Input mask
  3. Validate the control description window.
  4. In the editor, the mask name is automatically displayed in the control.
Quick test
  1. Test this window again to see the result at runtime.
    Window test
  2. Click "OK" to close the message, then close the test window by clicking the "X" icon in the upper-right corner. The editor is redisplayed.
Close "WIN_My_first_window": on the "Home" tab, in the "General" group, click "Close".
Close the project: on the "Home" tab, in the "General" group, click "Close" and select "Close project".
To sum up
By creating a first window, we explored some WINDEV features:
  • window creation.
  • creation of Edit and Button controls.
  • WYSIWYG window editor.
  • input mask options
Completed project
If you want to check the end result of the steps described here, you can open a completed version of the project. This project contains the different windows created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - Discover WINDEV (Lesson 2): My first window", double-click "My first windows - Answers".
Further information
WINDEV offers more than fifty controls. Several unit examples are available, allowing you to discover how to 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 completed, training and unit examples is displayed.
  4. In the "Unit examples" category, select 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.
Previous LessonTable of contents
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/13/2023

Send a report | Local help