PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WINDEV Mobile 26 feature!
  • In this lesson you will learn 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
  • Creating and modifying a product
  • 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
  • Bar code of a product
  • Overview
  • Implementation
  • Defining anchors in the Product form
  • Using the Map control
  • Creating the window
  • Creating the Map control
  • Displaying stores on the Map control
  • Using a Multiline Zone control
  • Creating the window
  • Creating the Multiline Zone control
  • Modifying the Multiline Zone control
  • Programming the menu
  • Application test
Lesson 4.2. Developing the application
In this lesson you will learn the following concepts...
  • Creating a window containing a looper.
  • Specific controls: Looper, Multiline Zone and Map controls, ...
  • Handling the database.
  • Features specific to the device used (GPS, Photo, etc.).
Lesson duration

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Project analysis
Let's take a look at our initial project.

  • If necessary, open the "WM Product Management" project:
    1. Go to the WINDEV Mobile home page (Ctrl + <).
    2. On the home page, click "Tutorial", then in "Part 4 - Development of an Android/iOS" application", double-click "Android/iOS product management (Exercise)".

      Answers

      A corrected project is available. This project contains the different windows created in this lesson. To open the corrected project, go to the home page and click "Tutorial", then in "Part 4 - Development of an Android/iOS application", double-click "Android/iOS product management (Answers)".
This project does not contain any windows. It only contains the analysis describing the HFSQL Classic data files that will be used. The corresponding data files are provided with data in order to run the different tests.

  • To view the analysis associated with the project:
    1. Click Open the data model editor in the quick access buttons of the WINDEV Mobile menu.
    2. The data model editor is displayed.
      Analysis of this course
    3. This analysis includes 3 data files:
      • A "Product" data file, which contains the product description: caption, price, quantity, etc.
      • 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, 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 "X" icon in the upper-right of the 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.

Note

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 Create in the quick access buttons. The element creation window appears: click "Window" then "Window".
    2. In the wizard, select the "Standard" tab. In the "Phone" area, choose "Looper" and validate.

      Note

      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 4 of this tutorial use the Android configuration. Slight differences may appear if you use the iOS configuration.
    3. The window creation wizard starts.
    4. Since our project contains multiple platforms (iOS and Android), the wizard proposes to select the platform to be used to create the window. We recommend that you select the platform with the lowest resolution (in this case, "Generic iPhone").
      Window creation wizard
      Go to the next step of the wizard.
    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.
        Select data file
    6. Go to the next step.
    7. Select the style of the Looper control: "Image + Title + Text below". This template provides an interface containing the product image, name and description.
      Select the style of the Looper control
    8. Go to the next step.
    9. The wizard automatically proposes the file items corresponding to the different controls of the generated looper.
      Looper settings
    10. Keep the default 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:
      Window options
      • 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 be able to delete an element of the Looper control by swiping the corresponding row.
      • Code for row selection: If "Generate the opening code of the form in read-only mode" (or "Generate the opening code of the form in edit mode") is enabled, 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.
      Title and name of the Looper window
    15. Validate the wizard. The window is automatically created, displayed in the editor and saved.
      Window created by the wizard

      Note

      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 the controls to their content.
  • We are going to run a first test in the simulator to see the result. Click Test window in the quick access buttons (or press F9).
    Window run in test mode
  • Close the simulator to go back to the window editor.

Note

When a project is associated with multiple platforms, the current window is tested with the current platform. The shell used for the simulator is also adapted to the current platform.
To perform the test on another platform, simply enable this platform by double-clicking its name in the "Project explorer" pane.
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 opened from the list of products to display the details of the selected product.

Creating the window

  • To create the form window:
    1. Create a new blank window.
      • Click Create an element in the quick access buttons.
      • The element creation window appears: click "Window" then "Window".
      • In the wizard, select the "Standard" tab, choose "Blank" and validate.
    2. The save window appears. Specify the window title: "Product form". Its name is automatically proposed: "WIN_Product_form".
      Saving the element
      Validate.
    3. The window is added to the project, for all configurations.

