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...
  • Project analysis
  • Displaying the list of products
  • Creating the window
  • 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
  • Using the camera and displaying an image
  • Overview
  • Creating the button for taking photos
  • Taking photos
  • Selecting a photo in the photo album
  • Managing the bar code of product
  • Overview
  • Implementation
  • Managing anchors in the Product form
  • Using the Map control
  • Creating the window
  • Creating the Map control
  • Displaying stores on the map
  • Using a Multiline Zone control
  • Creating the window
  • Creating the Multiline Zone control
  • Modifying the Multiline Zone control
  • Programming the menu
  • Application test
Lesson 5.2. Developing the application
This lesson will teach you the following concepts...
  • Creating a window containing a looper.
  • Specific controls: Looper control, Multiline Zone control, Map control, ...
  • Handling the database.
  • Features specific to the device used (GPS, Photo, ...).

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Project analysis
Let's take a look at our initial project. This project contains no window. It only contains the analysis describing the HFSQL Classic data files that will be used. 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, that contains the GPS coordinates of each store.
    4. Close the data model editor (click the cross at the top right of editor).
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 "Looper" control.
This window will be created with the window creation wizard.

Remark

The window creation wizard offers several preset windows. These windows propose modern interfaces for your applications.
Most of these windows can be generated from your data, by including the WLanguage code required for them to operate. They can be used straightaway.

Creating the window

  • To create the window used to list the products:
    1. Click among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Window".
    2. In the wizard, select the "Standard" tab. In the "Phone" area, choose "Looper" and validate.

      Remark

      If you are using an iOS configuration, the window for creating a new window contains additional options, specific to iOS.
      A "Looper" window can be created for an iOS platform and for an Android platform.
      Reminder: The images in part 5 of this tutorial use the Android configuration. Slight differences may appear if you are using the iOS configuration.
    3. The window creation wizard starts.
    4. If the iOS platform was added, several platforms are proposed. We advise you to choose the platform with the smallest resolution.
      Go to the next wizard step by clicking on the arrows at the bottom of the window.
    5. The wizard proposes to choose the data source associated with the window. In our case, it will be the "Product" data file:
      • The "Data files" option is selected by default.
      • Select the Product data file.
    6. Go to the next step.
    7. Select the looper style: "Image + Title + Caption below". This template is used to get an interface containing the image of product, its name and its description.
    8. Go to the next step.
    9. The wizard automatically proposes the file items corresponding to the different controls of the generated looper.
    10. Keep the proposed items and go to the next step.
    11. Keep the suggested sort on the "ProductID" item. Go to the next step.
    12. The wizard proposes several options for generating the Looper window:
      • Generate a creation button in the Action Bar: If this option is selected, the wizard proposes to generate an editable form window.
      • Enable the deletion by row swipe: If this option is selected, the user will have the ability to delete a looper element by swiping the corresponding row.
      • Code for row selection: If the option "Generate the opening code of the form in read-only" (or "Generate the opening code of the form in edit") is chosen, the wizard proposes to generate a form window in read-only or edit mode.
    13. In our example, keep the default options. Go to the next step.
    14. Give a title and a name to the generated window. Type the window title: "List of products". The window name is automatically filled.
    15. Validate the wizard. The window is automatically created, displayed in the editor and saved.

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

Remark

When a project is associated with several platforms, the test of current window is run with the current platform. The shell used for the simulator is also adapted to the current platform.
To run the test on another platform, all you have to do is enable this platform by double-clicking its name in the project explorer.
Remark: In this part, the images representing the tests correspond to an Android shell.
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 on among the quick access buttons.
      • The window for creating a new element is displayed: click "Window" then "Window".
      • In the wizard, select the "Standard" tab, choose "Blank" and validate.
    2. The window for saving an element is displayed. Specify the window title: "Product form". Its name is automatically proposed: "WIN_Product_form". Validate.
    3. The window is added to the project, for all configurations.

Remark

If several platforms are defined in the project, the window for saving an element proposes to associate the new element to all platforms.
To associate the element to a single platform, all you have to do is expand "Configurations" in the save window and choose the requested platform:

