Web 2.0 Application Development using JPA, AJAX, and Dojo tools in Rational Application Developer Version 7.5

Rational Application Developer provides new features to make Web 2.0 application construction easy

This article will explain how to create a simple end-to-end Web application using the JPA, AJAX, and Dojo tools available in IBM® Rational® Application Developer for WebSphere Software Version 7.5. Developers building applications to run on IBM® WebSphere® Application Servers with the EJB3 and Web2.0 Feature Packs can take advantage of new functionality using Rational Application Developer's new Web tools.

Share:

Jarett Stein (jastein@us.ibm.com), Staff Software Engineer, IBM

Jarett SteinJarett Stein is a Staff Software Engineer on the Rational Application Developer System Verification Test team. He is the system test focal point for Web tools. In this role, he designs and develops test applications to simulate a customer-like usage environment.
Previously with IBM, Jarett worked on the Rational Asset Manager system test team, and the Lotus Notes client automation team. Jarett is a graduate of Worcester Polytechnic Institute in Worcester, MA, USA. He enjoys traveling, spending time with his wife, and playing with his dogs (Montana and Wally).



30 September 2008

Also available in Chinese

Introduction

IBM® Rational® Application Developer for WebSphere Software Version 7.5 and later (hereafter, Rational Application Developer) provides new Web tools for developers to build asynchronous Java™Script and XML (AJAX) applications for IBM® WebSphere® Application Servers with the EJB3 (Enterprise Java™Beans technology) and Web 2.0 Feature Packs. This article will explain how you can quickly use Rational Application Developer’s Web Tools to build a simple Web Application using new functionality included in these feature packs.

Technologies used in this article include:

  • Java™ Persistence API (JPA) tools to access a database
  • Remote Procedure Call (RPC) Adapter tools to expose JPA methods as a JavaScript Object Notation (JSON)-RPC Web service
  • Dojo Web development tools

Prerequisites

If you would like to build the application, please ensure you have the following installed:

  • Rational Application Developer
  • A supported server, either:
    • WebSphere Application Server V6.1 with the EJB3 and Web 2.0 Feature Packs
    • WebSphere Application Server V7.0 with the Web 2.0 Feature Pack

This example uses WebSphere Application Server V7.0.. Alternatively, you could use WebSphere Application Server v6.1. Note that WebSphere Application Server V6.0 supports only the Web 2.0 Feature Pack, not the EJB3 Feature Pack. All three WebSphere environments are bundled with Rational Application Developer.

Sample application description

This article describes how you (as a developer) might build an end-to-end Web application using the new Web tools in Rational Application Developer.

You will create a dynamic Web project. In the Web project, JPA entities and JPA Manager beans will be created from a sample database. The RPC Adapter Service will be used to expose (from the JPA Manager bean) a method Manager beanthat can be accessed from an http address and return a result. The result will be formatted as JSON.

Inside the Web project, a Web page will be created using Rational Application Developer’s Dojo tools to consume the RPC Adapter JSON result. At runtime, the Web page will display the data returned in the JSON result inside Dojo components. The process of building this application is simplified using the new Rational Application Developer tools explored in the following sections.


Building the end-to-end Web2.0 application

You will build the sample application inside a dynamic Web project.

Create a Web project

Create a new Dynamic Web Project and EAR, as shown in Figure 1:

  1. Select File > New > Dynamic Web Project.
  2. Enter MyWebProject as the Project Name.
  3. Select WebSphere Application Server v7.0 as the Target Runtime.
    1. If you are deploying to a remote WebSphere Server, select the runtime stub.
  4. Accept the default settings for the remaining fields.
  5. Click Finish.
  6. If prompted, switch to the Web perspective.
Figure 1. New Dynamic Web Project wizard
project options, including Target Runtime

