Web Sphere Tutorial

8/2/2019 Web Sphere Tutorial

1/42

Building dynamic Web sites with WebSphereStudio V5.1.1

WebSphere makes Web development a snap

Skill Level: Introductory

Ron Ben-Natan ([email protected])CTO and VP

Guardium Inc.

07 Jan 2004

This tutorial demonstrates how to use WebSphere Studio V5.1.1 for building dynamicWeb sites. The tutorial walks you through a simple example that makes use of Javaservlets and JavaServer Pages in order to implement a simple messaging center.Using WebSphere Studio, you learn how to develop dynamic Web sites and then

how to test and debug your code.

Section 1. Before you start

Should I take this tutorial?

Take this tutorial if you are a developer or Web site builder and you want to quicklylearn how to use WebSphere Studio to build dynamic Web sites. This tutorial

assumes you have a basic knowledge of HTML and Java. Because WebSphereStudio V5.1.1 is easy to use, you'll find the tutorial easy to follow even if you're abeginner to HTML and Java.

Although downloading WebSphere Studio V5.1.1 is not a prerequisite for completingthis tutorial, it does make the tutorial easier to follow. You can download the toolfrom the Prerequisites page. The installation process is straightforward and hasslefree, although you will need to complete a short registration form. WebSphere Studio

Building dynamic Web sites with WebSphere Studio V5.1.1 Trademarks Copyright IBM Corporation 2004. All rights reserved. Page 1 of 42
mailto:[email protected]://www.ibm.com/developerworks/ibm/trademarks/http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/ibm/trademarks/mailto:[email protected]


2/42

Site Developer is used in this tutorial but you can choose to download and useWebSphere Studio Application Developer V5.1.1 if you prefer -- all of the steps andscreens remain identical. Application Developer includes all the functions within SiteDeveloper, and other functions that will not be used in this tutorial.

What is this tutorial about?

This tutorial illustrates how to develop a Web application using Java servlets andJavaServer Pages (JSPs), how to organize code in a project within WebSphereStudio V5.1.1, and how to use Java servlets and JSP files to generate dynamicHTML content. It also shows how to test and debug code within WebSphere StudioV5.1.1 and how to package a Web application for deployment on a WebSphereApplication Server.

The tutorial makes use of a simple application -- the messaging center. Using the

messaging center, users can log in and view messages that have been sent to them.They can also send messages to any other user that has access to the messagingcenter. Using WebSphere Studio V5.1.1 in conjunction with Java, Java servlet andJSP technologies, you will build the following:

User and Message Java classes

Two JSP forms: login.jsp and messageCenter.jsp

Two servlets: MessageCenterLoginServlet and AddMessageServlet

PrerequisitesTo run the examples in this tutorial, you'll need the following software:

WebSphere Studio Version 5.1.1.

WebSphere Application Server Version 5.1. You can download the latesttrial version of Application Server at no charge.

Trademarks

IBM and WebSphere are trademarks or registered trademarks of IBM Corporation inthe United States, other countries, or both.

Windows and Windows NT are registered trademarks of Microsoft Corporation in theUnited States, other countries, or both.

Java and all Java-based trademarks and logos are trademarks or registered

developerWorks ibm.com/developerWorks

http://www-128.ibm.com/developerworks/downloads/ws/was/?S_TACT=105AGX10&S_CMP=TUThttp://www-128.ibm.com/developerworks/downloads/ws/was/?S_TACT=105AGX10&S_CMP=TUThttp://www.ibm.com/developerworks/ibm/trademarks/http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/ibm/trademarks/http://www-128.ibm.com/developerworks/downloads/ws/was/?S_TACT=105AGX10&S_CMP=TUThttp://www-128.ibm.com/developerworks/downloads/ws/was/?S_TACT=105AGX10&S_CMP=TUT


3/42

trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

UNIX is a registered trademark of The Open Group in the United States and othercountries.

Other company, product, and service names may be trademarks or service marks ofothers.

IBM copyright and trademark information

Section 2. What's new in WebSphere Studio

Version 5

WebSphere Studio V5 is a major revision of WebSphere Studio and has manyfeatures above and beyond those that were available in V4. One of the mostimportant new features in WebSphere Studio V5 is that it is the first version fullybased on the Eclipse open source project (see Resources for a link) but in additionto that, WebSphere Studio V5 has improved functionality in all aspects of Java andWeb development. WebSphere Studio V5 includes:

Support for J2EE 1.3 including EJB 2.0, Servlet 2.3, and JSP 1.2 levels

Concurrent support for WebSphere Application Server Version 4 (J2EE1.2) and WebSphere Application Server Version 5 (J2EE 1.3)

Accessibility support

Enhanced integration with Rational ClearCase LT and new support fornamespace versioning

Numerous updates and new functions for Java, Web services, XML,Database, Test and Analysis, and Web components

In terms of added features or Web development, WebSphere Studio V5 now

improves upon the existing wizards and tools creating an even better integrated Webdevelopment environment for building dynamic Web applications. The Webdevelopment environment includes:

Custom JSP tags (taglib) support, based on the JSP 1.2 specification

New support for XHTML

ibm.com/developerWorks developerWorks

http://www.ibm.com/legal/copytrade.phtmlhttp://www.ibm.com/developerworks/ibm/trademarks/http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/ibm/trademarks/http://www.ibm.com/legal/copytrade.phtml


4/42

Site level Web management templates and support

Integrated easy-to-use visual layout tool for JSP and HTML file creation,validation editing, and debugging

JavaScript editing and validation

An extensible view, called the Library view, which allow users to catalogand organize reusable programming objects, such as HTML, JavaScript,and JSP code, along with files and tag libraries

Image editing and animation

Cascading Style Sheet (CSS) editing support

HTTP/FTP import

FTP export to a server

Link viewing, parsing, validation, and management, which includesconverting links, flagging broken links, and fixing links as resources aremoved or renamed

Enhanced wizard to create new servlets and add servlet mapping to thedeployment description ( web.xml ) file

Web project creation, using the J2EE container structure

Generation of Web applications using wizards that create Web resourcesfrom database queries and bean

V5.1.1

In addition, WebSphere Studio V5.1.1 adds the following above and beyond V5:

Web Site Designer allowing you to visually create, import, and managecomplete Web sites

An enhanced Web Perspective making building HTML, JSP andJavascript easier

Enhancements to Page Designer and Visual Editor for Java making your

development experience even better

Hot method replacement allowing code you change within the debuggerto be immediately replaced within your embedded server environment;you no longer have to restart the server during your debug cycle

Support for the de-facto Java application framework standard Struts 1.1


http://www.ibm.com/developerworks/ibm/trademarks/http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/ibm/trademarks/


5/42

The Web Services Description Language (WSDL) Editor and the WebServices Explorer used for building Web services conforming to the WS-IBasic Profile 1.0

Support for Java APIs for XML based RPC (JSR-101) and Enterprise

Web Services in Java (JSR-109).

Support for DB2 UDB V8.1

Support for SQLJ

WebSphere Application Server (WAS) 5.1 is now the default embeddedtest environment

Improved performance

Section 3. Elements of dynamic Web sites

The static Web

When the World Wide Web was born, it consisted of static Web sites. Web sitesconsisted of static documents (mostly HTML pages) that were accessible throughWeb servers. Users used Web browsers to access these Web sites. A Web browsercommunicated with a Web server over the Hyper Text Transfer Protocol (HTTP).

Using an HTTP request, the browser communicated with the Web server and askedto get access to a certain document. The Web server managed a set of documentsstored on a file system. When asked for a document, it would retrieve it and return itwithin an HTTP response:

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 applicationsand reformatting their user interface, and by performing computations based on user




6/42

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 executes

within the context of the application server and performs business logic, accessesdata stores, and more. It then dynamically generates the HTML that is returned tothe browser within the HTTP response:

A new generation of tools

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 VM for running Java on the client (in the form of applets). Using a technologycalled Dynamic HTML (DHTML), the pages returned to the browser can themselvesinclude many dynamic components that make for a better 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 tools

need to facilitate building applications that include server-side components such asservlets and JSP. They also need to support the entire code/test/debug life cycleand need to combine advanced testing and debugging environments in addition to adevelopment environment. WebSphere Studio V5.1.1 is 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're




7/42

familiar with these technologies, you can go to the Building a dynamic Webapplication section.

Java, servlets and JSP

Java has emerged as the premier environment for building server-side applicationcode. Using Java makes it easy to build well-structured object-oriented code, toaccess data stores, and to build robust business logic.

In the context of this tutorial, back-end Java code runs within a Java applicationserver. A Java application server uses a Java Virtual Machine (JVM) to executeJava code. The Java code in this tutorial includes objects representing real-worldentities (like users and messages) as well as servlets and JSP.

You'll build all your code in this tutorial within WebSphere Studio V5.1.1. This singleintegrated environment allows you to simply compose your business entities, buildthe business transactions using servlets, and build the JSP files used to generatethe user interface. WebSphere Studio V5.1.1 supports the servlet specificationversion 2.3 and the JSP specification version 1.2. As part of JSP 1.2, WebSphereStudio V5.1.1 also supports custom tag libraries (sometimes called taglibs).

Servlets

Servlets are Java classes that implement the Servlet interface. The Servlet interfacedefines a doGet and a doPost method for handling client requests. HTTPServlets 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. This creates the page that is returned to the browser.

As a simple example, the following servlet retrieves a username from the requestparameters and prints a hello string:

import 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");




8/42

// tell the browser that the content is an HTML pageres.setContentType("text/html");

// Generate the dynamic contentPrintWriter out = res.getWriter();out.println("");out.println("Hello " + username);out.println("");out.close();

}

JavaServer Pages

