PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WINDEV Mobile 25 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Creating the query used to find the products
  • Creating the query
  • Query test
  • Adding a selection condition
  • Test of query with parameters
  • Creating the interface
  • Creating the window
  • Managing the search
  • Window improvements
  • Managing "Pull to refresh"
  • Using a sliding menu
Lesson 5.4. Window with search
This lesson will teach you 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 the lesson 5.2, we have explained how to create a window used to list the products in a looper.
We are going to create a window based on the same principle but proposing a search on the product name:
  • the window displays the list of products in a looper.
  • when the user types a product name in the search area, the corresponding products are displayed in the looper.
In our example, this search will be performed on the "Product" data file.
The interface of "WIN_List_of_products_Advanced" 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.

Remark

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

Answer

If the "WM Managing Products" application was not created in the previous part:
  • an intermediate project is available. This project contains the windows created in the previous parts. This project allows you to follow this lesson and to create the new windows.
    To open this project, in WINDEV Mobile's home page (Ctrl + <), click "Tutorial" and select "iOS/Android application (With windows)".
  • a corrected project is available. This project contains all windows created in this part and it allows you to check your operations.
    To open this corrected project, in WINDEV Mobile's home page (Ctrl + <), click "Tutorial" and select "iOS/Android application (Answer)".
Creating the query used to find the products

Creating the query

  • The query editor will be used to create the query.
    1. Click Creating an element among the quick access buttons. The window for creating a new element is displayed: click "Query­". The query creation wizard starts.
    2. Select the "Select" option.
      Indeed, this query will be used to select records. Go to the next step.
    3. The query description window is displayed.
    4. Give a name and a caption to your query: type "QRY_Products" instead of "QRY_NoName1" in the "Query name" area and "Find products on the name" in the "Caption" area:
      Query name
  • To build the query, we are going to select the elements that will be displayed in the result.
    1. The query must be used to display the characteristics of 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 description window of query 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 found in a WINDEV Mobile project, you have the ability to run the test of query that was just created:
  1. Click Run the query test.
  2. The result is displayed in a window:
    Query result
    The result lists ALL products.
    In our case, we want to 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, display the description window of query:
    double-click the background of graphic query representation (or select "Query description" from the popup menu).
  • To manage the "Product name" parameter:
    1. In the middle of window, select the Product.Name item.
    2. Display the popup 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:
      Describing the condition
      • Select "contains".
      • Select "the parameter".
      • Keep the parameter name automatically proposed: "ParamName".
    4. Validate the condition description window. The number "1" appears on the right of "Product.Name" item, indicating that a selection condition was defined.
      Condition in the query description window
    5. Validate the description window of query.
    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 the element among the quick access buttons.

Test of query with parameters

  • To run the test of query with parameters:
    1. Click Run the query test.
    2. A window is displayed, allowing you to type the different query parameters.
    3. Select the ParamName parameter. In the bottom section of window, type "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 wizard for window creation.

Remark

