Website Using RAD

8/7/2019 Website Using RAD

1/41

Build dynamic Web sitesUsing IBM Rational Application Developer

Skill Level: Introductory

Ron Ben-Natan ([email protected])Freelance writer

24 Mar 2005

This tutorial shows you how to use IBM Rational Application Developer V6.0 to builddynamic Web sites. The tutorial walks you through a simple example that uses Javaservlets and JavaServer Pages to implement a simple messaging center. You'll learnhow to use Rational Application Developer to develop a dynamic Web site, then testand debug your code.

Section 1. Before you start

About this tutorial

This tutorial shows you how to develop a Web application using JavaTM

servlets andJavaServer Pages (JSP) files, how to organize code in a project within IBMRational Application Developer Version 6.0, and how to use Java servlets and JSPfiles to generate dynamic HTML content. It also shows you how to test and debugcode within Rational Application Developer and how to package a Web application

for deployment on a computer running IBM WebSphere Application Server.

Rational Application Developer Version 6.0 is a very rich Integrated DevelopmentEnvironment (IDE) that supports multiple Java frameworks for building Web userinterfaces (UIs) and Java applications. This includes JavaServer Faces (JSF),Struts, and Service Data Objects (SDOs). In this tutorial, the most basic Java Webtechnologies -- servlets and JSP files are used. For more information about JSF,

Build dynamic Web sites Copyright IBM Corporation 1994, 2008. All rights reserved. Page 1 of 41
mailto:[email protected]://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlmailto:[email protected]


2/41

Struts, and SDOs within Rational Application Developer, refer to Resources.

This tutorial employs a simple application -- the messaging center. Using themessaging center, users can log on and view messages that have been sent tothem. They can also send messages to any other user who has access to the

messaging center. Using Rational Application Developer in conjunction with Java,Java servlet, and JSP technologies, you will build the following elements:

User and Message Java classes

Two JSP forms: login.jspand messageCenter.jsp

Two servlets: MessageCenterLoginServletand AddMessageServlet

Prerequisites

This tutorial is written for developers and Web site builders who quickly want to learnhow to use Rational Application Developer to build dynamic Web sites. This tutorialassumes that you have a basic knowledge of HTML and Java technology. BecauseRational Application Developer is easy to use, the tutorial is easy to follow, even ifyou're new to HTML and Java technology.

Although downloading Rational Application Developer Version 6.0 is not aprerequisite for completing this tutorial, it does make the tutorial easier to follow. Torun the examples in this tutorial, you need the following software:

Rational Application Developer Version 6.0: You can download the

latest trial version of Rational Application Developer at no charge.

In addition, you can download a trial version of WebSphere Application ServerVersion 6.0. Rational Application Developer Version 6 comes with the WebSphereApplication Server Version 6.0 test environment, so you don't have to use a separateWebSphere Application Server machine. However, if you also want to tryWebSphere Application Server, you can download it at no charge:

WebSphere Application Server Version 6.0. Download the latest trialversion of WebSphere Application Server.

Section 2. What's new in version 6.0?

developerWorks ibm.com/developerWorks

Build dynamic Web sitesPage 2 of 41 Copyright IBM Corporation 1994, 2008. All rights reserved.
http://www.ibm.com/developerworks/downloads/r/rad/?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/downloads/ws/was/?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/downloads/ws/was/?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/downloads/r/rad/?S_TACT=105AGX15&S_CMP=TUT


3/41

Version 6.0

Rational Application Developer for WebSphere Software Version 6.0 (RationalApplication Developer, for short) is a major revision of IBM WebSphere Studio

Application Developer. Rational Application Developer is the first release of theenvironment that is being branded within the Rational product line and also includesmany features above and beyond those that were available in Version 5.x. Beingpart of the Rational family has many advantages -- for example, Rational ApplicationDeveloper is part of the IBM Software Development Platform, which allows you tovisualize applications with Unified Modeling Language (UML) diagrams, visuallybuild Java and Web applications, and visually design portals. Rational ApplicationDeveloper Version 6.0 includes:

Portal tools for visually developing portal applications

Automated code analysis and component testing tools to improve codequality

Enhanced run time analysis tools to identify and fix performance problemsearly in the development cycle

Built-in Crystal Reports tools for building powerful and interactive datareports

WebSphere Rapid Deploy to accelerate application deployment andsimplify system testing in Application Server

Eclipse 3.0 support for a more responsive, attractive, and customizable UI

that increases developer productivity

Section 3. Elements of dynamic Web sites

The static Web

When the World Wide Web was born, it consisted of static Web sites. Web sites inturn consisted of static documents (mostly HTML pages) that were accessiblethrough Web servers. Users used Web browsers to access these Web sites. A Webbrowser communicated with a Web server over the Hypertext Transfer Protocol(HTTP). Using an HTTP request, the browser communicated with the Web serverand requested access to a certain document. The Web server managed a set ofdocuments stored on a file system. When asked for a document, it would retrieve it

ibm.com/developerWorks developerWorks

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


4/41

and return it within an HTTP response (see Figure 1).

Figure 1. The static Web

The evolution of the dynamic Web

Technology visionaries saw that the Web model could be more powerful if the pagesreturned to the browser were not statically stored on a file system. Pages could begenerated by accessing data stored in databases, by accessing legacy applications

and reformatting their UIs, and by performing computations based on user inputs.

The shift to dynamic Web sites involves a new server -- the application server.Values sent within the HTTP request are passed from the Web server to theapplication server and used by application code. This application code executeswithin the context of the application server and performs business logic, accessesdata stores, and more. The code then dynamically generates the HTML that isreturned to the browser within the HTTP response (see Figure 2).

Figure 2. The dynamic Web

A new generation of tools




5/41

Paralleling the advancements made on the server side, browsers also becamebetter. Early browsers could parse simple HTML and present the page. Today'sbrowsers include powerful layout engines, the ability to execute scripts, and even aJava Virtual Machine (JVM) for running Java code on the client (in the form ofapplets). Using a technology called Dynamic HTML (DHTML), the pages returned to

the browser can themselves include many dynamic components that make for abetter user experience.

Powerful application models require powerful tools. When Web sites consisted ofstatic HTML pages, developers used HTML editors to build static content. Forbuilding dynamic Web sites, developers need a new generation of tools. These toolsneed to facilitate building applications that include server-side components such asservlets and JSP files. They also need to support the entire code/test/debug lifecycle and to combine advanced testing and debugging environments in addition to adevelopment environment. Rational Application Developer is just such a tool.

The rest of this section provides an overview of the client- and server-sidetechnologies that are an integral part of the message center application. If you'refamiliar with these technologies, skip to Build a dynamic Web application .

Java, Java servlet, and JSP technology

Rational Application Developer Version 6.0 makes building Web applications easy.In fact, using frameworks such as Struts and JSF, building Web applications is asimple matter of dragging-and-dropping components and filling in attributes. Many ofthe behind-the-scenes constructs include servlets, JSP files, and tag libraries; in thissection, you get a brief overview of what these constructs are.

Java technology has emerged as the premier environment for building server-sideapplication code. The Java programming language makes it easy to buildwell-structured object-oriented code, access data stores, and build robust businesslogic.

In the context of this tutorial, back-end Java code runs within a Java applicationserver. A Java application server uses a JVM to execute Java code. The Java codein this tutorial includes objects representing real-world entities (such as users andmessages) as well as servlets and JSP files.

All your code in this tutorial is built with Rational Application Developer. (You canalso use IBM Rational Web Developer for WebSphere Software Version 6.0: Thescreens and processes look the same.) This single integrated environment allowsyou to simply compose your business entities, build the business transactions usingservlets, and build the JSP files used to generate the UI.




6/41

Servlets

Servletsare Java classes that implement the Servlet interface. The Servlet interfacedefines a doGet and a doPost method for handling client requests. HTTP

Servlets handle HTTP requests encapsulated as an HTTPServletRequestobject. The HTTPServletRequest object is passed as an argument to theservice method. Using this object, the servlet developer accesses parameters sentas part of the request, cookies delivered with the request, and headers within theHTTP request. The servlet generates dynamic content, usually as HTML. Using anHTTPServletResponse object, the servlet developer writes the dynamic contentonto a servlet output stream, which in turn creates the page returned to the browser.

As a simple example, the servlet shown in Listing 1 retrieves a username from therequest parameters and prints a "hello" string.

Listing 1. Servlet for retrieving a usernameimport java.io.*;import javax.servlet.*;import javax.servlet.http.*;

public class SimpleHelloServlet extends HttpServlet {

public void doGet(HttpServletRequest req, HttpServletResponse res) {this.doPost(req, res);}

public void doPost(HttpServletRequest req, HttpServletResponse res) {String username = req.getParameter("username");// tell the browser that the content is an HTML page

res.setContentType("text/html");// Generate the dynamic content

PrintWriter out = res.getWriter();out.println("");out.println("Hello " + username);out.println("");out.close();

}

JavaServer Pages

Hard-coding HTML in Java code is bad form because it creates inflexible code.HTML elements become strings hard-coded within Java print commands (as shown

in Servlets). That means that tools for building Web pages cannot be used and thatthe role of the Web page designer -- which should be separate from that of the Javadeveloper -- is not well supported. JSP files solve this problem by embedding Javacode that generates dynamic content within the HTML page. As an example, youcan replace SimpleHelloServlet with the JSP page shown in Listing 2.

Listing 2. JSP page to replace SimpleHelloServlet




7/41

In this scheme, HTML elements are well represented, and Java code is embeddedusing special scriplet tags (< % ... %> or ...).

Servlets and JSP files are used to generate dynamic content. While this content canbe of any type, it's usually HTML when building dynamic Web sites.

Taglibs

JSP files allow you to embed Java code within tags from the HTML tag set, whichmeans that the tags in a JSP file come from a finite and limited group that dealsmostly with layout. This group is limited in terms of how expressive you can makeyour tag-centric page; much of the behavior tends to be implemented as calls tovarious Java methods, and the page ceases to "belong" to the page designer.

Rational Application Developer Version 6.0 supports custom tag libraries -- taglibs--and includes many taglibs that make your Web development simple. Taglibs let youextend the tag/element vocabulary of your JSP file by allowing you to define newelements that can be used inside a JSP file as any other tag. By providing a tag

implementation class, you define how the Web container processes the tag whenthe JSP file is evaluated. For example, you can easily implement a new tag thatprints the value of the username parameter, in which case the JSP code fragmentfrom the previous section could become simply:

This example would be relevant in the unlikely event that you decide to build aspecialized implementation for printing the username parameter. A more commonJSP page would result if you used one of the core tags in the JavaServer PagesStandard Tag Library (JSTL), in which case the page would become:




8/41

Taglibs make authoring JSP pages easier and increase productivity by encouraging

a division of labor between library developers and library users. Taglibs are createdby a developer who is an implementation expert and are used by Web page authorswho, by building on these libraries, can produce more functional and higher-qualityapplications.

Because taglibs are part of the JSP standard, they are also portable and supportedby all major Java 2 Platform Enterprise Edition (J2EE) environments. This support,in turn, means that many people write taglibs and that you can often find greatreusable resources. Two important starting points are the Sun Microsystems taglibpage at http://java.sun.com/products/jsp/taglibraries.html and the Jakarta taglibproject at http://jakarta.apache.org/taglibs.

Dynamic HTML

DHTML = HTML + JavaScript code + Document Object Model (DOM) + CascadingStyle Sheets (CSS).

DHTML isn't the topic of this tutorial, but remember that DHTML is an importanttechnology in building dynamic Web sites. DHTML is a collection of client-sidetechnologies. A DHTML page is delivered by the server and runs within the Webbrowser, so the browser runs the code within the DHTML page.

A DHTML page is first and foremost an HTML page. The DHTML developer canembed JavaScript scripts within this HTML page. These scripts run on the client andimprove the user experience. An example is the use of JavaScript code to performclient-side validations to eliminate unnecessary network traffic.

Most of the scripts that run within the browser need to access the elements on thepage -- that is, the HTML elements. The DOM defines a set of objects that aredirectly related to the HTML elements on the page. The DOM allows JavaScriptcode to refer to each HTML element on the page as an object with attributes andmethods. For example, JavaScript code can access a text field in an HTML form asan object, retrieve its current value, and even change the value. The JavaScriptcode can even access an HTML table as an object and add rows by manipulatingthe table object -- all completely within the browser.

CSSs are used to associate formatting information with HTML elements. Instead ofhard-coding this information as HTML markup (such as bold and italics), allformatting information is externalized to a CSS file and associated with the HTMLelements. This association makes quickly and uniformly changing the appearance of


http://java.sun.com/products/jsp/taglibraries.htmlhttp://jakarta.apache.org/taglibs/http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://jakarta.apache.org/taglibs/http://java.sun.com/products/jsp/taglibraries.html


9/41

a complete Web site easier.

Armed with this impressive set of server-side and client-side technologies, you'renow ready to turn to the tutorial's example of a dynamic Web site -- the messagingcenter application.

Section 4. Build a dynamic Web application

Getting started with Rational Application Developer

To help you understand how to use Rational Application Developer to develop

dynamic Web sites, this tutorial shows how to develop a simple Web application.The messaging center application allows users to send messages to one another.Every user can log in to the Web site and view all the messages sent to them. Forevery message, users see who sent the message and the message text. A user canthen send a message to any other registered user.

The focus of this tutorial is using Rational Application Developer to build such adynamic Web application, not the application itself. The messaging centerapplication is not a complete application and includes many shortcuts. For example,the set of possible users is limited (instead of maintaining the users in a database),login doesn't require a password, no error-handling is performed, and messages

can't be edited or grouped.

Elements within the messaging center application

As mentioned, Rational Application Developer Version 6.0 supports buildingapplications using frameworks such as Struts and JSF. Using these technologies,Rational Application Developer allows you to create Web application flow diagrams.In this tutorial, you build the flow yourself. The following is a high-level view of thecomponents you build and how they interact with each other. Figure 3 shows anexample of how the code components flow.

Figure 3. Overview of code components




10/41

A user starts by accessing a login of the form

http://localhost/MessagingCenter/login.jsp. The JSP engine processes the JSP filesand generates an HTML form that the browser returns and displays. The user entersa username and clicks Submit, which makes a call to theMessageCenterLoginServlet servlet running on the application server. If anerror occurs, the servlet forwards handling to the login JSP file. The login JSP filecreates an error message and presents the login form for the user to try again. If theusername is correct, the servlet prepares the object with the message data andforwards handling to the message center JSP file. The JSP file generates dynamiccontent, which is based on the messages, as an HTML page that is returned to thebrowser. Using an HTML form, the user can send a message to another user byclicking Submit, which makes a call to AddMessageServlet.

Create the messaging center project

If you're following along with a running copy of Rational Application Developer:




11/41

1. Select File > New > Project to create a new project. A projectcontainsfiles and folders, and it's how you organize resources within the RationalApplication Developer workbench. Rational Application Developer Version6.0 supports many types of projects, including J2EE, Server, and Web.

2. Open the Web folder, then select Dynamic Web Project.

3. Click Next. Rational Application Developer creates a new project for aWeb application and generates resources required for dynamic Webapplications, such as servlets, JSP files, and HTML pages.

4. Enter a project name -- MessagingCenter, in this example.

5. Click Show Advanced to able to control the servlet version and thedeployment of your project within Rational Application Developer. (As youcan see, Rational Application Developer Version 6.0 now supports the

Servlet 2.4 specification.)

6. Click Next. But before letting Rational Application Developer create theproject, you need to add a few standard tag libraries.

Select the standard tag libraries

You can add features to your Web project in the Features window (see Figure 4).

1. Select JSP Tag Libraries for adding Utility Tag Libraries and the JSPStandard Tag Library.

2. Click Finish. Rational Application Developer creates the Web project andthe various resources needed for a Web application.Figure 4. Add features to your Web project




12/41

3. If this is your first Web project, the Rational Application Developerworkbench asks whether you want to assume the Web perspective forthis project. Select the Remember my decision option, then click Yes.

The Project Explorer opens and includes both the MessagingCenter project and a

MessagingCenterEAR under the Enterprise Applications node (encapsulating yourwork in an enterprise archive that you can later install on a production WebSphereApplication Server machine). A perspectivedefines the initial set and layout of panesin the workbench. This concept introduces a role-based customization of the viewsand editors; it's a user-centric metaphor bringing together all the tools useful for acertain role. Viewsprovide different ways to look at a certain resource, and editorsare used to create and modify code. Rational Application Developer Version 6.0




13/41

includes a variety of different editors suitable for specific file types, such as HTMLfiles, JSP files, and Java source files.

Now that you've created the project, you're ready to start creating some of theresources.

Section 5. Build the back end: Java classes and servlets

Build User.java and Message.java

First, you need to build the Java class to represent the user. To create a Java class:

1. Right-click the Java Resources folder within the Project Explorer on theworkbench and select New > Other.

2. In the wizard that appears, open the Java folder and select Class.

3. Click Next to bring up the Java class editor. Enter the class name (User)and the package name (com.ibm.tutorials.rational). All the rest(including the superclass java.lang.Object) remains as default.

At this point, you also need to create a Java class that represents the messageobject. You can see the code for both classes in User and Message class code.

User and Message class code

Listing 3 and Listing 4 show the code for the User.java and Message.javaclasses, respectively. After you've created both classes, the Project Explorerappears (see Figure 5).

Listing 3. The User.java class code

package com.ibm.tutorials.rational;

import java.util.Vector;

public class User {private String name;private Vector messages;

// Simple implementation of a set of users -




14/41

// only for illustration purposes. Normally users// would have to be maintained and managed in a databaseprivate static User[] hardCodedUsers = {

new User("Joe"),new User("Jane"),new User("Tony"),new User("Tina") };

public static User[] getHardCodedUsers() {return User.hardCodedUsers;

}

public User(String name) {this.name = name;

messages = new Vector();}

public String getName() {return this.name;

}

public Vector getMessages() {return messages;

}

public void addMessage(Message message) {messages.addElement(message);

}

// Return a User object based on user name or a null if a user// by that name does not exist

public static User getUser(String username) {User[] allUsers = User.getHardCodedUsers();for (int i = 0 ; i < allUsers.length ; i++)

if (allUsers[i].getName().compareTo(username) == 0)return hardCodedUsers[i];

return null;}

}