Hard coding HTML within Java code is bad form because it creates inflexible code.HTML elements become strings hard coded within Java print commands (as shownin 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. JSPs solve this problem by embedding Java codethat generates dynamic content within the HTML page. As an example, theSimpleHelloServlet can be replaced with the following JSP:

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 is usually HTML when building dynamic Web sites.

Taglibs

JSPs allow embedding Java code within tags from the HTML tag set. That meansthat the tags in a JSP come from a finite and limited group that deals mostly withlayout. This is limited in terms of how expressive you can make your tag-centricpage; much of the behavior tends to be implemented as calls to various Javamethods and the page ceases to "belong" to the page designer.

WebSphere Studio V5.1.1 supports the JSP1.2 standard and with it custom taglibraries - taglibs. Taglibs allow you to extend the tag/element vocabulary of yourJSP by allowing you to define new elements that can be used inside a JSP as anyother tag. By providing a tag implementation class you define how the Webcontainer will process the tag when the JSP is evaluated. For example, you can




9/42

easily implement a new tag that will print out the value of the username parameter inwhich case the JSP code fragment from the previous panel could become a simple:

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

Taglibs make authoring JSP pages easier and increase productivity by encouraginga division of labor between library developers and library users. Taglibs are createby a developer who is an implementation expert and are used by Web page authorswho, by building on these libraries, can produce most functional and higher qualityapplications.

Because taglibs are part of the JSP1.2 standard they are also portable and

supported by all major J2EE environments. This in turn means that many peoplewrite taglibs and that you can often find great reusable resources. Two importantstarting point are the Sun taglib page at:http://java.sun.com/products/jsp/taglibraries.html and the Jakarta taglib project athttp://jakarta.apache.org/taglibs/.

Dynamic HTML

Dynamic HTML (DHTML) = HTML + Javascript + Document Object Model (DOM) +Cascading Style Sheets (CSS).

While DHTML is not the topic of this tutorial, it is important to remember that DHTMLis an important technology in building dynamic Web sites. DHTML is a collection ofclient-side technologies. A DHTML page is delivered by the server and runs withinthe Web browser, 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 and


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


10/42

improve the user experience. An example is the use of Javascript to do client-sidevalidations to eliminate unnecessary network traffic.

Most of the scripts that run within the browser need to access the elements on thepage, i.e., the HTML elements. The Document Object Model (DOM) defines a set of

objects that are directly related to the HTML elements on the page. The DOM allowsJavascript code to refer to each HTML element on the page as an object withattributes and methods. As an example, Javascript code can access a text field in anHTML form as an object, retrieve its current value, and even change the value. TheJavascript code can even access an HTML table as an object and add rows bymanipulating the table object -- all completely within the browser.

Cascading Style Sheets (CSS) are used to associate formatting information withHTML elements. Instead of hard coding this information as HTML markup (such asbold and italics), all formatting information is externalized to a CSS file andassociated with the HTML elements. This makes it easy to quickly and uniformlychange the appearance of a complete Web site.

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. Building a dynamic Web application

Getting started with WebSphere Studio V5.1.1

The use of WebSphere Studio V5.1.1 to develop dynamic Web sites is illustrated bydeveloping a simple Web application. The messaging center application allowsusers to send messages to one another. Every user may log into the Web site andview all of the messages sent to them. For every message, users see who sent themessage, and the message text. A user may then send a message to any otherregistered user.

The focus of this tutorial is the use of WebSphere Studio V5.1.1 to build such adynamic Web application, not the application itself. The messaging centerapplication is not a complete application and it includes many shortcuts. Forexample, there is a limited set of possible users (instead of maintaining the users ina database), login does not require a password, no error handling is performed, andmessages cannot be edited or grouped.




11/42

Elements within the messaging center application

Before delving into the code, it's useful to take a high-level view of the componentsyou'll build and how they interact with each other. The following scheme shows an

example flow:

A user starts by accessing a login of the formhttp://localhost/MessagingCenter/login.jsp. The JSP engine processes the JSP filesand generates an HTML form that is returned and displayed by the browser. Theuser enters a username and clicks the submit button. This makes a call to theMessageCenterLoginServlet running on the application server. If there is anerror, the servlet forwards handling to the login JSP. The login JSP creates an errormessage and presents the login form for the user to try again. If the username iscorrect, the servlet prepares the object with the message data and forwards handling

to the message center JSP. The JSP generates dynamic content, which is based onthe messages, as an HTML page that is returned to the browser. Using an HTMLform, the user can send a message to another user by clicking the submit button,which makes a call to AddMessageServlet.

Creating the messaging center project




12/42

If you're following along with a running copy of WebSphere Studio V5.1.1, select File=> New => Project to create a new project. A project contains files and folders, andit's how you organize resources within the WebSphere Studio V5.1.1 workbench.WebSphere Studio V5.1.1 supports many types of projects, as shown in the leftpane of the wizard below.

Select Web in the left pane and Dynamic Web Project in the right pane, and thenclick Next. WebSphere Studio V5.1.1 will create a new project for a Web applicationand generate resources required for dynamic Web applications such as servlets,JSP files, HTML pages, etc.

Enter a project name -- MessagingCenter in this example. Before lettingWebSphere Studio V5.1.1 create the project lets add a few standard tag libraries.Click on the Configure advanced options check box and click Next. In the next

panel leave the default J2EE level (1.3) because you need to have version 2.3 of theservlet specification and version 1.2 of the JSP specification. Click Next.

Selecting standard tag

In the Feature Page panel you can add features to your Web project:




13/42

Select Tag Libraries for accessing JSP objects, Utility Tag Libraries and the JSPStandard Tag Library -- and click Finish. WebSphere Studio V5.1.1 goes to workand creates the Web project and the various resources needed for a Webapplication.

The WebSphere Studio V5.1.1 workbench now assumes the Web Perspective andin the Project Navigator you will see both the MessagingCenter project as well as aDefaultEAR project (encapsulating your work in an enterprise archive that can laterbe installed on a production WebSphere Application Server). A perspective definesthe initial set and layout of panes in the workbench. This concept introduces a

role-based customization of the views and editors; it is a user-centric metaphorbringing together all the tools useful for a certain role. Views provide different waysto look at a certain resource, and editors are used to create and modify code.WebSphere Studio V5.1.1 includes a variety of different editors suitable for specificfile types such as HTML files, JSP files, Java source files.

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




14/42

Section 5. Building the back end: Java and servlets

Building User.java and Message.java

First you need to build the Java class that will be used to represent the user. Tocreate a Java class, right-click on the source folder within the Project Navigator paneon the workbench and select New => Other :

This brings up a wizard in which you select Java in the left pane and Class in theright pane. Click Next. This brings up the Java class editor. You need to set theclass name (User) and the package name (com.ibm.tutorials.wssd). All therest (including the superclass java.lang.Object) remains as default. At thispoint, you also need to create a Java class that represents the message object. Thecode for both classes is shown in User and Message class code.




15/42

User and Message class code

Below is the code for the User.java and Message.java classes. After bothclasses are created, the Project Navigator pane will appear as shown in the figure

following the code.

User.java class code:

package com.ibm.tutorials.wssd;

import java.util.Vector;import java.lang.String;

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

// Simple implementation of a set of users -

// only for illustartion 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;

}

}

Message.java class code:




16/42


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;

}}

Building the project

You can rebuild the project at any point while you're editing resources -- and in fact,WebSphere Studio does a partial build every time you save your changes.Rebuilding the project means that WebSphere Studio V5.1.1 will try to compile allJava code, do syntax checking on all resources, and check references between the

different elements of the Web application. If, for example, you misspell the importstatement for the class String (as shown below, where we have importedjava.util.String instead of java.lang.String ), WebSphere Studio V5.1.1will signal the error as well as the error message and the location of the error, asshown below:




17/42

Once you've fixed all errors, select Project => Rebuild All and save your currentworkbench.

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

Creating the MessageCenterLoginServlet

The MessageCenterLoginServlet is responsible for looking up the user basedon the username, and for preparing the collection of messages to be displayed forthat user. It does not generate the dynamic content (i.e., the HTML); a JSP will dothat.

To create the servlet, right-click on one of the folders in the Project Navigator pane(e.g., the Java Source folder or the com.ibm.tutorials.wssd folder) and select New=> Servlet :




18/42

The Create the Servlet Class dialog

In the New Servlet dialog, set the class name (MessageCenterLoginServlet)and the package name (com.ibm.tutorial.wssd). The superclass remainsjavax.servlet.http.HttpServlet. Click Next. By default both the doGet anddoPost methods are checked for code creation in the last panel of the wizard (so ifthis is the behavior you want you can click Finish in the panel on which youspecified the servlet name.




19/42

When the wizard completes its work, you'll have a skeleton servlet class with thefollowing code:


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;

/**




20/42

* @version 1.0* @author*/

public class MessageCenterLoginServlet extends HttpServlet {

/*** @see javax.servlet.http.HttpServlet#void

(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)*/public void doGet(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

}

/*** @see javax.servlet.http.HttpServlet#void

(javax.servlet.http.HttpServletRequest,javax.servlet.http.HttpServletResponse)

*/public void doPost(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

}

}

Implementing the MessageCenterLoginServlet

Now you need to implement the behavior of the servlet. The servlet needs toprocess 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.This ensures that the behavior is identical regardless of what action was used:

public void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {this.doPost(req, resp);

}

Now it's time to implement the doPost method. First, you need to get the usernamefrom the request. If it is null, set an error message and dispatch the handling to thelogin JSP (all HTML will be generated by JSP files). The login JSP will then generatethe HTML based on this error message:

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

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

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

}




21/42

Using auto-completion to finish the servlet

One of the more useful features of WebSphere Studio V5.1.1 is auto-completion. Ifyou forget which methods are applicable within a certain context, you can place the

cursor after the period following a variable name and type CTRL + space to bring upa context-sensitive list of possible methods based on the object in the context. As anexample, if you forget which method of the request object you should use wheninserting the error message, you can bring up the coding assistant as follows:

Back to the code -- with the username in hand, you can proceed to look up theUser object using the facilities coded in the User class. If a User object is notfound, you can use another error message. If a User object is found, place it in thesession object and forward handling to the JSP file responsible for displaying themessages:

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

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

}

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

This completes the servlet responsible for accessing the "business objects." You are

ready for the servlet handling the "business transaction."

The 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 will be




22/42

invoked from an HTML form within the message center.

