• Creating a query with parameters.
• Creating a window via the wizard.
• Implementing the search.
• Managing "Pull to refresh".
• Adding a sliding menu.

	Estimated time: 30 mn

• the window displays the list of products in a Looper control.
• when the user enters the name of a product in the search field, only the products that match the search criteria are displayed in the Looper control.

The interface of "WIN_Advanced_LIST_Products" will be as follows:

• Create the query for selecting records in the Product data file.
• Create and configure the search window.

	Note	What is a select query? A select query is a query that will "choose" the records corresponding to the specified criteria. This type of query is called "select query" because of the SQL SELECT command.

• To follow this lesson, open (if necessary) the "WM Product Management" project you worked on in the previous lesson.
  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)".
  3. A dialogue box prompts you to open the project you worked on in the previous lesson. You can open the local copy or the original project. Select "Open the local copy".
     

     	Answers	A corrected project is available. This project contains the different windows that will be created in this lesson. To open the corrected project, go to the home page and click "Tutorial", then in "Part 4 - Development of an Android/iOS application", double-click "Android/iOS product management (Answers)".

Creating the query

• The query editor will be used to create the query.
  1. Click in the quick access buttons. The new element window appears: click "Query­". The query creation wizard starts.
  2. Select the "Select" option.
     This query will be used to select records. Go to the next step.
  3. The query description window appears.
  4. Give a name and a caption to your query: set "QRY_Products" as query name and "Find products by name" as caption:
     

• To build the query, we are going to select the elements that will be displayed in the result.
  1. The query will display the characteristics of the selected product:
     • Select the "Product" data file in the "Analysis" window area.
     • Click the arrow to select all data file items in the query.
       
  2. The query description window is as follows:
     
  3. Validate the query description window ("OK" button).
  4. The graphic representation of the query and the window for saving the query are displayed.
  5. Validate the displayed information.

Query test

1. Click .
2. The result is displayed in a window:
   
   The result lists ALL products.
   In our case, we will only display the products that match the search criteria (the product name). To do so, we must use a query with parameters.
3. Close the window.

Adding a selection condition

• To define a query parameter, open the query description window:
  double-click the background of the graphic query representation (or select "Query description" in the context menu).

• To set the "Product name" parameter:
  1. In the middle of the window, select Product.Caption.
  2. Open the context menu and select "Selection condition .. New condition".
     
  3. In the window that appears, we will specify that the selection condition corresponds to a parameter:
     
     • Select "contains".
     • Select "the parameter".
     • Keep the default parameter name: "ParamCaption".
  4. Validate the condition description window. The number "1" appears on the right of "Product.Caption", indicating that a selection condition has been defined.
     
  5. Validate the query description window.
  6. The query graph is modified to take into account the selection condition that was defined.
     
  7. Save the query by clicking in the quick access buttons.

Test of the query with parameters

• To test the query with parameters:
  1. Click .
  2. A window appears and allows you to enter the different query parameters.
  3. Select the ParamCaption parameter. In the lower section of the window, enter "Polo".
     
  4. Validate the window. The query result corresponding to the specified parameters is displayed.
  5. Close the window.

Creating the window

• To create the search window:
  1. Click in the quick access buttons. The new element window appears: click "Window" then "Window".
  2. In the wizard, choose "Looper" and validate.
  3. The window creation wizard starts.
  4. Choose the platform to be used: "Generic Android phone". Go to the next step of the wizard.
  5. The wizard prompts you to choose the data source associated with the window. In our case, it is a query:
     • Click "Queries".
     • Select the query that was just created: "QRY_Products".
       
  6. Go to the next step.
  7. Select the looper style: "Image + Title + Text below". Go to the next step.
  8. The wizard automatically shows the query items that correspond to the generated looper. Keep the default options and go to the next step.
  9. Keep "Caption" as the default sort item. Go to the next step.
  10. The wizard shows multiple options for generating the Looper window. In our example, keep the default options. Go to the next step.
  11. Define a title and a name for the window. In our case:
      • Set "Products" as title.
      • Set "WIN_Advanced_LIST_Products" as name.
  12. Validate the wizard. The window is automatically created, displayed in the editor and saved.
      

