PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Overview
  • Creating a window used to list the products
  • Creating the window
  • Creating controls
  • Window test
  • Creating a "Product form" window
  • Creating the window
  • Creating edit controls
  • Creating buttons
  • Improving the window interface
  • Displaying the form from the list of products
  • Managing the modification of a product
  • Modifying the product image
  • Validate the product modifications
  • Checking the product modification
  • Creating a new product
  • Adding a button
  • Addition into the data file
  • Checking the product addition
  • Viewing the records
Lesson 4.2. Addition and modification windows
This lesson will teach you the following concepts
  • Creating a menu window used to list the products.
  • Creating a product form.
  • Managing the product addition and modification.

Estimated time: 50 mn
Previous LessonTable of contentsNext Lesson
Overview
We are going to create the different windows used to list, add and modify products. These operations will allow you to discover several topics regarding the management of data files and they will also allow you to use some WINDEV features­.
  • If the "WD Full Application" project was not opened in the previous lesson:
    1. Display the WINDEV home page (Ctrl + <).
    2. In the home page, click "Tutorial" and select the project named "Full application (Exercise)".

      Answer

      		A corrected project is available. This project contains the different windows created in this lesson. To open the corrected project, in the home page, click "Tutorial" and select "Full application (With windows)".
Creating a window used to list the products
To create the window used to list the products, we are going to create a blank window then add all controls: this will allow us to present the steps required to create this type of window.

Creating the window

  • To create a window used to list the products:
    1. Create a new blank window.
      • Click New among the quick access buttons (or press Ctrl + N).
      • The window for creating a new element is displayed: click "Window" then "Window".
      • In the wizard, click the "Based on a template" tab and choose "Use: WINTPL_Template". Validate.

        Note

        		The window templates
        A window template is used to give a standard style to the different application windows.
        A window template contains all graphic elements common to all application windows. A window template can also contain code. In this case, this code will also be common to all application windows.
        The window template named WINTPL_Template was created for this example. This template contains a logo that will be displayed in all windows:
        Window template
    2. The new window is displayed in the editor. The window for saving an element is displayed.
    3. In this window, specify the window title: "Menu".
      Save element
    4. The window name (that will be used in programming) is automatically deduced from the window title. If this name does not suit you, you have the ability to modify it and to specify a title that differs from the window name.
    5. Validate.

Note

This window was named "Menu" because it is the main window of our application. It will be used as menu but it will also display information.

Creating controls

A Table control will be used to create the list of products. This control will be linked to the "Product" data file.

Note

What is a Table?
Do not confuse "Table" and "Table control".
  • We refer to an SQL database as a Table.
  • A Table control is used to view data in a table. In this case, the data can be typed or it can come from a data file (or from a table).
The Table control of WINDEV is used to view or modify data:
  • in memory: it is referred to as a memory Table control or Table control filled by programming.
  • coming from data files or queries: it is referred to as a browsing Table control.
  • coming from WLanguage variables: it is referred to as a Table control on source.
  • To create the Table control:
    1. On the "Creation" pane, in the "Data" group, expand "Table and list box" and select "Table (Vertical)". The control currently created follows the mouse movement.
    2. Click inside the window: the wizard for creating the Table control starts.
    3. The Table control that is currently created must display the records found in the "Product" data file. In the wizard, select "Display the data found in a file or in an existing query".
      Wizard for creating a Table control
      Go to the next step by clicking on the arrow at the bottom of the wizard.
    4. The next wizard screen proposes the different data files and queries found in the current project. Expand "Analysis" if necessary and select the "Product" data file.
      Go to the next step.
    5. The wizard proposes the list of items found in the "Product" data file. By default, all items are checked in order to be displayed in the Table control. In our case, we are going to display all items EXCEPT for the "ProductID" identifier that corresponds to the automatic identifier of data file.
      Wizard for creating a Table control
      Uncheck "ProductID" and go to the next step.
    6. Then, the wizard proposes to select the sort item. This item will be used to sort the data displayed in the Table control. The items proposed in the wizard correspond to the items defined as key items in the analysis. The products will be sorted according to their caption.
      Wizard for creating a Table control
      Click the "Caption" line and go to the next step.
    7. The following steps correspond to additional parameters. Keep the default options until you reach the end of wizard and validate.
    8. The Table control is automatically created in the window. The control is automatically positioned and enlarged in order to occupy the entire available space in the window.
      Window in the editor
