WebSphere

Subscribe to WebSphere: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get WebSphere: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


IBM WebSphere software products Authors: Yeshim Deniz, hyper filter, Timothée Bensimon, XebiaLabs Blog, Javier Paniza

Related Topics: Java Developer Magazine, WebSphere

Java Developer : Article

Developing Web Applications Using VisualAge for Java and WebSphere Studio part 2

Developing Web Applications Using VisualAge for Java and WebSphere Studio part 2

In the September Java Developer's Journal (Vol. 5, issue 9) we discussed the tools available in VisualAge for Java and WebSphere Studio for building and debugging Web applications. This month we demonstrate how to use these tools to build a simple Web site that allows users to access their bank accounts using an Enterprise JavaBean.

We'll build on the EJB created in the June JDJ article "Building Enterprise Beans with VisualAge for Java" (Vol. 5, issue 6).

The Tutorial
In that article you learned how to create an EJB bean (i.e., how to build part of the server-side piece of the Web application). Here we'll show you how to generate an access bean from the EJB bean previously created. Then we'll show you how to import that bean into WebSphere Studio to generate a JavaServer Page (JSP) file, HTML file and servlet to build the client side of the application.

Step 1: Prepare for the tutorial.
To follow this tutorial you'll need the following products installed:

  • IBM VisualAge for Java, Enterprise Edition, v3.02
  • IBM WebSphere Studio, v3.0
  • DB2 v5.2 with fixpack 11 or higher, DB2 v6.1 with fixpack 2 or higher or Oracle 8.05
Make sure you've applied the appropriate fixpacks for DB2. They can be downloaded from www.ibm.com/software/data/db2/udb/support.html.

Building the Server Application
You can use the EJB Development Environment of VisualAge for Java to develop and test enterprise beans that conform to the distributed component architecture defined in Sun Microsystems' EJB specification.

Now we'll generate an access bean from the EJB bean you created from the June tutorial.

Step 2: Create the access bean.
In the EJB Development Environment an access bean is a JavaBean wrapper for EJB beans; an access bean is typically used by client programs, such as JSP files, servlets and sometimes other enterprise beans. Access beans adapt enterprise beans to the JavaBeans programming model and hide the complexities involved when programming directly to the EJB home and remote interfaces. Access beans can provide fast access to enterprise beans by maintaining a local cache of their attributes. They also make it possible to consume an enterprise bean in much the same way that you'd consume a JavaBean.

  1. In the Enterprise Beans pane of the EJB Development Environment, right-click the Account EJB. This is the bean you created using the earlier tutorial.
  2. Select Add > Access Bean. The Create Access Bean SmartGuide opens.
  3. In the EJB group field make sure that BANK is entered.
  4. In the Enterprise Bean field make sure that Account is entered.
  5. In the Access bean type field select Copy Helper for an entity bean from the drop-down menu. (Create a copy helper access bean when you want the EJB bean attributes to be used in the creation of JSP files. Copy helpers cache data so that only one request is made to the EJB server.)
  6. Click Next.
  7. In the Select home method for zero argument constructor field, select findByPrimaryKey(AcctKey).
  8. Make sure that initKey_primaryKey is the initial property, and that the converter is indicated as None.
  9. Click Next.
  10. Make sure that balance is the enterprise bean, that copy helper is checked and that the converter is indicated as None.
  11. Click Finish to generate the access bean.
  12. In the Enterprise Beans pane right-click Account and select Generate > Deployed Code to update the EJB bean's deployed code.
  13. In the Projects workspace double-click the AccountAccessBean class. The AccountAccessBean class opens in a VisualAge for Java browser.
  14. Select the BeanInfo tab. In the Features pane right-click and select Generate BeanInfo class from the popup menu. Close the AccountAccessBean browser. The AccountAccessBeanBeanInfo class now appears in your workspace. You'll need to have access to these properties when using WebSphere Studio to generate a JSP file from the access bean.
Building the Client Application
You've created an access bean to wrap the EJB bean, so now we can create the client part of the Web application (the JSP and HTML files and a servlet that uses the access bean) using WebSphere Studio.

Step 3: Export the access bean to WebSphere Studio.
First you must export the access bean from VisualAge for Java to WebSphere Studio, using VisualAge for Java's EJB Development Environment to export it as an EJB client JAR file.

  1. In the EJB Development Environment of VisualAge for Java, right-click Account in the Enterprise Beans pane. Select Export > Client JAR. The Export to an EJB Client JAR File SmartGuide opens.
  2. In the JAR file field enter the following fully qualified path:
    <X:\WebSphere\Studio>\projects\SimpleEJB\servlet\<AccessBean.jar>

    where X:\WebSphere\Studio is the directory in which you installed IBM WebSphere Studio and AccessBean.jar is the client JAR file that you want to export.

  3. Make sure that beans and .class are selected. (Deselect .java and resource if they are selected.)
  4. Click Finish.
Step 4: Import the client JAR file into WebSphere Studio.
In WebSphere Studio you must create a project to contain the generated servlet, JSP files and HTML files. Once you've created the project, you can import the JAR file into it.
  1. Place the following JAR file in WebSphere Studio's class path or on the Windows NT system class path:
    <X:\IBMVJava>\eab\runtime30\ivjejb302.jar

    where X:\IBMVJava is the directory in which VisualAge for Java is installed.

  2. Start WebSphere Studio.
  3. In the Welcome to IBM WebSphere Studio dialog, select Create a New Project. In the New Project dialog enter SimpleEJB in the Project Name field and click OK.
  4. The SimpleEJB project is now open.
  5. Right-click the servlet folder under SimpleEJB and select Insert > File. The Insert File dialog opens.
  6. Select the Use Existing tab, then click Browse to locate the AccessBean.jar file. Click OK. The servlet folder now contains the AccessBean.jar file.

Step 5: Use WebSphere Studio to gener-ate an HTML file, JSP file and servlet from the access bean.
Now you can use WebSphere Studio's JavaBean Wizard to generate an HTML file, JSP file and servlet from the access bean.

  1. Select the SimpleEJB project in WebSphere Studio and choose Tools > Wizards > JavaBean Wizard. The JavaBean Wizard opens.
  2. Make sure that netbank.AccountAccessBean appears in the JavaBean pane. Click Next. The Web Pages page of the JavaBean Wizard opens.
  3. Make sure that both Create an input page and Create a results page are selected. Click Next. The Input Page page of the JavaBean Wizard opens.
  4. Select the initKey_primaryKey property. Select the entire initKey_primaryKey line and click Change. The Change Details dialog opens. In the Caption field enter Account number. Click OK. Click Next. The Results Page page of the JavaBean Wizard opens.
  5. Select the balance property. Select the entire balance line and click Change. The Change Details dialog opens. In the Caption field enter Current balance. Click OK. Click Next. The Methods page of the JavaBean Wizard opens. Don't select anything. Click Next. The Session page of the JavaBean Wizard opens.
  6. Select Yes and store it in the user's session. Click Next. The Finish page of the JavaBean Wizard opens.
  7. Click Rename. In the Rename dialog type netbank in the Package Name field, and type accessBeanServlet in the Prefix field. Click OK.
  8. In the JavaBean Wizard click Finish. A customized HTML file, JSP file and servlet are generated from the Account access bean.

Step 6: Customize the HTML file.
You can use the Page Designer in WebSphere Studio to customize the HTML and JSP files.

  1. In WebSphere Studio right-click accessBeanServletInput.html and select Edit with > Page Designer. The WebSphere Page Designer launches open to accessBeanServletInput.html.
  2. Modify the HTML page to look like Figure 1.
  3. Save the revised HTML page.

Step 7: Customize the JSP file.
Page Designer's advanced HTML editor also allows easy insertion of JSP tagging. We'll add error handling to the generated JSP page.

  1. In WebSphere Studio right-click accessBeanServletResults.jsp and select Edit > Page Designer. Page Designer opens to accessBeanServletResults.jsp.
  2. Modify the JSP page to look like Figure 2.

  3. We need to add a try/catch block in the JSP page since access bean methods can fire RemoteExceptions. In the JSP page position the cursor directly beneath the Account Balance text. Select Insert > JSP Tags > Scriptlet. The Script editor opens.
  4. In the empty pane add the code:
    try {
  5. Click OK.
  6. In the JSP page position the cursor in the HTML space directly beneath the HTML table containing the text Your current balance is: Select Insert > JSP Tags > Scriptlet. The Script editor opens.
  7. In the empty pane add the code:
    } catch (Exception e) {
    out.println("Not available at this time");
    }
  8. The completed JSP page should look like Figure 3.

  9. Save accessBeanServletResults.jsp and close WebSphere Page Designer.

