Using IBM Rational Business Developer wizards to create a Web application

Transcription

1 Using IBM Rational Business Developer wizards to create a Web application Skill Level: Intermediate Reginaldo Barosa (rbarosa@us.ibm.com) Executive IT Specialist IBM 03 Mar 2008 Updated 05 Aug 2008 This tutorial shows you the steps to use the IBM Rational Business Developer Data Application 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 Modernization Sandbox for System z. About this tutorial This tutorial will take you through the steps to create a Web application using JavaServer Faces (JSF) and EGL wizards. The EGL Data Access Application wizard gives you a convenient way to create an 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 this table could be located in another location as well on the System z. For the EGL Page 1 of 35

2 wizards, 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 the Rational 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 Business Developer installed on top of IBM Rational Application Developer or IBM Rational Software Architect. Figure 1 shows the Rational Business Developer Data Access Application wizard architecture. Figure 1. Data Access Application architecture Page 2 of 35

3 Note about EGL: The EGL can create a simple data access application based on a connection to a database. 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 put either 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 as adding, retrieving, and deleting records. You can choose to put these data access functions in libraries or in services. Also, you have the option of creating a Web interface for the data access application. If you choose to create a Web interface, the wizard creates these additional files and parts: A set of JSF handler parts that you later generate into a set of parts that run under Java Server Faces (JSF). A set of Java Server Pages (JSP) files that provide the following Web pages: A Selection Condition page, which accepts selection criteria from the user 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 Page 3 of 35

4 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 new files and parts will go: You can put all the new files and parts into one project, or you can put the files and parts into different projects, based on the kind of file and part. Data parts, logic parts, and JSFHandler parts (with the associated Web pages) can all go into separate projects. You can put files and parts into a new project or into an existing project. If you choose to put parts into different projects, some can go into an existing 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 Application Server Section 3. Create an EGL data access application Important: This tutorial assumes that you have already started Rational Developer for System z. 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 to another workspace for this tutorial, because it has already been customized to save you time. 1. To switch to the workspace that has been customized for this tutorial and Rational Business Developer usage, click File and select Switch Workspace, as shown in Figure 2. Figure 2. Switch to customized workspace Page 4 of 35

5 2. When the Workspace Launcher dialog displays, type C:\Workspaces\RBD (as shown in Figure 3) and click OK. Be patient, because this operation will take longer than usual under VMWARE. It may take one or more minutes. Figure 3. Select the workspace 3. The workspace switches. If the Welcome page displays, close it by clicking the, as shown in Figure 4. Page 5 of 35

6 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 Page 6 of 35

7 3. On the New EGL Web project dialog: A. Ensure that WebSphere Application Server v6.1 is selected as the Target Runtime B. Ensure that Create new project build descriptor is selected C. Click Show Advanced Settings and click Next, as seen in Figure 7. Figure 7. Creating the EGL Web project Be sure that the EAR project name is LAB4_WebEAR, that Create an Page 7 of 35

8 EGL service deployment descriptor is selected, and click Next, as shown in Figure 8. Figure 8. Create the EAR file 5. Select EGL Support with JSF Components 7.0, and click Finish, as shown in Figure 9. Figure 9. Select the Project Facet Page 8 of 35

9 Be patient, because it will take a few minutes. Remember that you are running under VMWARE, which will require extra overhead resources. 6. If the Open Associate Perspective dialog appears, click No. You do not need the J2EE (Java 2 Platform, Enterprise Edition) perspective, but you 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 Figure Click Next. Figure 10. Select a wizard Page 9 of 35

10 The EGL Data Access Application dialog displays. This is where you create an EGL application that will be able to Create, Read, Update, and Delete (CRUD) rows in one 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 select LAB4_Web, as shown in Figure 9. B. Because you want to create the Web pages automatically, make sure that Create web pages is selected. C. Because you need to create a connection to your database, click New. Figure 11. Define project settings Page 10 of 35

11 You will use DB2, but Rational Business Developer allows you to use other databases (like Oracle, SQL Server, and so on). You will access a table that is defined in your workstation, but could use a table defined in another platform, such as 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 Page 11 of 35

12 6. You must receive a message that the connection is successful, as shown in Figure 13. After that, click OK. If you have errors, it could be because you have typed an incorrect ID or password. Figure 13. Success message Page 12 of 35

13 7. Click Finish to create the database connection. 8. When a connection is made to the database, a list of all database tables displays, because you did not create any filter. If your database has a lot of tables, a filter becomes necessary. A. Scroll down to Table Name and select DB2ADMIN.STAFF (as shown in Figure 14), because this is the table that you want to generate the EGL CRUD (Create, Replace, Update, and Delete) application. B. Be sure that Create Web pages is selected (because you want to create Web pages automatically), and click Next. Note that Rational Business Developer allows you to select more than one table. Figure 14. Define project settings Page 13 of 35

14 The Define the Fields page has a tab for each table that you selected on the previous page. Because you have only one table (STAFF), you will have only one tab. On this page, you select the key fields for the STAFF table and which fields you want to be able to search. 9. Select ID as the key field and NAME as the UI field, as shown in Figure 15. The Web page will have the field NAME as the search element. 10. Click Next. Figure 15. Define the fields Page 14 of 35

15 11. Accept the defaults for field names and click Next, as shown in Figure 16. Figure 16. Configure the fields Page 15 of 35

16 12. Define project creation options, as shown in Figure 17. A. In the Default package name field, type sample as the name of the root package that will contain the new EGL parts. B. Under Data access method, select EGL Libraries (because you want to create library parts). Note that you could create service parts instead. C. Select Qualify table names with schema and then click Next. Figure 17. Specify project creation options Page 16 of 35

