ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WINDEV Mobile 2024 feature!
Help / WINDEV Mobile Tutorial / Tutorial - Developing an Android and iOS application
  • Lesson 2 - Developing the application
  • Overview
  • Displaying the list of products
  • Creating the window
  • Window test
  • Creating the form window
  • Creating the window
  • Creating the controls
  • Improving the UI
  • Displaying the data of a given record in the product form
  • Opening the form from the list of products
  • Editing a product
  • Adding a validation option to the Action Bar
  • Refreshing the list of products
  • Window test
  • Adding a product
  • Principle
  • Opening the product form from the Action Bar
  • Adding a product
  • Window test
  • Using the camera and displaying an image
  • Overview
  • Creating the button for taking photos
  • Control style
  • Taking photos
  • Creating a button to select a photo from the device
  • Product bar code
  • 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
  • WLanguage code associated with the window
  • Using a Multiline Zone control
  • Creating the window
  • Creating the Multiline Zone control
  • Modifying the Multiline Zone control
  • Programming the menu
  • Application test
  • To sum up

Tutorial - Developing an Android and iOS application

Lesson 2 - Developing the application
We will cover the following topics:
  • Creating a window containing a looper.
  • Specific controls: Looper, Multiline Zone and Map controls, etc.
  • Manipulating the database.
  • Features specific to the device used (GPS, Camera, etc.).
Durée de la leçon 30 min
Overview
In this lesson, you will create several windows:
  • a window with the list of products. When a product is clicked, a second window will open, allowing you to edit the product. It will also be possible to create a new product.
  • a window to interact with maps.
  • a window with a menu.

Warning
This lesson is based on the WM Product Management example used in Lesson 1. To follow this lesson, you must have completed the steps in Lesson 1.
Displaying the list of products
We will create a window to list different products. These products will be displayed in a "Looper" control.

Creating the window

To create a new window:
  1. Click New in the quick access buttons (or press Ctrl + N).
  2. In the "New" window, click "Window", then "Window".
  3. In the wizard, select the "Standard" tab.
  4. In the "Phone" area, choose "Looper" and validate.
    Reminder: The different lessons of this tutorial are based on an Android configuration. If you are using an iOS configuration, you might find iOS-specific options.
  5. The window creation wizard opens.
  6. Since our project contains multiple platforms (iOS and Android), the wizard prompts you 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
    Proceed to the next step of the wizard.
    If your project contains both platforms (Android and iOS), choosing "generic iPhone" will automatically generate the window for this platform. "iOS" automatically becomes the current platform of your project.
  7. The wizard prompts you 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.
      Selecting the data file
  8. Go to the next step.
  9. Select the style of the Looper control: "Image + Title + Text below". This template provides an interface containing the product image, name and description.
    Selecting the style of the Looper control
  10. Go to the next step.
  11. The wizard automatically shows the data file items that correspond to the different controls of the generated looper.
    Looper settings
  12. Keep the default items and go to the next step.
  13. Keep the suggested sort on the "ProductID" item. Go to the next step.
  14. The wizard shows multiple 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 from the Looper control by swiping the corresponding row.
    • Row selection code: If "Generate the opening code of the form in read-only mode" (or "Generate the opening code of the form in edit mode") is selected, you can generate a form window in read-only or edit mode.
  15. In our example, keep the default options. Go to the next step.
  16. Define a title and a name for the window. Type the window title: "List of products". The window name is automatically filled.
    Title and name of the Looper window
  17. Finish the wizard. The window is automatically created, displayed in the editor and saved. If your project uses the iOS and Android configurations, the window appears in the iOS configuration.
    Window created by the wizard

    The data is already displayed in the control, even in the editor. This concept is referred to as "Live data": the content of the data files on the development computer is used in the windows or reports manipulated in the editor. This feature is very useful to define the size of the controls in a window, for example. It can also be used to adapt the size of the controls to their content.
Our project uses two project configurations: let's see the same window for the Android configuration :
  1. Expand "Configurations (iOS application)" at the top of the "Project explorer" pane.
  2. Double-click the "Android application" configuration.
  3. The Android configuration is automatically selected and the corresponding window appears.

Window test

We will run a first test in the Android simulator to see the result:
  1. Click Test window in the quick access buttons (or press F9).
    Window run in test mode
  2. Close the simulator to go back to the window editor.
When a project is associated with multiple platforms, the window is tested in the current platform. The simulator adapts to reflect the current platform.
Creating the form window
We will create a new window 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 new element 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 completed: "WIN_Product_form".
    Saving the element
    Validate.
  3. The window is added to the project, for all configurations.