Listing 4. The Message.java class code


public class Message {private String senderName = null;private String text = null;

public Message(String senderName, String text) {this.senderName = senderName;this.text = text;

}

public String getSenderName() {return this.senderName;

}

public String getText() {return this.text;

}}




15/41

Figure 5. Newly created Java classes

Build the project

You can rebuild the project at any point while you're editing resources. To perform a

clean build, select Project > Clean. Performing a clean build means that RationalApplication Developer tries to compile all Java code, perform syntax checking on allresources, and check references between the different elements of the Webapplication. Such a build is sometimes useful when you fix errors within JSP files(such as repairing bean references). However, you don't really need to perform fullbuilds all the time. Rational Application Developer does a partial build every time yousave your changes. If, for example, you misspell the import statement for the class




16/41

String (as shown below, where I've imported java.lang.Strig instead ofjava.lang.String), Rational Application Developer signals the error as well asthe error message and the location of the error.

After you've fixed all the errors, select Project > Clean, then save your current

workbench.

You're now all set with the back-end entities, and you're ready to build the servletsthat will implement the "business transactions."

Create MessageCenterLoginServlet

The MessageCenterLoginServlet servlet is responsible for looking up the userbased on the username and for preparing the collection of messages to be displayedfor that user. However, the servlet doesn't generate the dynamic content (such asthe HTML): A JSP file does that.

To create the servlet:

1. Right-click the com.ibm.tutorials.rational folder in the Project Explorer andselect New > Other.

2. Select Servlet, then click Next.

3. In the Create Servlet window, enter the name(MessageCenterLoginServlet) and a description of the servlet.

4. Click Next.

5. Enter the package name (com.ibm.tutorial.rational). Thesuperclass remains javax.servlet.http.HttpServlet.

6. Click Next.

7. By default, both the doGet and doPost method options are selected forcode creation in the last window of the wizard (see Figure 6); if this is thebehavior you want, click Finish.Figure 6. Select methods for your servlet




17/41

When the wizard completes its work, you'll have a skeleton servlet class with thecode shown in Listing 5.

Listing 5. Skeleton servlet class


import java.io.IOException;import javax.servlet.Servlet;import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;

/**




18/41

* @version 1.0* @author*/

public class MessageCenterLoginServlet extends HttpServlet implements Servlet {

/* (non-Java-doc)* @see javax.servlet.http.HttpServlet#HttpServlet()*/

public MessageCenterLoginServlet() {super();

}

/* (non-Java-doc)* @see javax.servlet.http.HttpServlet#doGet

(HttpServletRequest arg0, HttpServletResponse arg1)*/

protected void doGet(HttpServletRequest arg0, HttpServletResponse arg1)throws ServletException, IOException {

// TODO Auto-generated method stub}

/* (non-Java-doc)* @see javax.servlet.http.HttpServlet#doPost

(HttpServletRequest arg0, HttpServletResponse arg1)

*/protected void doPost(HttpServletRequest arg0, HttpServletResponse arg1)throws ServletException, IOException {

// TODO Auto-generated method stub}

}

Implement MessageCenterLoginServlet

Now, you need to implement the behavior of the servlet. The servlet needs to

process both GET HTTP requests and POST HTTP requests in the same way. Thesimplest thing is to change the doGet method so that it calls the doPost method.Doing so ensures that the behavior is identical regardless of which action was used:


this.doPost(arg0, arg1);}

Implement the doPost method. First, get the username from the request. If it's null,enter an error message and dispatch the handling to the login JSP file. (JSP filesgenerate all the HTML.) The login JSP file then generates the HTML based on thiserror message:

String username = arg0.getParameter("username");

if (username == null) {// Can't perform a login with no user name.// Set an error message and redirect to login page.arg0.setAttribute("errorMessage", "User name not specified");




19/41

// Dispatch to login.jsp using the RequestDispacther// Use a relative URL for simplicityRequestDispatcher disp = getServletContext().getRequestDispatcher("/login.jsp");disp.forward(arg0, arg1);

}

You also need to add the following line to the import section:

import javax.servlet.RequestDispatcher;

Use autocompletion to finish the servlet

One of the many useful features of Rational Application Developer Version 6.0 isautocompletion. If you forget which methods are applicable within a certain context,you can place the cursor after the period following a variable name and press CTRL

+ space to bring up a context-sensitive list of possible methods based on the objectin the context. For example, if you forget which method of the request object youshould use when entering the error message, you can bring up the coding assistant(see Figure 7).

Figure 7. The coding assistant

Back to the code. With the username in hand, you can proceed to look up the Userobject using the facilities coded in the User class. If no User object is found, you

can use another error message. If a User object is found, place it in the sessionobject and forward handling to the JSP file responsible for displaying the messages:

// Otherwise proceed to looking for the User objectUser user = User.getUser(username);if (user == null) {

arg0.setAttribute("errorMessage", "User not found");RequestDispatcher disp = getServletContext().getRequestDispatcher("/login.jsp");




20/41

disp.forward(arg0, arg1);}

// Put the user object in the session object and forward to messageCenter JSPHttpSession session = arg0.getSession(true);session.setAttribute("user", user);RequestDispatcher disp = getServletContext().getRequestDispatcher("/messageCenter.jsp");disp.forward(arg0, arg1);

This step completes the servlet responsible for accessing the "business objects."You're ready for the servlet handling the "business transaction."

AddMessageServlet

AddMessageServlet is responsible for adding a new message to one of the users-- in effect, sending a text message from one user to another. This functionality isinvoked from an HTML form within the message center.

Building the servlet follows the same process as that of buildingMessageCenterLoginServlet, as Listing 6 shows. The method implementingthe sending of the message has two parameters: the username of the messagerecipient and the text message to be sent. The originator of the message is retrievedfrom the session object.

Listing 6. AddMessageServlet


import java.io.IOException;

import javax.servlet.RequestDispatcher;import javax.servlet.Servlet;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;

public class AddMessageServlet extends HttpServlet implements Servlet {/* (non-Java-doc)

* @see javax.servlet.http.HttpServlet#HttpServlet()*/

public AddMessageServlet() {super();

}

/* (non-Java-doc)* @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest arg0,* HttpServletResponse arg1)*/


this.doPost(arg0, arg1);

}




21/41

/* (non-Java-doc)* @see javax.servlet.http.HttpServlet#doPost(* HttpServletRequest arg0, HttpServletResponse arg1)*/

protected void doPost(HttpServletRequest arg0, HttpServletResponse arg1)throws ServletException, IOException {

String recipient = arg0.getParameter("recipient");String messageText = arg0.getParameter("messageText");

// Get the session object. If it does not exist or if there is no User object// in it then we cannot process the message send and need to ask the user// to login once moreHttpSession session = arg0.getSession(false);if (session == null) {

arg0.setAttribute("errorMessage", "Need to login before sending a message");RequestDispatcher disp = getServletContext().getRequestDispatcher("/login.jsp");disp.forward(arg0, arg1);

}

User user = (User)session.getAttribute("user");if (user == null) {

arg0.setAttribute("errorMessage", "Need to login before sending a message");

RequestDispatcher disp = getServletContext().getRequestDispatcher("/login.jsp");disp.forward(arg0, arg1);}

// Need to check that there is a recipient and that it is a legal user// This is omitted for lack of interest

// Otherwise proceed to send the messageUser messageReceiver = User.getUser(recipient);Message message = new Message(user.getName(), messageText);messageReceiver.addMessage(message);

}}

The back-end code is now ready. It's time to move on to building the presentation

layer.

Section 6. Build the presentation layer: JSP

login.jsp and messageCenter.jsp

The presentation layer consists of a set of JSP forms. JSP forms are the perfectelements for implementing the messaging center screen generators, because thescreens need to be HTML pages but are dynamically created based on the back-endentities. As a result of submissions from the HTML forms, methods within theservlets described previously are invoked.

The JSP forms created in this section are as follows:




22/41

login.jsp: Responsible for generating the HTML form for capturing theusername and invoking MessageCenterLoginServlet

messageCenter.jsp: Responsible for displaying as an HTML table themessages sent to the user who is currently logged in; also generates a

form allowing the user to send a message

Build login.jsp

Rational Application Developer Version 6.0 has an editor for building JSP files thatfollows the feel of HTML builders. To create the JSP form:

1. Right-click the WebContent folder in the Project Explorer and select New> JSP File.

2. In the New JSP File window, enter the JSP file name (see Figure 8).Figure 8. Specify a name and location for login.jsp




23/41

3. The New JSP File Wizard can help you specify many of the JSP file'sattributes. While you can click Finish on the first page of the wizard, youcan also select the Configure advanced options option and continuewith the other windows in the wizard. Using the wizard, you can specifyexplicit init and destroy method stubs, initialize parameters for the