The Web project and EAR appear in the Enterprise Explorer view. To access data in the sample Web application, use the JPA tools to create the persistence entities. First, add the JPA facet to the project.

  1. Right-click the Web project, MyWebProject. Select Properties.
  2. Go to the Project Facets properties.
  3. Check Java Persistence.
  4. Click OK.

Adding the JPA facet will create JPA configuration .xml files (persistence.xml and orm.xml) in the javasource META-INF folder, as shown in Figure 2. In addition, it creates (in the Web Project) a top-level JPA Content node that provides quick access to the Persistence XML Editor.

Figure 2. JPA content in Web project
tree view in the Enterprise Explorer

Before generating the JPA entities, add a database connection to the Web project. In this example, the Derby Sample Database is used. To create the connection to the database:

  1. Right-click your Web Project (MyWebProject).
  2. Select Properties.
  3. Go to the JDBC Connections page.
  4. Click the New button.
  5. Select the existing Derby Sample Connection, as shown in Figure 3.
Figure 3. Selecting the Derby Sample Connection
Connections on top, Properties below
  1. Click Finish

Derby Sample Connection appears in the Web Project properties JDBC Connection page, as shown in Figure 4. The Runtime connection details show information about the JDBC connection, including the resource reference name, the data source classname, the database name, and the class location. A resource reference has been added to the Web.xml (in the WebContent/WEB-INF folder). The reference points to this resource reference name and target data source, which is automatically configured in the extended EAR.

Figure 4. Derby Sample Connection in the project’s JDBC connections
tree view list on left, details on right

This database connection can be reviewed and explored in the Data Source Explorer view shown in Figure 5. This view lists all of database connections are listed. By expanding each database connection, you can explore the database, schemas, tables, and columns.

Figure 5. Data Source Explorer view
Derby Sample Connection Apache v 10.1.2.1 details
  1. Close the Web Project properties dialog by clicking the OK button. JPA entities can now be created.

Create JPA entities and beans

Rational Application Developer V7.5’s JPA tools enable you to create JPA entities quickly. JPA entities are Java class representations of a database, and allow you to interact on a disconnected model of the database. Annotations within a JPA entity can represent table columns, relationships to other tables, primary keys, and so on.

Rational Application Developer also provides tools to generate JPA Manager beans, a concept introduced in Rational Application Developer V7.5 that gives you simplified customizable access to query databases and consume JPA data in EJB and Web modules. More detailed information and tutorials specifically on Rational Application Developer’s JPA tooling are available in the application help.

To create the JPA entities:

  1. Right-click your Web project (MyWebProject), and choose JPA Tools > Add JPA Manager Beans.
  2. Click the Create New JPA Entities button to launch the Generate Entities wizard.
  3. Select the Derby Sample Connection and the SAMP schema, as shown in Figure 6.
Figure 6. Selecting the database connection to create JPA entities
dialog with database settings
  1. Click Next.
  2. On the Generate Entities from Database page, select the EMPLOYEE table, and select the Synchronize Classes checkbox, as shown in Figure 7.
Figure 7. Selecting tables to generate JPA entities
list of tables
  1. Click Finish. The JPA entities generate and the Add JPA Manager Bean wizard is back in focus. The Employee entity will appear in the list of available entities.

The JPA Manager Bean wizard provides tools for you to access a database and manage its entities effectively. The database can be queried by using the auto-generated queries, or by queries generated using the included query builder. The Manager Bean wizard displays, and allows you to define keys and relationships contained in a database. Changing options in the JPA Manager Bean wizard will modify the code in the Employee entity or EmployeeManager bean.

  1. In the JPA Manager Bean wizard, examine the Employee entity, as shown in Figure 8.
Figure 8. Employee entity seen in JPA Manager bean Wizard
list of available JPA entities
  1. Select the Employee entity checkbox and click Next. The JPA Manager Bean wizard is displayed, as shown in Figure 9.
  2. If an error message appears stating that a primary key is not defined, select empno as the primary key. This will add a @Id annotation to the employee entity and resolve the error.
Figure 9. The JPA Manager Bean wizard
JPA Manager bean on top, task on left
  1. Modify the built-in getEmployee query to return the list of employees.
  • Navigate to the Query Methods page.
  • Select the getEmployee query and click Edit.
  • On the Result Attributes tab, clear the attributes that relate to financial information to hide this confidential material from the query result. (In other words, clear the bonus, comm, and salary attributes, as shown in Figure 10.)
Figure 10. Editing attributes for a named query
list of attributes for the query to return
  • On the Order Results tab, add the lastname field to the Ordered Attributes, so the query looks like that shown in Figure 11.
Figure 11. Ordering a named query
select sort attribute and order
  • Click OK.
  1. Click Finish on the JPA Manager Bean wizard.
  2. After completing the JPA Manager Bean wizard, if you are prompted to set up the database connection for deployment, select the Derby Sample Connection and SAMP schema, as shown in Figure 12, and then click OK. This will set the connection information on the Deployment tab of the EAR's WebSphere Deployment Descriptor for use during runtime.
Figure 12. Setting up connections for deployment after creating JPA Manager bean
Set up connections for deployment dialog

Using the default selection, Use data source or resource reference, configures the data source in persistence.xml to use the resource reference. Alternatively, selecting Set connection directly via properties would set each database connection property individually in the persistence.xml. Choosing the first selection, only one line would be added to persistence.xml, as shown in Listing 1.

Listing 1. Use data source or resource reference
	<jta-data-source>java:comp/env/Derby Sample Connection</jta-data-source>

Choosing the second selection, each property would be added to persistence.xml, as shown in Listing 2.

Listing 2. Set connection directly via properties
<properties>
	<property name="openjpa.jdbc.Schema" value="SAMP"/>
	<property name="openjpa.ConnectionDriverName" 
value="org.apache.derby.jdbc.EmbeddedDriver"/>
	<property name="openjpa.ConnectionURL" value="jdbc:derby:D:\DevWorksArticle
\.metadata\.plugins\com.ibm.datatools.db2.cloudscape.driver\SAMPLE;create=true"/>
	<property name="openjpa.ConnectionUserName" value=""/>
	<property name="openjpa.ConnectionPassword" value=""/>
	</properties>

The JPA entity and manager bean have now been created. Notice that the entity was created in the src/entities directory, and the manager bean was created in src/entities/controller, as shown in Figure 13.

Figure 13. JPA entity and manager bean class in the Enterprise Explorer
Java Resources: src folder in tree view

The Employee entity class contains the representation of the table and its column as fields. The EmployeeManager JPA Manager bean contains the getEmployee() method that was created in the JPA Manager bean’s Query builder. Next, the getEmployee() method will be exposed as a JSON-RPC Web service with the RPC Adapter, and the JSON result will be used in a Web page.

Note: Rational Application Developer V7.5 also features new Web tools that make it easy to consume JPA Data in JavaServer Faces Web pages.

Expose JPA Manager bean methods as an RPC Adapter Web service

The RPC Adapter is a WebSphere feature (included in the Web 2.0 Feature Pack), which exposes server-side code as Web services. These services can be accessed from an http address, and return a result in either XML or JSON. Rational Application Developer provides tools to quickly expose a method in a Java class and publish it as a Web service. The getEmployee() method in the JPA Manager bean will be exposed through the RPC Adapter in this example.

Before using the RPC Adapter functionality in Rational Application Developer V7.5, add the Web 2.0 Server-side technologies facet to the Web Project.

  1. Right-click the Web Project, MyWebProjct, and select Properties
  2. Navigate to the Project Facets page.
  3. Select Web 2.0 > Server-side technologies, as shown in Figure 14, and press OK.
Figure 14. Adding the Server-side technologies facet
list on left, details on right

