Developing Web Applications
Peter Komisar © Conestoga College  version 1.0  Fall / 2007

Reference:  Third Draft Document for Review, Sept. 17,2007,
SG24-7501-00 'Rational Application Developer V7 Programming
Guide'.

This is a synopsis of information found in the latter part of
the 12th chapter, 'Developing Web Applications with Servlets
and JSPs'  found in the third draft Document for Review, dated
October 23, SG24-7501-00 Rational Application Developer V7
Programming Guide. It has been prepared for private academic
purposes and is not an effort to publish the contained material.

Any anonymous quotes are from the above noted reference. 

Introduction to J2EE Web Applications & Review

J2EE supplies a framework for building and deploying
Web applications in Java. The key building blocks are
servlets and JSPs on which other technologies like Struts
and Java Server Faces are based.

Their primary function is to process web requests and
responses. JSPs combine HTML and Java code which
is compiled into a servlet.

JSPs and servlets are typically part of the 'presentation
layer' of a larger business application.  Core business
functions are usually separated out into a clearly defined
set of interfaces, so that these components can be maintained
independently.This business logic will often be contained
in Enterprise JavaBeans. 

Struts, JavaServer Faces (JSF), various JSP tag libraries
and other technologies extend the JSP and servlets framework
in different ways to improve aspects of J2EE Web development.

// JSF facilitates the creation of reusable UI components.

Using JSPs with servlets and HTML is  the simplest option
for building J2EE Web applications.

// see figure 12-1 in the pdf

J2EE applications

At the top level, the J2EE specification describes two
application types, the web application stored in a WAR
file and an enterprise application stored in an EAR file
or enterprise Application Resource file.

The WAR and the EAR are zip files with predefined
directory structures. Web applications generally contain
Web components while the enterprise application
contains the entire application and may itself include
a number of WAR files.


Enterprise Applications

An enterprise application 'project' holds the set of
resources needed to deploy a J2EE enterprise
application to Application Server and may contain
On deployment, the EAR file is extracted by the
application server and each of the individual
components, EJB modules, WAR files and any
associated JAR files are deployed. Shared JAR
files are scoped to be available for the whole
application.

// while typical EJBs don't have to be used
 
"A Web application server publishes the contents
of a WAR file under a defined URL root (called a
context root) and then directs web requests to the
right resources returning the response to the requestor. "

Requests may be mapped to:
 When a Web request is received, the application
server looks at the context root of the URL to identify
which WAR the request is intended for, then the server
looks at the contents after the root to identify which
resource to send the request to.

// root identifies the app

Each WAR file has meta information that guides the
application server in its deployment and execution of
the servlets and JSPs within the Web application.

// WARs standard patterns allow porting apps
// between J2EE compliant web servers

Because elements in WARs follow a standard pattern,
Web applications can be ported between different Web
application servers. All J2EE compliant servlet containers,
including the test Web environment provided by RAD
support this specified structure.


The web.xml File

The deployment descriptor for the web application is
called web.xml. The Web application server uses it to
guide the configuration and and running of the Web
application. The deployment descriptor holds:
The Required WEB-INF Directory

The only requirement for the Web application
directory structure is to have a WEB-INF directory.

Resources are accessible by clients which are usually
web browsers via a URL.  Following the contents of
EARs and WARs are listed in detail.

Enterprise Application Archive (EAR)
Web Application Resource (WAR)
The Primary Web Component Classes
JSPs

JSPs allowing mix Java code and HTML. On deployment
or when the first page request occurs, this is decided in the
configuration file, the JSP is compiled into a servlet class.

The combined HTML and Java scriptlets are expressed in
the _jspService method which loads the HttpResponse
variable.

Combining too much complex Java code with HTML may
create very complicated JSP files which should be avoided.

Custom Tags

Custom JSP tag libraries may be used to avoid complexity.
Tags are defined that initiate calls to a Java class. These
classes implement the Tag, BodyTag or IterationTag interfaces.
found in the javax.servlet.jsp.tagext package.

Each tag library is defined by a .tld file. The tld file includes
the location and content of the taglib class file. A reference to
this file needs to be included in the deployment descriptor.


JavaServer Pages Standard Template Library (JSTL)

The JavaServer Pages Standard Template Library provides
tags to handle common,  simple operations required in most
JSP programming tasks.

Some Common Tag Functions

// Example  The RedBank application uses JSTL tags
// to display tables and add URLs to a page


Model-View-Controller pattern

The MVC concept is used to separate business logic
(model) from presentation logic (view). This allows the
view to be changed with impacting the business logic
behind it. Also, many applications may have multiple
views of the same business model. Separating views
allows the easy addition of new views.

This separation is also popularly referred to as 'layering'
where there is a model layer and a view layer.

// a.k.a 'layering

In addition the controller layer sits between the two,
"intercepting requests from the view (or presentation)
layer and mapping them to calls on the business model
and then returning the response". 

The controller layer allows the other views to be free
from flow control and mapping code.

There are other MVC variations built on Servlets
and JSPs including JavaServer Faces (JSF) and
Struts.


Eclipse vs RAD 7 in the Web Builder Department

The text features RAD 7's Web builder tools. Native
Eclipse tools for building web associated components
is available at the following link:

Eclipse Web Builder Tools Site

http://www.eclipse.org/webtools/

Because we in this, the first pass at this course are
bound quite tightly to the IBM Redbook, we are going
to look at the RAD 7 tools for this section. This gives
us ready made examples to highlight the key aspects
of web component features.


Key RAD 7 Web Development Tools

Web Perspective and Views

"The Web perspective and its supporting views is designed
to help Web developers build and edit Web resources, such
as servlets, JSPs, html pages, style sheets, and images, as
well as the deployment descriptor files."

Opening the Web Perspective

Select Window → Open Perspective → Web


The Web Perspective Views
 // see Window → Preferences then Java →
// Compiler → Task Tags to edit these tags
Web Site Navigation Designer

"The Web Site Navigation Designer is provided to
simplify and speed up the creation of the entire Web
site navigation and can launch wizards to facilitate
the creation of html pages and JSPs."

The tool views the whole Web site while enabling
adding, deleting pages, and moving pages within
in the site.

"This tool is especially useful for building pages in a
Web application that uses a page template."

Application flow can be laid out visually and rearranged
as required. Once flow is established pages can be
built based on the design.

website-config.xml

Site design information is stored in the website-config.xml
which enables automatic generation of navigation links.
Changes are automatically factored into links.

// also provides 'page trails' ->
//                   page hierarchy to the one currently shown


To launch the Web Site Designer

Web Diagram

The Web Diagram supplies another view of the Web
application showing pages, links and the page variables.

When used with Struts or JavaServer Faces the view
can include extra information linking pages and data
together.

// not used in the RAD Redbank example


Page Designer

Page Designer is the primary editor for building
HTML, XHTML, JSPs, and JSF source code.
It provides three page representations:

Design Techniques  Suggested in the IBM Redbook

Work in the Design tab, build HTML contents by dragging
items from the Palette view and arranging them with the
mouse or editing properties from the Properties tab.

Navigate quickly to another related tag via the Outline
view. Change details in the Source tab. Use Preview
tab throughout the process.


Importing HTML

Where HTML content is provided, import these files,
using the context menu on the target directory:
 // the imported file opened into Page Designer has all
// editing features available

Page Templates

"A page template contains common areas that you want to
appear on all pages, and content areas which are intended
to be unique on each page." . . . providing "a common look
and feel for a Web project."         - IBM Redbook

// a kind of stencil or branding element

Page templates are created in the The Page Template File
creation wizard. Once created the file can be modified in
Page Designer. The page templates are stored as *.htpl files.

// htpl for html pages and *.jtpl files for JSP pages.

Page Template Features


1. Page template changes reflect in pages using that template.

2. Templates to an entire web project, individual pages, and
 groups of pages, or applied to an entire Web project.