servlet that is automatically generated from the JSP file, attachstylesheets, define the document type definition (DTD) used in the JSPfile (IBM WebSphere Studio Version 5.1.1 supports Extensible HTML, orXHTML), and specify the tag libraries to be used from within the JSP form-- the topic of the next panel.

4. Click Next.




24/41

Import tag libraries

The New JSP File Wizard allows you to specify the tag libraries used from within theJSP form. Click Add to open the next page of the wizard. Here, you can select the

tag libraries you want to use (see Figure 9).

Figure 9. Select tag libraries




25/41

Rational Application Developer shows you a form of a catalog of taglibs, includingtag libraries from the Apache Jakarta project, the JSTL core library, and much more.You can also import additional tag libraries into the catalog by clicking Import.

Select the JSTL core library, then click OK. You can change the prefix used withinthe JSP file, but the default for the core tag library is the letter c. On the page from




26/41

which you added the tag library, click Finish.

Note: Depending on which version of the JSP engine you use within yourapplication, you might need a different version of the JSTL core library. Both appearin the wizard beneath the other. The first has a URI of http://java.sun.com/jstl/core

and the second has a URI of http://java.sun.com/jsp/jstl/core. If you are using JSP2.0 you should use http://java.sun.com/jsp/jstl/core.

Now you're ready to start designing the JSP form. Use the central pane in theworkbench to design your page. You can drag and drop elements from the toolbar.You can also insert elements from the Insert menu bar item.

Including a 'use bean' element

To build the login JSP page, you first need to include a use bean element. Thebean in the login.jsp page represents the error message that is displayed if, forexample, you enter a username that doesn't exist. Insert the use bean elementusing the Insert JSP Bean tool by selecting JSP > Insert Bean. Set the properties ofthe bean in the property editor (see Figure 10).

Figure 10. Set the bean properties




27/41

The identifier of the bean throughout the page is errorMessage, and the beanshould be retrieved from the Request object. (Remember fromMessageCenterLoginServlet that the error message is placed usingrequest.setAttribute(errorMessage).) The class of the bean is ajava.lang.String.

When this bean is available in the context of the page, you can display the messageusing a JSP expression. Select JSP > Insert Expression to place the expressionelement on the page and open the properties editor below the canvas (see Figure11). Enter the JSP expression to print out the error message variable.

Figure 11. The JSP expression properties

Add the form to the page

Continue to build the page:

1. Add a horizontal rule from the HTML Tags section on the palette.

2. Add a Form element from the Form Tags section on the palette.

3. After the form is on the page, select a Text Field element from the FormTags section on the palette and drop it into the form. This form is used forentering the username.

4. Give the input field an initial value using the properties editor below thecanvas.

5. Add a Submit button to the form by dropping a Submit Button componentfrom the Form Tags section on the palette onto the form. As you drop theSubmit button, a pop-up window prompts you for the button's label. TheSubmit button causes the form data to be submitted, but you haven't




28/41

specified what URL should be called on the server.

6. Select the Form element on the designer.

7. Click the Properties tab. The most important property is the Actionproperty.

8. Click the Browse tool just to the right of the Action field.

9. Click the Servlet option.

Rational Application Developer lets you choose the action among all servlets thatyou have already defined. For each available servlet, Rational Application Developerlists the URL that will be used. Select MessageCenterLoginServlet, then click OK.Figure 12 shows the resulting page in the designer.

Figure 12. The login.jsp servlet

Click Source at the bottom of the design pane to see the generated JSP sourcecode:

login.jsp




29/41

You're done building your first JSP form and are ready to move on to the second.

Build messageCenter.jsp

The messageCenter JSP form is similar to the login JSP form. Start by creating anew JSP file:

1. Right-click the Web Content folder in the Project Explorer and select New> JSP File.

2. Enter messageCenter.jsp as the JSP form name, then click Next.

3. Add the JSTL taglib, then click Finish.

4. Moving over to the designer, drag the following elements onto the canvas:

A bean element for getting the User: Select user as the ID, Sessionas the scope, and com.ibm.tutorials.rational.User as the type.