Next, create the RPC Adapter service:

  1. In the Enterprise Explorer view, Right-click the Web Project (MyWebProject), and select Services > Expose RPC Adapter Service. The Expose RPC Adapter Service dialog will appear.
  2. The Web project is pre-filled in the Web Project dropdown.
  3. Click the Browse button next to the Class field.
  4. In the Select a Java Class to Expose dialog, enter the name of the JPA Manager bean class: EmployeeManager. EmployeeManager is returned in the list of matching items, select it and press OK.
  5. Notice the list of methods from the JPA Manager bean will fill in the dialog.
  6. Select the getEmployee method, as shown in Figure 15.
Figure 15. Selecting the JPA Manager bean method to expose as an RPC Adapter Service
list of methods with option to select all or none
  1. Click Next.
  2. The Configure Methods page of the Expose RPC Adapter Service wizard is where the service is configured, as shown in Figure 16. Accept the defaults on this page.
Figure 16. The RPC Adapter Configure Methods page
configure Alias, Description, HTTP Method, and URL
  1. Click Finish.

Converter for the Date field in the entity class

If all of the attributes for the JPA query remained selected, then the result would be an openjpa subclass, instead of the custom class inside employeeManager that is being used in this example. This result would need its own Date converter:

  • Bean: org.apache.openjpa.util.java$sql$Date$proxy
  • Converter: com.ibm.websphere.rpcadapter.converters.sql.Date

The RPC Adapter Service has been created. The service will appear in the Enterprise Explorer view in the Services node. The configuration for the service is contained in a newly created file: WebContent/WEB-INF/RPCAdapterConfig.xml. Opening this file will load the RPC Adapter Configuration editor, where the RPC configuration can be modified in the graphical editor.

When you create the JPA Manager bean query, fields with java.sql.Date types remained selected. The java.sql.Date type needs special handling by the RPC Adapter via converters. Add a converter to the RPC Adapter for the Date fields:

  1. Open RPCAdapterConfig.xml
  2. Select Converters in the RPC Adapter overview.
  3. Click the Add button.
  4. Select Converter in the Add Item dialog, and press OK.
  5. For the converter details, enter the following, as shown in Figure 17:
    1. Bean: java.sql.Date
    2. Converter: com.ibm.websphere.rpcadapter.converters.sql.Date
Figure 17. The RPC Adapter Configuration Editor
Overview on left, Details on right

Test the RPC Adapter on WebSphere Application Server V7.0.

  1. To allow for simplified testing of the Web service, right-click the getEmployee method in the Enterprise Explorer view under Services/Employee Manager.
  2. Select Run As > Run on Server, as shown in Figure 18.
Figure 18. Run getEmployee() JSON-RPC service menu option
menu command

The following URL will open in a Web browser:

http://localhost:9080/MyWebProject/RPCAdapter/httprpc/EmployeeManager/getEmployee

The Web browser will launch, and download the result.

  1. Open the result in a text editor, such as NotePad. The beginning of the JSON result from the RPC adapter service query will look like the code in Listing 3.