Creating controls

  • To create the different edit controls used to display information about the product:
    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 "WM 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.
    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 F5 again to hide the numbers.
      • The navigation order is automatically adapted to the order of controls in the window.
    7. Save the window.
  • Run the test of "WIN_Product_form" window ( among the quick access buttons).
    1. The window is displayed with empty controls.
    2. Close the simulator.
  • 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. In our case, the current record will be the record selected in the Looper control of "WIN_List_of_products". This looper is linked to the Product data file.
    3. Close the code window.
    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 in the bar of open elements:
    2. Select the Looper control.
      Caution: make sure you select the Looper control and not one of its controls.
    3. Display the popup menu of Looper control (right click) and select "Code".
    4. In the code window that appears, enter the following code in the event "Selecting a row of...":
      OpenMobileWindow(WIN_Product_form)

      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.
    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).
  • Run the test of "WIN_List_of_products" window again in the simulator ( among the quick access buttons).
    • In the list of products, click one of the products with the mouse.
    • 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

When creating the form window, an Action Bar was automatically created. This Action Bar contains a left button used to cancel the current input and to go back to the previous window. In our case, this button will be used to go back to the list of products.
There is no modification to perform.
We are going to add a validation button into the Action Bar of "WIN_Product_form" window in order to manage the validation of modifications.
  • First of all, display (if necessary) the "WIN_Product_form" window in the editor: click the corresponding button in the bar of opened elements.
  • To add a validation option into the Action Bar of window:
    1. Select the Action Bar (at the top of window).
    2. Display the description window of Action Bar: right-click and select "Description" from the popup menu.

      Remark

      The description window of Action Bar is adapted to the platforms used in the project. Indeed, the Action Bar used in an Android application differs from the Action Bar used in an iOS application.
      If your project is using an Android configuration, only the options corresponding to the Action Bar for Android are displayed.
      Similarly, for an iOS configuration, only the options corresponding to the Action Bar for iOS are displayed.
      If your project is using both an Android configuration and an iOS configuration, the window displays a preview of the Action Bar for the two platforms.
      Numbers allow you to access the options to configure.
      We are going to present the options required by our example.
      See Describing the Action Bar control for more details.
    3. Click on number 2 (any number 2 in the window). The interface for typing an option in the toolbar is displayed.
    4. Click on "+" (below the "In the top right corner" area) to add an option. A new default option is created at the top right.
    5. Modify the characteristics of this option:
      • In the "Option caption" area, type "Done".

        Remark

        At run time, the option caption appears in the Action Bar:
        • If no image is associated with the option.
        • If the option is transferred into menu at the bottom.
      • In the "Preset image" area, expand the list and select "Done".
      • Validate the description window.

        Remark

        To go back to the interface for describing the Action Bar, all you have to do is click the button.
    6. The code of this option will be used to save the modifications performed in the "WIN_Product_form" window. To type this code:
      • Select (if necessary) the Action Bar control of window.
      • Click on "OK".
      • A drop-down menu with the "Done" option is displayed.

        Remark

        This drop-down menu is visible in edit to type the WLanguage code associated with the option. This drop-down menu will not be displayed at run time.
      • Right-click the option.
      • Select "Code" from the popup menu that is displayed.
      • Write the following code in the event "Selecting the menu":
        ScreenToFile()
        HSave(Product)
        Close()

        Let's study this code:
        • FileToScreen is used to initialize the items with the values of linked controls, for the current record.
        • HSave is used to update the file data for the current record.
    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).
  • When closing the product form, the content of the product list found in the "WIN_List_of_products" window must be refreshed to take into account the modifications performed in the form. To do so, use the event "Closing a child window" of "WIN_List_of_products".
    1. Click the "WIN_List_of_products" button in the bar of open elements:
    2. Right-click the window background and select "Code" from the popup menu. The following code is automatically displayed in the event "Closing a child window":
      LooperDisplay(LOOP_Product, taCurrentSelection)
      Let's study this code:
      • The event "Closing a child window" is run whenever a child window of the current window is closed. In our case, it is run when the "WIN_Product_form" window is closed.
      • LooperDisplay is used to update the data found in the Looper control of "WIN_List_of_products" window. The taCurrentSelection constant is used to update data from the selection bar.
        This code was automatically generated when the window was created by the wizard.
    3. Close the code window (click the cross in the top right corner of code editor).
  • Run the test of "WIN_List_of_products" window 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 Hibiscus Blue" product.
    • The detailed window of product is displayed. Modify the product name and type "Polo Hibiscus Light blue" and click the "OK" button.
    • When going back to the list of products, you will notice that the name of this article was updated.
  • 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 option into the Action Bar of window in order 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.
  • To add an option into the Action Bar of window:
    1. First of all, display (if necessary) the "WIN_List_of_products" window in the editor: click the corresponding button in the bar of opened elements.
    2. Select the Action Bar (at the top of window).
    3. Display the description window of Action Bar: right-click and select "Description" from the popup menu.
    4. Click on number 2 (any number 2 in the window). The interface for typing an option in the toolbar is displayed.
    5. Click on "+" (below the "In the top right corner" area) to add an option. A new default option is created at the top right. Modify the characteristics of this option:
      • In the "Option caption" area, type "New product".
      • In the "Preset image" area, expand the list and select "Add".
      • Validate the description window.
    6. The code of this option is used to open the "Product form" window and to reset its controls. To type this code:
      • Select (if necessary) the Action Bar control of window.
      • Click the "+" button.
      • A drop-down menu with the "New product" option is displayed.
      • Right-click the option.
      • Select "Code" from the popup menu that is displayed.
      • Write the following code in the event "Selecting the menu":
        HReset(Product)
        OpenMobileWindow(WIN_Product_form)

        HReset initializes the item variables in the "Product" data file with the default values to manage a new record.
    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).
  • Let's now check the management of record addition into the window of product form.
    1. Display the "WIN_Product_form" window in the editor: click the corresponding button in the bar of opened elements.
    2. Display the code of validation option in the Action Bar:
      • Select the Action Bar.
      • Click on "OK".
      • A drop-down menu with the "Done" option is displayed.
      • Select "Code" from the popup menu of "Validate" option (right mouse click).
      • The "Click" event does not change:
        ScreenToFile()
        HSave(Product)
        Close()

        Let's look at this code again:
        • By default, HSave is equivalent to HModify (current record modified in the data file).
        • If HReset has been previously called (as is the case when adding a new product), HSave adds a new record in the data file (equivalent to HAdd).
    3. 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).
    • Click the "+" button found in the Action Bar.
    • Type a new product.
    • Validate. The new product is displayed in the list of products.
    • Close the simulator.