• We will modify the "WIN_Advanced_LIST_Products" window to open the Product form that we created in a previous lesson.
  1. Right-click the Looper control and select "Code".
     Caution: make sure you select the Looper control and not one of the controls it contains.
  2. In the code editor, type the following WLanguage code in the "Initializing..." event:
     
     QRY_Products.ParamCaption = Null
     
  3. This line of code initializes the value of the parameter in the "QRY_Products" query used by the Looper control. By default, the value of this parameter is set to "Null" (which ignores the parameter). Therefore, all products will be displayed in the window.
  4. In the code editor, type the following WLanguage code in the "Selecting a row ..." event:
     
     Product.ReadSeek(ProductID, QRY_Products.ProductID)
     WIN_Product_form.OpenMobileWindow()
     
     Let's analyze this code:
     • The Looper control is based on the QRY_Products query. By selecting a product in the Looper control, you are actually selecting a record in the query.
     • The aim is to open the previously created window when a row is clicked . This window is based on the Product data file.
     • The record selected by the query must be in the "Product" data file in order to load the buffer of the selected data in memory. The operation is performed by <Data file>.ReadSeek.
     • Then, the form window named "WIN_Product_form" is opened by <Window>.OpenMobileWindow.
  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).
  7. Test the window you have just created in the simulator (click in the quick access buttons).
     
  8. Click one of the products: the form window is displayed.
  9. End the test.

Managing the search

• Allow the search in the Action Bar.
• Create a search button in the Action Bar.

• To allow the search in the Action Bar:
  1. Open the "WIN_Advanced_LIST_Products" window in the editor.
  2. Open the Action Bar description window (double-click the Action Bar).
  3. In the "Details" tab, check "Allow the search in the Action Bar".
     

• To create a search button in the Action Bar:
  1. In the "General" tab of the Action Bar description window:
  2. Click number 2. A new UI allows you to enter an option in the toolbar.
  3. Click the "+" button to add an option. A new option is created at the top right. Change the characteristics of this option:
     • In the "Caption" area, type "Find".
     • In the "Preset image" area, expand the list and select "Find".
     • Validate the description window.
  4. The code of this option will show the search area. To write this code:
     • Select the Action Bar.
     • Click the search button.
     • A drop-down menu with the "Find" 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:
       
       ActionBarSearchVisible(True)
       
  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).
  7. Select the Action Bar and open the associated code (press F2 or select "Code" in the context menu).
  8. In the code editor, type the following WLanguage code in the "Validation of the search..." event:
     
     QRY_Products.ParamCaption = ACTB_ActionBar.SearchValue
     LOOP_QRY_Products.Display(taReExecuteQuery)
     
  9. Let's take a look at this WLanguage code:
     • The query parameter is initialized with the search value typed in the Action Bar.
     • Then, the Looper control is redisplayed by <Looper>.Display. The taReExecuteQuery constant re-executes the base query of the Looper control and takes the new parameter into account.
  10. Save changes by clicking in the quick access buttons.
  11. Close the code window (click the "X" icon in the upper-right corner of the code editor).
  12. You can also insert a button to add a new product in this window. We have already done this in lesson 4.2 "Creating a new product". You just need to follow the same steps. Simply adapt the code of the "+" button.
  13. Test the window you have just created in the simulator (click in the quick access buttons).
      • Click the magnifier.
      • Type "Polo" in the search area.
      • Validate (Press Enter).
      • The list of products containing "Polo" is displayed.
        
  14. Close the simulator.

Pull to refresh

• The bar indicates that you must pull to refresh.
• It then indicates that you must release to refresh.
• It also indicates that the refresh operation is in progress. A progress bar is displayed during the refresh operation.
• The control is refreshed.

• To use the "Pull-to-refresh" gesture:
  1. Open the "WIN_Advanced_LIST_Products" window in the editor.
  2. Select the Looper control and open the control description window.
  3. In the "Details" tab of the control description window, in the "Moves and gestures" area, check "Pull to refresh".
     
     
     

     	Note	A specific internal window can be used to manage the "Pull-to-refresh" gesture. We will use the default window in this example. For more details, see Pull to Refresh (Android/iOS).
  4. Validate the control description window.

• The "Pull-to-refresh" configuration has added:
  • the refresh bar that will be displayed to the user during the operation.
  • the "Pull to refresh" event in the Looper control events. This event is automatically called when users perform a pull-to-refresh gesture. We will modify the WLanguage code of this event to manage how the control is refreshed.

