Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

developerWorks Community:

  • Close [x]

IBM WebSphere Developer Technical Journal: Introduction to Web Applications in WebSphere Studio Application Developer

Tim deBoer (deboer@ca.ibm.com), Software Developer, IBM Toronto Lab
Photo: Tim deBoer
Tim deBoer is a software developer on the IBM WebSphere Studio Application Developer, Server Tools team at the IBM Toronto Lab. With his teammates, he is currently responsible for the entire Server Tools run time integration and unit test environment demonstrated throughout this article. He previously worked with the VisualAge© for Java Technical Support group, providing support to enterprise developers working with VisualAge for Java. He is also a VisualAge for Java Certified Solution Developer.

Summary:  This article shows you how to create a simple Web application -- consisting of an HTML page, a JSP page, and a servlet -- that converts temperatures from Fahrenheit to Celsius.

Date:  16 Oct 2001
Level:  Introductory

Activity:  3941 views
Comments:  

Introduction

IBM's WebSphere® Studio Application Developer is an integrated development environment (IDE) for J2EE application developers. It provides all the tools necessary to create, develop, test, and manage all of the artifacts involved with building complete Web, EJB, and EAR applications. Different, customizable perspectives (which are views of the development artifacts and an organization of the desktop) allow Web developers, JavaTM programmers, EJB developers, and administrators to share the same development tool.

At the heart of Application Developer are creation tools, editors, and wizards that allow for rapid development of all of the J2EE artifacts (HTML files, JSPTM pages, Java classes and servlets, EJB beans, XML deployment descriptors). These artifacts are organized into projects that correspond to modules defined in the J2EE specification. Once the artifacts have been created, they can easily be tested and debugged within the IDE, or exported and tested on a remote server.

This article will discuss the creation and testing of a simple Web application using the WebSphere Studio Application Developer beta version. We will build a Web application that converts temperatures from Fahrenheit to Celsius. After we create a small Java bean to handle the logic of the temperature conversion, I will show you how to use the JavaBeanTM Web Pages wizard to automatically generate the rest of the Web application. The Web application will consist of an HTML page, JSP page, and servlet.

Please note that the steps described here apply only to the beta version of Application Developer. For steps covering a later version of Application Developer, see Developing Java Programs Using WebSphere Studio Application Developer: A Comparison with VisualAge for Java. For information on EJB development using WebSphere Studio Application Developer or other topics not covered in this article, please read related articles in the IBM WebSphere Developer Technical Journal, or view the online help.


Creating a Web project

The first thing we need to do is create a Web project. A Web project is a special type of project that knows how to handle Web resources like servlets, HTML, and JSP files. It also provides validation on these resources and an editor for the web.xml deployment descriptor.

  1. Choose File => New => Other to bring up the list of Wizards.
  2. Choose Web => Web Project. Click Next.
  3. Enter MyWeb in the Name field.
  4. Click Finish. A Web project is created in the workspace.

Take a moment to look at the directory structure of the newly created MyWeb project. The two root folders of the project are source and webApplication. The webApplication folder directly corresponds to an unzipped WAR module. In other words, this folder is the actual Web module that you are creating. Inside it, you will find the usual files and folders that exist in a Web module: WEB-INF, WEB-INF/web.xml, etc.

The source folder is used for creating the Java classes that will be contained in your module. Any Java source files that you create in this folder will be automatically compiled into the webApplication/WEB-INF/classes folder.


Figure 1. Newly created Web project
Newly created Web project

You will notice a second project in the workbench. By default, this project will be named DefaultEAR. In the J2EE specification, EAR modules are super-containers used to group Web and EJB modules for deployment to a server. This EAR project is automatically generated to make it easy to deploy this Web application to WebSphere Application Server at a later time.


Creating a Java bean for temperature conversion

The heart of our Web application will be a Java bean that converts from Fahrenheit to Celsius. Follow the steps below to create the Java bean class.

  1. Select the MyWeb project.
  2. Choose File => New => Other to bring up the list of Wizards.
  3. Choose Java => Java Class. Click Next.
  4. In the Package field, type com.test.
  5. In the Name field, type TemperatureBean. Click Finish.
  6. When the TemperatureBean.java editor appears, add the following code within the enclosing brackets.
    // the temperature in Celsius 
     
         protected float temp; 
      
          public void setTemperature(float t) { 
     
           temp = t; 
     
         } 
      
         public float getTemperature() { 
     
           return temp; 
     
         } 
      
         public void convertToCelsius() { 
     
           temp = (temp - 32.0f) * 5.0f / 9.0f; 
     
         }
         

  7. The code should now look as shown in Figure 2 below.
    Figure 2. Source of TemperatureBean.java
    Source of TemperatureBean.java
  8. Save the file and close the editor. The next step will be to use a wizard to quickly generate an HTML page, servlet, and JSP page from this Java bean.

Creating Web resources