Let's take a look at the control that was just created: the data is already displayed in the control, even in the editor. This concept is called "Live data": the content of data files found on the development computer is used in the windows or reports handled in the editor. This feature is very useful to define the size of controls found in a window for example.

Window test

  • We are now going to run the test of the window that was just created.
    1. Click on Window Go among the quick access buttons.
    2. The window is automatically displayed with its data at run time.
    3. You have the ability to scroll the products with the scrollbar (or with the keyboard arrows).
  • Let's imagine that we are the end user to see the capabilities of Table control at run time.
    Window test
Some remarks:
  • First of all, the Table control has the same aspect at run time and in the editor: this is the WYSIWYG concept ("What You See Is What You Get").
  • Small logos appear at the top of columns:
    • the double arrow indicates that the column can be sorted ("Reference" or "Caption" column for example).
      Double arrow
      Click the "Caption" column twice for example: the data is displayed according to a different order. An arrow on the left of columns indicates that the column is sorted as well as the sort direction.
    • the magnifier indicates that a search can be performed in the column.
      Magnifier
      Click the magnifier of "Reference" column for example. An input area is displayed, allowing you to type the sought reference. Type "REF-010". The product corresponding to this reference is automatically displayed.
      Search in a column
  • A popup menu is available for the Table control and for each one of its columns. This popup menu can be displayed:
    • via a right mouse click on the column of Table control.
    • via a click on the arrow found at the extremity of column headers.
  • This popup menu is used for example to export the content of Table control in Excel format (or OpenOffice.org Calc), in Word format (or OpenOffice.org Writer), to print, ...
    Popup menu of control
In just a few minutes, we have presented some features that are automatically included in the Table control. No programming is required to propose these features to your users. These features are called "AAF" (Automatic Application Features).

Note

Several controls propose default AAFs. If these features must not be proposed (for security or confidentiality reasons), they can be disabled in the editor or by programming.
See Automatic Application Features (AAF) for more details.
Now that the list of products is displayed, you may want to modify a product. To do so, we are going to create a window used to display the product details.
  • Close the window via the cross found at the top of the screen. The WINDEV editor is redisplayed.
Creating a "Product form" window

Creating the window

  • To create a window used to display the product details:
    1. Open the "WD Full Application" project if necessary.
    2. Create a new blank window.
      • Click New among the quick access buttons.
      • The window for creating a new element is displayed: click "Window" then "Window".
      • The window creation wizard starts.
      • In the "Based on a template" tab, choose "Use: WINTPL_Template" and validate the wizard.
    3. The save window is displayed. Type the window title: "Product form". The name ("WIN_Product_form") is automatically proposed.
    4. Validate the save window.

Creating edit controls

We are going to create a window used to display the characteristics of the product selected in the Table control. This type of window is called a "Form" because it corresponds to a descriptive form of requested element.
In our case, this window will be used to display the content of the different items found in the "Product" data file.
  • To create the controls in the window:
    1. Display the "Analysis" pane if necessary: on the "Home" pane, in the "Environment" group, expand "Panes" and select "Analysis". The different data files described in the "WD Full Application" analysis appear in the pane.
    2. Click the Arrow icon on the left of "Product" data file: the items found in the data file are listed.
      Analysis pane
    3. With the mouse, select all items displayed in the pane (except for the "ProductID" item). You have the ability to use the multi-selection by holding the Ctrl key down.
    4. Drag and Drop these items to the window that was just created.
      Drag and Drop of items
    5. Different controls are automatically created in the window. These controls are automatically linked to the corresponding item in the data file. To check this:
      • Select the "Reference" control for example.
      • Display the popup menu (right mouse click) and select "Description".
      • Display the "Link" tab of description window:
        Control description
        This tab shows that the current edit control is linked to the "Reference" item found in the "Product" data file.
    6. Close the description window.
    7. Save the window.
  • Reposition the controls in the window and resize the window in order to get the following interface:
    Interface in the editor