Note

If several platforms are defined in the project, the save window proposes to associate the new element to all platforms.
To associate the element to a single platform, simply expand "Configurations" in the save window and choose the desired platform:
Configuration to select for saving the element

Creating controls

  • To create the different edit controls used to display information about the product:
    1. Open 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 Product Management" 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.
      Drag and Drop of items
    4. Resize the controls ("Caption", "Descr.", "Bar cod." and "Reorder.") so that they fit in the window.
    5. Reorganize the controls in the window. Respect the following order: "Photo", "Caption", "Descr.", "Price", "Bar cod.", "Quantity", "Reorder.".
      Reorganized controls
    6. We are going to view the tab order in the window:
      • Press F5. The numbers that are displayed represent the tab order in the window.
        Tab order in the window
        Press F5 again to hide the numbers.
      • The tab order is automatically adapted to the order of the controls in the window.
    7. Save the window.
  • Test the "WIN_Product_form" window (click Test window in the quick access buttons).
    1. The window is displayed with empty controls.
    2. Close the simulator.
  • To display the product data:
    1. Display the WLanguage events associated with the window:
      • Right-click the area beside the window.
      • Select "Code" in the context menu that appears.
      • The code editor appears.
    2. Enter the following WLanguage 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 control is linked to the Product data file.
    3. Close the code window.
    4. Save the window.

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.

  • Perform the following operations:
    1. Position on the "List of products" window: click "WIN_List_of_products" in the open document tabs (under the WINDEV Mobile ribbon):
      Open document tabs
    2. Select the Looper control.
      Caution: make sure you select the Looper control and not one of its controls.
    3. Open the context menu of the Looper control (right click) and select "Code".
    4. In the code window that appears, write the following WLanguage code in the event "Selecting a row of LOOP_Product":
      WIN_Product_form.OpenMobileWindow()

      Note

      The assisted code input is going to help you: a drop-down list with the name of the different elements of the project will appear as you type the name of the window. Simply select the window with the keyboard or mouse. Similarly, the different functions that can be used in the window appear as you a insert a '.' (dot) after the name of the window.
      Remark: If the window name is not displayed in the list, it means that this window was not saved beforehand.
    5. Save the changes by clicking Save element in the quick access buttons.
    6. Close the code window (click the "X" in the upper-right corner of the code editor).
  • Test the "WIN_List_of_products" window again in the simulator (click Test window in the quick access buttons).
    • In the list of products, click one of the products.
    • The detailed product window is displayed.
  • Close the simulator.
Creating and modifying a product
We will now modify our two windows to create and modify a product.

Modifying the product form

