PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WINDEV Mobile 24 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Opening project
  • Project description
  • Displaying the list of products
  • Creating the window
  • Creating the Table control
  • Creating the form window
  • Creating the window
  • Creating controls
  • Displaying the form from the list of products
  • Managing the product creation and modification
  • Modifying the product form
  • Creating a new product
  • Creating a menu window
  • Creating the window
  • Customizing the menu
  • Programming the menu
  • Running the application test
  • Creating the executable
Lesson 7.3. Advanced programming
This lesson will teach you the following concepts
  • Creating a management application.
  • Handling the database.

Estimated time: 1 h
Previous LessonTable of contentsNext Lesson
Overview
In this lesson, we are going to develop a Windows Mobile application that is using a HFSQL Classic database.
This application will allow us to present some specific features of the programming for Windows Mobile.

Opening project

  • Start WINDEV Mobile 24 (if not already done).
  • Display the WINDEV Mobile home page if necessary (Ctrl + <).
  • Open the "Pocket Managing Products" project.
    To do so, in the home page, click "Tutorial" and select the project named "Pocket Managing Products (Exercise)".

    Answer

    A corrected project is available. This project contains the different windows created in this lesson. To open the corrected project, in the WINDEV Mobile home page, click "Tutorial" and select "Pocket Managing Products (Answer)".

Project description

Let's take a look at our initial project. This project is an existing project. It contains no window. It only contains the analysis describing the HFSQL Classic data files that will be used. In the EXE directory, the corresponding data files are supplied with data in order to run the different tests.
  • To view the analysis associated with the project:
    1. Click among the quick access buttons of WINDEV Mobile menu.
    2. The data model editor is displayed.
    3. This analysis includes 3 data files:
      • A "Product" data file, which contains the product description: name, price, quantity, ...
      • A "Characteristic" data file, which contains the different product characteristics. For example, if the product is a tee-shirt, its characteristics will correspond to the size, the color, ... The "Characteristic" data file is therefore linked to the "Product" data file.
      • A "Store" data file, which contains the GPS coordinates of each store.
    4. Close the data model editor (click the cross at the top right of editor).
We are now going to develop our application.
Displaying the list of products
We are going to create a window used to list the different products. These products will be displayed in a "Table" control.

Creating the window

  • To create a new window:
    1. Click among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Window".
    2. In the wizard, display the "Standard" tab, choose "Blank" and validate.
    3. The window for saving an element is displayed.
    4. In the window that is displayed, type the window title: "List of products". The window name and location are automatically filled. Keep the default values and validate (green button at the bottom of dialog window).
    5. The window is added to the project.

Creating the Table control

To display the list of products, we are going to use a "Table" control. The main information about the products will be displayed in this control.
  • To create the "Table" control:
    1. On the "Creation" pane, in the "Data" group, expand "Table" and select "Table (Vertical)".
    2. The control appears under the mouse.
    3. Click the position where the control must be created in the window (at the top for example). The wizard for creating a Table control starts.
    4. In the wizard, select "Display the data found in a file or in an existing query". Go to the next step.
    5. Select the "Product" data file. Go to the next step.
    6. Select the items to display:
    7. Keep the "Name", "Description" and "Price" items (a checkmark must be found in front of these items). Go to the next step.
    8. Keep the proposed sort item (ProductID). The products will be sorted in the Table control according to this item. Go to the next step.
    9. In the "Additional parameters" screen, keep the default options. Go to the next step.
    10. Select the "Vertical" orientation and go to the next step.
    11. Keep the default name ("TABLE_Product") and validate.
    12. The Table control appears in the window editor.
    13. Resize the control and its columns via the handles in order for the content to be displayed in the window.

Remark

Data automatically appears in the window displayed in the editor. This concept is called "Live Data": you see the data of your data files in real time!
This feature is very useful to adapt the size of controls to their content.
  • Save the window by clicking among the quick access buttons.
  • We are going to run a first test in the simulator to see the result. Click among the quick access buttons (or press F9).
  • Close the simulator to go back to the window editor.
Creating the form window
We are now going to create a new window used to display the product form. Then, this window will be started from the list of products to display the details of selected product.

Creating the window

  • To create the form window:
    1. Create a new blank window. Click among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Window".
    2. In the wizard that starts:
      • Select the "Standard" tab.
      • Choose "Blank".
    3. Validate the wizard.
    4. The window for saving an element is displayed. Specify the window title: "Product form". Its name is automatically proposed: "WIN_Product_form". Validate.

Creating controls

  • To create an edit control:
    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 "Pocket Managing Products" analysis appear in the pane.
    2. With the mouse, select the items of the "Product" data file displayed in the pane (except for the "ProductID" item).
    3. Drag and Drop these items to the window that was just created.
    4. Resize the controls ("Name", "Bar code", "Reorder date" and "Description") so that they become visible in the window:
      • Select the requested control.
      • Use the sizing handles (blue squares) to resize the control.
    5. Reorganize the controls in the window.
      Respect the following order: "Photo", "Name", "Price", "Quantity", "Bar code", "Reorder date", "Description".
    6. We are going to view the navigation order in the window: press the F5 key. The numbers that are displayed represent the navigation order in the window. Press the F5 key again to make the numbers disappear. The navigation order is automatically adapted to the order of controls in the window.
    7. Save the window.
  • Run the window test ( among the quick access buttons). The window is displayed with empty controls.
  • Close the test window to go back to the editor.
  • To display the product data:
    1. Display the events associated with the window:
      • Perform a right mouse click in the area beside the window
      • 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":
      FileToScreen()
      FileToScreen is used to display in the controls the data found in the data file, for the current record.
    3. Close the code window (click the cross in the top right corner of code editor).
    4. Save the window.

Displaying the form from the list of products

Let's now see how to display the form of selected product in the list of products.
  • Perform the following operations:
    1. Position on the "List of products" window: click the "WIN_List_of_products" button found in the button bar:
    2. On the "Creation" pane, in the "Usual controls" group, click : the button shape appears under the mouse. Then, click at the bottom of window to create the button.
    3. Select the control and press Enter on the keyboard. The button caption becomes editable. Type "Modify the element" and press Enter on the keyboard.
    4. Resize the button if necessary (with the handles) in order for the caption to be entirely displayed in the button.
    5. Right-click the button and select "Code" from the popup menu.
    6. In the code window that appears, write the following code in the "Click" event:
      Open(WIN_Product_form)
      TableDisplay(TABLE_Product, taCurrentSelection)

      Remark

      The assisted code input 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.
    7. Save the modifications by clicking among the quick access buttons.
    8. Close the code window (click the cross in the top right corner of code editor).
      • Run the window test again in the simulator ( among the quick access buttons).
      • In the list of products, click one of the products with the mouse.
      • Click the "Modify the element" button.
      • The detailed product window is displayed.
  • Close the simulator.
Managing the product creation and modification
We are now going to modify our two windows in order to manage the product addition and modification.

Modifying the product form

We are going to add a button into the "WIN_Product_form" window: a "Validate" button to manage the validation of modifications.

Remark

In the applications for Windows Mobile, the use of a "Cancel" button is not required. Indeed, the user can just click the cross (top right of the window) to cancel the input performed.
  • To create the "Validate" button in the "WIN_Product_form" window:
    1. Display (if necessary) the "WIN_Product_form" window in the editor: click the corresponding button in the button bar.
    2. On the "Creation" pane, in the "Usual controls" group, click : the button shape appears under the mouse. Then, click inside the window to create the button (beside the image for example).
    3. Select the control and press Enter on the keyboard. The button caption becomes editable. Type "Validate" and press Enter on the keyboard.
    4. Resize the button if necessary (with the handles) in order for the caption to be entirely displayed in the button.
  • 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.
      • HModify is used to update the file data for the current record.
      • Close is used to close the form and to go back to the "WIN_List_of_products" window.
    3. Save the modifications by clicking among the quick access buttons.
    4. Close the code window (click the cross in the top right corner of code editor).
  • Display the "WIN_List_of_products" window in the window editor and run its test in the simulator ( among the quick access buttons).
    • In the list of products, click one of the products with the mouse: for example, the "Polo Hibbicus Blue" product at a price of 25.90 Dollars.
    • Click "Modify the element".
    • The detailed window of product is displayed. Modify the price of 25.90 Dollars and type 19.90 Dollars, then click the "Validate" button.
    • When going back to the list of products, you will notice that the price was updated for this product.
  • Close the simulator. The WINDEV Mobile editor is displayed.

Creating a new product

The principle for creating a product is as follows:
  • In the window for the list of products, we are going to add a "New product" 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.
  • First of all, display (if necessary) the "WIN_List_of_products" window in the editor: click the corresponding button in the button bar.
  • To create a new button:
    1. On the "Creation" pane, in the "Usual controls" group, click : the button shape appears under the mouse. Then, click inside the window to create the button (beside the "Modify the element" button for example).
    2. Select the control and press Enter on the keyboard. The button caption becomes editable. Type "New product" and press Enter on the keyboard.
    3. Resize the button if necessary (with the handles) in order for the caption to be entirely displayed in the button.
    4. The code of this option is used to open the "Product form" window and to reset its controls. To type this code:
      • Right-click the "New product" button.
      • Select "Code" from the popup menu that is displayed.
      • Write the following code in the "Click" event:
        HReset(Product)
        Open(WIN_Product_form)
        TableDisplay(TABLE_Product)
        • 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 form window.
        • TableDisplay is used to update the content of Table control: the new record will be displayed in the control.
    5. Save the modifications by clicking among the quick access buttons.
    6. Close the code window (click the cross in the top right corner of code editor).
  • 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 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.

        Remark

        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 among the quick access buttons.
    4. Close the code window (click the cross in the top right corner of code editor).
  • Display the "WIN_List_of_products" window in the window editor and run its test in the simulator ( among the quick access buttons).
    • In the list of products, click the "New product" button.
    • Type a new product.
    • Validate. The new product is displayed in the list of products.
    • Close the simulator.
