PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
This page concerns the 270056D version of WINDEV 27. Update your version.
  • In this lesson you will learn the following concepts
  • Overview
  • Modifying the window: using a Tab control
  • Creating the Tab control
  • Modifying the Tab control
  • Implementing the search
  • Area for displaying the data found
  • Exact-match search
  • Generic search
  • Browsing forms
  • Window test
Lesson 4.2. Searching and looping through records
In this lesson you will learn the following concepts
  • Record search management.
  • Browsing through records.
Lesson duration

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
In previous lessons, we covered how to add and modify records. We will now complete our application by adding a search functionality (to modify a record, for example).
We will modify the main window of the "WD Full Application" application to add some tab panes.
  • The first tab pane will display the list of products and will allow you to add and modify them (we have seen these operations in previous lessons).
  • In the second tab pane you will be able to find a customer by name. The customer form will be displayed in the same tab pane.
Two search modes will be implemented:
  • an exact-match search,
  • a generic search.
Window to create in this lesson
Then, we will be able to loop through the records in the data file depending on the displayed customer.

  • Open the project you worked on in the previous lesson.
    1. Go to the WINDEV home page (Ctrl + <).
    2. On the home page, click "Tutorial", then in "Part 4 - Full application with data", double-click "Full application (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".

Answer

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 - Full application with data", double-click "Full application (Answers)".
Modifying the window: using a Tab control
In this example, the search will not be performed in a new window: we will use the WIN_Menu window. So far, this window displays the list of products.
We will use a Tab control to display different data in the same window. Tab controls are used to group information by theme. The user can directly access a theme by clicking the desired "tab".
This system is used in all WINDEV description windows.

Creating the Tab control

  • To display the data of the "WIN_Menu" window in a Tab control:
    1. Open the "WIN_Menu" window if necessary:
      • from the open documents bar.
      • by double-clicking its name in the "Project explorer" pane.
    2. Select the controls and move them outside the window. This may seem "strange", but it will make it easier to work on the Tab control and then associate the controls with the desired tab pane.
      Moving the window controls
    3. Create a Tab control in the window:
      • On the "Creation" tab, in the "Containers" group, expand "Tab and associated" and select "Tab".
      • Click in the window to create the Tab control.
      • Position the Tab control at the top left of the window.
      • A Tab control is created with two tabs by default. The Tab control occupies the entire available space in the window.
    4. Select the controls outside the window and move them to the pane 1 of the Tab control.
    5. A green border appears when hovering the controls on the Tab control. This border indicates that the controls placed on the current pane will be automatically associated with it.
    6. Enlarge (if necessary) the window and the Tab control to display the Table control and the buttons in the Tab control.

Note

Handling controls in a Tab control
  • To check whether all controls are associated with the current tab pane, click another tab pane: all controls associated with the tab pane disappear.
  • To resize the Tab control without taking into account the anchors defined on the controls of the tab pane, hold down the Shift key while you resize the control.
Window interface with Tab control

Modifying the Tab control

  • Change the name of the Tab control:
    1. Double-click the Tab control that was just created: the control description window appears.
    2. Change the control name. Name the control "TAB_View".
    3. Validate the control description window.
  • Two tabs are created by default. We will change their text directly:
    1. Select the Tab control.
    2. Click "Pane 1". The tab text becomes editable: type "List of products". Press Enter to validate.
      Text of the tab pane in edit mode
    3. Click "Pane 2". The pane is displayed. Click "Pane 2" again. Type "Find customers". Press Enter to validate.
  • We will associate an image with each tab of the Tab control. To do so:
    1. Open the Tab control description window (double-click the control, for example). The "General" tab of the description window allows you to configure the characteristics of each tab in the Tab control. The list of tabs is displayed on the left. You can change the characteristics of each selected tab on the right of the screen.
    2. In the description window, select "List of products".
      Characteristics of a tab in a Tab control
    3. The tab characteristics are displayed.
      Characteristics of a tab in a Tab control
    4. We will associate an image to the tab via the WINDEV image catalog.

      Note

      If an image can be displayed in a control or window, WINDEV proposes to use the image catalog. This image catalog can be opened via the "Catalog" option (available by clicking the Show image options button). The catalog contains hundreds of images, cliparts and more.
    5. Click Show image options on the right of "Image". Select "Catalog" in the context menu that appears. The image catalog window appears.
    6. Type "Product" in the search area. Click the magnifier to start the search.
      Searching for an image in the image catalogue
    7. Select Product image and validate ("OK").
    8. The image settings window is displayed. This window allows you to change the image characteristics: size, lightness, ... Keep the default options and validate.
    9. The image is generated in the project directory and the corresponding file is automatically associated with the current element.
    10. In the Tab control description window, click "Find customers" in the list of static panes.
    11. Click Show image options on the right of "Image". Select "Catalog" in the context menu that appears. The image catalog window appears.
    12. Type "Person" in the search area. Click the magnifier to start the search.
    13. Select, among the proposed images, the icon representing two persons ( Image of people ) and validate.
    14. Keep the default options in the image settings and validate.
    15. Validate the Tab control description window.
  • We have just created a new control: we must define its anchors in the window. When the window is enlarged, the Tab control must also be enlarged in order to occupy the entire available space. Therefore, the control must stretch to the right and to the bottom.
    1. Select the Tab control.
    2. Right-click to open the context menu and select "Anchor".
    3. In the window for defining the anchor, select Width and height and validate.
    4. Save the window by clicking Save element in the quick access buttons.