Remark

If your project is using several platforms, a GO must be run for each platform. The differences regarding the display and the operating modes will appear in the simulator.
Using the camera and displaying an image

Caution!

This paragraph requires a device equipped with a camera. If this is not the case, go to the next paragraph directly.
Furthermore, this paragraph requires the application to be installed on the device because it is using hardware resources that are not accessible in Simulation mode.

Overview

We are going to manage the product photo by using the device camera.
To do so, we are going to:
  • create a button to start the camera. The photo will be retrieved in the format of an image in memory and displayed in the Image control of product.
  • create a button used to select a photo in the album found on the mobile.

Creating the button for taking photos

  • To create the button for taking photos:
    1. Display the "WIN_Product_form" window in the editor.
    2. Add a button into the window:
      • On the "Creation" pane, in the "Usual controls" group, click : the button shape appears under the mouse.
      • Then, click at the top right of product image to create the button.
  • We are going to modify the button in order to associate it with an image representing a camera:
    1. Select the button and display its popup menu (right mouse click).
    2. Select "Description". The description window of control is displayed.
    3. In the "General" tab, click the button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed.
    4. The image catalog of WINDEV Mobile is opened. This catalog contains hundreds of images in different fields, formats and sizes.
    5. Enter "photo" in the search box at the top and validate. Several images are displayed:
    6. For example, select the image by double-clicking it.
    7. In the window that is displayed, you have the ability to choose the image size, color, orientation, format and name.
    8. Keep all default options and specify the image name ("Camera").
    9. Validate the window.
    10. The image path is displayed in the button description.
    11. Give a name to the button: "BTN_Camera".
    12. Clear the button caption.
    13. Validate the description window.
    14. In the editor, reduce the button size.

Taking photos

