• Creating a window containing a looper.
• Specific controls: Looper, Multiline Zone and Map controls, etc.
• Handling the database.
• Features specific to the device used (GPS, Camera, etc.).

	Estimated time: 30 mn

• 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 completed project is available. This project contains the different windows that will be created in this lesson. To open the completed 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)".

• To view the analysis associated with the project:
  1. Click in the quick access buttons of the WINDEV Mobile menu.
  2. The data model editor is displayed.
     
  3. This analysis includes 3 data files:
     • A "Product" data file, which contains the product description: caption, price, quantity, etc.
     • A "Characteristic" data file, which contains the different product characteristics. For example, if the product is a T-shirt, its characteristics will be the size, color, etc. 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).

Creating the window

• To create the window used to list the products:
  1. Click in the quick access buttons. The new element 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 both, iOS and Android. 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 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").
     
     Go to the next step of the wizard.
     

     	Note	If your project contains both platforms (Android and iOS), choosing "generic iPhone" will automatically generate the window for this platform. The "iOS" platform automatically becomes the current platform of your project.
  5. 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.
       
  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.
     
  8. Go to the next step.
  9. The wizard automatically shows the data file items that correspond to the different controls of the generated looper.
     
  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 shows multiple options for generating the Looper window:
      
      • Generate a creation button in the Action Bar: If this option is selected, the wizard proposes to generate an editable form window.
      • Enable the deletion by row swipe: If this option is selected, the user will 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 edit mode" (or "Generate the opening code of the form in read-only mode") is selected, you can generate a form window in read-only or edit mode.
  13. In our example, keep the default options. Go to the next step.
  14. Define a title and a name for the window. Type the window title: "List of products". The window name is automatically filled.
      
  15. Validate the wizard. The window is automatically created, displayed in the editor and saved. If your project uses the iOS and Android configurations, the window appears in the iOS configuration.
      
      
      

      	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.

• If your project uses both project configurations (Android and iOS), you can use 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.

• We will run a first test in the Android simulator to see the result. Click in the quick access buttons (or press F9).
  

• 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 run the test on another platform (iOS, for example), simply double-click its name in the "Project explorer" pane. Remark: In this part, the images representing the tests correspond to an Android shell.

Creating the window

• To create the form window:
  1. Create a new blank window.
     • Click 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".
     
     Validate.
  3. The window is added to the project, for all configurations.

	Note	If multiple platforms are defined in the project, the save window associates the new element to all platforms by default. To associate the element to a single platform, simply expand "Configurations" in the save window and choose the desired platform:

Creating controls

• To create the different Edit controls that will display the product details:
  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 described in 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 you have just created.
     
  4. Resize the controls ("Caption", "Descr.", "Bar cod." and "Reorder.") so that they fit in the window.
  5. Reorganize the controls in the window. Follow this order: "Photo", "Caption", "Descr.", "Price", "Ref", "Bar cod.", "Quantity", "Reorder.".
     
  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.
       
       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 in the quick access buttons).
  1. The window is displayed with empty controls.
  2. Close the simulator.

• To display the product data:
  1. Open the WLanguage events associated with the window:
     • Right-click the area next to the window.
     • Select "Code" in the context menu that appears.
     • The code editor appears.
  2. Enter the following WLanguage code in the "End of initialization of WIN_Product_form" event:
     
     FileToScreen()
     
     
     FileToScreen displays the data from the data file in the controls, 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.

Opening the form from the list of products

• Follow these steps:
  1. Select the "List of products" window: click "WIN_List_of_products" in the open document tabs (under the WINDEV Mobile ribbon):
     
  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()
     
     
     

     	Note	Let the code completion 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. Remark: If the window name does not appear in the list, it means that it has not been saved.
  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).

• Test the "WIN_List_of_products" window again in the simulator (click in the quick access buttons).
  • In the list of products, click one of the products.
  • The detailed product window is displayed.

• Close the simulator.

Modifying the product form

• First, open the "WIN_Product_form" window: click the corresponding tab in the open document tabs.

• To add a validation option to the 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.
     
     
     

     	Note	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. 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 will only see the options required for our example. For more details, see Describing the Action Bar control.
  3. Click on number 2 (any number 2 in the window). A new UI allows you to enter an option in the Action Bar.
  4. Click "+" (below the "Top right" area) to add an option. A new option is created at the top right.
  5. Change the characteristics of this option:
     • In the "Option caption" area, type "Done".
       
       
       

       	Note	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".
       
     • Validate the description window.
       

       	Note	To go back to the Action Bar description, simply click .
  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 the Action Bar control.
     • Click "OK".
     • A drop-down menu with the "Done" option is displayed.
       
       
       

       	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 "Select a menu" event:
       
       ScreenToFile()
       Product.Save()
       Close()
       
       
       Let's take a look at these lines of code:
       • ScreenToFile updates the items of the current record with the data from the bound controls.
       • <Data file>.Save updates the current record in the data file.
  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).

• 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 "Close a child window" of "WIN_List_of_products" event.
  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)
     
     
     

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

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

Creating a new product

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

• To add an option to the Action Bar:
  1. Open the "WIN_List_of_products" window in the editor: click the corresponding tab 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.
     
  4. Click on 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 characteristics of this option:
     • In the "Option caption" area, type "New product".
       
     • In the "Preset image" area, expand the list and select "Add".
       
     • Validate the description window.
  6. The 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).

• Let's now check how to add records in the product form window.
  1. Open the "WIN_Product_form" window: click the corresponding tab in the open document tabs.
  2. Display the code of validation option in the Action Bar:
     • Select the Action Bar.
     • Click "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:
       • By default, <Data file>.Save is equivalent to <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).

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

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

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.

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. Add a Button control in the window:
     • On the "Creation" tab, in the "Usual controls" group, click : 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 to the right of "Image". 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:
     
  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 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 change 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.
     
  4. Click the search icon 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.

Taking photos

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

Selecting a photo in the photo album

• To create the Button control for selecting the photo, we will "Copy - Paste" the photo Button control that we have just created:
  1. Select the "BTN_Camera" Button 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. Validate the description window.

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

Overview

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" tab, in the "Usual controls" group, click .
     • 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 for the bar code in the image catalog (type "Code" in the search box, for example).
  4. Validate the description window.
  5. In the editor, reduce the control size.

• We will change the control style, like we did for the Button control used to take a photo:
  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 contains the available styles, click the search icon and enter "BTN_Blank".
     
  4. 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 changes by clicking in the quick access buttons.
  4. Close the code window (click "X" in the code editor tab).

• To 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" ().
     
  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
     • Reference
  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 the anchors are displayed:
  

Creating the window

• To create the window:
  1. Create a new blank window. Click 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 completed: "WIN_Map_of_stores". Validate.

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, specify the control name ("MAP_STORE") and validate.
  5. Save changes by clicking in the quick access buttons.

Displaying stores on the Map control

• Name,
• Latitude,
• Longitude.

• 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 "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 (click "X" in the code editor tab).

• Test the "WIN_Map_of_stores" window in the simulator (click in the quick access buttons). Then, 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

• To create the window:
  1. Create a new blank window:
     • Click in the quick access buttons.
     • The new element 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 completed: "WIN_Menu". Validate.

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.

• 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".
       
  4. We will remove the blank row in our example:
     • Select the blank row (the first row).
     • Then click "Delete".
  5. Validate the description window. Your menu is created.

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

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

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

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

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

• To start the project test on the simulator:
  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.