When creating the form window, an Action Bar was automatically created. This Action Bar contains a button on the left to cancel the current input and go back to the previous window. In our case, this button will be used to go back to the list of products.
Window Action Bar
No changes are required.
We are going to add a validation button to the Action Bar of the "WIN_Product_form" window to confirm the changes.
  • First of all, display (if necessary) the "WIN_Product_form" window in the editor: click the corresponding button in the open document tabs.
  • To add a validation option to the window Action Bar:
    1. Select the Action Bar (at the top of the window).
    2. Open the Action Bar description window: right-click and select "Description" in the context menu.
      Action Bar description

      Note

      The Action Bar description window is adapted to the platforms used in the project. The Action Bar of an Android application is different from the Action Bar of an iOS application.
      Our project uses both Android and iOS configurations: the window displays an overview of the Action Bar for both platforms.
      If your project only uses an Android (or iOS) configuration, the options of the Action Bar will be shown depending on the platform.
      Numbers allow you to access the options to configure.
      We are going to present the options required by our example. For more details, see Describing the Action Bar control.
    3. Click on number 2 (any number 2 in the window). The interface for typing an option in the toolbar is displayed.
    4. Click "+" (below the "Top right" 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".
        Options of the Action Bar control

        Note

        At runtime, 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".
        Predefined image of the option
      • Validate the description window.

        Note

        To go back to the Action Bar description, simply click  Button '2'.
    6. The WLanguage code of this option will be used to save the changes in the "WIN_Product_form" window. To write this code:
      • Select (if necessary) the Action Bar control of the window.
      • Click on "OK".
      • A drop-down menu with the "Done" option is displayed.
        'OK' in the Action Bar

        Note

        This drop-down menu is only visible in edit mode to enter the WLanguage code associated with the option. This drop-down menu will not be displayed at runtime.
      • Right-click the option.
      • Select "Code" in the context menu that appears.
      • Write the following WLanguage code in the event "Selecting the menu":
        ScreenToFile()
        Product.Save()
        Close()

        Let's take a look at these lines of code:
        • ScreenToFile initializes the items with the values in the bound controls, for the current record.
        • <Data file>.Save is used to update the file data for the current record.
    7. Save the changes by clicking Save element in the quick access buttons.
    8. Close the code window (click the "X" in the upper-right corner of the code editor).
  • When closing the product form, the content of the product list in the "WIN_List_of_products" window must be refreshed to take into account the changes made in the form. To do so, use the event "Closing a child window" of "WIN_List_of_products".
    1. Click "WIN_List_of_products" in the open document tabs:
      Open document tabs
    2. Right-click the window background and select "Code" in the context menu. The following WLanguage code is automatically displayed in the event "Closing a child window":
      LooperDisplay(LOOP_Product,taCurrentSelection)

      Note

      The generated code does not use prefix syntax but WLanguage "standard" syntax. In prefix syntax, this code is as follows:
      LOOP_Product.Display(taCurrentSelection)
    3. Let's take a look at this WLanguage 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.
      • <Looper>.Display (or LooperDisplay) updates the Looper control data in the "WIN_List_of_products" window. The taCurrentSelection constant is used to update data from the selection bar.
        This WLanguage code was automatically generated when the wizard created the window.
    4. Close the code window (click the "X" in the upper-right corner of the code editor).
  • Test the "WIN_List_of_products" window in the simulator (click Test window in the quick access buttons).
    • In the list of products, click one of the products: for example, the "Polo Hibiscus Blue" product.
    • The product detail window appears. Enter "Polo Hibiscus Light blue" to modify the product name and click "OK".
    • 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 list of products, we will add an option in the window Action Bar to open the "Product form" window.
  • Then, we will modify the WLanguage code of the "Product form" window to add data to the Product data file.
  • To add an option to the window Action Bar:
    1. First of all, display (if necessary) the "WIN_List_of_products" window in the editor: click the corresponding button in the open document tabs.
    2. Select the Action Bar (at the top of the window).
    3. Open the Action Bar description window: right-click and select "Description" in the context menu.
      Action Bar description
    4. Click on number 2 (any number 2 in the window). The interface for typing an option in the toolbar is displayed.
    5. Click "+" (below the "Top right" 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".
        Entering the option caption
      • In the "Preset image" area, expand the list and select "Add".
        Selecting the preset image
      • Validate the description window.
    6. The WLanguage code of this option is used to open the "Product form" window and to reset its controls. To enter this WLanguage code:
      • Select (if necessary) the Action Bar control of the window.
      • Click the "+" button.
      • A drop-down menu with the "New product" option is displayed.
        Drop-down menu of the Action Bar control
      • Right-click the option.
      • Select "Code" in the context menu that appears.
      • Write the following WLanguage code in the event "Selecting the menu":
        Product.Reset()
        WIN_Product_form.OpenMobileWindow()

        <Data file>.Reset initializes the item variables in the "Product" data file with the default values to add a new record.
    7. Save the changes by clicking Save element in the quick access buttons.
    8. Close the code window (click the "X" in the upper-right corner of the code editor).
  • Let's now check how to add records in the product form window.
    1. Open the "WIN_Product_form" window in the editor: click the corresponding button in the open document tabs.
    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.
      • Right-click "Done" and select "Code" in the context menu.
      • The WLanguage code of the "Click" event does not change:
        ScreenToFile()
        Product.Save()
        Close()

        Let's look at this code again:
    3. Close the code window (click the "X" in the upper-right corner of the code editor).
  • Open "WIN_List_of_products" in the window editor and test it in the simulator ( Test window in the quick access buttons).
    • Click "+" in the Action Bar.
    • Enter a new product.
    • Validate. The new product is displayed in the list of products.
    • Close the simulator.

Note

The project uses several platforms: we recommend that you test the project via "GO" 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 uses 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 control to launch the camera. The photo will be retrieved as an image in memory and displayed in the Image control of the product.
  • create a Button control to select a photo from the mobile device's album.

Creating the button for taking photos

  • To create the Button control used to take photos:
    1. Open the "WIN_Product_form" window in the editor.
    2. Add a Button control in the window:
      • On the "Creation" pane, in the "Usual controls" group, click Create a Button control : the control shape appears under the mouse.
      • Then click on the top right of the Image control to create the Button control.
  • We will modify the Button control to associate it with an image representing a camera:
    1. Right-click the control to open its context menu.
    2. Select "Description". The control description window appears.
    3. In the "General" tab, click Drop-down menu next to the "Image" field. Select "Catalog" in the context menu that appears.
    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:
      Image catalog
    6. Double-click Image to select to select it.
    7. In the window that appears, you can select 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 path of the image is displayed in the Button control description.
    11. Give a name to the control: "BTN_Camera".
    12. Clear the control caption.
    13. Validate the description window.
    14. In the editor, reduce the control size.
  • This Button control uses the default style from the "Phoenix" skin template associated with the project: the control background is blue. In our case, the blue background is not necessary. We will modify the style associated with the control:
    1. If necessary, select the Button control you have just created.
    2. Open the context menu and select "Choose a style".
    3. The window that appears lists all styles that can be used for the Button controls in the Phoenix skin template.
      Styles of the skin template
    4. Click the magnifier and enter "BTN_Blank".
      Search for the style
      This name corresponds to a style without background color. This is the style we are going to use.
    5. Press Enter to validate. The "BTN_Blank" style is automatically selected.
    6. Validate the style selection window.
    7. The chosen style is automatically applied to the Button control.

Taking photos

We will now enter the WLanguage code to take a photo and to display it in the Image control of the product form.

  • To take photos:
    1. Right-click the Button control and select "Code" in the context menu.
    2. Write the following WLanguage 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 WLanguage code, VideoStartApp is used to launch the native camera application on the device in order to record video or to take a photo.
    3. Save the changes by clicking Save element in the quick access buttons.
    4. Close the code window (click the "X" in the upper-right corner of the code editor).

Selecting a photo in the photo album

We are going to add a Button control used to select a photo in the device album and to associate it with the product.

  • To create the Button control for selecting the photo, we are going to "Copy - Paste" the photo capture Button control that was just created:
    1. Select the "BTN_Camera" Button control that was just created.
    2. Press Ctrl + C: the Button control is copied to the clipboard.
    3. Press Ctrl + V: the mouse cursor changes and the control shadow appears under the cursor.
    4. Click in the window next to the "BTN_Camera" control: the new Button control is automatically created.
    5. Open the control description window (double-click the control):
      • Give a name to the control: "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.
Remark: Since this Button control is a copy of the Button control used to take photos, the style characteristics are identical. There is no need to modify them!

  • The WLanguage code associated with this Button control is used to open the device's photo album and select an image to display it in the Image control of the product form.
    1. Right-click the button and select "Code" in the context menu.
    2. Replace the WLanguage code of the "Click" event with the following WLanguage code:
      // Local variable
      sPhoto is string
      // Start the selection
      sPhoto = AlbumPicker(albumImage)
      IF sPhoto <> "" THEN
      IMG_Photo = sPhoto
      END
      In this WLanguage code, AlbumPicker is used to retrieve the selected photo from the photo album.
    3. Save the changes by clicking Save an element in the quick access buttons.
    4. Close the code window (click the "X" in the upper-right corner of the code editor).
Bar code of a 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 uses 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 a Button control to manage bar codes:
    1. Display (if necessary) the "WIN_Product_form" window in the editor.
    2. Add a Button control in the window:
      • On the "Creation" pane, in the "Usual controls" group, click Create a Button control.
      • The control shape appears under the mouse.
      • Create the control next to the "Bar cod." control (resize the Edit control if necessary).
    3. Open the Button control description window (double-click the control):
      • Give a name to the control: "BTN_Bar_Code".
      • Clear the control 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 control size.
  • As for the Button control used to take a photo, we will modify the style associated with the control:
    1. If necessary, select the Button control you have just created.
    2. Open the context menu and select "Choose a style".
    3. In the window that lists the available styles, click the magnifier and specify "BTN_Blank".
      Search for the style
    4. Press Enter to validate. The "BTN_Blank" style is automatically selected.
    5. Validate the style selection window.
    6. The chosen style is automatically applied to the Button control.
  • The WLanguage code of this Button control will make it possible to scan the bar code.
    1. Double-click the control and select "Code" in the context menu.
    2. Write the following WLanguage code in the "Click" event:
      // Local variable
      bc is BarCode
      // Start the scan
      bc = BCCapture()
      IF bc.Content <> "" THEN
      EDT_Bar_code = bc.Content
      END
      In this WLanguage code, BCCapture decodes the information stored in a bar code using the camera of the device.
    3. Save the changes by clicking Save element in the quick access buttons.
    4. Close the code window (click "X" in the code editor tab).
Defining 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 Image control that displays the product image,
      • the Button control used to take photos,
      • the Button control for selecting a photo from the album.
    2. Right-click to open the context menu of the selection and select "Anchor".
    3. Select "Centered horizontally" ( Centered horizontally ).
      Set anchors
    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):
      • Caption
      • Description
      • Bar code
      • Reorder date
    2. Right-click to open the context menu of the selection and select "Anchor".
    3. Select "Width" ( Width ).
    4. Validate.
  • Repeat this action for the Bar code and Reference Button controls.. In this case, select "Right" ( Right ).
  • All anchors have been defined in the window. The red arrows indicating the orientation of anchors are displayed:
    Window with anchoring in the editor
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.

  • To create the window:
    1. Create a new blank window. Click Create an element in the quick access buttons. The window for creating a new element appears: click "Window" then "Window". In the wizard, choose "Blank" and validate.
    2. The save window appears. 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. The Map control appears in the window editor.
    3. Open the "Map" control description window (double-click the control for example).
    4. In the control description window, specify the control name ("MAP_STORE") and validate.
    5. Save the changes by clicking Save an element in the quick access buttons.

Displaying stores on the Map control

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 use the following information:
  • Name,
  • Latitude,
  • Longitude.
<Map>.AddMarker is used to add a marker on the Map control. Then, simply adjust the zoom level to see all markers in the Map control. If the zoom is not properly adjusted, some markers may not be visible or may overlap on the control.
Implementation
  • To enter the WLanguage code to display the stores:
    1. Right-click outside the window. Select "Code" in the context menu that appears. The different WLanguage events associated with the window are displayed.
    2. Write the following WLanguage 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
      MAP_STORE.AddMarker(gMarker)
      END
      // Best zoom to view all markers on the map
      MAP_STORE.Zoom = zoomAdaptSize
    3. Save the changes by clicking Save element in the quick access buttons.
    4. Close the code window (click "X" in the code editor tab).
  • Test the "WIN_List_of_products" window in the simulator (click Test window in 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 multiple controls:
  • options on a category,
  • information about a contact, etc.
This control can contain at the same time:
  • rows defined in edit mode (static rows),
  • rows defined at runtime, by programming (dynamic rows).
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.
The window that will be created is as follows:
Window to create

Creating the window

We are going to create a window and add a Multiline Zone control.

  • To create the window:
    1. Create a new blank window:
      • Click Create an element in the quick access buttons.
      • The element creation window appears: click "Window" then "Window". In the wizard, choose "Blank" and validate.
    2. The save window appears. 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. Open the control description window (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 row. We are going to add as many rows as the number of options 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. Open the control description window (double-click the control for example).
    2. Click "New row". A window opens: this window contains all preset row templates.
    3. Select "Simple row with icon" and validate. Repeat this operation twice.
      Now, the multiline zone contains:
      • a "blank" row,
      • 3 "simple rows with icon".
        Multiline Zone control
    4. We are going to delete the blank row that is useless in our example:
      • Select the blank row (the first row).
      • Then click "Delete".
    5. Validate the description window. Your menu is created.
Each row 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 row: access to the list of products
  • To modify the image in the first row of the Multiline Zone control:
    1. Click the Image control in the first row.
    2. Open the image description window (double-click the control).
    3. In the description window:
      • Give a name to the image ("IMG_ListOfProducts" for example).
      • Click on the button Context menu. Select "Catalog" in the context menu that appears to select an image representing the action.
      • In the image catalog window, type "List" in the search control and press Enter.
      • Double-click the image you want to select.
      • 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.

        Note

        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 in the first row of the Multiline Zone control:
    1. Click the Static control in the first row.
    2. Open the description window (double-click the control).
    3. In the "General" tab of the 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.
      Multiline Zone control
Modifying the 2nd row: access to the map of stores
  • To modify the image in the second row of the Multiline Zone control:
    1. Click the Image control in the second row.
    2. Open the image description window (double-click the control).
    3. In the description window:
      • Give a name to the image ("IMG_MapOfStores" for example).
      • Click on the button Context menu. Select "Catalog" in the context menu that appears to select an image representing the action.
      • In the image catalog window, type "Map" in the search control and press Enter.
      • Double-click the image you want to select.
      • 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 in the second row of the Multiline Zone control:
    1. Click the Static control in the second row.
    2. Open the description window (double-click the control).
    3. In the "General" tab of the 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 row: exit from the application
  • To modify the image in the third row of the Multiline Zone control:
    1. Click the Image control in the third row.
    2. Open the image description window (double-click the control).
    3. In the description window:
      • Give a name to the image ("IMG_Exit" for example).
      • Click on the button Context menu. Select "Catalog" in the context menu that appears to select an image representing the action.
      • In the image catalog window, type "Close" in the search control and press Enter.
      • Double-click the image you want to select.
      • 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 in the third row of the Multiline Zone control:
    1. Click the Static control in the third row.
    2. Open the description window (double-click the control).
    3. In the "General" tab of the description window:
      • Give a name to the control ("STC_Exit" for example).
      • Change the caption (e.g., "Exit application").
    4. Validate the description window.
  • We are going to change the text style so that it is shown in black:
    1. Click the Static control in the first row.
    2. Open the description window (Alt + Enter).
    3. In the "Style" tab, select the "Caption" element, expand "Font color" and select black.
    4. Validate the description window.
    5. The text color changes automatically.
  • To repeat this action on the other Static controls:
    1. Click the Static control in the second row.
    2. Press F4. This key repeats the last action performed on the current control. In this case, the text becomes black.
    3. Select the Static control in the third row and press F4 again.

Programming the menu

  • Finally, we will write the WLanguage code necessary to perform each action in the menu:
    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 WLanguage code in the event "Selection (click) of a row in...":
      SWITCH MZ_MENU
      CASE 1 // List of products
      WIN_List_of_products.OpenMobileWindow()
      CASE 2 // Map of stores
      WIN_Map_of_stores.OpenMobileWindow()
      CASE 3 // Exit application
      Close()
      END
    3. Save the changes by clicking Save element in the quick access buttons.
    4. Close the code window (click the "X" in the upper-right corner of the 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" pane.
    2. Open the context 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" pane.
Until now, the test of windows was run individually by clicking Test window among the quick access buttons. We will now test the entire project.
  • To start the project test on the simulator:
    1. Click Test project in 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 26
Comments
Click [Add] to post a comment