Creating buttons

The "WIN_Product_form" window will be used to add a new product or to modify a product found in the list.
We are going to add a validation button and a cancelation button.
  • To create the "Validate" button:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Button" (click the arrow found below Button control ).
    2. The list of preset buttons is displayed.
    3. Click "Validate": the button shape appears under the mouse.
    4. Then, click on the right of edit controls to create the button.
  • Add the "Cancel" button according to the same method.
    1. On the "Creation" pane, in the "Usual controls" group, expand "Button" (click the arrow found below Button control ).
    2. In the list of preset buttons, click "Cancel": the button shape appears under the mouse.
    3. Then, click below the "Validate" button to create the button.
      Interface in the editor

Improving the window interface

This window being quite simple, let's try to improve its interface. Several details can become very annoying for the user so let's try to sort them out right now.
Aligning controls
  • One of the first optimizations consists in aligning the controls and in giving them the same size:
    1. Select the "Caption" control then all edit controls found in the window (hold the Ctrl key down while clicking the different controls for example). The first selected control will be used as reference for the size of other controls.
    2. In the ribbon, display the "Alignment" pane of WINDEV. This pane contains all alignment options available for the controls.
      Alignment pane
    3. We want the outside and inside borders of controls to be aligned. Click "Justify (Ins. and Out.)".

      Note

      		If you don't know which alignment to choose, hover the different options proposed by the "Alignment" pane of WINDEV. When hovering an option with the mouse cursor, the controls selected in the window are automatically positioned and/or resized according to the hovered option.
      If the positioning suits you, all you have to do is click the option.
      If the positioning does not suit you, all you have to do is hover the alignment options: the controls move back to their initial position.
      Interface in the editor
Managing anchors
  • Let's see the visual aspect of our window:
    1. On the "Modification" pane, in the "Preview" group, click "Preview". This runtime mode is used to display the window interface. The different codes are not run.
    2. Enlarge the window via the sizing handle found at the bottom of window. The position of controls is not modified and the window displays a large empty area. Two methods can be used to solve this problem:
      • Forbid the window from being resized.
      • Manage the anchors, which means manage the behavior of controls when resizing the window. That's what we are going to do.
        Window preview
    3. Close the preview: click the "Close" button or the cross found in the top right corner of window.

      Note

      		How to manage anchors in a window?
      To manage the anchors:
      1. In the editor, reduce the window to its minimum size. All outside window borders must be "stuck" to a control.
      2. Study the controls one by one and ask yourself the following question : "How will the control react when the window is enlarged?". Then, apply the corresponding anchor.
  • For this window, we are going to define the anchors together:
    1. The "Validate" and "Cancel" buttons must always be stuck to the right.
      • Select these two controls.
      • Display the popup menu (right mouse click) and select "Anchor".
      • In the window for defining the anchors, select "Right" and validate.
        Anchoring window
      • Small red arrows appear in the editor, indicating that the controls are anchored to right.
    2. The edit controls must increase in width:
      • Select the 4 edit controls.
      • Display the popup menu (right mouse click) and select "Anchor".
      • In the window for defining anchors, select "Width" ( Anchor in width ).
      • Validate.
    3. We are going to test the operating mode of this window in preview:
      • On the "Modification" pane, in the "Preview" group, click "Preview".
      • Enlarge the window: the controls follow the enlargement in width.
      • We must now define the operating mode during the enlargement in height.
    4. The "Description" control can contain a product description that is more or less important. This is the most important window control: it must occupy the maximum available space. Apply an anchor in width and height to it ( Anchor in width and height ).
    5. The "Price BT" control is automatically bordered by a red line: the window editor signals an anchoring problem. Indeed, if the "Description" control stretches to the bottom, the "Price BT" control must move to the bottom accordingly.
    6. Open the anchoring window for the "Price BT" control. The best anchor is automatically proposed: "width and bottom" (a green checkmark is displayed). Select the proposed anchor and validate.
    7. We are going to test the operating mode of this window in preview:
      • On the "Modification" pane, in the "Preview" group, click "Preview".
      • Enlarge the window: the controls follow the enlargement in width and in height.
        Window preview
    8. Close the window preview to go back to the editor.

Displaying the form from the list of products

Now, let's see how to display the form of the product selected in the list of products. The principle is straightforward: the user will select the product in the Table control and he will display the details via a button.
  • We are going to modify the "WIN_Menu" window in order to create a modification button:
    1. Position on the "Menu" window: click the "WIN_Menu" button in the button bar:
      Button bar
    2. At this time, the Table control occupies the entire window. Enlarge the window to the right via the sizing handles.
    3. Reduce the size of Table control:
      • Hold the Shift key down.
      • Reduce the Table control via its sizing handles.

        Note

        		Pressing the Shift key allows you to ignore the anchoring options of controls during the resize operation.
    4. We are now going to create the button for viewing the product on the right of Table control.
  • To create the button for viewing the product:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Button" (click the arrow found below Button control ).
    2. In the list of preset buttons, click "Modify". The button shape appears under the mouse. Then, click on the right of Table control to create the button.
      Window in the editor
    3. Right-click the button and select "Code" from the popup menu.
    4. In the code window that appears, write the following code in the "Click" event:
      Open(WIN_Product_form)

      Note

      		The assisted code input (also called "completion") is going to help you: as soon as you type the opening bracket "(", a drop-down list proposes the name of all existing windows found in the project. All you have to do is select the window with the keyboard or with the mouse.
      If the window name is not displayed in the list, it means that this window was not saved beforehand.
    5. Let's study this code: Open is used to open the "WIN_Product_form" window. This function was already presented in the first part of this tutorial.
    6. Save the modifications by clicking Save among the quick access buttons.
    7. Close the code window (click the cross in the top right corner of code editor).
We are now going to modify the "WIN_Product_form" window to display the selected product in the Table control.
  • Display the "WIN_Product_form" window in the editor: click the corresponding button in the button bar.
  • To display the product data:
    1. Display the events associated with the window:
      • Perform a right mouse click in the area found beside the window (called "Home area").
      • Select "Code" from the popup menu that is displayed.
      • The code editor appears.
    2. Enter the following code in the event "End of initialization of WIN_Product_form":
      // Assigns the content of items to the controls
      FileToScreen()
      FileToScreen is used to display in the controls the data found in the data file, for the current record. In our case, the current record will be the record selected in the Table control of "WIN_Menu" window.
    3. Close the code window.
    4. Save the window.
  • Display the "WIN_Menu" window in the editor: click the corresponding button in the button bar.
  • Run the window test ( Window Go among the quick access buttons).
    • In the list of products, click one of the products with the mouse.
    • Click the "Modify" button.
    • The detailed product window is displayed.
  • Close the windows by clicking the cross (x) in the top right corner of windows.
Managing the modification of a product
We are now going to modify the "WIN_Product_form" window in order to manage the product modification.
We are going to:
  • allow the user to modify the product image.
  • add buttons to save or cancel the modifications performed in the form.

Modifying the product image