Configuration where the element will be saved
If multiple platforms are defined in the project, the save window associates 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.

Creating the controls

Our window must contain different controls with the product details. These controls will be bound to the items of the Product data file.
To create the different controls, we will use the items of the Product data file directly:
  1. Open the "Analysis" pane if necessary: on the "Home" tab, in the "Environment" group, expand "Panes", select "Panes", and then select "Analysis". The different data files of the "WM Product Management" analysis appear in the pane.
  2. Select the items of the "Product" data file displayed in the pane (except for the "ProductID" item).
  3. Drag the items and drop them onto the window (for example, on the upper-left area).
    Drag and drop items
The controls are automatically created and selected.
We need to make a few changes to improve the UI.

Improving the UI

We are going to reorganize and resize the controls.
Move all the controls to the bottom of the window.
  1. If necessary, select all the controls (Ctrl + A).
    Remark: Controls are selected by default when they are created.
  2. Move all the controls down.
We will now create our UI step by step.
Step 1 - Image
Click the Image control to select it. Move the control to the top center of the window.
Alignment guides appear when moving the Image control. These guides help you place controls relative to the window or to other controls.
Step 2 - Caption
Horizontally enlarge the control that contains the caption so that it fits the window.
Place the control below the Image control.
Step 3 - Description
Move the "Desc." control below the Caption control. "Desc." is a multiline control that contains the product description.
Enlarge the control vertically to display at least three lines of text. Align the Caption and Description controls:
  1. Select both controls (the caption must be selected first).
  2. Go to the alignment options ("Alignment" tab of the WINDEV Mobile ribbon).
    Alignment options
  3. We will align the outside and inside borders of the controls. Click "Justify (Ins. and Out.)".
Step 4 - Price and Reference
Move the Price control below "Desc.". Reduce the control so that it occupies half of the window width.
Place the Reference control next to Price and reduce it horizontally so that it fits the window. Use the alignment guides to align the right side of the Reference control with the Caption and Description controls.
Tip: You can adjust the size of the input area using the red sizing handles to reduce the space between the label and the input area.
Step 5 - Bar code
Place the Bar code control below the Price control.
Step 4 - Quantity and Reorder
Place the Quantity and Reorder controls side by side as you did for the Price and Reference controls.
You will get the following result.
Reorganized controls
Save the window.
Tab order in the window
We changed the order of the controls in the window. This order defines how focus moves from one control to another. For more details, see Tab order in a window, a page, etc.
Let's quickly test the window:
  1. Test the window (click Test window in the quick access buttons).
  2. The window is displayed with empty controls.
  3. Close the simulator.
The controls are empty because no record has been selected in the data file. Therefore, no data is displayed.
We will see how to display the data of a given record in the window, and how to open this window from the list of products.

Displaying the data of a given record in the product form

You can programmatically display the data from a given data file record.
To display the product data:
  1. Open the WLanguage events of the WIN_Product_form window:
    • In the open document tabs, right-click the tab of the current window.
    • In the context menu that appears, select "Element code".
      Element code
    • The code editor appears.
  2. Enter the following WLanguage code in the "End of initialization of WIN_Product_form" event:
    Product.ToWindow()

    <Data file>.ToWindow gets the data from the current record in the data file and displays it in the window controls. In our case, the current record is 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.
To test this code, a record must be selected. To do so, we will write the code to open the product form from the list of products.

Opening the form from the list of products

To open the product form of the selected product, perform the following actions:
  1. Select 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. Right-click to open the context menu of the Looper control and select "Code".
  4. In the code editor, write the following WLanguage code in the "Select a row in LOOP_Product" event:
    WIN_Product_form.OpenMobileWindow()

    Start writing and let the code completion system guide you: a drop-down list with the names of the different elements of the project appears as you type the name of the window. Select the name of the desired window.
    Similarly, the different functions and properties that can be used in the window appear when you insert a '.' (dot) after the name of the window.
  5. Save changes by clicking Save element in the quick access buttons.
  6. Close the code window (click the "X" icon in the upper-right corner of the code editor).
Let's test the "WIN_List_of_products" window again in the simulator:
  1. Click Test window in the quick access buttons.
  2. In the list of products, click one of the products.
  3. The detailed product window is displayed.
Close the simulator.
Editing a product
We will now modify our two windows and add an option to confirm the changes made to a product.
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
That is exactly the behavior we are looking for: don't apply any changes.
We only need to add a validation button to the Action Bar of the "WIN_Product_form" window to apply changes.

