Accessing DB2 UDB data in Browser Based Applications

Accessing DB2 UDB data in Browser Based Applications
using IBM Rational Application Developer
By Nitin Raut ([email protected])
Certified Consulting IT Specialist
IBM Corporation
April 2010
Skill Level: Intermediate
Skill Level: Intermediate
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 1
Accessing DB2 UDB data in Browser Based
Applications
JavaServer Faces (JSF) is a framework that simplifies building user interfaces for
Web applications. Service Data Objects (SDO) is a data programming architecture and API for
the Java platform that unifies data programming across data source types.
In this lab you will see how you can use JavaServer faces to create user interface to represent
the data. We will also see how Service Data Objects can simplify the access to data on IBM i.
Page 2
EM Sandbox for Power
JSF Client Consuming Service Data Objects
In this lab you will build a Web application that uses JavaServer Faces (JSF) and Service Data
Objects (SDO) technology to access data on IBM i.
•
What you should be able to do:
o At the end of the lab, you should be able to:
• Create JSF Input from with actions.
• Create Service Data Object to query iSeries table.
•
Introduction
o The steps in this lab are:
ƒ Create Faces JSPs
ƒ Define Service Data Objects (SDOs)
ƒ Test JavaServer Faces Application in WebSphere Application Server Test
Environment
•
Skill Prerequisites
o Prerequisite skills for this lab are:
ƒ Understanding of Java programming language concepts and beginner Java
programming skills
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 3
Required Materials
o Client system requirements:
ƒ IBM Rational Application Developer V7.5
o
Page 4
Lab information sheet:
Variable
Description
Demonet IBM i
<team_number>
Team Number
99
<IBMi>
IBM i hostname
iseriesd.demos.ibm.com
<IBMi_userid>
IBM i user ID
SOADEMO
<IBMi_password>
IBM i password
demo4you
<app_lib>
Application library
FLGHT400
<app_lib_modules>
Application Library Modules
FLGHT400M
<workspace>
Workspace
C:\PoT\SOAiV75\workspace
<team_dir_local>
Team directory local
C:\PoT\SOAiV75\teamxx
EM Sandbox for Power
1.1
Start Rational Developer for Power Systems (RDp)
Skip to next section if ….
You are already in Rational Developer for Power
Systems and you have started WebSphere
Application Server Test Environment
Start Rational Developer for Power Systems (RDp)
__1.
Go to Start => All Programs => IBM Software Development Platform => IBM
Rational Developer for Power Systems Software V7.5 => IBM Rational Developer
for Power Systems Software
__2.
In the workplace launcher window, enter <workspace> (shown by default) in the
workspace field and press OK. (Please make sure that Use this as a default and do not
ask again is NOT checked)
Important!
Please make sure that Use this as a default and do not ask again is
NOT checked
__3.
On the Welcome page. Click X to close or press Workbench icon.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 5
Start WebSphere Application Server Test Environment
Start WebSphere Application Server Test Environment
This is very important before invoking the web services wizard,
as the wizard will fail.
__4.
In current perspective (Remote System Explorer by default). Select Window => Open
Perspective => Other. Select Web Perspective and click OK.
__5.
In the Web Perspective, click on Servers tab (bottom of screen). Select WebSphere
Application Server 7.0 and press Start button.
__6.
You should see console view with startup messages. Once WebSphere Application
Server is started you will see Server view with status “Started”.
Page 6
EM Sandbox for Power
__7.
Another way to make sure WebSphere Application Server Test Environment is started is
to see the console view with message “Server server1 open for e-business”.
Troubleshooting
If the WebSphere Application Server Test Environment does not
start. Please check server connection type and admin port.
To check configuration, double click on WebSphere Application
Server 7.0 under server view. You may manually provide the
connections settings and select SOAP connector port instead of
RMI port which is more compatible with firewalls.
Click on X and save the configuration when prompted.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 7
1.2
Create a Web Project
Open Web Perspective
__1.
Go to Window => Open Perspective => Other. In the Open Perspective window, select
Web and click OK.
Create a Web Project
__2.
Page 8
Create a Web project: Select File => New => Dynamic Web Project
EM Sandbox for Power
__3.
In Dynamic Web Project window,
Enter Project Name: FSxxSDO (where xx is your team number)
Select Target Runtime : WebSphere Application Server V7.0
Select Configuration : Java Server Faces IBM Enhanced Project
(Since we will be creating JSF pages, this adds Java Server faces support to
the project)
Enter EAR Project Name : FSxxSDOEAR (where xx is your team number)
Click Next.
__4.
In Configure web module settings window, it allows you to change the context root and
other parameters for the project. Click Next.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 9
__5.
In JSF Capabilities window, it let’s you add component libraries, shows configuration file
and JSF servlet name. Click Finish.
__6.
Under Project Explorer Expand FSxxSDO project => Click on WebContent folder.
Create Faces JSPs
__7.
Page 10
From the menu bar, go to File -> New -> Web Page
EM Sandbox for Power
__8.
In the New Web Page window,
Enter File Name : FSSDOInput
Make sure JSP under Basic Templates is selected
Click Finish.
__9.
Click on WebContent folder.
__10.
Next let’s create result page. From the menu bar, go to File -> New -> Web Page. In the
New Web Page window,
Enter File Name : FSSDOResult
Make sure JSP under Basic Templates is selected
Click Finish.
__11.
Next, let’s edit input page. Click on FSSDOInput.jsp window title.
__12.
Type heading Flights Search and press Enter.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 11
__13.
Page 12
Select text “Flights Search” by pressing SHIFT+ARROW key on the keyboard and click
on the Properties view at the bottom.
EM Sandbox for Power
__14.
The properties view allows you change the properties for the selected component in the
edit window. Select Heading 1 in paragraph field. You may also change the color and the
font.
__15.
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 13
Define Session Scope Variables to hold input data
__16.
In the page data view on the left side bottom area.
Page data view
If page data view is not seen then open the Page
Data view. Select Window => Show View => Page
Data
Page data view also might be available on the right
hand side where pallet drawer is located.
Right click on Scripting Variables, and select New -> Session scope variable.
Page 14
EM Sandbox for Power
__17.
In Add Session Scope Variable window, enter following details:
__a. Variable Name: fromCity
__b. Type: java.lang.String
__c. Click OK
__18.
Add another variable: toCity. In the page data view, right click on Scripting Variables,
and select New -> Session scope variable. In Add Session Scope Variable window,
enter following details:
__a. Variable Name: toCity
__b. Type: java.lang.String
__c. Click OK.
__19.
Expand Scripting variables -> Session scope node to see the defined variables.
__20.
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 15
__21.
Make sure your cursor is just below the heading. Add an HTML table with 1 row and 5
columns. In the Palette view, expand HTML Tags drawer. Click on the Table component
and just move the cursor onto the JSF page and drop it under the heading as shown
below:
__22.
On the Insert Table dialog enter the number of rows: 1, and the number of columns: 5.
Click OK.
__23.
Next, we will add some labels. Complete the following steps:
__a. Type in From City: in the first column of the table
__b. Type in To City: in the third column of the table.
Page 16
EM Sandbox for Power
__24.
In the Palette view expand Enhanced Faces Components. Select the Input component
and move the cursor into 2nd column of the table and drop it in the 2nd column.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 17
__25.
Drop another Input component to the 4th column of the table.
__26.
Drop a Button - Command component into the 5th column of the table.
__27.
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard.
Page 18
EM Sandbox for Power
Change the properties of input fields
__28.
Select the first input field (2nd Column) on the JSF and switch to the Properties View. Set
the Id field to fromCity.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 19
__29.
Bind fromCity scripting variable to the fromCity input field on the JSF page. Binding will
allow us to save input field values and pass them to the Relational Record List JSF
component that will perform a database query.
On the JSP, make sure that fromCity input field is selected. Go to the Page Data view,
expand Scripting variables -> Session scope and select fromCity field. Right mouse
click and select Bind to ‘fromCity’.
__30.
Page 20
It is important that this binding is correct, check the properties view, you will see session
scope variable is defined in the value field.
EM Sandbox for Power
__31.
Select the second input filed (4th Column) on the JSF and switch to the Properties View.
Set the Id field to toCity.
__32.
On the JSF, make sure that toCity input field is selected. Go to the Page Data view,
expand Scripting variables -> Session scope and select toCity field. Right mouse click
and select Bind to ‘toCity’
__33.
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 21
Modify Button Properties
__34.
Page 22
Click on the submit button. Enter Id: search
EM Sandbox for Power
__35.
Next we are going to define the Action Rule for this button. Scroll to right in the properties
view, click Add Rule.
__36.
In the Add navigation rule window:
__a. Select FSSDOResult.jsp in page field from the drop down list
__b. Under when the action returns the outcome, Select The Outcome named radio
button
__c. Enter search in the outcome named field and click OK.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 23
__37.
Click Display options on the properties view. Enter Button Label: Search.
__38.
Click on Quick Edit tab next to properties and click inside the Quick Edit view to enter
the code snippet.
__a. Enter following code snippet in Quick Edit view:
// TODO: Return outcome that corresponds to a navigation rule
return "search";
__39.
Page 24
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard.
EM Sandbox for Power
Modify FSSDOResult.jsp page
__40.
Click on FSSDOResult.jsp window title.
__41.
Type heading Flights Search Result and press Enter.
__42.
Select text “Flights Search Result” by pressing SHIFT+ARROW key on the keyboard
and click on the Properties view at the bottom.
__43.
The properties view allows you change the properties for the selected component in the
edit window. Select Heading 1 in paragraph field. You may also change the color and the
font.
__44.
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 25
Add Relational Record List Component
__45.
Page 26
Make sure your cursor is just below the heading. In the Palette view, expand Data
drawer. Click on the SDO Relational Record List component and just move the cursor
onto the JSF page and drop it under the heading.
EM Sandbox for Power
__46.
Add Relational Record List dialog is displayed.
Enter name: flightsData
Uncheck Reuse metadata definition from an existing record or record list (if it is
checked)
Click Next.
__47.
Since there are no connection defined earlier, click New next to the Connection Name
field.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 27
__48.
Page 28
Select a connection dialog is displayed. If there is already defined the connection to IBM i
then you could use that connection here by selecting the connection under connections
box. We are going to define new connection here so click New next to connection box.
EM Sandbox for Power
__49.
Complete the following steps on the Specify Connection Parameters dialog
__a. In the Select a database manager list expand the DB2 for i5/OS
__b. In the Host field: enter <IBMi> (Please refer to lab information section of the lab)
__c. Under specify user information, enter <IBMi_userid> and <IBMi_password>
(Please refer to lab information section of the lab)
__d. Check Save password
__e. Click on Test Connection to test the database connection.
__i.
You will see Connection to DB2 UDB iSeries was successful. Click OK.
__f. Click Next to proceed.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 29
__50.
On Filter screen,
__a. First uncheck disable filter checkbox.
__b. Check Selection checkbox to select the database schema
__c. Scroll down and check <App_lib> (Please refer to lab information section of the lab)
and click Finish.
Page 30
EM Sandbox for Power
__51.
Back in select a connection window, make sure the newly created connection is selected
and click Finish.
__52.
IBack in Add Relational Record List dialog, select the <App_lib>.FLIGHTS table from the
list of tables. Click Next.
__53.
You will see a error message “ The table selected does not have a primary key”. To
specify the primary key click on Modify Primary key link under tasks.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 31
__54.
In the Edit primary keys window, select FLIGHT_NUMBER and click right arrow key.
Click Close.
__55.
Back in Add Relational Record list window, click Filter Results to add conditions.
Page 32
EM Sandbox for Power
__56.
In the Filters window, click on the plus icon to add a condition.
__57.
Conditions dialog is displayed. In the column drop down select DEPARTURE. In the
value field we will specify the session scope variables we captured on the Input page.
Check variable radio button and click the … push button next to the value field.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 33
__58.
Select Page Data Object dialog is displayed. Expand sessionScope node and select
fromCity field. Click OK
__59.
Back in Conditions dialog click OK.
__60.
In the Filters window, click on the plus icon to add another condition (for the arrival city).
__61.
Conditions dialog is displayed. In the column drop down select ARRIVAL. In the value
field we will specify the session scope variables we captured on the Input page. Check
variable radio button and click the … push button next to the value field.
__62.
Select Page Data Object dialog is displayed. Expand sessionScope node and select
toCity field. Click OK
__63.
Back in filters window, click Close.
__64.
Back in Add Relational Record List window, click Next.
Page 34
EM Sandbox for Power
__65.
On the Configure Data Controls dialog, rearrange the order of columns and deselect
some of the fields. Use arrows to move the fields.
Column order:
FLIGHT_NUMBER
AIRLINES
DEPARTURE
DEPARTURE_TIME
ARRIVAL
ARRIVAL_TIME
TICKET_PRICE
Deselect the rest of the fields. Click Finish.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 35
__66.
Your JSF page should look similar to this. You will also see Relational Record entry
under page data view.
__67.
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard.
Page 36
EM Sandbox for Power
Change Column Headings, Pagers and Add Back Button
__68.
Change column headings to make them more readable. Select a column heading
Flight_number. In Properties view, change the value field.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 37
__69.
Change other column headings as shown below:
__70.
To add pagers, we need to select hx:dataTableEx property. The easiest way to select it
is: Click on any of the column heading in dataTable to select it. You should see
h:outputText tab selected in the properties view.
Page 38
EM Sandbox for Power
__71.
Click on hx:dataTableEx to edit dataTable properties.
__a. Click on Display options tab under hx:dataTableEx
__b. Enter Rows per page: 10
__c. Click on icons under Paging. There are 4 different pagers available. Select one or all
if you like by clicking on the icons.
__72.
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 39
__73.
Scroll down to the bottom of the FSSDOResult.jsp. Press down arrow to place the cursor
below the data table. Select Button - Command from Enhanced Faces Component
drawer under Palette view and drop it onto FSSDOResult.jsp just below the data table.
__74.
If the button is not already selected. Click on the Submit button.
__75.
Enter Id: back.
Page 40
EM Sandbox for Power
__76.
Next we are going to define the Action Rule for this button. Scroll to right in the properties
view, click Add Rule.
__77.
In the Add navigation rule window:
__a. Select FSSDOInput.jsp in page field from the drop down list
__b. Under when the action returns the outcome, click The Outcome named
__c. Enter back in the outcome named field and click OK.
__78.
Click Display options on the properties view. Enter Button Label: Back.
__79.
Click on Quick Edit tab next to properties and click inside the Quick Edit view to enter
the code snippet.
__a. Enter following code snippet in Quick Edit view:
// TODO: Return outcome that corresponds to a navigation rule
return "back";
__80.
Save you work by going to File -> Save from the menu bar or by pressing CTRL+S on
the keyboard.
__81.
Close FSSDOInput.jsp and FSSDOResult.jsp by clicking on ‘X’.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 41
1.3
Test JavaServer Faces Application in WebSphere Application
Server Test Environment
In this step, we will run the Application in WebSphere Application Server Test
Environment.
__82.
Page 42
In the Project Explorer view, under FSxxSDO => WebContent node, right click on
FSSDOInput.jsp and select Run As -> Run on Server option.
EM Sandbox for Power
__83.
In the Server selection window, choose an existing server and select WebSphere
Application Server V7.0 under localhost and click Finish.
__84.
After a while, you should see a browser displaying the FSSDOInput page with input form.
Double click Web Browser window title to expand the window.
Enter following inputs:
From City: Albany
To City: Atlanta
Click Search.
Try out various pagers which you added earlier.
__85.
Press Back button to go back to input form and try another search criterion.
__86.
Double click on the Web Browser window title to go back to original size.
__87.
Close the web browser window.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 43
Congratulations!!!
You have completed this lab.
Page 44
EM Sandbox for Power
Notices
© Copyright IBM Corporation 1992, 2009 All rights reserved.
U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP
Schedule Contract with IBM Corp.
This information was developed for products and services offered in the U.S.A. IBM may not offer the
products, services, or features discussed in this documentation in other countries. Consult your local
IBM
representative for information on the products and services currently available in your area. Any
reference to an IBM product, program, or service is not intended to state or imply that only that IBM
product, program, or service may be used. Any functionally equivalent product, program, or service
that does not infringe any IBM intellectual property right may be used instead. However, it is the user’s
responsibility to evaluate and verify the operation of any non-IBM product, program, or service.
IBM may have patents or pending patent applications covering subject matter described in this
documentation. The furnishing of this documentation does not give you any license to these patents.
You can send license inquiries, in writing, to:
IBM Director of
Licensing IBM
Corporation
North Castle Drive
Armonk, NY 105041785 U.S.A.
For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property
Department in your country or send inquiries, in writing, to:
IBM World Trade Asia Corporation
Licensing
2-31 Roppongi 3-chome, Minatoku Tokyo 106, Japan
The following paragraph does not apply to the United Kingdom or any other country where such
provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION
PROVIDES THIS PUBLICATION AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR
IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OR CONDITIONS OF
NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some
states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this
statement may not apply to you.
″
″
This information could include technical inaccuracies or typographical errors. Changes are periodically
made to the information herein; these changes will be incorporated in new editions of the publication.
IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this
publication at any time without notice.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 45
Any references in this information to non-IBM Web sites are provided for convenience only and do not
in any manner serve as an endorsement of those Web sites. The materials at those Web sites are not
part of the materials for this IBM product and use of those Web sites is at your own risk.
Licensees of this program who wish to have information about it for the purpose of enabling: (i) the
exchange of information between independently created programs and other programs (including this
one) and (ii) the mutual use of the information which has been exchanged, should contact:
Intellectual Property Dept. for WebS phere
Software IBM Corporation
3600 Steeles Ave. East
Markham, Ontario
Canada L3R 9Z7
Such information may be available, subject to appropriate terms and conditions, including in some cases,
payment of a fee.
The licensed program described in this documentation and all licensed material available for it are
provided by IBM under terms of the IBM Customer Agreement, IBM International Program License
Agreement or any equivalent agreement between us.
Any performance data contained herein was determined in a controlled environment. Therefore, the
results obtained in other operating environments may vary significantly. Some measurements may have
been made on development-level systems and there is no guarantee that these measurements will be the
same on generally available systems. Furthermore, some measurements may have been estimated through
extrapolation. Actual results may vary. Users of this document should verify the applicable data for their
specific environment.
Information concerning non-IBM products was obtained from the suppliers of those products, their
published announcements or other publicly available sources. IBM has not tested those products and
cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM
products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of
those products.
All statements regarding IBM’s future direction or intent are subject to change or withdrawal without
notice, and represent goals and objectives only.
Copyright license
This information contains sample application programs in source language, which illustrates
programming techniques on various operating platforms. You may copy, modify, and distribute these
sample programs in any form without payment to IBM, for the purposes of developing, using,
marketing or distributing application programs conforming to the application programming
interface for the operating platform for which the sample programs are written. These examples have not
been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability,
serviceability, or function of these programs.
Each copy or any portion of these sample programs or any derivative work, must include a copyright
notice as follows:
© (your company name) (year). Portions of this code are derived from IBM Corp. Sample Programs. ©
Copyright IBM Corp. 1992, 2009. All rights reserved
Page 46
EM Sandbox for Power
Trademarks and service marks
The following terms are trademarks or registered trademarks of International Business Machines
Corporation in the United States, other countries, or both.
•
•
•
•
•
i5/OS
IBM
OS/400
Rational
WebSphere
Microsoft, Windows, and the Windows logo are trademarks of Microsoft Corporation in the United States,
other countries, or both.
Other company, product or service names may be trademarks or service marks of others.
Accessing DB2 UDB data in Browser Based Applications Scenario
Page 47