Using IBM Rational Business Developer wizards to create a ... · • Deploy and test the application using WebSphere Application Server. Prerequisites Be familiar with basic web development

Using IBM Rational Business Developer wizards tocreate a Web applicationSkill Level: Intermediate

Reginaldo Barosa ([email protected])Executive IT SpecialistIBM

03 Mar 2008

Updated 05 Aug 2008

This tutorial shows you the steps to use the IBM® Rational Business Developer ® DataApplication Access wizard to create a Web application that accesses a database (here,the STAFF table in DB2).

Section 1. Before you start

Learn what to expect from this tutorial and how to get the most out of it.

About this series

Walk through this scenario and others online as part of the Enterprise ModernizationSandbox for System z.

About this tutorial

This tutorial will take you through the steps to create a Web application usingJavaServer Faces™ (JSF) and EGL wizards.

The EGL Data Access Application wizard gives you a convenient way to create an

Using IBM Rational Business Developer wizards to create a Web application© Copyright IBM Corporation 1994, 2008. All rights reserved. Page 1 of 39

mailto:[email protected]

http://www.ibm.com/developerworks/downloads/emsandbox/systemz/architecture/?S_TACT=105AGX15&S_CMP=EMDOC

http://www.ibm.com/developerworks/downloads/emsandbox/systemz/architecture/?S_TACT=105AGX15&S_CMP=EMDOC

http://www.ibm.com/legal/copytrade.shtml

EGL logic that lets you maintain a specific table in a relational database.

We will use DB2 as the relational data base and the STAFF table. Note that thistable could be located in another location as well on the System z. For the EGLwizards, this makes no difference

Objectives

You will learn how to:

• Create an EGL data access application using the wizards.

• Generate Java code from EGL.

• Work with the Web Pages generated.

• Deploy and test the application using WebSphere Application Server.

Prerequisites

Be familiar with basic web development concepts.

Section 2. Getting started

Overview of software tools

We will use IBM® DB2® as the relational database, along with the STAFF table.This table could be located in another location as well on a mainframe. For theRational Business Developer wizards, this makes no difference.

You will use Rational Business Developer installed on top of IBM® Rational®Developer for System z™, but this tutorial will also work using Rational BusinessDeveloper installed on top of IBM® Rational® Application Developer or IBM®Rational® Software Architect.

Figure 1 shows the Rational Business Developer Data Access Application wizardarchitecture.

developerWorks® ibm.com/developerWorks

Using IBM Rational Business Developer wizards to create a Web applicationPage 2 of 39 © Copyright IBM Corporation 1994, 2008. All rights reserved.


Figure 1. Data Access Application architecture

Note about EGL:The EGL can create a simple data access application based on a connection to adatabase. The resulting application contains data parts, logic parts, and (optionally)Web pages based on one or more database tables. For each table that you select,the EGL Data Access Application wizard creates these parts, which you can puteither into a new project or into one or more existing projects:

• Data parts based on the table

• An SQLRecord part that represents the table

• DataItem parts that represent the columns in the table

• Data access functions that perform operations on the database, such asadding, retrieving, and deleting records. You can choose to put these dataaccess functions in libraries or in services.

Also, you have the option of creating a Web interface for the data accessapplication. If you choose to create a Web interface, the wizard creates theseadditional files and parts:

• A set of JSF handler parts that you later generate into a set of parts thatrun under Java™Server Faces (JSF).

• A set of Java™Server Pages (JSP) files that provide the following Webpages:

ibm.com/developerWorks developerWorks®



• A Selection Condition page, which accepts selection criteria from theuser

• A List page, which displays multiple rows based on the user's criteria

• A Create Detail page, which lets the user display or insert one row

• A Detail page, which lets the user display, update, or delete one row

Before you begin creating the application, make two decisions about where the newfiles and parts will go:

• You can put all the new files and parts into one project, or you can put thefiles and parts into different projects, based on the kind of file and part.Data parts, logic parts, and JSFHandler parts (with the associated Webpages) can all go into separate projects.

• You can put files and parts into a new project or into an existing project. Ifyou choose to put parts into different projects, some can go into anexisting project and others can go into a new project

Overview of development tasks

To complete this tutorial, you will perform the following tasks:

• Create an EGL data access application using the wizards

• Generate Java™ code from EGL

• Verify the generated Web pages

• Deploy and test the application using IBM® WebSphere® ApplicationServer

Section 3. Create an EGL data access application

Important:This tutorial assumes that you have already started Rational Developer for Systemz. Note that you are running under VMWARE, which may slow performance.




Be sure to use the correct workspace for the tutorial. You will need to switch toanother workspace for this tutorial, because it has already been customized to saveyou time.

1. To switch to the workspace that has been customized for this tutorial andRational Business Developer usage, click File and select SwitchWorkspace, as shown in Figure 2.

Figure 2. Switch to customized workspace

2. When the Workspace Launcher dialog displays, typeC:\Workspaces\RBD (as shown in Figure 3) and click OK.

Be patient, because this operation will take longer than usual under VMWARE. Itmay take one or more minutes.

Figure 3. Select the workspace




3. The workspace switches. If the Welcome page displays, close it byclicking the , as shown in Figure 4.

Figure 4. Close the Welcome page

Set up a new EGL Web project by using the Web perspective

1. Open the New Project wizard, as shown in Figure 5:

A. Click File > New > Project.

B. Type egl in place of the words type filter text.

C. Select EGL Web Project.

D. Click Next.

Figure 5. Select a wizard




2. Specify the EGL Web Project options, as shown in Figure 6:

A. Type LAB4_Web as the Project name.

B. Select Web Project and click Next.

Figure 6. Creating an EGL Web project

3. On the New EGL Web project dialog:

A. Ensure that WebSphere Application Server v6.1 is selected asthe Target Runtime

B. Ensure that Create new project build descriptor is selected




C. Click Show Advanced Settings and click Next, as seen in Figure7.

Figure 7. Creating the EGL Web project

4. 3. Be sure that the EAR project name is LAB4_WebEAR, that Create anEGL service deployment descriptor is selected, and click Next, asshown in Figure 8.

Figure 8. Create the EAR file




5. Select EGL Support with JSF Components 7.0, and click Finish, asshown in Figure 9.

Figure 9. Select the Project Facet




Be patient, because it will take a few minutes. Remember that you are running underVMWARE, which will require extra overhead resources.

6. If the Open Associate Perspective dialog appears, click No. You do notneed the J2EE (Java™ 2 Platform, Enterprise Edition) perspective, butyou need the Web perspective.

Work with the Data Access wizard

1. Select File > New > Other. A dialog displays for you to select a wizard.

2. Type egl, and select EGL Data Access Application, as shown in Figure10.

3. Click Next.

Figure 10. Select a wizard




The EGL Data Access Application dialog displays. This is where you create an EGLapplication that will be able to Create, Read, Update, and Delete (CRUD) rows inone DB2 table.

4. First, you need to specify which table you will be using.

A. In the Project Name field, use the drop-down list to selectLAB4_Web, as shown in Figure 9.

B. Because you want to create the Web pages automatically, makesure that Create web pages is selected.

C. Because you need to create a connection to your database, clickNew.

Figure 11. Define project settings




You will use DB2, but Rational Business Developer allows you to use otherdatabases (like Oracle, SQL Server, and so on). You will access a table that isdefined in your workstation, but could use a table defined in another platform, suchas IBM® z/OS®.

5. Specify the new connection parameters, as shown in Figure 12.

A. Expand DB2 UDB and select v8.2.

B. Use the default values for the database SAMPLE.

C. Type db2admin as both the User ID and Password.

D. To see if you have access to this database, click Test Connection.




Figure 12. Specify connection parameters

6. You must receive a message that the connection is successful, as shownin Figure 13. After that, click OK. If you have errors, it could be becauseyou have typed an incorrect ID or password.

Figure 13. Success message




7. Click Finish to create the database connection.

8. When a connection is made to the database, a list of all database tablesdisplays, because you did not create any filter. If your database has a lotof tables, a filter becomes necessary.

A. Scroll down to Table Name and select DB2ADMIN.STAFF (asshown in Figure 14), because this is the table that you want togenerate the EGL CRUD (Create, Replace, Update, and Delete)application.

B. Be sure that Create Web pages is selected (because you want tocreate Web pages automatically), and click Next. Note thatRational Business Developer allows you to select more than onetable.

Figure 14. Define project settings




The Define the Fields page has a tab for each table that you selected on theprevious page. Because you have only one table (STAFF), you will have only onetab. On this page, you select the key fields for the STAFF table and which fields youwant to be able to search.

9. Select ID as the key field and NAME as the UI field, as shown in Figure15. The Web page will have the field NAME as the search element.

10. Click Next.




Figure 15. Define the fields

11. Accept the defaults for field names and click Next, as shown in Figure 16.

Figure 16. Configure the fields




12. Define project creation options, as shown in Figure 17.

A. In the Default package name field, type sample as the name ofthe root package that will contain the new EGL parts.

B. Under Data access method, select EGL Libraries (because youwant to create library parts). Note that you could create serviceparts instead.




C. Select Qualify table names with schema and then click Next.

Figure 17. Specify project creation options

13. Expand Table and Field elements to see a summary of what is beingcreated, as shown in Figure 18, and then click Finish.

Figure 18. EGL Data Access application summary




14. If the Incomplete Deployment Settings dialog displays, click OK.

15. Using the Project Explorer view, expand LAB4_Web > EGLSource >sample.data, and double-click Staff.egl. You will see the EGLstatements that map the DB2 table staff, as shown in Figure 19.