We are now going to type the code used to take a photo and to display it in the Image control of product form.
  • To take photos:
    1. Select "Code" from the popup menu of button (right mouse click).
    2. Write the following code in the "Click" event:
      // Local variable
      sPhoto is string
      // Start the camera
      sPhoto = VideoStartApp(viPictureCapture)
      IF sPhoto <> "" THEN
      IMG_Photo = sPhoto
      END
      In this code, VideoStartApp is used to start the native camera application found on the device in order to save a video or to take a photo.
    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).

Selecting a photo in the photo album

We are going to add a button used to select a photo in the device album and to associate it with the product.
  • To create the button for selecting the photo, we are going to "Copy - Paste" the button for taking photos that was just created:
    1. Select the "BTN_Camera" button that was just created.
    2. Press Ctrl + C: the button is copied into the clipboard.
    3. Press Ctrl + V: the mouse cursor changes and the button shape appears under the cursor.
    4. Click in the window beside the "BTN_Camera" button: the new button is automatically created.
    5. Display the description window of button (double-click the control):
      • Give a name to the button: "BTN_Photo_Album".
      • Select an image in the image catalog.
        Remark: Don't forget to change the default image name.
    6. Validate the description window.
  • The code of this button is used to open the photo album of device and to select an image in order to display it in the Image control of product form.
    1. Select "Code" from the popup menu of button (right mouse click).
    2. Replace the code of the "Click" event with the following code:
      // Local variable
      sPhoto is string
      // Start the selection
      sPhoto = AlbumPicker(albumImage)
      IF sPhoto <> "" THEN
      IMG_Photo = sPhoto
      END
      In this code, AlbumPicker is used to retrieve the selected photo from the photo album.
    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).
Managing the bar code of product

Caution!

This paragraph requires a device equipped with a camera.
Otherwise, you will not be able to test its use.
Furthermore, this paragraph requires the application to be installed on the device because it is using hardware resources that are not accessible in Simulation mode.

Overview

The "Product" data file contains a "Bar_Code" item. This item is used to store the value of a bar code. Some devices (especially the ones equipped with a camera) can scan a bar code to retrieve its value.
The bar code will be managed via the device camera and by a specific WLanguage function.

Implementation

  • To create the button for managing bar codes:
    1. Display (if necessary) the "WIN_Product_form" window in the editor.
    2. Add a button into the window:
      • On the "Creation" pane, in the "Usual controls" group, click .
      • The button shape appears under the mouse.
      • Create the button beside the "Bar Code" control (resize the edit control if necessary).
    3. Display the description window of button (double-click the control):
      • Give a name to the button: "BTN_Bar_Code".
      • Clear the button caption.
      • Select an image of bar code in the image catalog (type the "Code" keyword for example).
    4. Validate the description window.
    5. In the editor, reduce the button size.
  • The code of this button is used to scan the bar code.
    1. Select "Code" from the popup menu of button (right mouse click).
    2. Write the following code in the "Click" event:
      // Local variable
      bc is BarCodes
      // Start the scan
      bc = BCCapture()
      IF bc..Content <> "" THEN
      EDT_Bar_code = bc..Content
      END
      In this code, BCCapture is used to decode the information stored in a bar code using the camera of the device.
    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).
Managing anchors in the Product form
All controls have been positioned in the Product form. The vertical and horizontal resolution may differ according to the devices.
The anchoring is used to adapt the size of controls to the resolution and to avoid displaying "empty" areas in the window (especially at the bottom right).
If the application's target device is known since the creation of the project, the windows adopt the size of the target device. No anchoring is required.
If the target device of application is not known or if several devices are used, the smallest common resolution must be chosen as soon as project creation. The anchoring is required in this case.
  • To define the anchoring that will be applied to the different window controls:
    1. Select the following controls (click each control while keeping the Ctrl key down):
      • the product photo,
      • the button for taking photos,
      • the button for selecting a photo in the album.
    2. Display the popup menu of selection (right mouse click) and select "Anchor".
    3. Select "Centered horizontally" ( ).
    4. Validate.
  • To define the anchoring that will be applied to the edit controls:
    1. Select the following edit controls (click each control while keeping the Ctrl key down):
      • Name
      • Bar code
      • Reorder date
      • Description
    2. Display the popup menu of selection (right mouse click) and select "Anchor".
    3. Select "Width" ( ).
    4. Validate.
  • Repeat this operation for the button used to manage bar codes. In this case, select "Right" ( ).
  • All anchors have been defined in the window. The red arrows indicating the orientation of anchors are displayed:
Using the Map control
We will now present the Map control and the GPS functions of WLanguage.
Our database contains a "Store" data file. This data file contains the addresses of stores that will be localized on a map via the mapping functions.

Creating the window

We are going to create a new window and add a Map control into it.
  • To create the window:
    1. Create a new blank window. Click among the quick access buttons. The window for element creation is displayed: click "Window" then "Window". In the wizard, choose "Blank" and validate.
    2. The window for saving an element is displayed. Specify the window title: "Map of stores". Its name is automatically proposed: "WIN_Map_of_stores". Validate.

Creating the Map control

  • To create the Map control:
    1. On the "Creation" pane, in the "Graphic controls" group, click "Map". The control shape appears under the mouse.
    2. Click inside the window to create the control.
    3. A message regarding the management of scrollbars in the window is displayed. Indeed, both the window and the Map control include their own scrollbar. Therefore, a conflict occurs. A single scrollbar must be enabled. We advise you to:
      • disable the scrollbar in the window because the window has a fixed size,
      • keep the scrollbar enabled in the Map control.
    4. Click "Disable the automatic scrollbar". The Map control appears in the window editor.
    5. Display the description window of "Map" control (double-click the control for example).
    6. In the control description window, specify the control name ("MAP_STORE") and validate.
    7. Save the modifications by clicking among the quick access buttons.

Displaying stores on the map

Principle
We are now going to add the code used to display all stores of the "Store" data file on a map.
To do so, we will browse the "Store" data file with a FOR EACH loop. Then, the Marker variables will be used. A Marker variable is used to define a marker that will be displayed on a map.
A marker contains various information. We will be using the following information:
  • Name,
  • Latitude,
  • Longitude.
MapAddMarker is used to add a marker onto the map. Then, all you have to do is define a sufficient zoom level to see all markers on the map. If the zoom is not set properly, some markers may not be visible or they may overlap on the map.
Implementation
  • To type the code used to display the stores:
    1. Right-click outside the window. Select "Code" from the popup menu that is displayed. The events associated with the window are displayed.
    2. Write the following code in the event "Global declarations of...".
      // Global variables
      gMarker is Marker
      // Load the stores
      FOR EACH Store
      // Marker coordinates
      gMarker.Position.Latitude = Store.Latitude
      gMarker.Position.Longitude = Store.Longitude
      // Marker name
      gMarker.Name = Store.Name
      // Add the marker
      MapAddMarker(MAP_STORE,gMarker)
      END
      // Best zoom to view all markers on the map
      MAP_STORE..Zoom = zoomAdaptSize
    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).
  • Run the test of "WIN_Map_of_stores" window in the simulator ( among the quick access buttons). Then, close the simulator.
Using a Multiline Zone control
The "Multiline zone" control is often used on the mobile platforms. This control is used to group several controls:
  • options on a category,
  • group of information about a contact, ...
This control can contain at the same time:
  • lines defined in edit (static lines),
  • lines defined at run time, by programming (dynamic lines).
A Multiline Zone control will be used to create the main menu of our application. We are going to create a new window and insert a Multiline Zone control into it.
The window that will be created is as follows:

Creating the window

We are going to create a window and add a Multiline Zone control into it.
  • 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". In the wizard, choose "Blank" and validate.
    2. The window for saving an element is displayed. Specify the window title: "Menu". Its name is automatically proposed: "WIN_Menu". Validate.

Creating the Multiline Zone control

  • To create the Multiline Zone control:
    1. On the "Creation" pane, in the "Data" group, click "Multiline Zone". The control shape appears under the mouse.
    2. Click inside the window to create the control.
    3. Display the description window of control (double-click the control for example).
    4. In the description window, specify the control name ("MZ_MENU") and validate.
The Multiline Zone control contains an empty line. We are going to add as many lines as the number of options found in our menu.
Our menu will include 3 options:
  • List of products.
  • Map of stores.
  • Exit from the application.

