Tutorial - Developing an Android and iOS application

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

Creating the window

1. Click 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 lessons in 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").
   
   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.
     
8. Go to the next step.
9. Select the style of the RepeatString Looper control: "Image + Title + Label below". This template provides an interface containing the product image, name and description.
   
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.
    
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 proposes several options for generating the Looper window:
    
    • Generate a creation button in the Action Bar If this option is selected, the wizard will generate a window for data entry.
    • Enable the deletion by row swipe If this option is selected, the user can delete an item from the RepeatString field by simply scanning the corresponding line.
    • Row selection code If the "Generate the opening code of the form in read-only mode" option (or the "Generate the opening code of the form in edit mode" option) is selected, the wizard proposes to generate a form window for display or input.
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.
    
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.
    
    
    
    

    The data is already displayed in the control, even in the editor. This is the "Live data " concept: the contents of data files present on the development workstation are used in windows or reports manipulated under 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.

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

1. Click in the quick access buttons (or press F9).
   
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 window

1. Create a new blank window.
   • Click in the quick access buttons.
   • When 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 proposed: "WIN_Product_form".
   
   Validate.
3. The window is added to the project, for all configurations.

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

1. Display the "Analysis" pane if necessary: under the "Home" pane, in the "Environment" group, pull down "Panes" and select "Panes" then "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).
   

Improving the UI

1. If necessary, select all the controls (Ctrl + A).
   Note: All fields are already selected during creation.
2. Move all the controls down.

Alignment guides appear when moving the Image control. These guides help you place controls relative to the window or to other controls.

1. Select both controls (the caption must be selected first).
2. Go to the alignment options ("Alignment" tab of the WINDEV Mobile ribbon).
   
3. We will align the outside and inside borders of the controls. Click "Justify (Ins. and Out.)".
   

Tip: To keep the input field to a manageable size, you can use the red inner handle of the input field to reduce the space between the label and the input field.

You will get the following result.

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.

1. Test the window (click in the quick access buttons).
2. The window is displayed with empty controls.
3. Close the simulator.

Displaying the data of a given record in the product form

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

Opening the form from the list of products

1. Go to the "Product List" window: click on the "FEN_Product_List" button in the open document tabs (under the WINDEV Mobile menu ribbon):
   
2. Select the Looper control.
   Warning: make sure you select the RepeatString field and not one of the fields in the RepeatString field.
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()
   
   
   
   

   Enter this code on the keyboard and let the code-entry assistance guide you: as soon as you type the first letters of the window name, a drop-down list opens, proposing the names of the various project elements beginning with these letters. 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 in the quick access buttons.
6. Close the code window (click the "X" icon in the upper-right corner of the code editor).

1. Click in the quick access buttons.
2. In the list of products, click one of the products.
3. The detailed product window is displayed.

Adding a validation option to the Action Bar

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

   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 a preview 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. Modify the characteristics of this option:
   • In the "Option caption" area, type "Done".
     
     
     
     

     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".
     
   • Confirm changes and close the description window.
     
     

     To go back to the Action Bar description, simply click .
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.
     
     
     
     

     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:
     • <Data file>.FromWindow updates the items of the current record with the data from the bound controls in the window.
     • <Data file>.Save updates the current record in the data file.
8. Save changes by clicking 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

1. Click "WIN_List_of_products" in the 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 in the quick access buttons).

• In the product list, click on one of the products with the mouse: for example, the product "Polo Hibbicus, Blue".
• 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.

Principle

• 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

1. If necessary, display the "FEN_Liste_des_produits" window under the editor: click on the corresponding button in the open document tabs.
2. Select the Action Bar (at the top of the window).
3. Display the Action Bar description window: right-click and select "Description" from the context menu.
   
4. Click number 2 (any number 2 in the window). The interface for entering a toolbar option appears.
5. Click "+" (below the "Top right" area) to add an option. A new 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".
     
   • 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.
     
   • 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 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

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:
     • By default, function <Data file>.Save is equivalent to function <Data file>.Modify: the current record in the data file is modified.
     • If <Data file>.Reset has been called before <Data file>.Save (which is the case when a new product is added), <Data file>.Save adds the new record in the data file (equivalent to <Data file>.Add).
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 ( 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.

Our project uses several platforms: we recommend that you create a GO for each platform. You will notice the application looks and behaves differently on each platform in the simulator.

Overview

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

• Deploying an Android application.
• Deploying an iOS application.

Creating the button for taking 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 Text control using the alignment rulers.
4. Add a Button control in the window:
   • In the "Creation" pane, in the "Usual controls" group, click on : the shape of the field appears under the mouse.
   • Then click on the top right of the Image control to create the Button control.

1. Right-click the control to open its context menu.
2. Select "Description". The control description window appears.
3. On the "General" tab, click to the right of "Image". in the context menu, select the "Catalog" option.
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:
   
6. Double-click the 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 the field a name: "BTN_Appareil_Photo".
12. Clear the control caption.
13. Validate the description window.
14. In the editor, reduce the control size.

Control style

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.
   
4. Click the search bar and enter "BTN_Blank".
   
   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

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

1. Select the "BTN_Camera" control.
2. Use the Ctrl + C key combination: the Button field is copied to the clipboard.
3. Use the Ctrl + V key combination: the mouse cursor changes and the field shadow appears below the cursor.
4. Click in the window next to the "BTN_Appareil_Photo" field: the new Button field is automatically created.
5. Open the control description window (double-click the control):
   • Give the field a name: "BTN_Album_Photo".
   • Select an image in the image catalog.
     Note: Remember to change the default image name.
6. Confirm changes and close the description window.

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 in the quick access buttons.
4. Close the code window (click the "X" icon in the upper-right corner of the code editor).

Overview

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:

• Deploying an Android application.
• Deploying an iOS application.

Implementation

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.

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 in the quick access buttons.
4. Close the code window (click "X" in the code editor tab).

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" ().
   
4. Validate.

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" ().
4. Validate.

Repeat this action for the Reference control and the Button control 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:

Creating the window

Creating 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 in the quick access buttons.

Displaying stores on the Map control

• Name,
• Latitude,
• Longitude.

WLanguage code associated with the window

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 in the quick access buttons.
4. Close the code window.

Test the "WIN_Map_of_stores" window in the simulator (click 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.

• options of a category,
• information about a contact, etc.

• rows defined in edit mode (static rows),
• rows defined at runtime, through programming (dynamic rows).

The window that will be created is as follows:

Creating the window

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

• List of products.
• Map of stores.
• Exit application.

Modifying the Multiline Zone control

1. Open the control description window (double-click the control, for example).
2. Click "New row". A window is opened: this window contains all the preset line 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".
     
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.

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

1. Click the Static Text 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.
   

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

1. Click the Static Text 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.

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

1. Click the Static Text 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.

1. Click the Static Text control in the first row.
2. Open the description window (Alt + Enter).
3. On 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.

1. Click the Static Text 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 Text control in the third row and press F4 again.

Programming the menu

1. Right-click the Multiline Zone control and select "Code".
   Please note Make sure you select the Multiline Zone control field and not one of its component fields.
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 in the quick access buttons.
4. Close the code window (click the "X" icon in the upper-right corner of the code editor).

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 in the quick access buttons. We will now test the entire project.

1. Click 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.

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 corrected project, on the home page, click on "Tutorial", then in the "Tutorial - Complete application with data" area, click on the "Open corrected project" link.

• adding and modifying records in a database,
• the use of a number of useful fields in a mobile application: RepeatString, map, multiline zone,
• using specific functionalities (camera, bar code, etc.).