Static text: Simply type the text you want to display -- in this case, thestring "Welcome".

Property display element for displaying the username: Drag a GetProperty element from the palette. In the JSP Get Property window,expand user and select name. Click OK.

Static text: "Your messages are as follows"

HTML table: Start out with two columns and two rows. In the first row,type the headings From and Text, then set the cell widths.

Within the second table row (TR), place a Java loop: Each iteration of

the loop creates a new TR element with the message sender and textin table data (TDs). The loop is created using the JSTL core taglibrary, which supports iteration.

Select JSP > Insert Custom: Doing so opens the Insert Custom TagWizard that displays all the taglibs in your JSP form and the availablecustom tags.




30/41

Select forEach for an iteration loop, then click Insert: Iteration for thiselement should be on ${user.messages}. To select this, click theProperties tab, then select Iterate over the entire collection. Clickthe ... tool to the right of the Items field, then expand the user entryand select messages. Make sure to give the forEach element a

name so that you can reference it. The call is aMessage, becauseeach element is a message. Within each iteration, you create a TRand two TDs. In each TD, insert an output component from thepalette; in the property editor, enter ${aMessage.senderName} and${aMessage.text}, respectively. Your workbench should now looklike the one in Figure 13.

Figure 13. The messageCenter.jsp form

5. Finish building the page by adding these final items for sending amessage:

An HR element from the HTML section in the palette A form for sending a new message from the Form Tags section in the

palette. In the Properties window, set the action to/MessagingCenter/AddMessageServlet by clicking the tool to theright of the Action field, selecting Servlet, then selectingAddMessageServlet.




31/41

A text field (named recipient) for the recipient of the message droppedinto the form

A text area (named messageText) for the message text dropped intothe form

A Submit button (with a label of Send Message) in the form

When you're done with the designer, the page should look like the one in Figure 14.

Figure 14. The final messageCenter.jsp form

Rational Application Developer generates the JSP code:




32/41

messageCenter.jsp

Welcome. Your messages are as follows:

FromText

You're done with the coding of the application and can move on to testing themessage center.

Section 7. Test the message center

Start the server

To test your application, you can use the built-in WebSphere Application Server testenvironment or, if you've installed WebSphere Application Server Version 6.0, youcan use that. (Refer to Resources at the end of this tutorial for downloadinformation.) You are prompted for the location of the environment when you try tolaunch the application.




33/41

To test the application:

1. Right-click login.jsp and select Run on Server.

2. Select WebSphere v6.0 Server from the Select the server type list andselect Set server as project default (do not prompt).

3. Click Finish (see Figure 15).Figure 15. Select a server on which to run your application

The application is published to the server. You will see many printouts on theconsole, and a Web browser window appears in your workspace.




34/41

Example of a message

The top right pane is a browser view that displays the login HTML (the HTML pagethat login.jsp generated). If you proceed to log in using one of the fixed usernames,

you can start sending messages among the users. Remember that becausemessages are not persistent, all these messages will be lost if you shut down theserver.

As an example, suppose you want to send a message from Joe to Jane. Log in asJoe. In Joe's message center, enter the text for a message to send to Jane, thenclick Submit (see Figure 16).

Figure 16. Joe's message center

Now, go back to the login form, and log in as Jane. Figure 17 shows Jane'smessage center.

Figure 17. Jane's message center




35/41

Debug the application

One of the really great things about Rational Application Developer Version 6.0 isthat WebSphere Application Server is very tightly integrated. That means that youdon't have to develop your application, deploy it on a server (with all kinds of printcommands), look at the log files, and figure out what went wrong. You can doeverything within one integrated development environment using a single set oftools.

For example, suppose that an exception occurs when you run the application. Youcan add a breakpoint by right-clicking on the left border of the code and setting abreakpoint (see Figure 18).

Figure 18. Set a breakpoint




36/41

You can also simply double-click the right border of the pane. Doing so sets a

breakpoint in the code, displayed as a blue circle.

When running the application, the server stops at the breakpoint. Note that you haveto run the server in Debug mode: Instead of selecting Run on Server, right-clicklogin.jsp, then select Debug > Debug on Server. If you were already running theserver, you'll be prompted to restart the server.

When the program hits the breakpoint for the first time, Rational ApplicationDeveloper asks whether you want to switch to the Debug perspective. The Debugperspective allows you to step through your code, look at variables, and perform allyour debugging from the convenience of your workbench (see Figure 19).

Figure 19. Debug code from your workbench




37/41

The Inspector

The Inspector is another useful tool. Suppose that after you've stopped at thebreakpoint, you want to know what string value is stored in the username variable.Double-click the variable to mark it, then right-click the variable and select Inspect.A pop-up window (see Figure 20) allows you to view the value of the markedvariable (in this case, the value is Jane).

Figure 20. View the value of the marked variable




38/41

Finally, remember that Rational Application Developer is a well-integrated

environment. If you change code even within a running application, the changes takeeffect immediately -- all within one environment.

Packaging

Now that you've tested the message center and feel comfortable with the Webapplication, you're ready to deploy it on a computer running WebSphere ApplicationServer Version 6.0. You need to package your Web application in a Web Archive(WAR) file within an Enterprise Archive (EAR).