Creating a menu window
We are now going to create a window for implementing the application menu.

Creating the window

First of all, we are going to create a blank window with a menu.
  • To create the window:
    1. Create a new blank window. Click among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Window".
    2. In the wizard for window creation, click the "Standard" tab.
    3. Choose "Wizard" and validate.
    4. The wizard for creating a Windows Mobile window starts.
    5. Select "Maximized" and go to the next step.
    6. In the advanced settings, select "With menu and toolbar".
      Go to the next step.
    7. Specify the window title: "Menu".
    8. Validate the wizard. The window is displayed in the editor.
    9. The window for saving an element is displayed. The name entered in the wizard is automatically proposed in the save window. Validate.

Customizing the menu

We are going to modify the menu in order to call the window of list of products and to exit from the application.
  • To modify the menu option:
    1. Right-click the "Menu" option to display the popup menu.
      Remark: This "Menu" option is positioned at the bottom left of window.
    2. Select "Option description". The description window is displayed.
    3. Modify the caption of the option that becomes "Product". Validate the description window.
    4. Select the menu option again.
    5. Display the popup menu (right mouse click):
    6. Select "Transform to expand a sub-menu".
    7. In the input area that is displayed, type "List of products" and validate.
    8. Right-click the new option and select "Add before" from the popup menu.
    9. In the input area that is displayed, type "Exit" and validate.

Programming the menu

We are now going to type the code of these two menu options.
  • To define the WLanguage code of "Exit" option:
    1. In the window editor, display the "Exit" option. All you have to do is expand the menu, just like you did at run time.
    2. Display the popup menu of "Exit" option (right mouse click) and select "Code".
    3. Write the following code:
      Close()

      Close is used to close the current window. The "Menu" window being the only window, the application is automatically closed.
  • To define the WLanguage code of "List of products" option:
    1. In the window editor, display the "List of products" option. All you have to do is expand the menu, just like you did at run time.
    2. Display the popup menu of the "List of products" option (right mouse click) and select "Code".
    3. Write the following code:
      Open(WIN_List_of_products)
    4. Save the modifications by clicking among the quick access buttons.
    5. Close the code window (click the cross in the top right corner of code editor).
Running the application test
The last step consists in specifying that the menu window is the first application window. To do so, we are going to define the first project window and run a full test of project.
  • To define the first project window:
    1. Select the "WIN_Menu" window in the project explorer.
    2. Display the popup menu.
    3. Select "First project window". A specific icon (with a small 1) is displayed in front of the window name, in the project explorer.
Until now, the test of windows was run individually by clicking among the quick access buttons.
  • To run the project test:
    1. Click among the quick access buttons.
    2. Your project starts with the menu window. Click an option of your menu to check whether the different links are correct.
That's it, our application is created, we must now compile it and install it on the device in order to run its test.
Creating the executable
  • To generate the Windows Mobile application:
    1. On the "Project" pane, in the "Generation" group, click "Generate" (you also have the ability to click among the quick access buttons).
    2. The wizard for creating a mobile executable starts.
    3. The first wizard step is used to define the application name and icon. The executable icon can be chosen in the image catalog of WINDEV Mobile ("Catalog" button).
    4. The other steps are not required by our application. Click the "2- Copy onto the mobile" link found on the left of the wizard.
    5. This step is used to define the options for copying files onto the mobile device:
    6. The options to choose depend on your configuration:
      • If a mobile device is connected, select "Yes: Copy the executable to Pocket PC" as well as "Run the application on Pocket PC at the end of copy". In this case, once the executable is generated, the application will be automatically copied and started on the mobile.
      • If no mobile is device connected, select "No: Don't copy the executable to Pocket PC". In this case, the application can be deployed on the mobile devices via a setup procedure.
    7. Go to the next step.
    8. If the option "Yes: Copy the executable to Pocket PC" was selected, the wizard proposes the files to copy onto Pocket PC:
    9. Validate the selection of suggested files.
That's it, your application is generated and run on the Windows Mobile device.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment