PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WINDEV 25 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Opening project
  • My first window: entering and displaying data
  • Overview
  • Creating the window
  • Entering 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.
Lesson duration

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

Remark

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

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

Overview

You are going to create the following window:
My first 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:
    1. Click Creating an element among the quick access buttons in 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 proposed in the list.
      Window creation wizard

      Remark

      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.
    5. 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.
    6. 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.

      Remark

      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_",
      • 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 want to use a shorter window name: replace "WIN_My_first_window" by "WIN_Welcome".
      Saving an element
    8. 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:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Input" (click the arrow):
      Creating an edit control
      A list of preset edit controls appears.

      Remark

      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.
    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 currently created follows the mouse movement.
    4. 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.
    5. 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.
    6. Modify the control characteristics by entering the following information:
      Describing an edit control
      • This control is named: "EDT_FirstName" (1).
      • The control caption is: "First name" (2).
      • This control is a text control (3).
    7. 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:
    1. Select the control (all you have to do is click it with the mouse).
    2. In the popup menu (right click), select "Adapt the size".
    3. The control is immediately enlarged and the caption is entirely displayed.
    Remark: 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 control:
    1. On the "Creation" pane, in the "Usual controls" group, click Creating a Button control.
    2. 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).
    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. Type the caption: "Display". The name of the Button control automatically becomes "BTN_Display".
    5. You can see the name of the control:
      • in the tooltip displayed when the control is hovered by the mouse cursor:
        Tooltip when hovering the control
      • in the status bar of editor:
        Status bar

        Remark

        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.

    Remark

    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.).
    1. Select the "Display" Button control with the mouse.
    2. Display the popup menu of control (right mouse click).
    3. Select "Code". This option opens the WINDEV code editor. This editor is used to type all WLanguage statements.

      Remark

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

Remark

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.

Remark

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

Remark

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 Running a window test among the quick access buttons (or press F9).
    2. The window that was just created is automatically saved then it is started in execution.
      My first window
    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.

Remark

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:
    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 runtime:
    1. Double-click the window. The description window appears.
    2. In the "UI" tab, uncheck "Resizable" (simply click on the option).
    3. Validate.

      Remark

      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.

    Remark

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

Remark

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.
  • To open a unit example:
    1. Display the WINDEV home page (press Ctrl + <).
    2. Click "Open an example" if necessary.
    3. The list of complete examples, training examples and unit examples is displayed.
    4. 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.
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.
  • 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.

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

Remark

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

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 25
Comments
Windev Licao 1.2
https://youtu.be/Xojv__DDiig
Esse Ao Vivo vai estrear as 17:00 do dia 10/08/2020

O que você aprenderá nesta lição:
1. Como criar uma janela.
2. Dimensionar Janela
3. inserir primeiro campo edt digitacao
4. Espaco no edt altera a caption
5. Adpatar campo
6. criar um botao
7. digitar um codigo, info
8. deixar primeira letra maiscula

https://windevdesenvolvimento.blogspot.com/2020/07/dicas-2979-windev-tutorial-2-12-criar.html
amarildo
06 Aug. 2020