Listing 3. Partial JSON result from RPC adapter service
{"result":[{"lastname":"ADAMSON","hiredate":"1972-02-12T00:00:00-0500",
"edlevel":16,"workdept":"D11","sex":"M","firstnme":"BRUCE","midinit":"",
"empno":"000150","job":"DESIGNER","birthdate":"1947-05-17T00:00:00-0400","phoneno":"4510"}

The JSON result from the Derby sample database is formatted in <field>:<value> notation, which can be consumed in a Dojo Web page using the new Rational Application Developer V7.5 Web Tools.

Use Dojo to script the Web front end

To use Dojo Web Tools in Rational Application Developer V7.5 Web Projects, first add the Dojo facet to the Web Project.

  1. In the Web Project’s properties, add the Dojo facet by going to the Project Facets page and selecting Web 2.0 > Dojo Toolkit, as shown in Figure 19.
Figure 19. Adding the Dojo Toolkit facet
Web 2.0
  1. If you click the Further Configuration Available info link at the bottom of the facets page allows you to specify Dojo resource locations. The Dojo version included with Rational Application Developer V7.5 is used by default. At the time the article was written, Dojo 1.1.1 is included with Rational Application Developer V7.5.
  2. After adding the Dojo facet, these options are accessible in the project properties Dojo Toolkit page, as shown in Figure 20.
  • Target Runtime
  • Workspace
  • File System
  • Dojo Loader
  • Dojo CSS
  • Dijit CSS
  • Theme CSS
  • Copy to current project
  • Target Folder
Figure 20. The Dojo Toolkit resource page
dialog for importing or sharing the Dojo toolkit

The Web page to consume the RPC adapter services will be built in two parts. First, the Dojo components will be added to the page. Second, the logic to call the RPC adapter and construct the page at runtime will be implemented using JavaScript.

Create a new Web page:

  1. Select File > New > Web Page.
  1. File Name:dojoExample.html
  2. Folder: /MyWebProject/WebContent
  3. Template: HTML/XHTML
  1. Click Finish.
  2. dojoExample.html will open in the Web editor.
  3. Notice the new Dojo palette drawers in the palette for the new Web page, as shown in Figure 21. The Dojo drawers are available on new Web pages after adding the Dojo facet to the Web project.
Figure 21. Dojo Palette drawers
Outline, Snippets, and Palette tabs
  1. When you drag Dojo components from the palette to the page in the Rational Application Developer V7.5 Web editor, use the Split view to see both the Preview and Source views.
  2. Drag Dojo components to the source view for more precise placement of the Dojo tags.Select Page > Show Panes > Preview + Source.

Dojo Content Assist

The source view for HTML pages provides content assist for Dojo tags. Typing ctrl + space inside a Dojo tag will show Dojo specific attribute choices.

Add Dojo Components to the page:

  1. From the Dojo – Layout drawer, select the Split Container.
  2. Drag the Split Container to the source view inside the <body> tag. As you drag Dojo components to the Web page, @import statements (for styles) and dojo.require statements (for components) are automatically added in the <style> tag and <script> tags, respectively. Notice that the code in Listing 4 has been generated within the <body> tag:
Listing 4. Generated SplitContainer div tag
<div dojotype="dijit.layout.SplitContainer" orientation="horizontal" sizerwidth="7" 
activesizing="true" style="border: 1px solid #bfbfbf; width: 400px; height: 300px;"></div>
  1. Drag two Content Panes, from the Dojo > Layout drawer, in between the <div> and </div> tags for the Split Container. The left content pane will contain the grid, and the right will contain the fields.
  2. Add a title for the page directly after the begin <body> statement with <h1> style.

Once the two Content Panes are on the page, inside the <body> tag looks like the code shown in Listing 5.

Listing 5. HTML after adding the SplitContainer and ContentPanes
<h1>Rational Application Developer v7.5 JPA, RPC Adapter and Dojo Example</h1>
<div dojotype="dijit.layout.SplitContainer" orientation="horizontal" sizerwidth="7" 
activesizing="true" style="border: 1px solid #bfbfbf; width: 400px; height: 300px;"> 
<div preload="true" dojotype="dijit.layout.ContentPane"> </div> 
<div preload="true" dojotype="dijit.layout.ContentPane"> </div></div>

Continue constructing the dojoExample.html page.

  1. Inside the left Content Pane (between the <div> tags), drop a Grid component from the Dojo – Other drawer in the palette. Set the model attribute to equal model and the structure attribute to layout, as shown in Listing 6.
Listing 6. Dojo grid in the page code
<div id="grid" dojotype="dojox.Grid" model="model" structure="layout"></div>
  1. Inside the right Content Pane, drop five TextBox components from the Dojo > Form drawer in the palette.
  2. Add an id attribute for each <input> tag, in this order: fname, lname, workdept, job, and phoneno.
  3. Add a label for each field, in front of the <input> tag for each text field, in this order: First Name, Last Name, Work Dept, Job Title, and Phone.
  4. Add a line break <br/> before the second through fifth labels, and change the width of the Split Container to 800 pixels so that the label and field will display on the same line.
  5. This finishes the task of adding all of the Dojo necessary to build the sample application. The preview and source split pane should look like that shown in Figure 22.
Figure 22. Preview and source split view after dragging Dojo components to the page
design view on top, code on bottom

Add JavaScript

You can now add JavaScript to fill the Dojo grid and text fields. The JavaScript will call the URL of the exposed JPA method in the RPC adapter, and then use the result within the Dojo components. This is a simple example where data is retrieved, but data can also be sent to the database using similar RPC adapter service implementations.

When you write JavaScript, it can be helpful to use the Source view. Rational Application Developer V7.5 will not generate the JavaScript needed to fill the grid or the text fields, so sample JavaScript is provided in Listing 7 (with comments inline).

Anywhere that components that are part of dojo, dojox, or dijit in the Dojo Toolkit are used inside the <script> tags, content assist is available.

Listing 7. JavaScript implementation used with the Dojo components created previously
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dojox.grid.Grid");
dojo.require("dijit.form.TextBox");
// manually added dojox.grid._data.model require for the grid's model
dojo.require("dojox.grid._data.model");

var clickedUser;
// a grid view is a group of columns
var view1 = {
			cells: [
			[{name: 'First Name'}, {name: 'Last Name'}]
			]
};
// a grid layout is an array of views.
var layout = [ view1 ];
// define a data array to contain the grid contents 
data = [];

// global var "model" to represent grid table model
model = new dojox.grid.data.Table(null, data);   
		
// on page load init() is called to call the RPC adapter service and call fillGrid
function init(){
// call the RPC Adapter service using dojo's xhrGet function which calls another function
     to handle the JSON result response
dojo.xhrGet({
		  url: "/MyWebProject/RPCAdapter/httprpc/EmployeeManager/getEmployee",
		    load: fillGrid,
		    handleAs: "json",
		    error: function(type, error){ alert("Error!" + error.message)}
		});
}

// called by init() to fill the grid using the response parameter containing the 
    JSON result of the RPC adpater service
function fillGrid(response, ioArgs){
var users = response.result;
for(i=0; i<users.length; i++){
// the JSON result is using <response>.<field> notation to extract the value from the 
JSON result
data.push([users[i].firstnme,users[i].lastname]);
}
// fill the grid model with data from the JSON result
model.setData(data);
};

// global variable rowClicked to store the row clicked index value 
var rowClicked = 0;

// getDetails is called from the onRowClick attribute of the grid calls the RPC adapter
    service to gather more details about the user
function getDetails(e) {
	// capture the rowIndex of the event e
	rowClicked = e.rowIndex;
	dojo.xhrGet({
		    url: "/MyWebProject/RPCAdapter/httprpc/EmployeeManager/getEmployee",
		    load: displayUserDetails,
		    handleAs: "json",
		    error: function(type, error){ alert("Error!" + error.message)}
		});
}

// called by the getDetails() function and fills the text fields with information from 
    the RPC adapter service's JSON result function 
    displayUserDetails(response, ioArgs){
var users = response.result;
	
// set the value of the text field using the dijit id
// the JSON result is using <response>.<field> notation to extract the value from 
    the JSON result
dijit.byId('fname').setValue(users[rowClicked].firstnme);
dijit.byId('lname').setValue(users[rowClicked].lastname);
dijit.byId('workdept').setValue(users[rowClicked].workdept);
dijit.byId('job').setValue(users[rowClicked].job);
dijit.byId('phoneno').setValue(users[rowClicked].phoneno);
};

</script>

The above JavaScript also requires that you make the following changes to the page’s HTML:

  1. Two items were added inside the <style> tags to enhance the grid’s look and feel:
  1. @import "dojo/dojox/grid/_grid/tundraGrid.css";
  2. #grid {
    border: 1px solid #333;width: 35em;height: 30em;}
  1. The following modifications were made inside the <body> tag:
  1. An onload attribute to call the init() JavaScript function was added to the <body> tag: <body class="tundra" onload="init();">
  2. Inside the grid’s <div> tag:
    1. The structure attribute was changed to layout.
    2. An onRowClick attribute was added to call the getDetails JavaScript function.
    3. The grid’s <div> tag now looks like:
      <div id="grid" dojotype="dojox.Grid" model="model" structure="layout" onRowClick="getDetails"></div>

The finished code within the <style> and <body> sections is as shown in Listing 8.

Listing 8. dojoExample.html style and body tag HTML
<style type="text/css">
@import "dojo/dojo/resources/dojo.css";

@import "dojo/dijit/themes/tundra/tundra.css";

@import "dojo/dijit/themes/dijit.css";

@import "dojo/dojox/grid/_grid/tundraGrid.css";
#grid {
                        border: 1px solid #333;
                        width: 35em;
                        height: 30em;
                }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body class="tundra" onload="init();">
<h1>Rational Application Developer v7.5 JPA, RPC Adapter and Dojo Example</h1>
<div dojotype="dijit.layout.SplitContainer" orientation="horizontal"
	sizerwidth="7" activesizing="true"
	style="border: 1px solid #bfbfbf; width: 800px; height: 300px;">

<div preload="true" dojotype="dijit.layout.ContentPane">
<div id="grid" dojotype="dojox.Grid" model="model" structure="layout" 
    onRowClick="getDetails"></div>
</div>
<div preload="true" dojotype="dijit.layout.ContentPane">
	First Name: <input type="text" name="input1" id="fname" value=""
	dojotype="dijit.form.TextBox" trim="true">
	<br>Last Name: <input type="text"
	name="input10" id="lname" value="" dojotype="dijit.form.TextBox" trim="true">
	<br>Work Dept: <input
	type="text" name="input11" id="workdept" value="" dojotype="dijit.form.TextBox"
	trim="true">
	<br>Job Title: <input type="text" name="input12" id="job" value=""
	dojotype="dijit.form.TextBox" trim="true">
	<br>Phone No: <input type="text"
	name="input13" id="phoneno" value="" dojotype="dijit.form.TextBox" trim="true">
    </div>
</div>
</body>

The Web page is now complete, and you can publish and run it on a supported server. When the Web page loads in your browser, a Dojo split container will appear with a grid on the left side and five text fields on the right side. The grid will fill with first and last names queried from the Derby sample database. When you click a row in the grid, the text fields in the right will populate with more information about that user.

Run dojoExample.html on the WebSphere Application Server V7.0.

  1. In the Enterprise Explorer view, right-click dojoExample.html and choose Run As > Run on Server.
  2. In the Run on Server dialog, select WebSphere Application Server v7.0 and click Finish.
  3. dojoExample.html will launch in a browser, as shown in Figure 23.
Figure 23. dojoExample.html at runtime
name list on left, individual details on right

What you have learned

Using new Rational Application Developer V7.5 functionality, you have built an AJAX Web application. The JPA tools were used to create an entity and Manager bean to access the sample Derby database. The RPC Adapter Service exposed a method in the JPA Manager bean to query the database. A Dojo Web page was created using new drag-and-drop functionality. Hand-written JavaScript was added to access the RPC service from an http address and display the JSON result in Dojo components on the Web page.


Acknowledgements

Many thanks to Tracey Brown Burton, Tom Mutdosch, Sarah Stein, and Jim Zhang for technical and editorial contributions to this article.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational
ArticleID=341349
ArticleTitle=Web 2.0 Application Development using JPA, AJAX, and Dojo tools in Rational Application Developer Version 7.5
publish-date=09302008