Modifying the Multiline Zone control

  • To modify the Multiline Zone control:
    1. Display the description window of control (double-click the control for example).
    2. Click the "New line" button. A window is opened: this window contains all preset line templates.
    3. Select the "Simple line with picto" template and validate. Repeat this operation twice.
      Now, the multiline zone contains:
      • a "blank" line,
      • 3 "simple lines with picto".
    4. We are going to delete the blank line that is useless in our example:
      • Select the blank line (the first line) with the mouse.
      • Click the "Delete" button.
    5. Validate the description window. Your menu is created.
Each line includes an Image control, a Static control and an arrow image. We are now going to modify the Image control and the Static control of each line in order to represent the menu action.
Modifying the 1st line: access to the list of products
  • To modify the image of first line found in the Multiline Zone control:
    1. Click the Image control of first line.
    2. Display the description window of image (double-click the control).
    3. In the description window:
      • Give a name to the image ("IMG_ListOfProducts" for example).
      • Click on the button . Select "Catalog" from the popup menu that is displayed in order to choose an image representing the action.
      • In the window of image catalog, type "List" in the search control and press the Enter key.
      • Select an image via a double click.
      • In the window for configuring the generated image, select a size (80 for example, W (Width) = 80 and H (Height) = 80), give a name to the image ("ListOfProducts" for example) and validate.

        Remark

        The image used in a Multiline Zone control is in "Homothetic extended centered" mode by default. The image will be automatically "resized" to the proper dimensions.
    4. Validate the description window.
  • To modify the Static control of first line found in the Multiline Zone control:
    1. Click the Static control of first line.
    2. Display the description window (double-click the control).
    3. In the "General" tab of description window:
      • Give a name to the control ("STC_ListOfProducts" for example).
      • Change the caption ("List of products" for example).
    4. Validate the description window.
Modifying the 2nd line: access to the map of stores
  • To modify the image of second line found in the Multiline Zone control:
    1. Click the Image control of second line.
    2. Display the description window of image (double-click the control).
    3. In the description window:
      • Give a name to the image ("IMG_MapOfStores" for example).
      • Click on the button . Select "Catalog" from the popup menu that is displayed in order to choose an image representing the action.
      • In the window of image catalog, type "Map" in the search control and press the Enter key.
      • Select an image via a double click.
      • In the window for configuring the generated image, select a size (80 for example, W (Width) = 80 and H (Height) = 80), give a name to the image ("MapOfStores" for example) and validate.
    4. Validate the description window.
  • To modify the Static control of second line found in the Multiline Zone control:
    1. Click the Static control of second line.
    2. Display the description window (double-click the control).
    3. In the "General" tab of description window:
      • Give a name to the control ("STC_MapOfStores" for example).
      • Change the caption ("Map of stores" for example).
    4. Validate the description window.
Modifying the 3rd line: exit from the application
  • To modify the image of third line found in the Multiline Zone control:
    1. Click the Image control of third line.
    2. Display the description window of image (double-click the control).
    3. In the description window:
      • Give a name to the image ("IMG_Exit" for example).
      • Click on the button . Select "Catalog" from the popup menu that is displayed in order to choose an image representing the action.
      • In the window of image catalog, type "Close" in the search control and press the Enter key.
      • Select an image via a double click.
      • In the window for configuring the generated image, select a size (80 for example, W (Width) = 80 and H (Height) = 80), give a name to the image ("Close" for example) and validate.
    4. Validate the description window.
  • To modify the Static control of third line found in the Multiline Zone control:
    1. Click the Static control of third line.
    2. Display the description window (double-click the control).
    3. In the "General" tab of description window:
      • Give a name to the control ("STC_Exit" for example).
      • Change the caption ("Exit from the application" for example).
    4. Validate the description window.

Programming the menu

  • We are now going to write the code used to perform each menu action:
    1. Right-click the Multiline Zone control and select "Code".
      Caution: make sure you select the Multiline Zone control and not one of the controls belonging to it.
    2. In the code editor, type the following code in the "Selection (click) of a line in..." section:
      SWITCH MZ_MENU
      CASE 1 // List of products
      OpenMobileWindow(WIN_List_of_products)
      CASE 2 // Map of stores
      OpenMobileWindow(WIN_Map_of_stores)
      CASE 3 // Exit from the application
      Close()
      END
    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).
Application test
The last step consists in specifying that the menu window is the first application window. To do so, we are going to run a full project test and define the first project window.
  • 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 start the project test on the simulator:
    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.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment