< Previous | Next >

Lesson 2: Add code for the search function

Now that you have created the web page, you must add the EGL code that receives the search terms from the web page, searches the database according to those terms, and displays the search results on the page.

Create a library for the search functions

Because these search functions can get complicated, you will want to create a library to hold them. Then, you can reuse those search functions and keep your JSF Handlers simple.
  1. Right-click the EGLSource folder of your EGLWeb project and then click New > Library. The New EGL Library window opens.
  2. In the EGL source file name field, type this name for the new library:
    SearchLibrary
  3. In the Package field, type libraries. EGL will create this new package if you don't have one by this name.
  4. Under EGL Library Type, click Basic.
  5. Click Finish. The new library is created and opens in the EGL editor.
  6. Remove all the filler text from the new library so all that is left is the following code:
    package libraries;
    
    library SearchLibrary type BasicLibrary
    
    end
Now you can add functions to this library and use them in your JSF Handlers.

Add a SQL search function to the library

  1. At the bottom of the SearchLibrary file but before the final End statement, insert this code:
    	function NameAndStateSearch_And(lname STRING in, 
    			state CHAR(2) in, 	customer Customer[])
    		get customer;
    	end
    This function is similar to the functions in other libraries that retrieve every record from the database. The difference is that this function receives these three parameters:
    • The string variable lname, which represents the last name of the customer being searched for.
    • The character variable state, which represents the state of the customer being searched for.
    • The array of customer records customer, which will hold the results of the search.

    Right now, this function will retrieve every record in the database. In the next few steps, you edit the SQL statement generated by this function so that only the records matching the search terms lname and state are returned.

  2. If you did not use code completion to insert this function, press Ctrl+Shift+O to organize your imports.
  3. Right-click the word customer in the line get customer and click SQL Statement > Add from the popup menu. The explicit SQL statement is added to the get customer line of code.

    Strictly speaking, nothing has changed in your code. EGL has merely exposed the default SQL code that it creates when it encounters the code get customer. Now that this SQL code is explicitly shown on the page, you can edit it to make it behave differently. In this case, you want to change the statement from retrieving every customer record to retrieving only the customer records with a matching last name and state.

  4. Add a blank line after the line from EGL.CUSTOMER by placing the cursor at the end of the line and pressing Enter.
  5. In the new blank line below from EGL.CUSTOMER, insert this code:
    where LASTNAME like :lname 
      and "STATE" = :state

    The code looks like this:

    Appearance of the NameAndStateSearch_And function

    The code you've added is not EGL but SQL. LASTNAME is the complete name of a field in the sample database your project is using. If you look at the Record parts in the package eglderbydb.data, you will see that the records such as the Customer record also refer to these fields. The code :lname and :state are called host variables, which in this context are EGL variables that you use in SQL code. The STATE is enclosed in quotes to indicate that "state" is the name of the table, not the SQL reserved word.

    EGL provides different ways to create and generate SQL statements. In an earlier EGL tutorial, you retrieved a specific database record by specifying a particular customer ID number. This clause created a SQL where statement similar to the where statement you just added. You could also use a defaultSelectCondition to perform the same task.

  6. Save the file. EGL generates the file automatically.
Here is the complete code of the library file. If you see any errors marked by red X symbols in the editor, make sure your code matches the code in this file:Completed SearchLibrary.egl file after lesson 2

