accessing db2 udb data in browser based applications using ibm

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

mailto:[email protected]

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.

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


Required Materials o Client system requirements:

IBM Rational Application Developer V7.5

o 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


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.


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”.


__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.


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. Create a Web project: Select File => New => Dynamic Web Project


__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.


__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. From the menu bar, go to File -> New -> Web Page


__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.


__13. Select text “Flights Search” by pressing SHIFT+ARROW key on the keyboard and click on the Properties view at the bottom.


__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.


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.


__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


__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.


__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.


__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.



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.


__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. It is important that this binding is correct, check the properties view, you will see session scope variable is defined in the value field.


__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’



Modify Button Properties

__34. Click on the submit button. Enter Id: search


__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.


__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";



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.



Add Relational Record List Component

__45. 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.


__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.


__48. 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.


__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.


__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.


__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.


__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.


__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.


__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.


__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.


__66. Your JSF page should look similar to this. You will also see Relational Record entry under page data view.



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.


__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.


__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.



__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.


__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";


__81. Close FSSDOInput.jsp and FSSDOResult.jsp by clicking on ‘X’.


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. In the Project Explorer view, under FSxxSDO => WebContent node, right click on FSSDOInput.jsp and select Run As -> Run on Server option.


__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.


Congratulations!!! You have completed this lab.


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 10504-1785 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, Minato-ku 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.


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



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 using ibm

Documents