Step 8: Export the servlet source (.java) to VisualAge for Java.
To modify the generated servlet source, export the source to VisualAge for Java and start the Remote Access to Tool API. Then, from WebSphere Studio, send the source to VisualAge for Java.

  1. In VisualAge for Java select Window > Options > Remote Access to Tool API. Click Start Remote Access to Tool API, then click OK.
  2. Make sure that the netbank package in the SimpleEJB project exists in VisualAge for Java as an open edition (otherwise the class can't be transferred correctly from WebSphere Studio). In the VisualAge for Java project workspace right-click the netbank package and select Manage > Create Open Edition.
  3. In WebSphere Studio highlight accessBeanServlet.java (this file is contained in the servlet folder).
  4. Select Project > VisualAge for Java > Send to VisualAge. The Send to VisualAge dialog opens.
  5. Select the SimpleEJB project. Click OK.
You've now finished building an end-to-end Web application using VisualAge for Java and WebSphere Studio.

Running / Testing the Sample Application
To run and test the sample Web application, first publish the Web application using WebSphere Studio, then start the Web and EJB servers with VisualAge for Java to run the application. Finally, test the application using your Web browser.

Step 9: Publish the sample Web application.
Use WebSphere Studio to publish the sample so you can test the application in VisualAge for Java. Publishing allows your code to be used by other components. Complete the following:

  1. Check all of the files in WebSphere Studio. Right-click the SimpleEJB project and select Check In.
  2. In WebSphere Studio select Tools > Publishing Options, then click the Advanced tab and select Default Publishing Targets.
  3. Set the HTML path to that of your Web resources path (i.e., <X:\IBMVJava>\Ide\project_resources\IBM WebSphere Test Environment\hosts\default_host\default_app\web, where X:\IBMVJava is the directory in which VisualAge for Java is installed).
  4. Click OK when completed.
  5. Publish the SimpleEJB project:
  • Select View > Publishing. (If you don't see http://localhost in the Publishing view, right-click Test and select Insert > Server. The Insert Server dialog opens. In the Server name field enter http://localhost and click OK.)
  • In the right pane of WebSphere Studio right-click Test and select Publish Whole Project. The Publishing Options dialog opens.
  • Make sure the options in Figure 4 are set.

  • Click OK to publish only the modified files. Accept all defaults by clicking Yes after each prompt.

Step 10: Prepare to run sample Web application.
Use VisualAge for Java to run the Web application. Complete the following:

  1. Start the WebSphere Test Environment by choosing Workspace > Tools > Launch WebSphere Test Environment. Check the Console window to make sure the WebSphere Test Environment is launched.
  2. Start VisualAge for Java's Persistent Name Server and EJB Server to prepare to run the EJB application:
  • In the Workbench select the EJB tab.
  • Right-click the BANK EJB group and select Add To > Server Configuration. The EJB Server Configuration dialog opens.
  • Right-click Persistent Name Server and select Properties.
  • In the Properties for Persistent Name Server dialog enter the database URL for your database in the Data Source field. (If you've used DB2's First Steps, enter jdbc:db2:sample to use the SAMPLE database.)
  • In the Connection Type field select the JDBC driver for your database. (If you're using DB2, select COM.ibm.db2.jdbc.app.DB2Driver.)
  • Click OK.
  • In the Servers pane of the EJB Server Configuration dialog right-click Persistent Name Server and select Start Server.
  • In the Console window look for the open for business message that indicates that the Persistent Name Server is running.
  • In the EJB Server Configuration dialog right-click EJB Server and select Properties.
  • In the Properties for EJB Server dialog enter your database URL in the Data Source field. (Once again, enter jdbc:db2:sample if you're using the DB2 SAMPLE database.)
  • In the Connection Type field select the JDBC driver for your database. (If you're using DB2, select COM.ibm.db2.jdbc.app.DB2Driver.)
  • Click OK.
  • In the Servers pane of the EJB Server Configuration dialog right-click EJB Server and select Start Server.
  • In the Console window look for the open for business message that indicates that the EJB Server is running.

Step 11: Use your Web browser.
Launch your Web application in your Web browser.

  1. Launch your Web browser.
  2. Specify the following URL: http://localhost:8080/accessBeanServerInput.html.
  3. Enter a valid account number that you created earlier using the Test Client (see the June JDJ article). Click Submit. The JSP results page will display the account's current balance.
Congratulations! You now have a running end-to-end Web application. When you want to deploy it, use the WebSphere Application Server. (See the WebSphere Application Server help documentation for details.)

Conclusion
WebSphere Studio and VisualAge for Java contain all the tools required to build and debug a complete end-to-end Web application. By using these development products, which support a role-based development model, developers have the tools required to carry out their specific responsibilities.

More Stories By Anita Huang

Anita Huang is currently working on IBM's WebSphere Developer Domain site, providing in-depth samples and tutorials that incorporate the WebSphere software platform for e-business. Previously, she worked on the VisualAge for Java Information Development team, focusing primarily on componentry to build enterprise applications.

More Stories By Tim deBoer

Tim deBoer currently develops tools to build applications that run on WebSphere Application Server. He previously worked with the VisualAge for Java Technical Support group, providing support to enterprise developers working with VisualAge for Java.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.