PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
This page concerns the 270056D version of WINDEV Mobile 27. Update your version.
  • In this lesson you will learn the following concepts
  • Overview
  • Creating a query to find products
  • Creating the query
  • Query test
  • Adding a selection condition
  • Test of the query with parameters
  • Creating the interface
  • Creating the window
  • Managing the search
  • Window improvements
  • Pull to refresh
  • Using a sliding menu
Lesson 4.4. Windows with search
In this lesson you will learn the following concepts
  • Creating a query with parameters.
  • Creating a window via the wizard.
  • Implementing the search.
  • Managing "Pull to refresh".
  • Adding a sliding menu.
Lesson duration

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
In lesson 4.2, we have explained how to create a window to list products in a Looper control.
We will create a window based on the same principle with an option to search by product name:
  • 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.
In our example, this search will be performed on the "Product" data file.
The interface of "WIN_Advanced_LIST_Products" will be as follows:
Search
To create this window, we are going to:
  • 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 a query to find products

Creating the query

  • The query editor will be used to create the query.
    1. Click Create an element in the quick access buttons. The creation 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:
      Query name
  • 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.
        Selecting data file items
    2. The query description window is as follows:
      Query description window
    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

Like all the elements of a WINDEV Mobile project, you can immediately test the query:
  1. Click Test query.
  2. The result is displayed in a window:
    Query result
    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

In our example, the user will be able to select a value for the product name. We must modify the query to use a query parameter as search criterion.

  • 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".
      Selection condition
    3. In the window that appears, will specify that the selection condition corresponds to a parameter:
      Condition description
      • 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.
      Condition in the query description window
    5. Validate the query description window.
    6. The query graph is modified to take into account the selection condition that was defined.
      Query graph
    7. Save the query by clicking Save element in the quick access buttons.

Test of the query with parameters

  • To test the query with parameters:
    1. Click Test query.
    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".
      Entering the query parameters
    4. Validate the window. The query result corresponding to the specified parameters is displayed.
    5. Close the window.
We will create the interface of our window based on this query.
Creating the interface
The search window will be created via the window creation wizard.

Note

The window creation wizard includes different preset windows. These windows have modern UIs for your applications.
Most of these windows can be generated from your data.

Creating the window

  • To create the search window:
    1. Click Create an element in the quick access buttons. The creation 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".
        Selecting the query
    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 the 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).
    7. Test the window you have just created in the simulator (click Test window in the quick access buttons).
      Window currently run
    8. Click one of the products: the form window is displayed.
    9. End the test.

Managing the search

We are now going to set the search. To do so, we are going to:
  • 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 "Selecting the menu" event:
        ActionBarSearchVisible(True)
    5. Save the 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).
    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 "Validating 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 the changes by clicking Save element 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 Test window 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.
        Search in the window
    14. Close the simulator.
Window improvements

Pull to refresh

We will add a new feature to the window: the "Pull to refresh" gesture.
This feature allows users to refresh a Table or Looper control with a swipe down gesture. For example, this feature can be used in an application in HFSQL Client/Server mode, where other users would update or add products. These changes could be displayed using the "Pull-to-refresh" gesture.
When the user "pulls" the control to refresh its content, a refresh bar automatically appears in the area that is uncovered:
  • 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".
      Pull-to-refresh settings

      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 "Refreshing by pull/release" 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 modify the WLanguage code of the event "Refreshing by pull/release":
    1. Select the Looper control and open the associated events (F2).
    2. In the code editor, type the following WLanguage code in the "Refreshing by pull/release" 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 the changes by clicking Save element 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 Test window in the quick access buttons).
    1. Click and drag the top of the looper down.
    2. Release the mouse. The looper is refreshed.
      Pull to refresh at runtime
    3. Close the simulator.
This example allows you to understand how the "Pull-to-refresh" gesture is implemented.

Using a sliding menu

In several mobile applications, the menu does not correspond to a "static" window. Instead, it is a sliding window displayed via an option of the Action Bar and/or via a swipe gesture.
We will modify the "WIN_Advanced_LIST_Products" window to add a sliding menu. This menu will use the Multiline Zone control of the "WIN_Menu" window that we created previously.

  • 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 Create an element in the quick access buttons. The creation 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".
      Saving the element
    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.
        Dimensions of the internal window
    7. Specify a background color for the internal window in the "Style" tab. To avoid a transparent menu, "Background color of internal window" must be set to "White".
    8. Validate.
    9. Save the window by clicking Save an element 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:
      Internal window in the editor
  • 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 the changes by clicking Save element 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.
      Enabling the option
    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 Test project in the quick access buttons.
    3. When clicking the Action Bar menu, the menu sliding window appears.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 27
Comments
Click [Add] to post a comment