PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WINDEV Mobile 26 feature!
  • 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 but proposing a 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 a select query because the SELECT command is used in SQL.
  • 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 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 element 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: enter "QRY_Products" instead of "QRY_NoName1" in "Query name" and "Find products by name" in "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 on 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 test the query that was just created:
  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 corresponding to 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 in order for this search criterion to correspond to a query parameter.

  • 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 is displayed, we are going to specify that the selection condition corresponds to a parameter:
      Condition description
      • Select "contains".
      • Select "the parameter".
      • Keep the parameter name automatically proposed: "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 is displayed, allowing you to type 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 are now going to 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 presents many preset windows. These windows propose modern interfaces 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 element 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 use: "Generic Android phone". Go to the next step of the wizard.
    5. The wizard proposes 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 proposes the query items corresponding to the generated looper. Keep the default options and go to the next step.
    9. Keep the default sort item "Caption". Go to the next step.
    10. The wizard proposes several options for generating the Looper window. In our example, keep the default options. Go to the next step.
    11. Give a title and a name to the generated window. In our case:
      • For the title, enter "Products".
      • For the name, enter "WIN_Advanced_LIST_Products".
    12. Validate the wizard. The window is automatically created, displayed in the editor and saved.
  • We are now going to modify the "WIN_Advanced_LIST_Products" window to display 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 code line is used to initialize the value of parameter found in the "QRY_Products" query used by the Looper control. By default, the value of this parameter is set to "Null", allowing you to ignore the parameter. Therefore, all products will be displayed in the window.
    4. In the code editor, type the following WLanguage code in the event "Selecting a row ...":
      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. When selecting the product in the Looper control, the selected record is the one found in the query.
      • During a click on the control row, we want to open the form window that was created beforehand. This window is based on the Product data file.
      • The record selected by the query must be found 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" in the upper-right corner of the code editor).
    7. Test the window that was just created in the simulator ( 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. The interface for typing an option in the toolbar is displayed.
    3. Click the "+" button to add an option. A new default option is created at the top right. Modify 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 is used to make the search area visible. To write this code:
      • Select (if necessary) the window 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 event "Selecting the menu":
        ActionBarSearchVisible(True)
    5. Save the changes by clicking Save element in the quick access buttons.
    6. Close the code window (click the "X" 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 event "Validating the search...":
      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 is used to re-run the base query of the Looper control and therefore to take 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" in the upper-right corner of the code editor).
    12. A button for product addition can also be created in this window. This operation was already performed in lesson 4.2 "Creating a new product". The same operations must be performed. Only the code of "+" button must be adapted.
    13. Test the window that was 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

A new feature will be added to our window: the "Pull to refresh" gesture.
This feature allows the user to "pull" a Table or Looper control in order to refresh its content. 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" feature:
    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" feature. 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 setting of "Pull to refresh" has added:
    • the refresh bar that will be displayed to the user during the operation.
    • the "Refreshing by pull/release" event among the Looper control events. This event is automatically called during the refresh gesture. We are now going modify the WLanguage code of this event in order 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 event "Refreshing by pull/release":
      LOOP_QRY_Products.Display(taReExecuteQuery)
    3. As previously seen for the search feature, <Looper>.Display is used to redisplay the Looper control. The taReExecuteQuery constant is used to re-run the base query of the Looper control and therefore to take into account the new records entered in the database.
    4. Save the changes by clicking Save element in the quick access buttons.
    5. Close the code window (click the "X" in the upper-right corner of the code editor).
  • Test the window that was just created 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 the implementation of "Pull to refresh" feature.

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 "WIN_Menu" 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 element creation window appears: click "Window" then "Internal window".
    2. The internal window is automatically opened in the editor.
    3. The save window appears. Type the name of 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: the one that suits you. 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 above which it is displayed (260 for example).
      • Height: This height must correspond to the height of the window above 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 into 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 its name in the open document tabs).
      • Paste the elements (Ctrl + V).
    3. Via the selection handles, modify the width of Multiline Zone control so that it is entirely displayed in the internal window. Via the anchors, all controls found in the Multiline Zone control are also modified. You get the following window:
      Internal window in the editor
  • We are now going to modify the WLanguage code used to open the list of products. Indeed:
    • we work on the "WIN_Advanced_LIST_Products" window and no longer on "WIN_List_of_products".
    • "WIN_Advanced_LIST_Products" contains the sliding menu. Therefore, the "List of products" option must not reopen this window.
  • We are going to 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 is used to make the sliding window displayed from the left invisible. 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" 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 is used to automatically manage how the sliding window is displayed during the swipe.
    4. Validate.
    5. Since the window is associated with an Action Bar, the editor proposes to enable the option to open the sliding window.
      Enabling the option
    6. Accept.
  • We are going to test the operating mode of 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) is displayed in front 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 26
Comments
Click [Add] to post a comment