Lesson 1.2. My first window

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

Versión:

Inicio | Iniciar sesión | Español

Ayuda

WINDEV 24 tutorial

Part 01: Discovering WINDEV

Lesson 1.2. My first window

This lesson will teach you the following concepts

Overview

My first window: typing and displaying data

WINDEV: Main concepts and terminology

Lesson 1.1. Discover WINDEV

Lesson 1.2. My first window

This lesson will teach you the following concepts
Overview
Opening project
My first window: typing and displaying data
Overview
Creating the window
Typing and displaying the value
Improving the window
WINDEV: Main concepts and terminology
Main concepts
Terminology

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

Lección anterior

Tabla de contenido

Siguiente lección

Overview

To start working with WINDEV, we are going to create a window.


	Note	The 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.

Opening project

Start WINDEV 24 (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 the project named "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. The project creation will be presented in another lesson.


	Answer	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: typing and displaying data

Overview

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 on among the quick access buttons of the WINDEV menu:
The window for creating a new element is displayed. This window is used to create all elements that can be associated with a project.
Click "Window" then "Window". The wizard for creating windows starts.

Select "Blank" in the list of "standard" windows displayed on the left. In the list of skin templates found on the right, the "Elegant" skin template is selected by default. You can choose another skin template proposed in the list.


	Note	The 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. No ugly interface anymore.

Validate the wizard for window creation (green 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.


	Note	Study the window name proposed by WINDEV: this name starts with the letters "WIN_". This prefix is automatically added because the project is using a programming charter. The programming charter 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 starts with "BTN_", etc. You have the ability to disable this charter if you don't want to use it: on the "Project" pane, in the "Other actions" group, expand "Charter" and uncheck "Use the charter".


	Express	In Express version, the name of all project elements (windows, reports, ...) is prefixed by "EXPRESS_".

In this example, we want to use a shorter window name: replace "WIN_My_first_window" by "WIN_Welcome".
Click on the green button to validate the information displayed in the save window.

Typing 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 used to display the first name.

To create the edit control:
1. On the "Creation" pane, in the "Usual controls" group, expand "Edit" (click the arrow):
  The list of edit controls proposed by default is displayed.
2. Click "Simple text" in the list of controls. The control currently created follows the mouse movement.
3. 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, all you have to do is perform a new left mouse click.
4. Perform a right mouse click on the control that was just created. The popup menu of control is displayed. Select "Description" from the popup menu. The description window of edit control is displayed.
5. Modify the control characteristics by typing the following information:
  - This control is named: "EDT_FirstName" (1).
  - The control caption is: "First name" (2).
  - This control is a text control (3).
6. Validate the description window of control (green button). The control appears in the window editor.

The control caption is truncated in the editor.

To display the control properly:
1. Select the control (all you have to do is click it with the mouse).
2. In the popup menu (right mouse click), select "Adapt the size".
3. The control is immediately enlarged and the caption is entirely displayed.
Note: You also have the ability to manually enlarge the input area of control:
1. Select the control.
2. Position the mouse cursor above one of the handles found on the right of control (small square). The mouse cursor turns into arrow.
3. Click with the left mouse button and keep the button down during the move used to enlarge the control.
4. Release the mouse button once the control was resized.

To create the "Display" button:
1. On the "Creation" pane, in the "Usual controls" group, click on .
2. Position the control in the window. Click the location where the button will be created (on the right of edit control for example).
3. Click the button that was just created. The text displayed in the button 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. Type the caption: "Display". The button name automatically becomes "BTN_Display".
5. You can see the button name:
  - in the tooltip displayed when the control is hovered by the mouse cursor:
  - in the status bar of editor:
    
    Note
    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 be using our first WLanguage function: Info.


	Note	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. The name of WLanguage functions is using a prefix in order to group the functions by family ("Win" for the functions handling windows, "email" for the functions handling emails, ...).

Select the "Display" button 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.


	Note	The code editor proposes different processes for each type of control. These processes correspond to the events linked to the control. Therefore, two processes are displayed for the "Button" control: Initialization, Click the button, run when the user clicks the button. Note: Additional processes can be added if necessary.

Type the following code in the "Click on BTN_Display" process:

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 mistake when typing an element name: 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.


	Note	This is the reason why the programming charter is so important. All elements handled in the application code use the same standard so they can be easily identified when typing code.


	Note	When typing this code in the code editor, you have noticed that different colors are used by the different elements. This is the syntactic coloring. The code editor allows you to easily identify the different elements handled by the code. Therefore, in the code editor that is using 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.

Info displays the message passed in parameter on one or more lines. Our message is built from the text "Hello " and from the value of "EDT_FirstName" control. The "," character separates the parameters found in the Info function. 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 run the window test:
1. Click on among the quick access buttons (or press F9).
2. The window that was just created is automatically saved then it is started in execution.
3. Type your first name.
4. Click the "Display" button.
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 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.


	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 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. GUI errors: The GUI 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:
1. Click the window: handles appear around the window.
2. 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 run time:
1. Double-click the window. The description window is displayed.
2. In the "GUI" tab, uncheck "Resizable" (all you have to do is click 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 run time.

Go back to the editor by closing the test window.

We are now going to force the use of an uppercase letter when typing and displaying the first name.


	Note	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:
1. Double-click the "First name" control. The description window of control is displayed.
2. In the "General" tab, expand the "Input mask" list and choose "1st letter in caps.".
3. Validate the description window of control.
4. In the editor, the mask name is automatically displayed in the control.

Run the test of this window to see the result at run time.

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".


	Note	An example for each type of control Two types of controls have been used in this lesson: an edit control and a button. WINDEV proposes 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: 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.. Note: To make things easy, all unit examples corresponding to controls start with the words "The control". These words can be typed in the search control of home page.

Close the project: on the "Home" pane, in the "General" group, expand "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.

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, 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 is using 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 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 is using the same analysis (at run time, each executable can also use the same data files).

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. 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 WEBDEV 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 a HFSQL data file includes several key items, a single index file will be created at run time.

The following terms are used in the windows and reports:

Window: The 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: The 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.


	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.

Lección anterior

Tabla de contenido

Siguiente lección

Versión mínima requerida

Versión 24

Comentarios

Haga clic en [Agregar] para publicar un comentario

Última modificación: 27/02/2019

Señalar un error o enviar una sugerencia | Ayuda local