PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad WINDEV Mobile 25!
  • 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
  • Improving the window
  • 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.

Estimated time: 30 mn
Lección anteriorTabla de contenidoSiguiente lección
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_Menu" window is as follows:
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 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 the WINDEV Mobile 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 project, in the WINDEV Mobile 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 among the quick access buttons. The window for creating a new element is displayed: click "Query­". The wizard for query creation 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:
  • 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.
    2. The description window of query is as follows:
    3. Validate the description window of query (green 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 .
  2. The result is displayed in a window:
    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".
    3. In the window that is displayed, we are going to specify that the selection condition corresponds to a parameter:
      • Select "contains".
      • Select "the parameter".
      • Keep the parameter name automatically proposed: "paramName".
    4. Validate the description window of condition. The number "1" appears on the right of "Product.Name" item, indicating that a selection condition was defined.
    5. Validate the description window of query.
    6. The query graph is modified to take into account the selection condition that was defined.
    7. Save the query by clicking among the quick access buttons.

Test of query with parameters

  • To run the test of query with parameters:
    1. Click .
    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".
    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.

Note

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 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 wizard step.
    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".
    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 code in the "Initializing..." section:
      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 code in the "Selecting a row..." section:
      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, 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 among the quick access buttons.
    6. Close the code window (click the cross in the top right corner of code editor).
    7. Test the window that was just created in the simulator ( among the quick access buttons).
    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 type 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.
      • In the "Selecting the menu" process, type the following code:
        ActionBarSearchVisible(True)
    5. Save the modifications by clicking among the quick access buttons.
    6. Close the code window (click the cross in 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 code in the "Validation of search..." section:
      QRY_Products.ParamName = ACTB_ActionBar..SearchValue
      LooperDisplay(LOOP_QRY_Products,taReExecuteQuery)
    9. Let's study this 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 among the quick access buttons.
    11. Close the code window (click the cross in 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 ( 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.
    14. Close the simulator.
Improving the window

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

      Note

      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 description window of control.
  • The setting of "Pull to refresh" has added:
    • the refresh bar that will be displayed to the user during the operation.
    • the "Pull to refresh" process among the processes of Looper control. This process is automatically called during the refresh gesture. We are now going modify this process in order to manage the control update.
  • To modify the "Refreshing by pull/release" process:
    1. Select the Looper control and display the associated process (press F2 for example).
    2. In the code editor, enter the following code in the "Refreshing by pull/release..." section:
      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 among the quick access buttons.
    5. Close the code window (click the cross in the top right corner of code editor).
  • Test the window that was just created in the simulator ( 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.
    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.

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 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".
    4. Validate.
    5. Display the description window of internal window ("Description" from the popup menu).
    6. In the "GUI" 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.
    7. Validate.
    8. Save the window by clicking among the quick access buttons.
  • To add the menu options into the internal window:
    1. Open the "WIN_Menu" window that was created beforehand (double-click its name in the project explorer 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 elements).
      • 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:
  • 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 selection code of Multiline Zone control.
    1. Select the Multiline Zone control.
    2. Display the associated processes (F2 key).
    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 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 among the quick access buttons.
    5. Close the code window (click the cross in the top right corner of code editor).
  • To associate the internal window with the "WIN_List_of_products_Advanced" window:
    1. Display the "WIN_List_of_products_Advanced" window (click its name in the bar of opened elements).
    2. Display the description window.
    3. In the "Details" tab, in the "Left sliding window" area, select the "IW_MLZ_Options" window. The "Swipe" option is used to automatically manage the display of sliding window 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.
    6. Accept.
  • We are going to test the operating mode of the sliding menu in the simulator:
    1. In the project explorer, define the "WIN_List_of_products_Advanced" window as first project window (indeed, the "WIN_Menu" window is now useless).
      • Select the "WIN_List_of_products_Advanced" window in the project explorer.
      • 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.
    2. Click on among the quick access buttons.
    3. When clicking the menu of Action Bar, the sliding window of menu is displayed.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario