Deploying and testing the application
Now that the portlet is deployed, you need to test the application.
- Point your browser to your portal page containing our portlet.
- Start by entering a data source name, or accepting the default of
"jdbc/sample", and click on the Lookup button. Notice the
other items start to dynamically changing the information based on
the data source value and the onclick event coding that you put
into the JSP. A log area shows the various activities taking
So what exactly is happening? When you entered a data source and clicked the Lookup button, the onclick event was fired causing a call to the "event_setDataSource" function. This function initiates a couple of XHR Ajax processes to retrieve data from the server. Once the responses are received from the server, they are processed by the various "callback_XXX" functions. The received XML data is parsed and used to populate the respective areas of the document. All of this activity occurs asynchronously! There was no portal page refresh as shown by the timestamp at the top of the page, and multiple items were updated on the page. This is Ajax!
- Now select a schema such as DB2INST1. The fields automatically update to show only the tables defined for that particular schema.
- Select a table from the list of available tables. For example, if you chose DB2INST1 as the schema, you could choose EMPLOYEE as the table. As you do this, the columns become available for that particular table in the selection box below the table list.
- Double-click a few of the columns to add them to the selected columns list. If you chose the EMPLOYEE table, you could add EMPNO, FIRSTNAME, MIDINIT and LASTNAME to the columns. Notice how the data table is automatically updated to reflect the selected columns.
- Double-click entries in the Active columns list to remove them.
The data table is updated to reflect the new selections. Remember,
all this activity occurs without any page refresh or any portal
interaction! The following is an example of the entire page filled
in with data after making the calls using Ajax.
Figure 11. Demo application in action
You may try and use different data sources and explore your data. Experiment, try different things. How can you enhance the application?