Building the servlet follows the same process as that of building theMessageCenterLoginServlet. The method implementing the sending of themessage has two parameters: the username of the recipient of the message, and

the text message to be sent. The originator of the message is retrieved from thesession object:


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

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

/*** @version 1.0* @author*/

public class AddMessageServlet extends HttpServlet {

/*** @see javax.servlet.http.HttpServlet#void (javax.servlet.http.HttpServletRequest,

javax.servlet.http.HttpServletResponse)*/

public void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {

this.doPost(req, resp);}

/*** @see javax.servlet.http.HttpServlet#void (javax.servlet.http.HttpServletRequest,

javax.servlet.http.HttpServletResponse)*/public void doPost(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {String recipient = req.getParameter("recipient");String messageText = req.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 = req.getSession(false);if (session == null) {

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

}

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

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

}

// 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 message




23/42

User messageReceiver = User.getUser(recipient);Message message = new Message(user.getName(), messageText);messageReceiver.addMessage(message);

}}

The back-end code is now ready. It is time to move on to build the presentationlayer.

Section 6. Building the presentation layer: JSP

login.jsp and messageCenter.jspThe presentation layer consists of a set of JSP files. JSP files are the perfectelements for implementing the messaging center screen generators because thescreens need to be HTML pages but they are dynamically created based on theback-end entities. As a result of submissions from the HTML forms, methods withinthe servlets described previously are invoked.

The JSP files created in this section are as follows:

login.jsp : Responsible for generating the HTML form for capturing the

username and invoking the MessageCenterLoginServlet

messageCenter.jsp : Responsible for displaying the messages sent tothe user who is currently logged in as an HTML table. Also generates aform allowing the user to send a message.

Building login.jsp

WebSphere Studio V5.1.1 has an editor for building JSP files following the feel ofHTML builders. To create the JSP file, right-click on the Web Content folder andselect New => JSP File. Then enter the JSP file name as shown below:




24/42

The New JSP File wizard can help you specify many of the JSP's attributes. Whileyou can click the Finish button on the first step of the wizard, you can also checkConfigure advanced options and continue with the other panels in the wizard.

Using the wizard you can specify explicit init and destroy method stubs, initializeparameters for the servlet that is automatically generated from the JSP, attach stylesheets, define the DTD used in the JSP (WebSphere Studio V5.1.1 supportsXHTML) and specify the tag libraries to be used from within the JSP -- the topic ofthe next panel. Go ahead and click the Next button.

Importing tag libraries

The New JSP File wizard allows you to specify which tag libraries will be used fromwithin the JSP. Click the Add... button. This opens up the next panel on which you

can select the tag libraries you will use:




25/42

WebSphere Studio V5.1.1 shows you a form of a catalog of taglibs including taglibraries from the Apache Jakarta project, the JSTL core library and much more. Youcan also import additional tag libraries into the catalog using the Import... button.

Select the JSTL core library and click OK. You can change the prefix that will beused within the JSP but the default for the core tag library is the letter c. Back on thepanel from which you added the tag library click the Finish button:




26/42

Now you're ready to start designing the JSP file. 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

In order to build the login JSP page, the first thing you need to include is a use beanelement. The bean in the login.jsp page represents the error message that isdisplayed if, for example, you enter a user that does not exist. Insert the use beanelement using Insert JSP Bean tool by selecting it from the JSP menu item:




27/42

Set the properties of the bean using the property editor:




28/42

The identifier of the bean throughout the page is errorMessage and the beanshould be retrieved from the request object (remember from theMessageCenterLoginServlet that the error message is placed usingrequest.setAttribute(errorMessage) ). The class of the bean is a String.

Once this bean is available in the context of the page, you can display the messageusing a printing element from a taglib. Select JSP => Insert Custom. Then pick outin the right pane, click Insert and then Close and adjust the value to print out theerror message variable. Note that you could also have chosen to use a cout customelement with a value of ${param.errorMessage} in which case the use beanelement would not have been necessary.

Adding static elements to the page

Finally, add the static elements to the page: add a horizontal rule and a form; add atext field for entering the username; and add a submit button to the form. Theresulting page in the designer looks as follows:




