- This lesson will teach you the following concepts
- Opening project
- My first window: entering and displaying data
- Creating the window
- Entering and displaying the value
- Improving the window
- WINDEV: Main concepts and terminology
- Main concepts
Lesson 1.2. My first window
This lesson will teach you the following concepts
- How to create a window.
- How to type a text and display it.
Estimated time: 30 mn
To start working with WINDEV, we are going to create a window.
|Windows are used to display or type information on the screen. The user can directly act on the windows via controls, buttons, ...|
We will see how to:
- Open a project,
- Create and save a window,
- Type and display data.
These first operations will present the main concepts for developing with WINDEV. Full topics will be presented in the following sections.
- Start WINDEV 25 (if not already done). Display the WINDEV home page if necessary: press Ctrl + <.
- Open the "WD My First Windows" project.
To do so, in the home page, click "Tutorial" and select "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. The project creation will be presented in another lesson.|
|A corrected project is available. This project contains the different windows created in this part (as well as the ones created in part 2). To open the corrected project, in the home page, click "Tutorial" and select "My first windows (Answer)".|
My first window: entering and displaying data
You are going to create the following window:
This window allows the user to type his first name and to display a welcome message with the "Display" button.
You may think this is too basic but we advise you to create this window. You may well be surprised by how intuitive and easy it is to use the WINDEV editor. Furthermore, this window will teach you principles that are fundamental for the rest of this tutorial.
Creating the window
- To create the window:
- Click among the quick access buttons in the WINDEV menu:
- The element creation 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 proposed in 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, there is no risk of obtaining an ugly interface.|
- Validate the window creation wizard ("OK" button). The window is automatically created in the editor. The window for saving an element is displayed. This window is used to specify:
- The element title. For a window, this title will be displayed in the title bar of window.
- 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.
- Specify the title of "My first window" element (in this case, the element corresponds to the WINDEV window). The element name ("WIN_My_first_window") is automatically proposed.
|Study 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" pane, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
- In this example, we want to 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 the value
To type and display the value, you must create:
- a control where the user will type his first name. Therefore, 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" pane, in the "Usual controls" group, expand "Input" (click the arrow): A list of preset edit controls appears.
|This list offers different edit controls that can be used directly. These controls are also available among 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 currently created follows the mouse movement.
- Move the mouse toward the position where the control will be created in the window (at the top of window for example). To drop the control in the window, simply click again.
- Right-click the control that was just created. The popup menu of control is displayed. Select "Description" from the popup menu. The edit control description window appears.
- Modify the control characteristics by entering the following information:
- This control is named: "EDT_FirstName" (1).
- The control caption is: "First name" (2).
- This control is a text control (3).
- Validate the control description window ("OK" button). The control appears in the window editor.
The control caption is truncated in the editor.
- To display the control properly:
Remark: You also have the ability to manually enlarge the input area of control:
- Select the control (all you have to do is click it with the mouse).
- In the popup menu (right click), select "Adapt the size".
- The control is immediately enlarged and the caption is entirely displayed.
- Select the control.
- Position the mouse cursor above one of the handles found on the right of control (small square). The mouse cursor turns into arrow.
- Click with the left mouse button and keep the button down during the move used to enlarge the control.
- Release the mouse button once the control was resized.
- To create the "Display" Button control:
- On the "Creation" pane, in the "Usual controls" group, click .
- Position the control in the window. Create the Button control at the desired location with a click (on the right of edit control for example).
- 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.
- Type the caption: "Display". The name of the Button control automatically becomes "BTN_Display".
- You can see the name of the control:
- in the tooltip displayed when the control is hovered by the mouse cursor:
- in the status bar of editor:
|If you are using a 4K screen, the editor elements 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.
|The programming language supplied with WINDEV is named WLanguage. It is a 5th-generation language (5GL) that includes highly sophisticated commands.|
Main WLanguage conventions
- No ending character for end of line is used in WLanguage.
- The '//' characters are used to comment out code lines. These code lines are not interpreted. They provide better code readability.
- In the WLanguage functions, the parameters passed to the function are enclosed in brackets.
- The coma character corresponds to the separator.
- WLanguage is not case sensitive.
- The "space" characters are not interpreted.
- The dot is the decimal separator.
- The name of WLanguage functions is in English. It is available in French.
- A prefix is used to group WLanguage functions by family ("Win" for functions that handle windows, "email" for functions that handle emails, etc.).
- Select the "Display" Button control with the mouse.
- Display the popup menu of control (right mouse click).
- 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)
Note about the assisted input: As soon as the first two characters are typed, WINDEV proposes all words of WLanguage vocabulary containing 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. All you have to do is select the requested 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. Therefore, in the code editor that uses the light 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.
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 run the window test:
- Click among the quick access buttons (or press F9).
- The window that was just created is automatically saved then it is started in execution.
- Type your first name.
- Click the "Display" button.
- 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 system closing button of window ("x" button found 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.
|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 signal a major problem (programming error, ...). The project test or execution will not operate.
- Compilation warning: The warnings signal 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 captions, ...
- Programming standard errors: These errors inform you when the programming standard selected in the project description is not respected ("Compilation" tab).
- Automatic test errors: These errors signal 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:
- Click the window: handles appear around the window.
- Click the handle found at the bottom right and reduce the window size by keeping the left mouse button down.
- To prevent the window from being resized at runtime:
- Double-click the window. The description window appears.
- In the "UI" tab, uncheck "Resizable" (simply click on the option).
|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.
- Go back to the editor by closing the test window.
- We are now going to force the use of an uppercase letter when entering and displaying the first name.
|By default, the characters will be typed in uppercase or in lowercase according to the position of CAPSLOCK key on the keyboard. This type of input can cause problems when performing a search for example.|
WINDEV proposes to manage an input mask for a control. The input mask is used to automatically format the value typed, without programming.
- 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.
- Run the test of this window to see the result at runtime.
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 cross in the top right corner of window). The editor is redisplayed.
- Close the "WIN_Welcome" window displayed in the editor: on the "Home" pane, 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 proposes 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 unit examples corresponding to controls start with the name of the control. These words can be typed in the search control of home page.
- To open a unit example:
- Display the WINDEV home page (press Ctrl + <).
- Click "Open an example" if necessary.
- The list of complete examples, training examples and unit examples is displayed.
- In the "Unit examples" category, select the requested example ("The TreeView control" for example) and double-click its name: the corresponding window is automatically opened in the editor.
- Close the project: on the "Home" pane, in the "General" group, click "Close" and select "Close the project".
WINDEV: Main concepts and terminology
After these exercises, let's talk about the main WINDEV concepts and about 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, 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, printed reports, ...). It is started by the end user of an application.
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.
|Describing the data files in the analysis does not mean that they are created. The data files are physically created when running the application.|
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).
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. Indeed, several terms are specific to WINDEV and they may not have the same significance as the the ones used in the other tools.
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. The keys are used to improve the speed for accessing data and to simplify the browse operations performed on the 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 the windows and reports:
- Window: Windows are used to display or type information on the screen. The windows are also called "Screens" or "Dialog boxes". The user can directly act on the windows via controls, buttons, ...
- Report: Reports are used to get a custom view of information. This information can come from the database, from text files, from controls found in the windows, ... The reports can be previewed, printed on paper, generated in PDF or in HTML, ...
- Control: "Control" is the term used to identify the different graphic objects displayed in a window or report.
- Skin template: The skin template is used define the application style: visual appearance of windows, buttons, controls, ...
- Style: The style groups the graphic characteristics of an element: background image, border, font, ... The styles of the different elements found in the interface 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.
Click [Add] to post a comment