Notice that the column attributes (smallint, integer, and so on) are not defined here,but they are pointing to another package named sample.primitivetypes.data,which you will see later.




Figure 19. Mapping the Staff DB2 table

16. Expand sample.primitivetypes.data and double-click theDataDefinitions.egl file, as shown in Figure 20. This is the best way todefine an EGL data item, because you can do so whenever you want to. Ifyou change it here, all places where this item is in use will be changed.

Figure 20. Data definitions code

17. Expand the sample.access package, double-click StaffLib.egl, andscroll down until you see the GetStaff function. You also may use theOutline view to locate the function easily (to do so, click the Outline tab),as shown in Figure 21.




This is the function that you will use to do a SQL SELECT query on the table. Thisfile is the EGL library that will be used to perform all database I/O operations.

Figure 21. Code with GetStaff function

18. Using the editor, move the mouse to the get statement, right-click, andselect SQL Statement > View, as shown in Figure 22 (you could also useCtrl+Shift+V).

Possible ErrorsIf you have errors such as the following, it could be because you arenot using the correct Rational Business Developer workspace that ispointing to the DB2 database: IWN.VAL.4594.e 0/0 Retrieve SQLfailed because no connection was selected. Check the EGL SQLDatabase Connection Preference page.

This is one way to fix this problem:

• Select Windows > Preferences > EGL > SQL DatabaseConnections.

• Click New, and make a connection to a SAMPLE DB2database.




Figure 22. View get statement details

19. You should see the SQL SELECT that is being issued when get isexecuted, as shown in Figure 23. Note that the where statement isgenerated, because ID is known as a key column.

20. Click Validate.

Figure 23. Select statement details




An SQL validation will be performed against the DB2 table. If you have errors, itcould be that you have a bad connection or because the DB2 database is notstarted.

What you have done so farThe Data Access wizard created the following four sets ofresources:

• Control Records that are used in the default DataAccess Library SQL statements.

• Data Access Libraries that contain EGL data accessstatements (basic data access design patterns), whichgenerate to SQL statements and routines, as shownpreviously.

• Data Access Records that are EGL records of typesqlRecord, which participate in the Java and SQLgeneration, thereby enabling you to write code at a highlevel of abstraction, as shown previously.

• EGL DataItems that are located in theDataDefinitions.egl file. This file contains default typedefinitions for each column in each imported table, asshown previously.

21. Click OK to dismiss the dialog, as shown in Figure 24.

Figure 24. Validate SQL Statement




22. Do not make any changes, and close all opened files by pressingCtrl+Shift+F4.

Section 4. Generate the code

At this point, you could debug the generated EGL code, but in this tutorial, you needto see it running, and you need to generate the Java™ code.

1. Use the wizard to generate the Java code: Using the Project Explorerview, right-click LAB4_Web and select Generate With Wizard, as shownin Figure 25.

Figure 25. Starting to generate code




2. Verify that all parts are selected for generation, as shown in Figure 26,and then click Finish. You will accept all of the default Build Descriptorsfor this generation.

Figure 26. Select all parts to generate

3. Review the generation results in the EGL Generation Results tab, asshown in Figure 27. Click each component on the left and ensure that youhad no errors.

Figure 27. Results

What you have you done so farYou created an EGL Web Project that will hold an application, whichwill in turn access a DB2 table. It will also have some pages on theWeb.




Using the EGL Data Access wizard, you created code that will workwith the STAFF DB2 table defined on your computer (but this tablecould be in a remote location). The EGL code generated was:

• EGL Data Access Record that maps the STAFF DB2table

• EGL Libraries that access the DB2 table (CREATE,READ, UPDATE and DELETE)

• EGL Data items that map the DB2 columns

• EGL DB2 Control Records and code.

You generated Java code from the created EGL source.

4. Expand the Java Resources:src folder to see the generated Java code,as shown in Figure 28.

Figure 28. Code in the Project Explorer view

You are now ready to test the generated Java code.

You are now ready to create a Web page that will invoke the generated code.




Section 5. Verify the generated Web pages

The wizard generates two JSF pages: staffListPage and allDetailPage.jsp. Userscan modify these as they wish. To make this tutorial as quick as possible, you willjust see the generated code, without making any changes.

Editing the staffListPage page

1. Expand WebContent and double click staffListPage.jsp, as shown inFigure 29.

Figure 29. Details of STAFF List Page

2. With the cursor on the JSP, right-click and select Edit Page Code, asshown in Figure 28. This will edit the EGL code that will handle this page.

Figure 30. Edit the code




3. Use the Outline view to locate the staffSearch function, as shown inFigure 31. This is the code that is executed when the Search button isclicked. It will invoke the Stafflib EGL Library and will execute theGetStaffList function.