3. Areas can be marked as read-only preventing users from
    modifying these areas.

On Template Creation

CSS Designer  // another build technique suggested

It is possible to create a default style sheet when creating
a new project and there are several samples included with
Application Developer. The Redbook suggests it is a good
idea is to decide on the overall theme (color, fonts) for your
Web application in the beginning and create the style sheet
at the start of the development effort. Then, HTML and JSP
files created will have a consistent look.

Style sheets are commonly kept in the WebContent/theme
folder.

"The CSS Designer is used to modify cascading style sheet
*.css files. It provides two panels, the right hand side showing
all the text types and their respective fonts, sizes, and colors
which are all editable. On the left hand side, a sample of how
the various settings will look. Changes are immediately applied
to the Page Designer if the HTML file is linked to the CSS file."


Security Editor

The Security Editor is a new enhancement with Application
Developer V7.0. It provides a wizard to specify security
groups within a Web application and the URLs that group
has access to."

// see pdf for more details


File Creation Wizards

File wizards create quick skeletons of the file types required.


Selecting Wizards

File → New → Other --> Select a Wizard
--> expand the Web folder --> select file type


Available Wizards
 // Skipping Summary of New Features // see pdf for details


RedBank Application Design

This section adds a web front-end to the Java application
we saw created in the Java Application chapter. This is
done using JSPs and servlets.

Model  // ITSOBank is the facade and also a singleton design

The model for the RedBank project is the the Java
code that were exampled earlier.  ITSOBank acts as
a 'facade' to expose the other components involved.
The main ITSOBank object is a 'singleton' a design
where a single object is accessed a static public
method called getBank.

The ITSOBank object itself is composed of the other
business objects such as Customer, Account, and
Transaction.

// see the pdf for  a simplified UML class diagram of the model.

Data Storage

This model uses Java HashMaps to store data. In a
real world model persistence would be achieved using
databases. In the EJB chapter the back end is made
robust by storing data in a database mediated by
Enterprise JavaBeans.


View Layer

The view layer is made up of four html files and the
same number of JSP files. The application home page
is the index.html containing a link to the three html pages,
rates.html, insurance.html, and redbank.html.

Home index.html links
 If anything goes wrong  the showException.jsp is shown.

// see pdf diagram


Controller Layer  // UML sequence diagrams

The controller layer implements  two strategies using
five servlets:
 "The first three servlets, use a simple function call from the
servlet to the model classes to implement their controller
logic and then use the RequestDispatcher to forward control
onto another JSP or html resource."


Using the Command Design Pattern

"PerformTransaction uses a different implementation pattern.
It acts as a front controller, simply receiving the HTTP request
and passing it to the appropriate control action object. These
objects are responsible for carrying out the control of the

// Note the extra layer where the ListTransactionsCommand
// takes over the execution of the command.


Application Implementation

Implementing the application is described in the IBM
Redbook in the following steps.

Steps for Creating a Web Application

Creating the Web Project // J2EE Hallmarks

To demonstrate more features, a dynamic Web
project is created rather than a static one.

A big difference in a web application vs the Java
application we were using earlier is the introduction
of a web server that will host our JSPs and servlets.

Another important point is to note that the WAR archive
file is placed inside an Enterprise EAR archive file in
compliance with the of the J2EE specification for
enterprise applications.

// first check that Web capabilities are enabled.

Creating a Web Project Steps
// "Dynamic Web Projects, run exclusively within an enterprise
// application. For this reason, you have to either create a new
// EAR project or select an existing project."

// a new default template is created after the Web project is created.
Web Project Directory Structure

The Web project directory structure is shown for the
above build in the IBM Redbook pdf in Figure 12-15.

The Web Project Main Folders
Assignment

You will have to do this exercise in RAD 7. Build a blank
dynamic Web Project as is described in the note or the
IBM Redbook pdf. Submit a screenshot the expanded
view of the directory structure as is shown in Fig 12-15
in the Redbook pdf.