29/42

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

login.jsp

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

Building messageCenter.jsp

The messageCenter JSP is very similar to the login JSP. Start by creating a newJSP file by right-clicking on the Web Content folder in the Navigator pane andselecting New => JSP File. Enter messageCenter.jsp as the JSP name, clickNext, add the JSTL taglib and click Finish. Then move over to the designer and




30/42

drag the following elements onto the canvas:

A use bean element for getting the User

Static text (simply type in the text you want to display, in our case the

string "Welcome") Property display element for displaying the username

Static text ("Your messages are as follows")

HTML table

Within the table you need to place a Java loop. Each iteration of the loopcreates a new TR element with the message sender and text in TDs. Theloop is created using the JSTL core tag library, which supports iteration asfollows:

Select JSP => Insert Custom... This opens the Insert Custom Tagwizard. The wizard displays all the taglibs in your JSP and theavailable custom tags:

Select forEach for an iteration loop and click Insert. Iteration for thiselement should be on ${user.messages}.

HR element

A form for sending a new message




31/42

A text field for the recipient of the message

A text area for the message text

A submit button for the form

When you're done with the designer, the page should look as follows:

The JSP code is generated by WebSphere Studio V5.1.1:

messageCenter.jsp




32/42

.
Welcome . Your messages as following:

FromTo

Send message to:

You're done with the coding of the application and can move on to testing themessage center. Before doing so rebuild the project.

Section 7. Testing the message center

Starting the server

WebSphere Studio V5.1.1 comes with an embedded instance of the WebSphereApplication Server V5.1.1. This is called the WebSphere test environment withinWebSphere Studio V5.1.1. It means that you can publish your Web application andtest it as it before deploying to a production WebSphere instance.

To test the application, right-click on the login.jsp page and click Run on Server;leave the default selected WebSphere V5.1 test environment and if you don't want tobe prompted next time mark the Set server as project default check box:




33/42




34/42

The application will be published to the server and the test environment will beinitialized. You will see many printouts on the console; the last two lines should be ofthe form:

[11/29/03 9:48:40:507 EST] 3e864999 WsServer

A WSVR0001I: Server server1 open for e-business[11/29/03 9:49:04:071 EST] 4c4498a WebGroup I SRVE0180I: [MessagingCenter][/MessagingCenter] [Servlet.LOG]: /login.jsp: init

The phrase "Server ... open for e-business" means that the WebSphere ApplicationServer environment has been successfully started.

An example message

The top right pane is a browser view that displays the login HTML (the HTML pagegenerated by login.jsp). If you proceed to log in using one of the fixed usernames,you can start sending messages among the users. Remember that since messagesare not persistent, all these messages will be lost if you shut down the server.

As an example, suppose you want to send a message from Joe to Jane. Log in asJoe as follows:

In Joe's message center enter the text for a message to send to Jane and clickSubmit:




35/42

Now, go back to the login page and login as Jane; Jane's message center shouldlook as follows:

Debugging the application




36/42

One of the really great things about WebSphere Studio V5.1.1 is that theWebSphere test environment is very tightly integrated. That means that you don'thave 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 of

tools.

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 as shown below:

You can also simply double-click on the right of the pane. This sets a breakpoint inthe code, displayed as a blue-green circle:

When running the application, the server will stop at the breakpoint within the ServerPerspective (note that you have to run the server in debug mode - for example,instead of selecting Run on Server right-click on login.jsp and select Debug onServer ). When you login next time you will be asked whether you want to enter and




37/42

debug the method using the debug view:

The InspectorThe Inspector is another useful tool. Suppose that once you have stopped at thebreakpoint you want to know what string value is stored in the username variable.Double-click on the variable to mark the variable, then right-click and pick theInspect entry. The top right pane now allow you to view the value of the markedvariable as follows (in our case the value is "Jane"):

Finally, remember that WebSphere Studio V5.1.1 is a very well-integratedenvironment. If you change code even within a running application you can see the




38/42

changes take effect immediately -- all within one environment.

Packaging