Figure 31. Use the Outline view to get function details




Editing the staffDetailPage page

1. Expand WebContent and double-click the staffDetailPage.jsp file, asshown in Figure 32. This is the page that will perform the CRUD actions.

Figure 32. STAFF Details page




2. Press Ctrl + Shift + F4 to close all of the files being edited, and do notmake any changes.

Section 6. Deploy and test the application by usingWebSphere Application Server

Before you deploy this code, you need to associate this project with the correctdatabase being used, otherwise during the runtime the database connection will fail.This can be done by performing the following steps:

1. Right-click the project LAB4_web and select Properties.

2. When the page Properties for LAB4_Web page open, select EGLRuntime Data Source and, using the drop-down list, select thepreviously created SAMPLE1 connection, as seen in the Figure 33.

3. Click OK and Yes to update the EGL build options.




Figure 33. Defining the EGL Runtime Data Source

Regenerate the code since the build options were updated.

1. Right click LAB4_Web and select Generate.

To deploy and test the application using WebSphere Application Server:

1. Expand WebContent, right-click staffListPage.jsp, and select Run As >Run on Server, as shown in Figure 34.

Again, because you are running under VMWARE, the start will take a few minutes.

Figure 34. Starting the server

2. When the Run on Server dialog displays, define the server settings, asshown in Figure 35:

A. Select WebSphere v6.1 Server.

B. Select Set server as project default.

C. Click Finish.

Figure 35. Define a new server




Again, this operation may take a while running under VMWARE. The status of theoperation is indicated on the console. When it has successfully completed, you willsee a message that indicates Initialization successful.

The Java code is then published, which should produce a static Web page, asshown in Figure 36.

Figure 36. Static Web page




3. To search all names starting with the letter M (Figure 37):

A. Use the drop-down to select like.

B. Type M% (letter M plus percent sign).

C. Click Search.

Figure 37. Search for names starting with M




4. All names starting with M will be listed, as shown in Figure 38. Click 160.

Figure 38. List search results

The details page displays, as shown in Figure 39.

Figure 39. Details page




5. Modify a field (for example, change YEARS from 7 to 12) and clickUpdate. You will be prompted to confirm the update, as shown in Figure40.

Figure 40. Confirm the update




6. Click OK, and the Summary List page will show the updated field value(Figure 41).

Figure 41. Update3 field value




Feel free to edit and explore the generated assets.

7. Click Ctrl + Shift + F4 to close all pages.

8. Close Rational Developer for System z.

You have completed this tutorial.




Resources

Learn

• Visit the Rational software area on developerWorks for technical resources andbest practices for Rational Software Delivery Platform products.

• Explore Rational computer-based, Web-based, and instructor-led online courses.Hone your skills and learn more about Rational tools with these courses, whichrange from introductory to advanced. The courses on this catalog are availablefor purchase through computer-based training or Web-based training.Additionally, some "Getting Started" courses are available free of charge.

• Subscribe to the Rational Edge newsletter for articles on the concepts behindeffective software development.

• Subscribe to the IBM developerWorks newsletter, a weekly update on the best ofdeveloperWorks tutorials, articles, downloads, community activities, webcastsand events.

• Browse the technology bookstore for books on these and other technical topics.

Get products and technologies

• Download trial versions of IBM Rational software.

• Download these IBM product evaluation versions and get your hands onapplication development tools and middleware products from DB2®, Lotus®,Tivoli®, and WebSphere®.

Discuss

• Participate in the discussion forum for this content.

• Check out developerWorks blogs and get involved in the developerWorkscommunity.

About the author

Reginaldo BarosaReginaldo W. Barosa is an IBM Executive IT Specialist. He provides sales support,helping customers with enterprise modernization solutions and development tools,such as Rational Developer for System z. Before joining IBM U.S. more than eightyears ago, Reginaldo worked for 27 years for IBM Brazil. He has co-authored IBMRedbooks and has written two books, as well as other articles and tutorials for IBMdeveloperWorks. He holds a degree in electrical engineering from Instituto Maua de



http://www.ibm.com/developerworks/rational

http://www.ibm.com/training/us/catalog/rational

http://www.ibm.com/developerworks/rational/rationaledge/

https://www.ibm.com/developerworks/newsletter/

http://www.ibm.com/developerworks/apps/SendTo?bookstore=safari

http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX01&S_CMP=ART

http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX01&S_CMP=ART

http://www.ibm.com/developerworks/forums/dw_forum.jsp?forum=375&cat=5

http://www.ibm.com/developerworks/blogs/

http://www.ibm.com/developerworks/community

http://www.ibm.com/developerworks/community


Tecnologia, Sao Paulo, Brazil




Documents

Using IBM Rational Business Developer wizards to create a ... · • Deploy and test the application using WebSphere Application Server. Prerequisites Be familiar with basic web development