## Tutorial 5: Writing an event handler in JavaScript

This tutorial provides instructions for writing a set of event handlers. The tutorial assumes that you have a basic report design based on the Classic Models, Inc. Sample Database. The only requirement of the starting report design is that it contains a table of customers with a column for the customer name. In this tutorial you count the customers whose names contain the string "Mini" and display the result in a pop-up window.

In this tutorial, you perform the following tasks:

- Open the report design.
- Create and initialize a counter in the Table.onCreate( ) method.
- Conditionally increment the counter in the Row.onCreate( ) method.
- Display the result, using the ReportDesign.afterFactory( ) method.

### Task 1: Open the report design

Open a report design that uses the Classic Car sample database and displays a table of customer names.

1. If necessary, open Navigator by choosing Window->Show View->Navigator.
2. Double-click the appropriate report design. The file opens in the layout editor, as shown in Figure 22-4.

### Task 2: Create and initialize a counter in the Table.onCreate( ) method

In order to count the number of customers whose names contain the string Mini, you must first declare a global counter and set its value to zero. The Table.onCreate( ) method is the most appropriate place to do this task because Table.onCreate( ) executes before any rows are retrieved. You conditionally increment this counter in the Row.onCreate( ) method.

1. In Layout, select the table by placing the cursor near the bottom left corner of the table. The table icon appears, as shown in Figure 22-5.

2. Choose the Script tab. The script tab appears, as shown in Figure 22-6.

3. Type the following line of code in the script window for the onCreate( ) method:

    countOfMinis = 0;

4. To run the report and verify that the code did not create any errors, choose Preview.
5. Scroll to the bottom of the report, where JavaScript error messages appear. If there are no errors, the report appears, as shown in Figure 22-7.
If you see an error message, you may have typed a statement incorrectly. If so, go back to the script window, select the method you just modified, correct the error, and choose Preview again.

### Task 3: Conditionally increment the counter in the Row.onCreate( ) method

To count the number of customers with the string Mini in their names, you must examine each customer's name and add one to the counter for every occurrence. A logical place to do this task is in the Row.onCreate( ) method, which is executed upon every retrieval of a row of data from the data source.

1. In Layout, select the Row and then choose Script.
2. Pull down the list of methods at the top of the script window and select onCreate, as shown in Figure 22-8.

3. Enter the following line of JavaScript code in the Script window:

    row=this.getRowData( );

Notice that when you enter the period after this, a pop-up appears containing all the available methods and properties, including getRowData. This line of code gets an instance of IRowData, which has a method, getExpressionValue( ), to get the contents of a column of the row.
4. Type the following line of JavaScript below the line you just entered:

    CustName=row.getExpressionValue( "row[CUSTOMERNAME]" );

This line of code returns the contents of the table column that comes from the CUSTOMERNAME column in the data set.
5. Type the following line of code to conditionally increment the counter you created in Create and initialize a counter in the Table.onCreate( ) method.

    if( CustName.indexOf( "Mini" ) != -1 ) countOfMinis += 1;

You can use the JavaScript palette to insert each of the following elements in the preceding line:

- indexOf( )
Select Native ( JavaScript ) Objects->String Functions->indexOf( )
- !=
Select Operators->Comparison->!=
- +=
Select Operators->Assignment->+=

6. Choose Preview to run the report again to verify that the code you entered did not create any errors.

### Task 4: Display the result, using the
ReportDesign.afterFactory( ) method

To display the count of customers with the string Mini in their names, you insert code in a method that runs after the processing of all the rows in the table. One logical place for this code is in the ReportDesign.afterFactory( ) method.

1. In Outline, select the report design, as shown in Figure 22-9.

2. Select the afterFactory( ) method from the script window drop-down list.
3. Type the following code into the afterFactory( ) method:

    importPackage( Packages.javax.swing );
    frame = new JFrame( "Count of Minis = " + countOfMinis );
    frame.setBounds( 310, 220, 300, 20 );
    frame.show( );

4. Select Preview to see the results. If there were no errors in the code, you see a report similar to the one in Figure 22-10.

If you do not see the Count of Minis window, look for it behind the Eclipse window. If the Count of Minis window does not appear, the most likely reason is a scripting error caused by an error in one of your code entries.

If you suspect that a scripting error has occurred, scroll to the bottom of the report, where all scripting error messages appear. In most situations, there is a brief error message next to a plus sign ( + ). The plus sign indicates that there is a more detailed error message that is only visible after you expand the brief error message. To expand the brief error message, choose the plus sign. Scroll down to see the more detailed error message.