1. In the Web perspective, navigate to the Project Explorer and open theEnterprise Applications folder.

2. Right-click MessagingCenterEAR and select Export > EAR File.

3. In the EAR project drop-down list, select MessagingCenterEAR.

4. In the Destination field, type the location and name of the EAR file youwant to create and click Finish.

Section 8. Summary

In this tutorial, you learned how to use Rational Application Developer Version 6.0 todevelop an end-to-end Web application. Using servlets and JSP forms, the tutorial




39/41

demonstrated how to use Rational Application Developer to develop a basicmessaging center. Starting with the back-end Java code for managing users andmessages, you then built a set of servlets and JSP files implementing messagingfunctionality and generating a presentation layer in the form of HTML pages. TheseHTML pages were dynamically generated based on the data maintained by the Java

objects. When development was complete, you used the Rational ApplicationDeveloper Version 6.0 server tools to test and debug your dynamic Web site. Finally,you learned how to package your Web application for deployment to a computerrunning WebSphere Application Server.




40/41

Resources

Learn

A tutorial on building Java HTTP servlets is available on IBM developerWorks.

Join a live IBM Rational Software Development Platform webcast andparticipate in the Q&A session or replay the recorded webcasts at yourconvenience.

The Java Servlet technology home page includes the latest specification as wellas a reference servlet server implementation.

The JavaServer Pages home page includes the latest specifications as well aspointers to custom tag libraries and other advanced JSP technologies.

The DHTML school Web page includes resources, examples, and referencematerials.

For information about the Rational family of development tools, see WebSpheresoftware home page.

The Eclipse project can be found at www.eclipse.org.

The Apache Jakarta Taglib project can be found athttp://jakarta.apache.org/taglibs.

The Sun tag library page can be found athttp://java.sun.com/products/jsp/taglibraries.html.

Check out SDO for a good introduction on Service Data Objects (SDO).

For a good article on Struts and JSF, see the IBM developerWorks articleIntegrating Struts, Tiles, and JavaServer Faces.

For a good tutorial on using JSF, see the IBM developerWorks tutorial IBMWebSphere Developer Technical Journal: Developing JSF Applications usingWebSphere Studio V5.1.1 -- Part 1.

Get products and technologies

Register to download Rational Application Developer Version 6.0.

Register to download a copy of WebSphere Application Server Version 6.0.

Discuss

Participate in the discussion forum for this content.

About the author


http://www.ibm.com/developerworks/edu/j-dw-javaservlets-i.html?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/views/global/webcasts.jsp?search_by=Software+Development+Platform+Webcast&search_flag=true&sort_by=Date&S_TACT=105AGX15&S_CMP=TUThttp://java.sun.com/products/servlet/http://java.sun.com/products/jsp/http://www.w3schools.com/dhtml/default.asphttp://www.ibm.com/software/info1/websphere/index.jsp?tab=products/studiohttp://www.ibm.com/software/info1/websphere/index.jsp?tab=products/studiohttp://www.eclipse.org/http://jakarta.apache.org/taglibs/http://java.sun.com/products/jsp/taglibraries.htmlhttp://www.ibm.com/developerworks/java/library/j-sdo/http://www.ibm.com/developerworks/java/library/j-integrate/index.htmlhttp://www.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/downloads/r/rad/?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/downloads/ws/was/?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/community/http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/community/http://www.ibm.com/developerworks/downloads/ws/was/?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/downloads/r/rad/?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html?S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/java/library/j-integrate/index.htmlhttp://www.ibm.com/developerworks/java/library/j-sdo/http://java.sun.com/products/jsp/taglibraries.htmlhttp://jakarta.apache.org/taglibs/http://www.eclipse.org/http://www.ibm.com/software/info1/websphere/index.jsp?tab=products/studiohttp://www.ibm.com/software/info1/websphere/index.jsp?tab=products/studiohttp://www.w3schools.com/dhtml/default.asphttp://java.sun.com/products/jsp/http://java.sun.com/products/servlet/http://www.ibm.com/developerworks/views/global/webcasts.jsp?search_by=Software+Development+Platform+Webcast&search_flag=true&sort_by=Date&S_TACT=105AGX15&S_CMP=TUThttp://www.ibm.com/developerworks/edu/j-dw-javaservlets-i.html?S_TACT=105AGX15&S_CMP=TUT


41/41

Ron Ben-Natan

Ron Ben-Natan, a Studio B author, is CTO and VP, R&D, at Guardium Inc. -- aleader in data access security solutions. Prior to that, he worked for companies suchas Intel, AT&T Bell Laboratories, Merrill Lynch, J.P. Morgan, and ViryaNet. He has aPh.D. in Computer Science in the field of distributed computing and has been

architecting and developing distributed applications for more than 15 years. Hishobby is writing about how technology is used to solve real problems, and he hasauthored and co-authored numerous books, including Implementing DatabaseSecurity and Auditing, Mastering IBM WebSphere Portal, CORBA: A Guide toCommon Object Request Broker Architecture, The San Francisco Developer's Guide,and IBM WebSphere: The Complete Reference. He has also written numerousarticles and tutorials.

http://www.studiob.com/http://www.studiob.com/

Date post:	08-Apr-2018
Category:	Documents
Upload:	rina-gupta
View:	221 times
Download:	0 times

Website Using RAD

Documents