The window creation wizard offers 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 Creating an element among the quick access buttons. The window for creating a new element is displayed: 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 + Caption below". Go to the next step.
    8. The wizard automatically proposes the query items corresponding to the generated looper. Keep the proposed options and go to the next step.
    9. Keep the sort item proposed by default ("Name"). 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, type "Products".
      • For the name, type "WIN_List_of_products_Advanced".
    12. Validate the wizard. The window is automatically created, displayed in the editor and saved.
  • We are now going to modify the "WIN_List_of_products_Advanced" window in order to display the Product form that was 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.ParamName = 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 ...":
      HReadSeek(Product,ProductID,QRY_Products.ProductID)
      OpenMobileWindow(WIN_Product_form)
      Let's study this code:
      • The Looper control is based on the QRY_Product 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 HReadSeek.
      • Then, the form window named "WIN_Product_form" is opened by OpenMobileWindow.
    5. Save the modifications by clicking Save the element among the quick access buttons.
    6. Close the code window (click X at the top right corner of code editor).
    7. Test the window that was just created in the simulator ( Running the test of the window among 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 manage 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. Display (if necessary) the "WIN_List_of_products_Advanced" window in the editor.
    2. Display the description window of Action Bar (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 description window of Action Bar:
    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 Action Bar of window.
      • Click the search button.
      • A drop-down menu with the "Find" option is displayed.
      • Right-click the option.
      • Select "Code" from the popup menu that is displayed.
      • Write the following WLanguage code in the event "Selecting the menu":
        ActionBarSearchVisible(True)
    5. Save the modifications by clicking Save the element among the quick access buttons.
    6. Close the code window (click X at the top right corner of code editor).
    7. Select the Action Bar and display the associated code (press F2 or select "Code" from the popup menu).
    8. In the code editor, type the following WLanguage code in the event "Validating the search...":
      QRY_Products.ParamName = ACTB_ActionBar..SearchValue
      LooperDisplay(LOOP_QRY_Products,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 LooperDisplay. The taReExecuteQuery constant is used to re-run the base query of Looper control and therefore to take the new parameter into account.
    10. Save the modifications by clicking Save the element among the quick access buttons.
    11. Close the code window (click X at the top right corner of code editor).
    12. A button for product addition can also be created in this window. This operation was already performed in the lesson 5.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 ( Running the test of the window among the quick access buttons).
      • Click the magnifier.
      • Type "Polo" in the search area.
      • Validate (ENTER key).
      • The list of products containing "Polo" is displayed.
        Search in the window
    14. Close the simulator.
Window improvements

Managing "Pull to refresh"

A new feature will be added to our window: the management of "Pull to refresh". This feature allows the user to "pull" a Table or Looper control in order to refresh its content.
During this action, a refresh bar automatically appears in the exposed area:
  • The bar indicates that you must pull to refresh.
  • Then, the bar indicates that you must release to refresh.
  • The bar indicates that the refresh operation is in progress. A progress bar is displayed during the refresh duration.
  • The control is updated.
  • To use the "Pull to Refresh" feature:
    1. Display (if necessary) the "WIN_List_of_products_Advanced" window in the editor.
    2. Select the Looper control and display the description window of control.
    3. In the "Details" tab of the description window of control, in the "Moves and gestures" area, check "Pull to refresh".
      Settings of Pull to Refresh

      Remark

      A specific internal window can be used to manage the "Pull to refresh" feature. In this example, we will be using the default window.
      See Pull to Refresh (Android/iOS) for more details.
    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 display the associated event (press F2 for example).
    2. In the code editor, type the following WLanguage code in the event "Refreshing by pull/release":
      LooperDisplay(LOOP_QRY_Products,taReExecuteQuery)
    3. As already seen for the search management, LooperDisplay is used to redisplay the Looper control. The taReExecuteQuery constant is used to re-run the base query of Looper control and therefore to take into account the new records entered in the database.
    4. Save the modifications by clicking Save the element among the quick access buttons.
    5. Close the code window (click X at the top right corner of code editor).
  • Test the window that was just created in the simulator ( Running the test of the window among the quick access buttons).
    1. Click the top of looper with the mouse and move the mouse to the bottom.
    2. Release the mouse. The looper is updated.
      Pull to refresh in execution
    3. Close the simulator.
This example allows you to understand the implementation of "Pull to refresh" feature.
This feature can be used for example in the same application in HFSQL Client/Server where other users would update or add products. These modifications could be displayed by the "Pull to refresh" feature.

Using a sliding menu

In several mobile applications, the menu does not correspond to a "static" window. It corresponds to a sliding window displayed via an option of Action Bar and/or via a window swipe.
We are going to modify the "WIN_List_of_products_Advanced" window in order to add a "sliding menu". This menu will be using the Multiline Zone control of "WIN_Menu" window that was created beforehand.
  • To create a sliding menu, we are going to:
    • Create an internal window. This internal window will contain the menu options.
    • Modify the "WIN_List_of_products_Advanced" window to display the menu.

      Remark

      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 Creating an element among the quick access buttons. The window for creating a new element is displayed: click "Window" then "Internal window".
    2. The internal window is automatically opened in the editor.
    3. The window for saving an element is displayed. Type the name of internal window: "IW_MLZ_Options".
      Saving the element
    4. Validate.
    5. Display the description window of internal window ("Description" from the popup menu).
    6. In the "UI" tab, specify the dimensions of this internal window:
      • Width: the one that suits you. It must be sufficient to entirely see the controls of drop-down menu. 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 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. Indeed, for the menu to be transparent, the parameter "Background color of internal window" must correspond to "White".
    8. Validate.
    9. Save the window by clicking Save an element among the quick access buttons.
  • To add the menu options into the internal window:
    1. Open the "WIN_Menu" window previously created (double-click on its name in the "Project explorer" pane, for example).
    2. Copy the controls found in the "WIN_Menu" window to the "IW_MLZ_Options" internal window:
      • Select all elements found in the "WIN_Menu" window (Ctrl + A).
      • Copy the elements (Ctrl + C).
      • Display the "IW_MLZ_Options" window (click its name in the bar of opened documents).
      • 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 with the "WIN_List_of_products_Advanced" window and not with the "WIN_List_of_products" window anymore.
    • the "WIN_List_of_products_Advanced" window contains the sliding menu. Therefore, the "List of products" option must not re-open this window.
  • We are going to change the WLanguage code used to select the Multiline Zone control.
    1. Select the Multiline Zone control.
    2. Display the associated WLanguage events (F2).
    3. Replace the line:
      CASE 1 // List of products
      OpenMobileWindow(WIN_List_of_products)
      by:
      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 modifications by clicking Save the element among the quick access buttons.
    5. Close the code window (click X at the top right corner of code editor).
  • To associate the internal window with the "WIN_List_of_products_Advanced" window:
    1. Display the window "WIN_List_of_products_Advanced" (click its name in the bar of opened documents).
    2. Display 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. The window being associated with an Action Bar, the editor proposes to enable the option used 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, define the "WIN_List_of_products_Advanced" window as first project window (indeed, the "WIN_Menu" window is now useless).
      • Select the window "WIN_List_of_products_Advanced" in the "Project explorer" pane.
      • Display the popup 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 Run project test among the quick access buttons.
    3. When clicking the menu of Action Bar, the sliding window of menu is displayed.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 25
Comments
Click [Add] to post a comment