PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you 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 information found
  • Exact-match search
  • Generic search
  • Browsing forms
  • Window test
Lesson 4.3. Simple search and record browse
This lesson will teach you the following concepts
  • Managing the search for records.
  • Browsing records.

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
We have managed the addition and modification of records. It's fine. But it would be even better to be able to find a record (to modify it for example). That's what we are going to do now.
We are going to modify the main window of "WD Full Application" application to use tab panes.
  • The first tab will be used to display the list of products and to manage the addition and modification of products (the operations have been performed in the previous lessons).
  • The second tab will propose to find a customer according to his name. The customer form will be displayed in the tab.
Two search modes will be implemented:
  • an exact-match search,
  • a generic search.
Then, you will have the ability to browse the records found in the data file from the customer displayed.

Answer

A corrected project is available. This project contains the different windows created in this lesson. To open the corrected project, on the "Home" pane, in the "Online help" group, expand "Tutorial" and select "Full application (With windows)".
Modifying the window: using a Tab control
In this example, the search will not be performed in a new window: the WIN_Menu window will be used. At this time, this window displays the list of products.
We will be using tabs to display various data in this window. The tabs are used to group information by theme. The user can directly access a theme by clicking the requested "pane".
This system is used in all description windows of WINDEV.

Creating the Tab control

  • To display the data of the "WIN_Menu" window in a tab:
    1. Display the "WIN_Menu" window if necessary:
      • from the button bar.
      • by double-clicking its name in the project explorer.
    2. Select the window controls and move them to the home area of window. This operation may seem to be "weird" but it will make it easier to work on the Tab control then to associate the controls to the requested tab.
    3. Create a Tab control in a window:
      • On the "Creation" pane, 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 window.
      • A Tab control is created with two panes by default. The Tab control occupies the entire available space in the window.
    4. Select the controls found in the home area of the window and move them to pane 1.
    5. A green border appears when hovering controls on the Tab control. This border indicates that the controls placed on the current pane will be automatically associated with the pane.
    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 disappear.
  • To resize the Tab control while ignoring the anchors defined for the controls found in the pane, press the Shift key during the resize operation.

Modifying the Tab control

  • Modify the name of Tab control:
    1. Double-click the Tab control that was just created: the description window of control is displayed.
    2. Modify the control name. The control is named "TAB_Viewing".
    3. Validate the description window of control.
  • Two panes are created by default. We are going to modify their caption directly:
    1. Select the Tab control.
    2. Click "Pane 1". The pane becomes editable: type the "List of products" caption. Press Enter to validate.
    3. Click "Pane 2". The pane is displayed. Click "Pane 2" again. Type the caption: "Finding customers". Press Enter to validate.
  • We are going to associate an image with each tab pane. To do so:
    1. Display the description window of Tab control (double-click the control for example). The "General" tab of description window is used to configure the characteristics of each tab pane. The list of panes is displayed on the left. For each selected pane, its characteristics can be modified in the right section of screen.
    2. In the description window, select the "List of products" pane.
    3. The pane characteristics are displayed.
    4. We are going to associate an image to the tab via the image catalog of WINDEV.

      Note

      As soon as an image can be displayed in a control or window, WINDEV proposes to use the image catalog. This image catalog is started via the "Catalog" option (available by clicking the button). This catalog contains hundreds of images, cliparts, ...
    5. Click the button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed. The window of image catalog is displayed.
    6. Select the "Flat Soft" theme in the "Theme" combo box, then type "Product" in the search area. Click the magnifier to start the search.
    7. Select the image and validate (green button).
    8. The screen for configuring the generated image is displayed. This screen is used to modify the characteristics of the image to generate: 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 description window, click "Finding customers" in the list of static panes.
    11. Click the button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed. The window of image catalog is displayed.
    12. In the search area, specify "Person" (the "Flat Soft" theme used for our last search is selected by default). Click the magnifier to start the search.
    13. Select, among the proposed images, the icon representing two persons ( ) and validate.
    14. Keep the options found in the setting screen of generated image and validate.
    15. Validate the description window of Tab control.
  • A new control was just created: we must now define its anchor 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. Display the popup menu (right mouse click) and select "Anchor".
    3. In the window for defining the anchor, select and validate.
    4. Save the window by clicking among the quick access buttons.
Implementing the search
The "WIN_Menu" window was entirely created. We must now concentrate on the content of tab for finding customers.
This tab will be divided into several areas:
  • An area for typing the sought elements.
  • An area for displaying the information found.
  • An area containing the browse buttons.

Area for displaying the information found

First of all, we are going to create the different controls used to display the information about the customer.
The method for creating edit controls in the window is the same as the method for creating the form window of product: a simple Drag and Drop from the "Analysis" pane..
  • To create the different controls used to display information about the customer:
    1. Display the WIN_Menu window in the editor and click the "Finding customers" tab. The empty tab pane appears.
    2. Display the "Analysis" pane if necessary: on the "Home" pane, 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 the icon on the left of the "Customer" data file: the items found in the data file are listed.
    4. With the mouse, select all items displayed in the pane. You have the ability to use the multi-selection by holding the Ctrl key down.
    5. Drag and Drop these items to the "Finding customers" tab.
    6. The controls are automatically created in the tab. These controls are automatically linked to the corresponding item in the data file.
    7. Save the window.
  • We are going to align the controls and give them the same size:
    1. Select the "City" control then all edit controls found in the window (keep the Ctrl key down while clicking the different controls for example). The first selected control will be used as reference for the size of other controls.
    2. On the "Alignment" pane, in the "Inside and outside" group, click "Justify (Ins. and Out.)".
  • Run the window test ( among the quick access buttons). Click the "Finding 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 "Find" button will be used to display the form of matching person. A single person corresponds to the selected name.
  • The Combo Box control will be positioned above the created controls. If your controls are too close to the tab, they must be moved to the bottom. To do so:
    1. Select all controls found in the tab:
      • Press Ctrl + A: all controls found in the window and in the current pane are selected.
      • Press the Ctrl key.
      • Click the tab: only the controls found in the tab pane are selected.
    2. With the mouse, move one of the selected controls to the bottom.
    3. All controls are moved to the bottom.
  • To create the search control:
    1. Create a Combo Box control: on the "Creation" pane, in the "Usual controls" group, click "Combo box".
    2. Click in the "Finding customers" pane, in the section found between the tab pane and the "Customer identifier" control.
    3. The wizard for creating combo boxes is displayed. We are going to create a combo box based on the "Customer" data file.
    4. Select "Display the data found in a file or in an existing query". Go to the next wizard step.
    5. Select the "Customer" data file. Go to the next step.
    6. We are going to display the last and first names of the person.
      • Deselect the "CustomerID" item.
      • Select the "FullName" item.
    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.
    9. Go to the next step.
    10. The value returned by the Combo Box control will be the "CustomerID" identifier. This is the value that will be sought in the Customer data file. Select the "CustomerID" item and go to the next step.
    11. The Combo Box control will be linked to no item. Keep "No" and go to the next step.
    12. Validate the next step with the yellow arrow.
    13. Give a name ("COMBO_Customer" for example) and a caption ("Sought customer" for example) to the control.
    14. Validate. Position the Combo Box control in the window (top left corner for example).
    15. Select the Combo Box control and resize it (via the handles) in order for the full customer name to be displayed.
  • To create the search button:
    1. Create a button: on the "Creation" pane, in the "Usual controls" group, click .
    2. Position the button beside the combo box that was just created.
    3. This control is named "BTN_ExactMatchSearch" and its caption is "Exact-match search".
    4. Adapt (if necessary) the button size in order for the caption to be properly displayed in the button.
    5. Write the following code:
      // Finds the customer from his identifier
      HReadSeekFirst(Customer, CustomerID, COMBO_Customer)
      IF HFound(Customer) THEN
      // Displays the customer data
      FileToScreen()
      END
    6. Let's study this code:
      • HReadSeekFirst 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 sought value corresponds to the last parameter of the function. Here, the sought value corresponds to the value selected in the Combo Box. This value is obtained by using the name of the combo box (COMBO_Customer).
      • HFound is used to check the search result. If HFound returns True, a value was found ; if HFound returns False, no value was found. Any record found is read: 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 found in the file items is displayed in the corresponding controls.
    7. Close the code editor.
    8. Save the window.
  • Let's run a window test:
    1. Run the window test ( among the quick access buttons).
    2. Click the "Finding customers" tab if necessary.
    3. Select a value in the Combo Box and click the search button.
    4. The result is immediate.
    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 the exact value that was typed, we are going to search for all elements starting with the value typed. To perform this search, we are going to create an edit control that will be used to type the sought name and a button that will be used to perform this search.
  • To create the search control:
    1. Display (if necessary) the "Finding customers" tab of "WIN_Menu" window in the editor.
    2. Create an edit control: on the "Creation" pane, in the "Usual controls" group, click .
    3. In the window, click below the Combo Box control ("Sought customer"). The edit control is created.
    4. This control is named "EDT_Sought_Name" and its caption is "Sought name".
  • To create the search button:
    1. Create a button: on the "Creation" pane, in the "Usual controls" group, click .
    2. Position the button beside the edit control that was just created.
    3. This control is named "BTN_GenericSearch" and its caption is "Generic search".
    4. Adapt (if necessary) the button size in order for the caption to be properly displayed in the button.
    5. Write the following code:
      // Finds a customer from his name
      HReadSeek(Customer, FullName, EDT_Sought_Name)
      IF HFound(Customer) THEN
      // Displays the customer data
      FileToScreen()
      ELSE
      Error("No customer matches")
      END
      HReadSeek 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 sought 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 HReadSeek: to do so, the hIdentical constant must be used.
    6. Close the code window.
    7. Save the window.
  • Let's run a window test:
    1. Run the window test ( among the quick access buttons).
    2. Click the "Finding customers" tab if necessary.
    3. Enter a value in the edit control ("BEEF" for example) and click the search button.
    4. The result is immediate. 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 are now going to add four buttons to browse the different records of the "Customer" data file. These buttons are "recorder buttons".
They include an icon and they are used to display:
  • the first record,
  • the previous record,
  • the next record,
  • the last record.
  • To create the button used to display the first file record:
    1. Display (if necessary) the "Finding customers" tab in the editor.
    2. On the "Creation" pane, in the "Usual controls" group, click .
    3. The button shape appears under the mouse. Click in the tab, below the "Generic search" control. The button is automatically created.
  • A skin template will be used to standardize the interface of project windows. This skin template defines the style for all controls found in the windows. A specific style is defined for each recorder button. To apply this style:
    1. Select the button if necessary.
    2. Display the popup menu (right mouse click) and select "Choose a style".
    3. All styles defined for the buttons are displayed in the window. Select the "BTN_First" style.
    4. Validate.
  • Modify the name of Button control:
    1. Display the description window of control:
      • Select the Button control.
      • Display the popup menu (right mouse click) and select "Description".
    2. This control is named "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" from the menu that is displayed.
    2. In the code window that appears, write the following code in the "Click" event:
      // Reads the first customer
      HReadFirst(Customer)
      IF HOut(Customer) = True THEN
      // No customer
      Info("No form to view.")
      ELSE
      // Displays the customer data
      FileToScreen()
      END
      HReadFirst 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.
    • These buttons are named: "BTN_Previous", "BTN_Next" and "BTN_Last".
    • These buttons are respectively associated with the styles: "BTN_Previous", "BTN_Next" and "BTN_Last".
    • The code of "BTN_Previous" button is as follows:
      // If no search is in progress
      IF HOut(Customer) THEN
      // Reads the last customer
      HReadLast(Customer)
      END
       
      // Reads the previous customer
      HReadPrevious(Customer)
      // If the beginning of file is exceeded
      IF HOut(Customer) = True THEN
      Info("Start of file reached.")
      ELSE
      // Displays the customer data
      FileToScreen()
      END
    • The code of "BTN_Next" button is as follows:
      // If no search is in progress
      IF HOut(Customer) THEN
      // Reads the first customer
      HReadFirst(Customer)
      END
       
      // Reads the next customer
      HReadNext(Customer)
      // If the end of file is exceeded
      IF HOut(Customer) = True THEN
      Info("End of file reached.")
      ELSE
      // Displays the customer data
      FileToScreen()
      END
    • The code of "BTN_Last" button is as follows:
      // Reads the last customer
      HReadLast(Customer)
      IF HOut(Customer) = True THEN
      // No customer
      Info("No form to view.")
      ELSE
      // Displays the customer data
      FileToScreen()
      END
    In these different codes:
    • HReadLast is used to read the last file record according to the key used for the last search.
    • HReadNext reads the record whose key value is immediately greater than the one of current record.
    • HReadPrevious reads the record whose key value is immediately less than the one of current record.
    In any case:
    • HOut is used to find out whether the data file is empty.
    • FileToScreen is used to display the record on the screen.

Note

The code of "Next" and "Previous" buttons contains an additional code used to:
  • Check whether a search was already performed in the Customer data file (test of HOut to find out whether the file reading has started).
  • Read the first or last record if necessary. Indeed, the next or previous record cannot be read if no reading was performed in the data file.
  • Save the window by clicking among the quick access buttons.

Window test

  • Let's run a window test:
    1. Run the window test ( among the quick access buttons).
    2. Click the "Finding customers" tab if necessary.
    3. Find a customer (perform a generic search on "BEEF" for example).
    4. Browse the data file by clicking each one of the browse buttons.
    5. Stop the test to go back to the editor.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 23
Comments
Click [Add] to post a comment