- In this lesson you will learn the following concepts
- Opening the project
- My first window: entering and displaying data
- Creating the window
- Entering and displaying a value
- Improving the window
- WINDEV: Main concepts and terminology
- Main concepts
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.
Estimated time: 30 mn
To start working with WINDEV, we are going to create a window.
|Windows make it possible to display or enter information on the screen. Users 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 the project
- Start WINDEV 28. 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)".
|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.|
|A corrected project is available. This project contains the different windows that will be 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
We will create the following 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 amazed 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:
- Click in the quick access buttons of the WINDEV menu:
- The new element window appears. This window is used to create all elements that can be associated with a project.
- Click "Window" then "Window". The window creation wizard starts.
- 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.
|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.|
- 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 through programming.
- The element location. This location corresponds to the directory in which the element is saved.
- 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.
|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_",
If you do not want to use this code style, you can simply disable it: on the "Project" tab, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
- In this example, we will use a shorter window name: replace "WIN_My_first_window" by "WIN_Welcome".
- 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:
- On the "Creation" tab, in the "Usual controls" group, expand "Edit" (click the arrow): A list of preset edit controls is displayed.
|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.|
- In the search box at the top of the list of preset controls, enter "Simple text edit". The corresponding control appears in the list.
- Click the "Simple text edit" control. The control will follow the mouse cursor.
- Move the cursor to the position where you want to create the control (e.g. at the top of the window). To drop the control in the window, simply click again.
- 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.
- Enter the following control details:
- The control name: "EDT_FirstName" (1).
- The control caption: "First name" (2).
- This control type: text (3).
- 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:
Remark: You can also manually resize the control input area:
- Select the control (click on it).
- Right-click to open the context menu and select "Adapt size".
- The control is immediately resized and displays the entire caption.
- Select the control.
- Place the cursor on one of the handles on the right of the control (small square). The cursor turns into an arrow.
- Hold down the left mouse button to resize the control.
- Release the mouse button once the control is resized.
- To create the "Display" Button control:
- On the "Creation" tab, in the "Usual controls" group, click .
- Move the control in the window. Click where you want to create the Button control (e.g., on the right of the Edit control).
- Click the control that was just created. The text displayed in the control becomes editable.
|To quickly edit the control caption, you also have the ability to: |
- Select the control.
- Press the Enter or Space key.
- Enter the caption: "Display". The name of the Button control automatically becomes "BTN_Display".
- The control name is displayed:
- in the tooltip that appears when you hover the control:
- in the editor status bar:
|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 our first WLanguage function: Info.
|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.).
- Select the "Display" Button control with the mouse.
- Right-click the control to open its context menu.
- Select "Code". This option opens the WINDEV code editor. This editor is used to type all WLanguage statements.
|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:
Remark: Additional events can be added if necessary.
- Click, run when the user clicks the button.
- 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. Code completion 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.
|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.|
|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 are colored in purple,
- the names of the controls are colored in cyan.
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.
|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:
- Click in the quick access buttons (or press F9).
- The window that was just created is automatically saved and then executed.
- Type your first name.
- Click "Display".
- Validate the system window that is displayed (click the "OK" button).
Testing a program is often a long and tedious task. 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" tab, 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.
|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.). You will not be able to test or execute the project.
- 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: UI compilation errors provide information about potential problems 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).
- Automated test errors: These errors indicate a problem when running automated 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 will take a quick look at the UI of this window.
- To reduce the window size in the editor:
- Click the window: handles appear around the window.
- 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:
- Double-click the window. The description window appears.
- In the "General" tab, uncheck "Resizable" (simply click on the option).
|We will go into details about UI and UX later in this tutorial.|
- Test this window again 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.
|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:
- Double-click the "First name" control. The control description window appears.
- In the "General" tab, expand the "Input mask" list and choose "1st letter in caps.".
- Validate the control description window.
- In the editor, the mask name is automatically displayed in the control.
- Test this window again to see the result at runtime.
Your first window was successfully created. We will discover new WINDEV concepts in the rest of this tutorial.
- 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" tab, in the "General" group, click "Close".
|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.
Remark: To make things easy, all the unit examples of the controls contain the name of the control: TreeView, Camera, etc.
- To open a unit example:
- Go to the WINDEV home page (press Ctrl + <).
- Click "Open an example" if necessary.
- The list of complete, training and unit examples is displayed.
- 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.
- Close the project: on the "Home" tab, 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.
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, etc.
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 structure of the data files (also known as "Tables" in several databases). These data files will contain the application data.
|Defining the structure of the data files in the analysis does not mean they are actually created. The data files are physically created when the application is run.|
One or more WINDEV projects can be linked to the same analysis. This is referred to as 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).
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 allows you to define the structure of the 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 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. A key is part of the item characteristics. Keys allow fast access to data and 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". Users 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, controls in the windows, etc. Reports can be previewed, printed on paper, generated as PDF or HTML files, 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, borders, font, etc. The styles of the different elements in the UI of a WINDEV application are grouped in a style sheet.
|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.