PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WINDEV 25 feature!
  • 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.
Lesson duration

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 pane will display the product list and manage the addition and modification of products (these operations have been performed in previous lessons).
  • The second tab pane will propose 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, 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, in WINDEV's home page (Ctrl + <), click "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 use Tab controls to display various data in this window. Tab controls are used to group information by theme. The user can directly access a theme by clicking the desired "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 control:
    1. Display the "WIN_Menu" window if necessary:
      • from the open documents bar.
      • by double-clicking its name the "Project explorer" pane.
    2. Select the window controls and move them to the home area of 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 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 the 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 in the home area of the window and move them to pane 1 of the Tab control.
    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.

Remark

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 while ignoring the anchors defined for the controls found in the pane, press the Shift key during the resize operation.
Window interface with Tab control

Modifying the Tab control

  • Modify the name of Tab control:
    1. Double-click the Tab control that was just created: the control description window appears.
    2. Modify the control name. The control is named "TAB_Viewing".
    3. Validate the control description window.
  • 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.
      Caption of the tab pane in edit mode
    3. Click "Pane 2". The pane is displayed. Click "Pane 2" again. Type the caption: "Finding customers". Press Enter to validate.
  • We will associate an image with each pane of the Tab control. To do so:
    1. Display the description window of Tab control (double-click the control for example). The "General" tab of the description window allows you to configure the characteristics of each pane in the Tab control. 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.
      Characteristics of a Tab control pane
    3. The pane characteristics are displayed.
      Characteristics of a Tab control pane
    4. We are going to associate an image to the tab pane via the WINDEV image catalog.

      Remark

      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 Show image options button). This catalog contains hundreds of images, cliparts, ...
    5. Click the Show image options button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed. 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 Image of a product and validate ("OK").
    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 Tab control description window, click "Finding customers" in the list of static panes.
    11. Click the Show image options button on the right of "Image" control. Select "Catalog" from the popup menu that is displayed. The image catalog window appears.
    12. In the search area, specify "Person". 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 options found in the setting screen of generated image and validate.
    15. Validate the Tab control description window.
  • A new control was just created: we must now manage its anchoring 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 Anchor in height and width and validate.
    4. Save the window by clicking Save the element among 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 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 pane. The empty tab pane appears.
    2. Display the "Analysis" pane in the editor 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 Arrow 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 tab pane. You can select multiple elements by holding the Ctrl key down.
    5. Drag and Drop these items to the "Finding customers" tab pane.
      Drag and Drop of items in the Customer data file
    6. The controls are automatically created in the Tab control pane. These controls are automatically linked to the corresponding item in the data file.
    7. Save the window (Ctrl + S).
  • 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.)".
      Ribbon 'Alignment' pane
  • Run the window test ( Run the test of a window 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 "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 positioned 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.
      • Press the Ctrl key.
      • Click the Tab control: only the controls in the Tab control pane are selected.
    2. With the mouse, move one of the selected controls to the bottom.
      Selecting the controls to move down
    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 on "Combo Box".
    2. Click the "Finding customers" pane, between the tab pane and the control "Identifier of Customer".
    3. The Combo Box control creation wizard is displayed. We will create a Combo Box control based on the "Customer" data file.
    4. Select "Display the data found in a file or in an 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 are going to display the last and first names of the person.
      • 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" identifier. This is the value that will be sought 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 be linked to no 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 (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.
      Creating the search control
  • To create the Button control to find customers:
    1. Create a Button control: on the "Creation" pane, in the "Usual controls" group, click Create a Button control.
    2. Position the Button control beside the Combo Box that was just created.
    3. This control is named "BTN_ExactMatchSearch" and its caption is "Exact-match search".
    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 from his identifier
      HReadSeekFirst(Customer, CustomerID, COMBO_Customer)
      IF HFound(Customer) THEN
      // Displays the customer data
      FileToScreen()
      END
    6. Let's take a look at this WLanguage 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 control (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.

        Remark

        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 (Ctrl + S).
  • Let's run a window test:
    1. Run the window test ( Run the window test among the quick access buttons).
    2. Click the "Finding customers" tab pane if necessary.
    3. Select a value in the Combo Box control and click on "Exact-match".
      Exact-match search test
    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 entered, we are going to 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. Display (if necessary) the "Finding customers" pane tab of "WIN_Menu" in the editor.
    2. Create an edit control: on the "Creation" pane, 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. This control is named "EDT_Sought_Name" and its caption is "Sought name".
  • To create the Button control to launch the generic search:
    1. Create a Button control: on the "Creation" pane, in the "Usual controls" group, click Create a Button control.
    2. Position the control beside the edit control that was just created.
      Search interface
    3. This control is named "BTN_GenericSearch" and its caption is "Generic search".
    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 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.

      Remark

      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 (Ctrl + S).
  • Let's run a window test:
    1. Run the window test ( Run the test of a window among the quick access buttons).
    2. Click the "Finding customers" tab pane if necessary.
    3. Enter a value in the edit control (for example "BEEF") and click "Generic search".
      Test for the generic search
    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 Button controls to browse the different records of the "Customer" data file. These controls are in a "recorder" layout.
Recorder 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.
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 control used to display the first file record:
    1. If necessary, display the "Finding customers" Tab control pane in the editor.
    2. On the "Creation" pane, 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.
  • 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 control. To apply this style:
    1. Select the Button control 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.
      Control style
      Select "BTN_First".
    4. Validate.
  • Modify the name of the Button control:
    1. Open the control description window:
      • 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 WLanguage 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.
    • The names of these controls are: "BTN_Previous", "BTN_Next" and "BTN_Last".
    • These controls are respectively associated with the 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 HOut(Customer) THEN
      // Reads the last customer
      HReadLast(Customer)
      END
       
      // Reads the previous customer
      HReadPrevious(Customer)
      // If the start of the data file is reached
      IF HOut(Customer) = True 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 HOut(Customer) THEN
      // Reads the first customer
      HReadFirst(Customer)
      END
       
      // Reads the next customer
      HReadNext(Customer)
      // If the end of the data file is reached
      IF HOut(Customer) = True 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
      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.

Remark

The code in the "Next" and "Previous" Button controls contains additional lines of code 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 Save an element among the quick access buttons.

Window test

  • Let's run a window test:
    1. Run the window test ( Run the window test among the quick access buttons).
    2. Click the "Finding customers" tab pane 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 25
Comments
Click [Add] to post a comment