The user will be able to modify the product image in the Product form. To do so, we are going to create a "Modify" button below the product image. This button will open a file picker used to select the requested image.
  • First of all, display (if necessary) the "WIN_Product_form" window in the editor: click the corresponding button in the button bar.
  • To create the modification button:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Button": the list of preset buttons is displayed. Click "Modify".
    2. The button shape appears under the mouse. Click in the window, below the product image.
    3. Resize the button if necessary (with the handles) in order for the button and the Image control to have the same width.

      Note

      		When resizing the control, an automatic magnetism effect simplifies the alignment of button with the Image control.
      Interface in the editor
    4. Right-click the button. Select "Code" from the menu that is displayed.
    5. In the code window that appears, write the following code in the "Click" event:
      fImageSelect(
      Code editor
    6. The code editor proposes a code wizard.
      • Click "Wizard for function fImageSelect".
      • The code wizard starts.

        Note

        		WINDEV proposes several code wizards that will generate the corresponding code lines via simple questions. Don't hesitate to use them, you will avoid syntax errors.
    7. Keep all the default options proposed by the wizard and validate. The corresponding code is automatically inserted.
      sFile is string
       
      // Opens the image picker
      sFile = fImageSelect("", "", "Select an image...")
    8. Then, add the following code:
      // If a file was selected
      IF sFile <> "" THEN
      // Assigns the image to the Image control
      IMG_Visual = sFile
      END
      This code is used to assign the selected file to the Image control found in the window.
    9. Close the code editor (click the cross in the top right corner of code window).
This feature will be checked when the management of modifications performed in the form is completed.

Validate the product modifications

Two buttons have been created in the "WIN_Product_form" window:
  • a "Validate" button to manage the validation of modifications
  • a "Cancel" button to manage the return to the list of products.
We are now going to type the WLanguage code required for them to operate.
  • First of all, display (if necessary) the "WIN_Product_form" window in the editor: click the corresponding button in the button bar.
  • We are now going to type the code of "Validate" button.
    1. Right-click the button and select "Code" from the popup menu.
    2. Write the following code in the "Click" event:
      ScreenToFile()
      HModify(Product)
      Close()
      Let's study this code:
      • ScreenToFile is used to initialize the items with the values of linked controls, for the current record. This function is equivalent to the following code lines:
        Product.Reference = EDT_Reference
        Product.Caption = EDT_Caption
        Product.Description = EDT_Description
        ...
        Our window is using less than 10 controls and the benefit is already there; think of the windows that use a lot more controls: a single code line performs all assignments!
      • HModify is used to update the file data for the current record.
    3. Save the modifications by clicking Save among the quick access buttons.
    4. Close the code window (click the cross in the top right corner of code editor).
  • The modifications performed in the "WIN_Product_form" window must be taken into account in the Table control used to list the products. To do so, we are going to modify the code of "Modify" button in the "WIN_Menu" window.
    1. Display the "WIN_Menu" window in the editor: click the corresponding button in the button bar.
    2. Select the "Modify" button and display the code editor ("Code" from the popup menu of the button).
    3. Modify the "Click" event as follows:
      Open(WIN_Product_form)
      TableDisplay(TABLE_Product, taCurrentSelection)
      Let's study this code:
      • TableDisplay is used to update the Table control.
      • The taCurrentSelection constant is used to specify that the Table control must be updated from the position of selection bar.
    4. Save the modifications by clicking Save among the quick access buttons.
    5. Close the code window (click the cross in the top right corner of code editor).

Checking the product modification

  • To check the modification of a product:
    1. Run the project test ( Project Go among the quick access buttons).
      Quick access buttons
    2. WINDEV asks you to select the first project window. In our case, this window corresponds to "WIN_Menu". Select this window and validate.

      Note

      		The first project window corresponds to the first window that will be opened when starting the application. The first project window can be defined:
      • during the project test.
      • when creating the executable.
      • in the project explorer: all you have to do is select the requested window, display the popup menu and select "First project window".
      When a first project window is defined, a small red 1 is displayed in front of the window name in the project explorer.
    3. In the list of products, select a product in the Table control (the first one for example) and click the "Modify" button.
    4. The details of the selected product are displayed in the form window.
    5. Modify the price of 100.23 Dollars and enter 200.00 Dollars, then click the "Validate" button.
    6. When going back to the list of products, you will notice that the price was updated for this product.
    7. Display the product details again.
    8. Click the "Modify" button below the image. The image picker is displayed. Select an image and validate. The image is displayed in the form.
    9. Click the "Cancel" button. The image modification was ignored in the data file.
    10. Click the cross to close the application.
Creating a new product
The principle for creating a product is as follows:
  • In the window used to list the products, we are going to add a "New" button that will be used to open the "Product form" window.
  • Then, we will modify the code of "Product form" window to manage the addition into the Product data file.

Adding a button

  • To add a "New" button into the "WIN_Menu" window:
    1. Display the "WIN_Menu" window in the editor: click the corresponding button in the button bar.
    2. On the "Creation" pane, in the "Usual controls" group, expand "Button" and select "New".
    3. The button shape appears under the mouse. Click in the window: the button is created.
    4. Position the button above the "Modify" button (modify the position of "Modify" button if necessary).
      Interface in the editor
    5. Modify the code of this button:
      • Right-click the button and select "Code" from the popup menu.
      • Write the following code in the "Click" event:
        HReset(Product)
        Open(WIN_Product_form)
        TableDisplay(TABLE_Product, taCurrentRecord)
        Let's study this code:
        • HReset initializes the item variables in the "Product" data file with the default values to manage a new record.
        • Open is used to open the product form to type the new record.
        • TableDisplay is used to re-display the Table control. The taCurrentRecord constant is used in this code: the Table control is re-displayed from the current record.
    6. Save the modifications by clicking Save among the quick access buttons.
    7. Close the code window (click the cross in the top right corner of code editor).

Addition into the data file

  • We are now going to modify the window of product form to manage the addition of a new record.
    1. Display the "WIN_Product_form" window in the editor.
    2. We are going to modify the code of validation button:
      • Right-click the "Validate" button and select "Code" from the popup menu.
      • In the "Click" event, replace the existing code with the following code:
        ScreenToFile()
        IF Product..NewRecord THEN
        HAdd(Product)
        ELSE
        HModify(Product)
        END
        Close()
        Let's study this code:
        • ..NewRecord is used to find out whether the current record must be created.
        • If HReset was called beforehand, the property returns True (click on "New product") and the record must be created by HAdd.
        • Otherwise, the current record already exists and it must be modified by HModify.
        • HAdd adds the record into the data file. This function takes the values in memory and writes the content of file items into the data file itself. The indexes are immediately and automatically updated. In this case, it is the "Product" data file that is updated.

          Note

          		The test code of new record can be replaced by HSave. This function is used to check whether the record is already found in the data file, and it allows you to add it or to modify it. The code becomes:
          ScreenToFile()
          HSave(Product)
          Close()
    3. Save the modifications by clicking Save among the quick access buttons.
    4. Close the code window (click the cross in the top right corner of code editor).

Checking the product addition

  • To check the product addition:
    1. Run the project test ( Project Go among the quick access buttons).
    2. In the list of products, click the "New" button.
    3. Enter a new product with the following characteristics:
      • Reference: REF-337
      • Caption: Surf WD
      • Description: Surf with WINDEV colors
      • Price: 150
        Window test
    4. Validate. The new product is displayed in the list of products.
    5. Click the "New" button again.
    6. Enter a new product with the following characteristics:
      • Reference: REF-337
      • Caption: Surf WB
      • Description: Surf with WEBDEV colors
      • Price: 150
    7. Validate. A specific window is displayed:
      Managing duplicates
      This window informs the user that a duplicate was found: indeed, the reference (that is a unique key) is identical for two products. This window is used to modify the reference value: type "REF-338" for example.
      This window is one of the windows for automatic management of HFSQL errors.

Note

Several errors may occur when adding or modifying a record: duplicate error, integrity error, password error, ...
WINDEV proposes several modes for managing these errors:
  • the automatic mode: for each error that occurred when managing database records, a specific page is displayed to the user. This window allows the user to modify his data directly.
  • the advanced programmed mode: a procedure or a custom window for error management is called whenever an error occurs when managing the database records.
The example "WD Detecting HFSQL Errors", supplied with WINDEV, allows you to check these different modes for error management. This example can be opened via the WINDEV home page (Ctrl + <), "Open an example" option.

Viewing the records

The new added records can be immediately viewed in the Table control of the "WIN_Menu" window.
However, in some cases (when running tests for example), you may want to see the content of the data file directly.
WINDEV proposes a tool used to view the content of data files while the application is being developed (when the viewing windows have not been created yet).
This tool is named WDMAP. We are going to use it to see the content of the Product data file.
  • To start WDMAP:
    1. On the "Tools" pane, in the "Database" group, click "WDMap".
    2. Select the "Product" data file. The data file content is displayed.
      WDMAP
    3. Sort the elements by reference (click the header of the "Reference" column) and the two added records appear.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment