Lesson 2: Add client-side events

Client-side events and methods enable you to create Web pages with dynamic content without a round trip to the server, which can improve performance. During runtime, the runtime engine executes these events.

In this lesson, add a client-side event to your DataWindow object. This client-side event enables you to sort employee information in descending order by employee ID.

StepsAdding client-side events to a DataWindow object

  1. Display the employee.jsp page in the Web Page editor.

  2. In the Web Page editor design pane, right-click the Employee ID DataWindow object, and select Edit Client Side Event Scripts from the context menu.

    Next, edit the client-side event script to sort employee records in descending order when you click the Sort Data Descending button on the DataWindow object in the browser.

  3. Select buttonClicked(row,objectName).

  4. Enter the following JavaScript in the editor box and click OK.

    var gobn = objectName;
    
    if (gobn == "b_4"){
    
    d_emp.SetSort("emp_id D");
    
    d_emp.Sort();
    
    }
    
    if (gobn == "b_5"){
    
    d_emp.SetSort("emp_id A");
    
    d_emp.Sort();
    
    } 
    

    The code for the client-side events display in the Web Page editor.

StepsTesting the employee.jsp Web page on the Tomcat 5.0 server

  1. Select File|Save from the menu bar to save the employee.jsp file.

  2. Right-click the design pane and select Run from the context menu.

  3. Select Choose existing server, select Tomcat v5.0Server @ localhost from the list, and click Finish.

    The Apache Tomcat server starts, and the JSF Page Template opens.

  4. Click the Sort Data Descending button on the Web page to sort the client-side event data in a descending order by Employee ID.

  5. Before continuing, click the Stop the server icon in the Servers view to stop the server.