Now that the Java bean has been created to handle the temperature conversion, we need a Web application UI to let the user enter a value, and display the result. Luckily, WebSphere Studio contains a JavaBean Web Pages wizard that can automatically generate the remaining code. The generated code will include an HTML file, a servlet, and a JSP page, all of which are structured to use the JavaServer PagesTM Model 2 architecture (also known as Model-View-Controller).

  1. Choose File => New => Other to bring up the list of Wizards.
  2. Choose Web => Java Bean Web Pages. Click Next.
  3. Use the Browse button to select /MyWeb/webApplication in the Destination folder field.
  4. Enter Temperature in the Web page prefix field.
  5. Under Java package, click Browse.
  6. Select com.sample, and click OK.

    The wizard page should now look like Figure 3 below. Click Next.
    Figure 3. First Wizard page
    First Wizard page
  7. Under the Bean field, click Browse .
  8. Select TemperatureBean from the list, and click OK .
  9. Check convertToCelsius() from the list.

    The wizard page should now look like Figure 4 below. Click Next .
    Figure 4. Second Wizard page
    Second Wizard page
  10. In the table at the bottom left of the wizard, select the Page tab.
  11. Edit the Page Title field, and type Temperature Conversion .
  12. Check the temperature field from the list at the top left of the page. In the table below it, change the Label field to Fahrenheit .

    The wizard page should now look like Figure 5 below. Click Next .
    Figure 5. Third Wizard page
    Third Wizard page
  13. Make sure that the temperature field is checked in the list at the top left. In the table below, change the Label field to Celsius .
  14. In the table at the bottom left of the wizard, select the Page tab.
  15. Edit the Page Title field, and type Converted Temperature .

    The wizard page should look like Figure 6 below. Click Finish .
    Figure 6. Fourth Wizard page
    Fourth Wizard page

The workbench should now look as shown in Figure 7 below. Notice the newly generated TemperatureServletResults.java, TemperatureInputForm.html, and TemperatureResults.jsp. Although TemperatureBean.java and temperatureServletResults.java have been compiled into the webApplication/WEB-INF/classes folder, by default they are not visible because the navigator filters out .class files. (To turn this off, choose Filters from the drop-down menu in the Navigator's toolbar.)


Figure 7. Workbench after creating Web resources
Workbench after creating Web resources

Testing the Web application

WebSphere Studio Application Developer contains support for multiple application servers, *. However, one of the best features is that as a novice user, you don't have to worry about any of these other features. To run your project, all you have to do is select a resource and ask to run it on a server.

  1. Select the temperatureInputForm.html file in the MyWeb/webApplication folder. Right-click, and select Run on Server.
  2. A new WebSphere unit test server will be created automatically. The server will be started, and when it is ready, the Web browser will open with the correct URL for the HTML file. The Web browser should appear as shown in Figure 8 below.
    Figure 8. Temperature Input page
    Temperature Input page
  3. Enter 77 in the Fahrenheit field. Click the Submit link.

    The JSP page will now be compiled and run. This may take a few seconds. When it is finished, the next page should appear with the temperature converted to Celsius, as shown in Figure 9 below.
    Figure 9. Converted temperature
    Converted temperature

You have now built and tested a Web module, complete with an HTML file, servlet, and JSP page.


What else can I do?

Now that you have built a complete Web application, there are a number of options for what you can do next. These include:

  • Export a WAR file - If you want to export your code, you can choose to export it as a WAR file, or within an enclosing EAR. Both options are available via File => Export, and will let you move to another workbench, deploy to WebSphere Application Server, or deploy to another J2EE server.
  • Deploy to a remote WebSphere Application Server - When your code is working in the unit test environment, you can deploy and run on a remote copy of WebSphere Application Server. This support let you publish to a remote server, as well as start and stop the server remotely.
  • Test on Jakarta Tomcat - To test your code in Tomcat, all you have to do is download and unzip a copy of Tomcat. The beta supports Tomcat Version 3.2 and Version 4.0 beta 5.

For more information on these features, please see the online help. For information on exporting a WAR file and deploying to a remote WebSphere Application Server, specifically check out the help files, "Exporting Web Archive (WAR) files" and "Support for remote WebSphere Application Server." For information on testing on Jakarta Tomcat, refer to the Server Tools help documentation. I will also be covering these various aspects in my future Application Developer articles.


Conclusion

We have easily created from scratch a Web application consisting of an HTML page, servlet, and JSP page using the tools provided with WebSphere Studio Application Developer. You can see that by using the JavaBean Web Pages wizard, we were able to rapidly generate a servlet, HTML file, and JSP page that follow the JavaServer Pages Model 2 architecture.

Top of page


About the author

Photo: Tim deBoer

Tim deBoer is a software developer on the IBM WebSphere Studio Application Developer, Server Tools team at the IBM Toronto Lab. With his teammates, he is currently responsible for the entire Server Tools run time integration and unit test environment demonstrated throughout this article. He previously worked with the VisualAge© for Java Technical Support group, providing support to enterprise developers working with VisualAge for Java. He is also a VisualAge for Java Certified Solution Developer.

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.


Report abuse help

Report abuse

Report abuse submission failed. Please try again later.


developerWorks: Sign in


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


Rate this article

Comments

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=87502
ArticleTitle=IBM WebSphere Developer Technical Journal: Introduction to Web Applications in WebSphere Studio Application Developer
publish-date=10162001
author1-email=deboer@ca.ibm.com
author1-email-cc=

Click. Code. Connect.

Special offers