Adding a validation option to the Action Bar

To add a validation option to the Action Bar of "WIN_Product_form":
  1. Open the "WIN_Product_form" window in the editor (click on it in the open document tabs).
  2. Select the Action Bar (at the top of the window).
  3. Open the Action Bar description window (select "Description" in the context menu).
    Action Bar description

    The Action Bar description window adapts 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. You can click the numbers to access the options you want to configure.
    We will only use the options needed for our example. For more details, see Describing the Action Bar control.
  4. Click number 2 (any number 2 in the window). A new UI allows you to enter an option in the Action Bar.
  5. Click "+" (below the "Top right" area) to add an option. A new option is created at the top right.
  6. Change the option characteristics:
    • In the "Option caption" area, type "Done".
      Options of the Action Bar control

      At runtime, the option caption appears in the Action Bar:
      • If no image is associated with the option.
      • If the option is moved to the bottom menu.
    • In the "Preset image" area, expand the list and select "Done".
      Predefined image of the option
    • Confirm changes and close the description window.
      To go back to the Action Bar description, simply click Button '2'.
  7. The WLanguage code of this option will be used to save the changes in the "WIN_Product_form" window. To write this code:
    • Select the Action Bar control.
    • Click "OK".
    • A drop-down menu with the "Done" option appears.
      'OK' in the Action Bar

      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 "Select a menu" event:
      Product.FromWindow()
      Product.Save()
      Close()

      Let's take a look at these lines of code:
  8. Save changes by clicking Save element in the quick access buttons.
  9. Close the code window (click the "X" icon in the upper-right corner of the code editor).

Refreshing the list of products

When the product form is closed, the content of the list of products 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 "Close a child window" of "WIN_List_of_products" event.
  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 "Close a child window" event:
    LooperDisplay(LOOP_Product,taCurrentSelection)

    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 "Close a child window" event is run when the 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 updates the data according to the selection bar.
      This WLanguage code was automatically generated when the wizard created the window.
  4. Close the code window (click the "X" icon in the upper-right corner of the code editor).

Window test

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. Change the name to "Polo Hibiscus, Light blue" 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.
Adding a product

Principle

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 edit the WLanguage code of the "Product form" window to add data to the Product data file.

Opening the product form from the Action Bar

To add an option to the Action Bar:
  1. Open the "WIN_List_of_products" window in the editor: click on it 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 number 2 (any number 2 in the window). The interface for typing an option in the toolbar appears.
  5. Click "+" (below the "Top right" area) to add an option. A new option is created at the top right. Change the option characteristics:
    • In the "Option caption" area, type "New product".
      Editing the option text
    • In the "Preset image" area, expand the list and select "Add".
      Selecting the preset image
    • Confirm changes and close the description window.
  6. The WLanguage code of this option will open the "Product form" window and reset its controls. To enter this WLanguage code:
    • Select the Action Bar control.
    • 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 "Select a menu" event:
      Product.Reset()
      WIN_Product_form.OpenMobileWindow()

      <Data file>.Reset resets the item variables in the "Product" data file to the default values to handle the new record.
  7. Save changes by clicking Save element in the quick access buttons.
  8. Close the code window (click the "X" icon in the upper-right corner of the code editor).

Adding a product

Let's now check how to add records in the product form window.
  1. Select the "WIN_Product_form" tab to open the window in the editor.
  2. Open the code of the validation option in the Action Bar:
    • Select the Action Bar.
    • Click "OK".
    • A drop-down menu with the "Done" option appears.
    • Right-click "Done" and select "Code" in the context menu.
    • The WLanguage code of the "Click" event does not change:
      Product.FromWindow()
      Product.Save()
      Close()

      Let's look at this code again:
  3. Close the code window (click the "X" icon in the upper-right corner of the code editor).

Window test

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 appears in the list of products.
  • Close the simulator.
The project uses several platforms: we recommend that you test the project via the "GO" button for each platform. You will notice the application looks and behaves differently on each platform in the simulator.
Using the camera and displaying an image

Overview

We will manage the product image using the device camera.
To do so, we are going to:
  • create a Button control to launch the camera. The photo will be stored 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.
Warning
To test this feature, the test must be run on the mobile device, and not in the simulator. This feature requires hardware components that are not available in the simulator. When a test is run on a mobile device, the application generation wizard opens automatically.
For more details on generating a mobile application, see the following tutorials:

Creating the button for taking photos