Implementing the search
The "WIN_Menu" window was entirely created. We can now focus on the content of the Tab control pane for finding customers.
This Tab control pane will be divided into several areas:
  • An area for entering the search elements.
  • An area for displaying the data found.
  • An area containing the navigation buttons.

Area for displaying the data found

First, we will create different controls to display the customer data.
We will create the Edit controls in the same way we created the controls in the product form window: a simple Drag and Drop from the "Analysis" pane.
  • To create the controls that will display the customer data:
    1. Open the WIN_Menu window in the editor and click the "Find customers" tab pane. The empty tab pane appears.
    2. Display the "Analysis" pane in the editor if necessary: on the "Home" tab, in the "Environment" group, expand "Panes" and select "Analysis". The different data files described in the "WD Full Application" analysis appear in the pane.
    3. Click Arrow to the left of the "Customer" data file: the items in the data file appear.
    4. Select the items of the Customer data file displayed in the "Analysis" pane. You can select multiple elements by holding the Ctrl key down.
    5. Drag and drop these items onto the "Find customers" tab pane.
      Drag and drop of items from the Customer data file
    6. The controls are automatically created in the Tab control pane. These controls are bound to the corresponding item in the data file.
    7. Save the window (Ctrl + S).
  • We will align the controls and make them the same size:
    1. Select the "City" control and then the other Edit controls in the window (hold the Ctrl key down while clicking the different controls). The first selected control will be used as reference to set the size of the other controls.
    2. On the "Alignment" tab, in the "Inside and outside" group, click "Justify (Ins. and Out.)".
      Ribbon 'Alignment' tab
  • Test the window (click Test window in the quick access buttons). Click the "Find customers" tab pane. The window is displayed with empty controls.
  • Close the test window to go back to the editor.

Exact-match search

To perform an exact-match search, we are going to select the customer name in a Combo Box control. The "Generic search" Button control will be used to display the form of the corresponding person. A single person corresponds to the selected name.
  • The Combo Box control will be located above the created controls. If your controls are placed too close to the top of the Tab control pane, it is necessary to move them down. To do so:
    1. Select all the controls in the Tab control pane:
      • Press Ctrl + A: all the controls in the window and in the current pane are selected.
      • Hold the Ctrl key down and click the Tab control: only the controls in the Tab control pane are selected.
      • Release the Ctrl key.
    2. Move one of the selected controls down.
      Selecting the controls to move down
    3. All controls are moved down.
  • To create the search control:
    1. Create a Combo Box control: on the "Creation" tab, in the "Usual controls" group, click "Combo Box".
    2. Click "Find customers", and position the control between the tab and the "Customer ID" control.
    3. The Combo Box control creation wizard appears. We will create a Combo Box control based on the "Customer" data file.
    4. Select "Display data from a file or existing query".
      Combo Box control creation assistant
      Go to the next step of the wizard.
    5. Select the "Customer" data file. Go to the next step.
    6. We will display the customer's first and last name.
      • Deselect the "CustomerID" item.
      • Select the "FullName" item.
        Combo Box control creation assistant
    7. Go to the next step.
    8. The "FullName" item will also be used to sort the list of customers displayed in the Combo Box control. Select the "FullName" item.
      Combo Box control creation assistant
    9. Go to the next step.
    10. The value returned by the Combo Box control will be the "CustomerID". This is the value that will be searched in the Customer data file. Select the "CustomerID" item.
      Combo Box control creation assistant
      Go to the next step.
    11. The Combo Box control will not be bound to any item. Keep "No" and go to the next step.
    12. Validate the next step ("Next").
    13. Give a name ("COMBO_Customer" for example) and a caption ("Sought customer" for example) to the control.
    14. Finish the wizard ("Finish" button). Position the Combo Box control in the window (e.g. in top left corner).
    15. Select the Combo Box control and resize it (via the handles) so that the entire customer name is displayed.
      Creating the search control
  • To create the Button control to find customers:
    1. Create a Button control: on the "Creation" tab, in the "Usual controls" group, click Create a Button control.
    2. Position the Button control next to the Combo Box that was just created.
    3. Name the control "BTN_ExactMatchSearch" and define "Exact-match search" as caption.
    4. If necessary, adjust the size of the control so that the caption is displayed properly in the control.
    5. Write the following WLanguage code in the "Click" event of the control:
      // Finds the customer by identifier
      Customer.ReadSeekFirst(CustomerID, COMBO_Customer)
      IF Customer.Found() THEN
      // Displays the customer data
      FileToScreen()
      END
    6. Let's take a look at this WLanguage code:
      • <Data file>.ReadSeekFirst is used to perform an exact-match search. In this example, the search is performed on the Customer data file and on the CustomerID item. The search value is the last parameter of the function. Here, the search value corresponds to the value selected in the Combo Box. This value is obtained by using the name of the Combo Box control (COMBO_Customer).
      • <Data file>.Found is used to check the search result. If <Data file>.Found returns True, a value was found; if <Data file>.Found returns False, no value was found. Any record found is read and it becomes the current record in the data file.
      • In this code, if the record was found, it is displayed by FileToScreen.

        Note

        FileToScreen and ScreenToFile perform the reverse operation: the data in the items of the data file is displayed in the corresponding controls.
    7. Close the code editor.
    8. Save the window (Ctrl + S).
  • Let's run a window test:
    1. Test the window (click Test window in the quick access buttons).
    2. Click the "Find customers" tab if necessary.
    3. Select a value in the Combo Box control and click "Exact-match search".
      Exact-match search test
    4. The result appears immediately.
    5. Close the test window to go back to the editor.

Generic search

We are now going to perform a generic search. Instead of searching for an exact value, we will search for all the elements that start with the value entered.
To perform this search, we will create an Edit control to enter the name you are looking for, and a Button control to launch the search.
  • To create the search control:
    1. If necessary, display the "Find customers" tab of "WIN_Menu" in the editor.
    2. Create an edit control: on the "Creation" tab, in the "Usual controls" group, click Creating an edit control.
    3. In the window, click below the Combo Box control ("Sought customer"). The edit control is created.
    4. Name the control "EDT_Sought_Name" and define "Sought name" as caption.
  • To create the Button control to launch the generic search:
    1. Create a Button control: on the "Creation" tab, in the "Usual controls" group, click Create a Button control.
    2. Position the control next to the Edit control that was just created.
      Search interface
    3. Name this control "BTN_GenericSearch" and define "Generic search" as caption.
    4. If necessary, adjust the size of the control so that the caption is displayed properly in the control.
    5. Write the following WLanguage code in the "Click" event of the button:
      // Finds a customer by name
      Customer.ReadSeek(FullName, EDT_Sought_Name)
      IF Customer.Found() THEN
      // Displays the customer data
      FileToScreen()
      ELSE
      Error("No customer matches")
      END

      <Data file>.ReadSeek is used to perform a generic search. In this example, the search is performed on the "Customer" data file and on the "FullName" item. The search value corresponds to the value typed in the "EDT_Sought_Name" control. This value is obtained by using the control name.

      Note

      To perform an exact-match search, call <Data file>.ReadSeek: to do so, the hIdentical constant must be used.
    6. Close the code window.
    7. Save the window (Ctrl + S).
  • Let's run a window test:
    1. Test the window (click Test window in the quick access buttons).
    2. Click the "Find customers" tab if necessary.
    3. Enter a value in the edit control (for example "BEEF") and click "Generic search".
      Generic search test
    4. The result appears immediately. However, if several records correspond to the search, only the first one is displayed.
    5. Stop the test and go back to the editor.

Browsing forms

We will add four Button controls to browse through the different records of the "Customer" data file. These controls are in a "Navigation" layout.
Navigation buttons
These controls will allow you to:
  • browse through the different records in the data file,
  • browse through all the records corresponding to a generic search.
Each button has an icon that displays:
  • the first record,
  • the previous record,
  • the next record,
  • the last record.
  • To create the Button control used to display the first file record:
    1. Go to the "Find customers" tab in the editor.
    2. On the "Creation" tab, in the "Usual controls" group, click Create a Button control.
    3. The shape of the control appears under the mouse pointer. Then click the Tab control pane, below "Generic search". The Button control is automatically created.
  • Skin templates are used to standardize the windows in a project. They define the style of all controls in the windows. A specific style is defined for each navigation button. To apply this style:
    1. Select the Button control if necessary.
    2. Right-click to open the context menu and select "Choose a style".
    3. All the button styles are displayed in the window that appears.
      Control style
      Select "BTN_First".
    4. Validate.
  • Change the name of the Button control:
    1. Open the control description window:
      • Select the Button control.
      • Right-click to open the context menu and select "Description".
    2. Name this control "BTN_First".
    3. Validate the description window.
  • We are now going to type the WLanguage code associated with this control:
    1. Right-click the control. Select "Code" in the menu that appears.
    2. In the code window that appears, write the following WLanguage code in the "Click" event:
      // Reads the first customer
      Customer.ReadFirst()
      IF Customer.Out() THEN
      // No customer
      Info("No form to view.")
      ELSE
      // Displays the customer data
      FileToScreen()
      END
      <Data file>.ReadFirst is used to read the first file record according to the key used for the last search (FullName in our case).
  • Likewise, create 3 Button controls.
    • Name these controls as follows: "BTN_Previous", "BTN_Next" and "BTN_Last".
    • Associate these controls with the following styles: "BTN_Previous", "BTN_Next" and "BTN_Last".
    • The WLanguage code corresponding to the "Click" event of "BTN_Previous" is:
      // If no search is in progress
      IF Customer.Out() THEN
      // Reads the last customer
      Customer.ReadLast()
      END
       
      // Reads the previous customer
      Customer.ReadPrevious()
      // If the start of the data file is reached
      IF Customer.Out() THEN
      Info ("Start of data file reached.")
      ELSE
      // Displays the customer data
      FileToScreen()
      END
    • The WLanguage code corresponding to the "Click" event of "BTN_Next" is:
      // If no search is in progress
      IF Customer.Out() THEN
      // Reads the first customer
      Customer.ReadFirst()
      END
       
      // Reads the next customer
      Customer.ReadNext()
      // If the end of the data file is reached
      IF Customer.Out() THEN
      Info("End of data file reached.")
      ELSE
      // Displays the customer data
      FileToScreen()
      END
    • The WLanguage code corresponding to the "Click" event of "BTN_Last" is:
      // Reads the last customer
      Customer.ReadLast()
      IF Customer.Out() THEN
      // No customer
      Info("No form to view.")
      ELSE
      // Displays the customer data
      FileToScreen()
      END
    In these different codes:
    • <Data file>.ReadLast reads the last record in the data file based on the key used for the last search.
    • <Data file>.ReadNext reads the record whose key value is immediately greater than the one of the current record.
    • <Data file>.ReadPrevious reads the record whose key value is immediately less than the one of the current record.
    In any case:

Note

The code in the "Next" and "Previous" Button controls contains additional lines of code to:
  • Check whether a search has already been started in the Customer data file (check the result of <Data file>.Out to find out if a read operation has already been started).
  • Read the first or last record if necessary. The next or previous record cannot be read if no reading has been started in the data file.
  • Save the window by clicking Save an element in the quick access buttons.

Window test

  • Let's run a window test:
    1. Test the window (click Test window in the quick access buttons).
    2. Click the "Find customers" tab if necessary.
    3. Find a customer (enter "BEEF" and start a generic search, for example).
    4. Browse the data file by clicking each of the navigation buttons.
    5. Stop the test to go back to the editor.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 27
Comments
Click [Add] to post a comment