17 13. Expand Table and Field elements to see a summary of what is being created, as shown in Figure 18, and then click Finish. Figure 18. EGL Data Access application summary Page 17 of 35

18 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 EGL statements 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 Page 18 of 35

19 16. Expand sample.primitivetypes.data and double-click the DataDefinitions.egl file, as shown in Figure 20. This is the best way to define an EGL data item, because you can do so whenever you want to. If you 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, and scroll down until you see the GetStaff function. You also may use the Outline 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. This file is the EGL library that will be used to perform all database I/O operations. Figure 21. Code with GetStaff function Page 19 of 35

20 18. Using the editor, move the mouse to the get statement, right-click, and select SQL Statement > View, as shown in Figure 22 (you could also use Ctrl+Shift+V). Possible Errors If you have errors such as the following, it could be because you are not using the correct Rational Business Developer workspace that is pointing to the DB2 database: IWN.VAL.4594.e 0/0 Retrieve SQL failed because no connection was selected. Check the EGL SQL Database Connection Preference page. This is one way to fix this problem: Select Windows > Preferences > EGL > SQL Database Connections. Click New, and make a connection to a SAMPLE DB2 database. Figure 22. View get statement details Page 20 of 35

21 19. You should see the SQL SELECT that is being issued when get is executed, as shown in Figure 23. Note that the where statement is generated, because ID is known as a key column. 20. Click Validate. Figure 23. Select statement details Page 21 of 35

22 An SQL validation will be performed against the DB2 table. If you have errors, it could be that you have a bad connection or because the DB2 database is not started. What you have done so far The Data Access wizard created the following four sets of resources: Control Records that are used in the default Data Access Library SQL statements. Data Access Libraries that contain EGL data access statements (basic data access design patterns), which generate to SQL statements and routines, as shown previously. Data Access Records that are EGL records of type sqlrecord, which participate in the Java and SQL generation, thereby enabling you to write code at a high level of abstraction, as shown previously. EGL DataItems that are located in the DataDefinitions.egl file. This file contains default type definitions for each column in each imported table, as shown previously. 21. Click OK to dismiss the dialog, as shown in Figure 24. Figure 24. Validate SQL Statement Page 22 of 35

23 22. Do not make any changes, and close all opened files by pressing Ctrl+Shift+F4. Section 4. Generate the code At this point, you could debug the generated EGL code, but in this tutorial, you need to see it running, and you need to generate the Java code. 1. Use the wizard to generate the Java code: Using the Project Explorer view, right-click LAB4_Web and select Generate With Wizard, as shown in 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 Descriptors for this generation. Figure 26. Select all parts to generate Page 23 of 35

24 3. Review the generation results in the EGL Generation Results tab, as shown in Figure 27. Click each component on the left and ensure that you had no errors. Figure 27. Results What you have you done so far You created an EGL Web Project that will hold an application, which will in turn access a DB2 table. It will also have some pages on the Web. Using the EGL Data Access wizard, you created code that will work with the STAFF DB2 table defined on your computer (but this table could be in a remote location). The EGL code generated was: EGL Data Access Record that maps the STAFF DB2 table 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. Page 24 of 35

25 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. Users can modify these as they wish. To make this tutorial as quick as possible, you will just see the generated code, without making any changes. Editing the stafflistpage page 1. Expand WebContent and double click stafflistpage.jsp, as shown in Figure 29. Figure 29. Details of STAFF List Page Page 25 of 35

26 2. With the cursor on the JSP, right-click and select Edit Page Code, as shown 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 in Figure 31. This is the code that is executed when the Search button is clicked. It will invoke the Stafflib EGL Library and will execute the GetStaffList function. Page 26 of 35

27 Figure 31. Use the Outline view to get function details Editing the staffdetailpage page 1. Expand WebContent and double-click the staffdetailpage.jsp file, as shown 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 not make any changes. Page 27 of 35

28 Section 6. Deploy and test the application by using WebSphere Application Server Before you deploy this code, you need to associate this project with the correct database 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 EGL Runtime Data Source and, using the drop-down list, select the previously created SAMPLE1 connection, as seen in the Figure 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 Page 28 of 35

29 2. When the Run on Server dialog displays, define the server settings, as shown 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 Page 29 of 35

30 Again, this operation may take a while running under VMWARE. The status of the operation is indicated on the console. When it has successfully completed, you will see a message that indicates Initialization successful. The Java code is then published, which should produce a static Web page, as shown 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 Page 30 of 35

31 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 Page 31 of 35

32 5. Modify a field (for example, change YEARS from 7 to 12) and click Update. You will be prompted to confirm the update, as shown in Figure 40. Figure 40. Confirm the update Page 32 of 35

33 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. Page 33 of 35

34 8. Close Rational Developer for System z. You have completed this tutorial. Page 34 of 35

35 Resources Learn Visit the Rational software area on developerworks for technical resources and best 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, which range from introductory to advanced. The courses on this catalog are available for 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 behind effective software development. Subscribe to the IBM developerworks newsletter, a weekly update on the best of developerworks tutorials, articles, downloads, community activities, webcasts and 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 on application 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 developerworks community. About the author Reginaldo Barosa Reginaldo 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 eight years ago, Reginaldo worked for 27 years for IBM Brazil. He has co-authored IBM Redbooks and has written two books, as well as other articles and tutorials for IBM developerworks. He holds a degree in electrical engineering from Instituto Maua de Tecnologia, Sao Paulo, Brazil Page 35 of 35