To create the Button control to be used to take photos:
  1. Open the "WIN_Product_form" window.
  2. Position the Image control on the left of the window.
  3. Align it with the Static control using the alignment rulers.
  4. Add a Button control in the window:
    • On the "Creation" tab, 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 to the right of "Image". select "Catalog" in the context menu that appears.
  4. The image catalog of WINDEV Mobile opens. 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 the Image to select image 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 name the image "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.

Control style

The project uses the "Material 3" skin template. This Button control uses the default style (purple background). We have already modified this style by adding the image. As we don't need the purple background for this button, we will change the style associated with the control:
  1. If necessary, select the previously created Button control.
  2. Open the context menu and select "Choose a style".
  3. The window that appears shows all the styles that can be used for the Button controls in the "Material 3" skin template.
    Skin template styles
  4. Click the search bar 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. Validate the style selection window.
  6. The chosen style is automatically applied to the Button control. The image associated with the Button control is preserved.

Taking photos

We will now enter the WLanguage code to take a photo and 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
    ProductImage is string 
    // Start the camera
    ProductImage = VideoStartApp(viPictureCapture)
    IF ProductImage <> "" THEN
    IMG_Photo = ProductImage
    END
    In this WLanguage code, VideoStartApp is used to launch the native camera application on the device to record videos or take photos.
  3. Save changes by clicking Save element in the quick access buttons.
  4. Close the code window (click the "X" icon in the upper-right corner of the code editor).

Creating a button to select a photo from the device

We will add a Button control to select a photo from the device album and associate it with the product.

To create the Button control, we will copy and paste the Button control we created previously:
  1. Select the "BTN_Camera" control.
  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. Confirm changes and close 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 change them!

The WLanguage code of this Button control opens the device's photo album and selects 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
    ProductImage is string 
    // Start the selection
    ProductImage = AlbumPicker(albumImage)
    IF ProductImage <> "" THEN
    IMG_Photo = ProductImage
    END
    In this WLanguage code, AlbumPicker retrieves the selected photo from the photo album.
  3. Save changes by clicking Save an element in the quick access buttons.
  4. Close the code window (click the "X" icon in the upper-right corner of the code editor).
Product bar code

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 scanned with the camera of the device and managed by a specific WLanguage function.
Warning
To test this feature, the test must be run on the mobile device, and not in the simulator. This feature requires hardware components that are not available in the simulator. When a test is run on a mobile device, the application generation wizard opens automatically.
For more details on generating a mobile application, see the following tutorials:

Implementation

First, we will create a Button control.
It's your turn:
As we have already created several buttons in this lesson, here are just a few indications: Create the control next to the "Bar code" control (resize the Edit control if necessary).
  • Name the button "BTN_Bar_Code".
  • Leave the caption blank.
  • Select a bar code image from the image catalog.

Reduce the control size if necessary.
Let's change the style of this control, as we did with the camera button. We will copy the same style we used for the previous buttons:
  1. Select the camera button.
  2. On the "Style" tab, in the "Style and skin template" group, click "Copy style".
  3. Then click the Button control you previously created. The style is automatically applied.
Let's write the WLanguage code of this control. This code will be used 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 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.
Anchors are used to adapt the size of the controls to the resolution and avoid "empty" spaces in the window (especially at the bottom right).
If the target device is specified when the project is created, the window size will be set to fit the target device. In this case, you don't need to set any anchors.
If the target device is not specified or multiple devices are used, the smallest common resolution must be chosen when creating the project. Anchors must be set in this case.

Let's set the anchors of the different controls in the window:
  1. Select the following controls (click each control while holding down the Ctrl key):
    • 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 "Horizontally centered" (Horizontally centered).
    Anchors
  4. Validate.
To set the anchors of the Edit controls:
  1. Select the following Edit controls (click each control while holding down the Ctrl key):
    • 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 Reference control and the Button control used to manage bar codes. In this case, select "Right" (Right).
All anchors have been defined in the window. The red arrows indicating the orientation of the anchors are displayed:
Window with anchors in the editor
Using the Map control
We will see the Map control and the GPS WLanguage functions.
Our database contains a "Store" data file. This data file contains the addresses of the stores that will be located on a map using the mapping functions.

Creating the window

We will create a new window and add a Map control.

It's your turn:
As we have already created a window in this lesson, here are just a few indications:
  • Create a blank window.
  • Enter "Map of stores" for the window title (the name "WIN_Map_of_stores" is automatically filled).

Creating the Map control

To create the Map control:
  1. On the "Creation" tab, 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, name the control "MAP_STORE" and validate.
  5. Save changes by clicking Save an element in the quick access buttons.

Displaying stores on the Map control