• To edit the WLanguage code in the "Pull to refresh" event:
  1. Select the Looper control and open the associated events (F2).
  2. In the code editor, write the following WLanguage code in the "Pull to refresh" event:
     
     LOOP_QRY_Products.Display(taReExecuteQuery)
     
  3. As previously seen for the search feature, <Looper>.Display redisplays the Looper control. The taReExecuteQuery constant re-executes the base query of the Looper control and takes into account the new records in the database.
  4. Save changes by clicking in the quick access buttons.
  5. Close the code window (click the "X" icon in the upper-right corner of the code editor).

• Test the window in the simulator (click in the quick access buttons).
  1. Click and drag the top of the looper down.
  2. Release the mouse. The looper is refreshed.
     
  3. Close the simulator.

Using a sliding menu

• To create a sliding menu, we will:
  • Create an internal window. This internal window will contain the menu options.
  • Modify the "WIN_Advanced_LIST_Products" window to display the menu.
    

    	Note	An internal window is a simple window with no Action Bar and no toolbar. An internal window is used to easily include a set of controls in another window.

• To create the internal window containing the menu:
  1. Click in the quick access buttons. The new element window appears: click "Window" then "Internal window".
  2. The internal window is automatically opened in the editor.
  3. The save window appears. Name the internal window: "IW_MLZ_Options".
     
  4. Validate.
  5. Open the internal window description ("Description" in the context menu).
  6. In the "UI" tab, specify the dimensions of this internal window:
     • Width: any desired value. It must be wide enough to see the controls of the drop-down menu in their entirety. In theory, the sliding menu must be narrower than the window on which it is displayed (260 for example).
     • Height: This height must correspond to the height of the window on which the sliding menu is displayed. In our case, this height is set to 248.
       
  7. Specify a background color for the internal window in the "Style" tab. To avoid a transparent menu, "Background color of the internal window" must be set to "White".
  8. Validate.
  9. Save the window by clicking in the quick access buttons.

• To add the menu options to the internal window:
  1. Open the "WIN_Menu" window previously created (double-click on it in the "Project explorer" pane, for example).
  2. Copy the controls from "WIN_Menu" to "IW_MLZ_Options":
     • Select all the elements in "WIN_Menu" (Ctrl + A).
     • Copy the elements (Ctrl + C).
     • Open the "IW_MLZ_Options" window (click on it in the open document tabs).
     • Paste the elements (Ctrl + V).
  3. Change the width of the Multiline Zone control using the sizing handles so that it fits in the internal window. When anchors are used, the size of all the controls in the Multiline Zone control also changes. You get the following window:
     

• We will change the WLanguage code that opens the list of products. We will change this code since:
  • we work on the "WIN_Advanced_LIST_Products" window and no longer on "WIN_List_of_products".
  • the "WIN_Advanced_LIST_Products" window contains the sliding menu. The "List of products" menu option in the sliding menu should not open this window again.

• We will change the WLanguage code used to select the Multiline Zone control.
  1. Select the Multiline Zone control.
  2. Open the associated WLanguage events (F2).
  3. Replace the line:
     
     CASE 1 // List of products
     WIN_List_of_products.OpenMobileWindow()
     
     with:
     
     CASE 1 // List of products
     WinSlidingVisible(swLeft,False)
     
     In this WLanguage code, WinSlidingVisible hides the sliding window that appears from the left. Therefore, the list of products is displayed.
  4. Save changes by clicking in the quick access buttons.
  5. Close the code window (click the "X" icon in the upper-right corner of the code editor).

• To associate the internal window with "WIN_Advanced_LIST_Products":
  1. Open the "WIN_Advanced_LIST_Products" window (click on it in the open document tabs).
  2. Open the description window.
  3. In the "Details" tab, in "Left sliding window", select "IW_MLZ_Options".
     
     The "Swipe" option automatically manages how the sliding window is displayed during a swipe gesture.
  4. Validate.
  5. Since the window is associated with an Action Bar, the editor prompts you to enable the option to open the sliding window.
     
  6. Accept.

• We will test the sliding menu in the simulator:
  1. In the "Project explorer" pane, set "WIN_Advanced_LIST_Products" as the first window in the project ("WIN_Menu" is no longer useful).
     • Select "WIN_Advanced_LIST_Products" in the "Project explorer" pane.
     • Open the context menu.
     • Select "First project window". A specific icon (with a small 1) appears to the left of the window name, in the "Project explorer" pane.
  2. Click in the quick access buttons.
  3. When clicking the Action Bar menu, the menu sliding window appears.