< Previous | Next >

Lesson 1: Create a simple search page

In this lesson, you will set up a simple search page. In the next lesson, you will add EGL code to make the search page work.
The basic steps for building this page are essentially the same as any other EGL-JSF web page:
  1. Create the web page.
  2. Create the EGL variables.
  3. Bind the EGL data to JSF components.
  4. Add EGL functions to manage the EGL variables.
This lesson covers the first three steps above, and the next lesson covers the fourth step. All lessons build on the files and knowledge from the Introducing EGL tutorial.

Create the web page

  1. In the Project Explorer view, right-click the WebContent folder of the EGLWeb project, then click New > Web page.
  2. In the File Name field, type this text as the name of the new file, including the extension:
    customersearch.jsp
  3. Make sure that the Folder field shows the /EGLWeb/WebContent folder.
  4. In the Template list, click My Templates.
  5. In the Preview box, click the A_gray.htpl template.
  6. Click Finish. The new page is created and opens in the editor.
  7. In place of the default text, type Customer Search.
  8. Press Enter three times to insert three blank lines.

Create the records

In these steps, you create two EGL records. The searchTerms record represents the search input, or the terms of the search. In this case, the searchTerms record holds the name and state of the customers being searched for. The searchResults[] array of records represents the search results, or the records from the database that match the search input.
  1. From the EGL drawer of the Palette view, drag a New Variable onto the page, underneath the text Customer Search. The Create a New EGL Data Variable window opens.
  2. Under Type Selection, click Record.
  3. Under Record Type, click Customer.
  4. In the Enter the name of the field field, type the following text:
    searchTerms
  5. Clear the Array check box.
  6. Clear the Add controls to display the EGL element on the web page check box.
  7. Click OK.
  8. Drag another New Variable from the Palette view onto the page, underneath Customer Search. The Create a New EGL Data Variable window opens again.
  9. Under Type Selection, click Record.
  10. Under Record Type, click Customer.
  11. Under Enter the name of the field, type this name for the field:
    searchResults
  12. Select the Array check box.
  13. Clear the Add controls to display the EGL element on the web page check box.
  14. Click OK.
Now these two new variables are shown in the Page Data view.

Add the records to the page

  1. In the Page Data view, expand JSF Handler and Data.
  2. From the Page Data view, drag the searchTerms - Customer record onto the page, below the Customer Search text. The Insert Control window opens.
  3. In the Insert Control window, under Create controls for, click Updating an existing record.
  4. Under Fields to display, click the None button under the list of fields. This clears all the check boxes.
  5. Select the check boxes next to the LastName and State fields.
  6. Click the Options button.
  7. In the Options window, select the Submit button check box.
  8. In the Submit button Label field, type Submit.
  9. Clear the Delete button check box.
  10. Click OK.
  11. Click Finish. A form appears on the page, with fields for the customer's last name and state. You'll type your search terms into these input fields to search for a customer. The page looks like this:

    Appearance of the search page

  12. Add a blank line below the Submit button by placing the cursor to the right of the {Error Messages} field for the Submit button and pressing Enter.
  13. From the Palette, open the Enhanced Faces Components drawer.
  14. Drag two Output components from the Enhanced Faces Components drawer onto the page, on the new line below the Submit button. These output fields will display the number of results returned and a message, such as 5 Customer(s) found. Search again?
  15. Add another blank line after the output fields. From the Page Data view, drag searchResults - Customer[] onto the new blank line, below the Submit button and the two new output fields. The Insert List Control window opens.
  16. In the Insert List Control window, click the radio button next to Displaying an existing record (read-only).
  17. Under Columns to display, click the None button under the list. This clears the check boxes.
  18. Select the check boxes next to the LastName, EmailAddress, and State fields. The Insert List Control window looks like this:

    Insert List Control window

  19. Click Finish.
  20. Save the page.
Now the search page has the input fields for the user to type the search terms, as well as a data table to display the search results. The search page looks like this:

Appearance of the search page

Lesson checkpoint

You have now created a simple search page.
In this lesson, you have learned how to do the following:
  • Create an EGL web page
  • Create EGL records
  • Add the EGL records to the web page
Now you are ready to begin Lesson 2: Add code for the search function.
< Previous | Next >

Feedback