Now that you have tested the message center and feel comfortable with the Webapplication, you're ready to deploy it on a WebSphere Application Server. You needto package your Web application in a Web Archive (WAR) file within a EnterpriseArchive (EAR). Recall that when you created the MessagingCenter projectWebSphere Studio V5.1.1 automatically created a DefaultEAR project for you - all inorder to help in the packaging process. To create the EAR file, right-click on theMessagingCenter folder and select Export:




39/42

In the Enterprise Application project name drop down list, select DefaultEAR. Inthe Destination field, enter the location and name of the EAR file you want tocreate. Finally, click Finish.




40/42

Section 8. Summary

In this tutorial you learned how to use WebSphere Studio V5.1.1 to develop anend-to-end Web application. Using both servlets and JSPs the tutorial demonstratedthe use of WebSphere Studio V5.1.1 to develop a basic messaging center. Startingwith the back-end Java code for managing users and messages, you then built a setof servlets and JSP files implementing messaging functionality and generating apresentation layer in the form of HTML pages. These HTML pages were dynamicallygenerated based on the data maintained by the Java objects. Once developmentwas completed, you used the WebSphere Studio V5.1.1 server tools to test anddebug your dynamic Web site. Finally, you learned how to package your Webapplication for deployment in a WebSphere Application Server.




41/42

Resources

Learn

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

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 on the WebSphere Studio Family of Development tools, seehttp://www-3.ibm.com/software/info1/websphere/index.jsp?tab=products/studio.

The Eclipse project can be found at www.eclipse.org The Apache Jakarta Taglib project can be found at

http://jakarta.apache.org/taglibs/.

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

Stay current with developerWorks technical events and Webcasts.

Get products and technologies

Register to download a copy of WebSphere Application Server.

Build your next development project with IBM trial software, available fordownload directly from developerWorks.

Discuss

Participate in the discussion forum for this content.

About the author

Ron Ben-Natan

Ron Ben-Natan, a Studio B author, is CTO and VP, R&D at GuardiumInc. -- a leader in data access security solutions. Prior to that he workedfor companies such as Intel, AT&T Bell Laboratories, Merrill Lynch, J.P.Morgan and ViryaNet. He has a Ph.D. in Computer Science in the fieldof distributed computing and has been architecting and developingdistributed applications for over 15 years. His hobby is writing abouthow technology is used to solve real problems, and he has authored


https://www14.software.ibm.com/webapp/iwm/web/preLogin.do?source=dw-javaservlets&S_TACT=105AGX10&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.eclipse.org/http://jakarta.apache.org/taglibs/http://java.sun.com/products/jsp/taglibraries.htmlhttp://www.ibm.com/developerworks/offers/techbriefings/?S_TACT=105AGX10&S_CMP=TUThttp://www.ibm.com/developerworks/downloads/ws/wasce/http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX10&S_CMP=TUThttp://www-128.ibm.com/developerworks/community/http://www.studiob.com/http://www.ibm.com/developerworks/ibm/trademarks/http://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/legal/copytrade.shtmlhttp://www.ibm.com/developerworks/ibm/trademarks/http://www.studiob.com/http://www-128.ibm.com/developerworks/community/http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX10&S_CMP=TUThttp://www.ibm.com/developerworks/downloads/ws/wasce/http://www.ibm.com/developerworks/offers/techbriefings/?S_TACT=105AGX10&S_CMP=TUThttp://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.w3schools.com/dhtml/default.asphttp://java.sun.com/products/jsp/http://java.sun.com/products/servlet/https://www14.software.ibm.com/webapp/iwm/web/preLogin.do?source=dw-javaservlets&S_TACT=105AGX10&S_CMP=TUT


42/42

and co-authored numerous books, including CORBA: A Guide toCommon Object Request Broker Architecture, CORBA on the Web, andThe San Francisco Developer's Guide, all published by McGraw-Hill;IBM WebSphere Starter Kitand IBM WebSphere: The CompleteReference, both published by Osborne/McGraw-Hill; and Integrating

Service Level Agreementspublished by John Wiley & Sons. He is alsothe author of numerous articles and tutorials.


Web Sphere Tutorial

Documents

Transcript of Web Sphere Tutorial