Use the search function in the JSF Handler

  1. Open the customersearch.jsp page.
  2. Right click on the content area of the page in the editor and click Edit Page Code from the popup menu. The page code file opens.
  3. In the JSF handler for the customersearch.jsp page, find the variables you created to represent the search terms and search result:
    searchTerms Customer;
    searchResults Customer[0];
  4. Immediately after your previously created variables, add the following code to create two additional variables:
    resultMessage CHAR(80);
    numberOfResults INT;
    Next, you need to create a function to be called from the web page. This function will pass the searchResults variable and the necessary fields from the searchTerms variable to the function in the library.
  5. Add the following function to the JSF Handler just before the final end statement:
    	function searchFunction()
    		searchTerms.LastName = searchTerms.LastName::"%";
    		SearchLibrary.NameAndStateSearch_And(
    			searchTerms.LastName, 
    			searchTerms.State, searchResults);
    		resultMessage = " customer(s) found.";
    		numberOfResults = searchResults.getSize();
    	end
    Ignore any red Xs for now.


  6. Add code to the onPreRender function to reset the page after a failed search:
    	function onPrerender()
    		if (searchResults.getSize() == 0)
    			resultMessage = "No customers found or no search criteria entered.";
    		end
    	end

    Here is some information about the page code you just added:

    • The record searchTerms and the array of records searchResults are both instances of the Customer record. You can create multiple instances of a record or DataItem part.
    • This code includes the function searchFunction, which will be bound to the page's Submit button. This function calls the NameAndStateSearch_And function you added to the library earlier in this lesson.
    • The search function adds a wildcard character to the end of the last name that the user enters. For example, if the user enters Sm, the search string becomes Sm% and returns results like Smith and Smiley.
    • The search function is case sensitive.
  7. Organize imports (Ctrl+Shift+O) and save the file.

Here is the complete code of the customersearch.egl file. If you see any errors marked by red X symbols in the file, make sure your code matches the code in this file:Completed customersearch.egl file after lesson 2

Bind the search function to the web page

Now that you have set up the data and function in the JSF handler, you can use them on the page.
  1. Open the customersearch.jsp page.
  2. In the Page Data view, expand JSF Handler.
  3. From the Data group, drag the numberOfResults variable directly onto the left output text field that is below the Submit button.
  4. From the Data group, drag the resultMessage variable directly onto the right output text field.
  5. From the Actions group, drag searchFunction() directly onto the Submit button on the page. The appearance of the page does not change, but the function is now bound to the button.
  6. Save the page.
  7. Test the page by running it on the server and entering search terms into it:
    1. In the Project Explorer view, right-click customersearch.jsp and then click Run > Run on Server. In previous tutorials, you should have set up a default server for the project. If you did not do this or have changed the settings, you may have to select which server to use again.
    2. When the page opens in the web browser, enter a letter in the LastName field and a state in the State field and then press the Submit button. Note that this search page is case sensitive.

This search page is difficult to use because the user must know both the customer's state and the first letter of the customer's last name. It would be better if the user were able to choose between an AND search and an OR search. In the next lesson, you will add this option to the page. In a later lesson, you will change the State input field to a combo box that lists all of the valid states used in the database.

In addition, there is a problem with "customer(s) found" display; on output, the space before "customer(s)" was lost. In the next exercise, you will change the cascading style sheet (CSS) for the page to fix this problem.

Change the CSS file

Cascading style sheets work by associating elements in an HTML page with a set of styles that determine how those elements are displayed. EGL provides two style sheets for the page template you selected:
stylesheet.css
A general style sheet for all the templates
gray.css
A style sheet specific to the A_gray.htpl template.

In this exercise you will change the more general template.

  1. Without closing the search results page in the browser, expand WebContent and theme. Double-click stylesheet.css to open it in the editor.
  2. In the right pane of the editor, locate the .outputText element. Add the following line between the braces:
    padding-right:5px;
    This requires a browser to add 5 pixels of space to the right of any text tagged as <h:outputText> when rendering it for display. The element now looks like the following example; note the colors of the fonts:
    The padding style is added to the element.
  3. Save and close the CSS file.
  4. Go back to the search results page (customersearch) in the browser window. Click the page refresh icon next to the address:
    The refresh icon consists of two small yellow arrows that form a circle.
    The refreshed page now shows a space between the number and the text in the "customer(s) found" message.

Lesson checkpoint

You have created the EGL code that will power the search page you created in the last lesson.
In this lesson, you have learned how to do the following:
  • Create an EGL library to contain functions
  • Edit and add code to the EGL JSF Handler to call functions in the library
  • Bind the functions in the JSF Handler to the controls on the web page
Now you are ready to begin Lesson 3: Use the OR search condition.
< Previous | Next >

Feedback