We will write the code to display all the stores from the "Store" data file on a map.
To do so, we will loop through the "Store" data file with a FOR EACH loop. Then, we will use Marker variables. Marker variables allow you to define the markers that will be displayed on a map.
A marker contains different information. We will use the following information:
  • Name,
  • Latitude,
  • Longitude.
<Map>.AddMarker adds a marker in the Map control. Then, simply adjust the zoom level to view all the markers in the Map control. If the zoom is not properly adjusted, some markers may not be visible or may overlap on the control.

WLanguage code associated with the window

We will write the WLanguage code used to display the stores directly in the initialization event of the window that contains the Map control.
To write the WLanguage code to display the stores:
  1. Select the window tab in the open document tabs and click "Element code" in the context menu. The different WLanguage events associated with the window are displayed.
  2. Write the following WLanguage code in the "Global declarations of..." event.
    // Global variables
    StoreMarker is Marker
    // Load the stores
    FOR EACH Store 
    // Marker coordinates
    StoreMarker.Position.Latitude = Store.Latitude
    StoreMarker.Position.Longitude = Store.Longitude
    // Marker name
    StoreMarker.Name = Store.Name
    // Add the marker
    MAP_STORE.AddMarker(StoreMarker)
    END
    // Best zoom to view all markers on the map
    MAP_STORE.Zoom = zoomAdaptSize
  3. Save changes by clicking Save element in the quick access buttons.
  4. Close the code window.
Test the "WIN_Map_of_stores" window in the simulator (click Test window in the quick access buttons).
Warning
During the test, the map may show a loading error message. The Map control is subject to specific terms and conditions. These conditions must be met for the Map control to be displayed correctly on the device. For more details, see Conditions for using the Map control.
Close the simulator.
Using a Multiline Zone control
The "Multiline Zone" control is usually used on mobile platforms. This control is used to group multiple controls:
  • options of 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, through programming (dynamic rows).
We will use a Multiline Zone control to create the main menu of the application. We will 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 will create a window and add a Multiline Zone control.

It's your turn:
As we have already created a window in this lesson, here are just a few indications:
  • Create a blank window.
  • Enter "Menu" for the window title (the name "WIN_Menu" is automatically filled).

Creating the Multiline Zone control

To create the Multiline Zone control:
  1. On the "Creation" tab, 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 will 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 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 control contains:
    • a "blank" row,
    • 3 "simple rows with icon".
      Multiline Zone control
  4. We will remove the blank row in our example:
    • Select the blank row (the first row).
    • Then click "Delete".
  5. Confirm changes and close the description window. Your menu is created.
Each row includes an Image control, a Static control and an arrow image. We will change the image and text of each row to represent the actions in the menu.

Modifying the 1st row: access to the list of products
To change 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 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 box and press Enter.
    • Double-click the image you want to select.
    • In the image configuration window, select a size (80 for example, W (Width) = 80 and H (Height) = 80), give a name to the image (e.g. "ListOfProducts") and validate.
      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 change the text 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 change 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 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 image configuration window, select a size (80 for example, W (Width) = 80 and H (Height) = 80), give a name to the image (e.g. "MapOfStores") and validate.
  4. Validate the description window.
To change the text 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 the application
To change 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 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 image configuration window, select a size (80 for example, W (Width) = 80 and H (Height) = 80), give a name to the image (e.g. "Close") and validate.
  4. Validate the description window.
To change the text 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 ("Exit application", for example).
  4. Validate the description window.
We will 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. Confirm changes and close 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. 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 its controls.
  2. In the code editor, type the following WLanguage code in the "Select (click) a row in..." event:
    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 changes by clicking Save element in the quick access buttons.
  4. Close the code window (click the "X" icon in the upper-right corner of the code editor).
Application test
The last step consists in specifying that the menu window is the first window of the application. To do so, we will test the entire project and define the first window of the application.

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) appears to the left of the window name, in the "Project explorer" pane.
So far, we have tested the windows individually by clicking Test window in 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.
To sum up
Completed project
Do you want to check the end result of the steps described here? A completed project is available. This project contains the different windows created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - Develop an Android/iOS application", double-click "Android/iOS product management - Answers".
In this lesson, we covered different aspects of the development of a mobile application:
  • adding and modifying records in a database,
  • using powerful controls in a mobile application: Looper, Map, Multiline Zone,
  • using specific functionalities (camera, bar code, etc.).
We also saw the importance of anchoring controls. In the next lesson, we will see how to use layouts to obtain a completely different interface depending on the orientation.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/20/2023

Send a report | Local help