web development

IBM RAD

Section -3) Web Development

Vikas Manoria
IT Specialist – IBM Academic Initiative
vmanoria@in.ibm.com

© 2008 IBM Corporation

IBM AI - RAD

Section 3 - Web Development (20%)








Create dynamic and static Web projects
Understand classpath and module dependencies
Use Page Designer to add and modify HTML,
JavaScript, and JSP content
Configure Web project properties
Understand the available JSF (JavaServer Faces)
development tools
Understand the available Struts development tools
Create and configure Servlets

IBM AI - RAD

The Key Views of the Web Perspective
1

7

3

2
5
4

6

IBM AI - RAD

Static Projects and Dynamic Projects

 A static Web project contains only static Web content,
such as HTML pages, images, sounds, and movie
files.
-

-

These resources are designed to be deployed to a Web
server, and do not require a J2EE application server.
The wizard allows you to select the CSS file for the project
and it can build the static Web project from a template.

 A dynamic Web project contains resources needed for
Web applications, such as JSPs, servlets, JavaBeans,
and HTML
-

You can specify the version of the servlet specification, target
server containing EAR file, and context root within the wizard.

IBM AI - RAD

Web Application - Static

•Organizations want to make their information available to as many people
in the world as possible. This can be achieved by using the Web,
delivering the information as static HTML pages

IBM AI - RAD

Web Application Evolution - Servlets

Applets cannot access data on back-end systems. A Web container can
provide server-side components (such as Servlets) to generate dynamic
content

IBM AI - RAD

Web Application Evolution - JSPs

Servlets give poor separation between business logic and presentation
logic. Use JavaServer Pages and JavaBeans to improve separation

IBM AI - RAD

MVC design pattern
 MVC – Model View
Controller is a Design
Pattern
- Very widely used
and regarded as a
core concept in
J2EE development
- Various practical
benefits
 Promotes code reuse
 Reduces development
time

 The Model
-

Represents the underlying data
and business logic in one place

-

Contains no information about the
user interface

 The View
-

The user interface – things the
user can see and respond to

-

Represent a "window" into the
model – there can be many of
these

 The Controller
-

Connects the model and the view

-

Used to communicate between the
model and view

IBM AI - RAD

An Overview of the Web Resource Wizards
 All Web resources can be created with a wizard.
 Web resources include:
-

Projects
 Static, dynamic

-

Java
 Servlet, filter, listener, bean

-

View
 HTML, JSP, CSS, JavaScript, images

-

Frameworks
 Struts, JavaServer Faces

-

Visualization
 Web diagram

IBM AI - RAD

Dynamic Web Project Wizard (1 of 3)

Specify
- Project

name

- Configuration
- EAR

Membership

IBM AI - RAD


Choose Project
Facets
- Adds

functionality to a
project

- Manages

project builders

- Adds

appropriate Jars, class
files and other resources

Configurations group
facets

IBM AI - RAD

Set the Context Root
-

http://hostname:port/<contextRoot>/<resource>

Content Directory
-

-

Class files
Deployment
descriptor
JSPs
Servlets
HTML
Other support files

IBM AI - RAD

Page Templates
 You can use templates to provide a common look and feel
-

They provide you with a base layout for a page
Changes to the look and feel of the template are reflected in pages that
use that template
You can apply templates to individual pages, to groups of pages, or to an
entire Web Site

 If you make changes to the page template, the pages created
from that page template are automatically updated. You can
create a page template in two ways:
-

Create a brand new page template

-

Create a page template from an
existing Web page file

 There are two types of page templates
1. Design-Time
2. Dynamic

page templates

page templates

IBM AI - RAD

Design-Time and Dynamic Templates
 HTML and JavaServer pages can implement templates
 Templates:
-

Create a standard look and feel for your Web pages

-

Contain content areas that are filled in by the end Web Page

-

Separate content from layout

 Design-Time templates have the following characteristics:
-

They can be used for both HTML and JSP pages

-

Pages are created immediately

-

Changes to the template update the Web pages

-

Templates can be nested

Header

 Dynamic templates:
-

Leverage Struts-Tiles technology

-

Can only be used with JSPs

-

Generate pages during run time

Nav
Bar

Content
Area

IBM AI - RAD

Dynamic Templates Inheritance
 Templates can extend other templates
 Root templates capture shared layout information
 Child templates specialize the layout for different page types
 Changes to the Root template are automatically propagated to
Header
the child templates
 Template hierarchy is defined in /WEB-INF/tiles-defs.xml
Nav
Bar

<tiles-definitions>

Content
Area

<definition name="MyRootTemplate"
path="/MyRootTemplate.jsp">
Header

</definition>
<definition name="MyChildTemplate"
extends="MyRootTemplate">
</definition>

Header
Nav Trail

Personal Info
Nav
Bar

Content Area

Nav
Bar

Content Area

IBM AI - RAD

The Structure of a Web Project
 The J2EE model defines a
Web application directory
structure that specifies the
location of Web content files,
class files, class paths,
deployment descriptors, and
supporting metadata.
 Rational Application
Developer mirrors this model
in its directory structure.

IBM AI - RAD

The WebContent Folder
 This folder contains items to be published to the server
 This is the root level for all content that is published
-

The context root should point to this folder

 It includes three sub-folders:
-

META-INF, theme, and WEB-INF

http://myServer:port/Library/Register.jsp

IBM AI - RAD

The WEB-INF Folder
 This is the location for all protected resources.
 Files in this folder cannot be called directly from a browser.
-

They would be invoked from another file

 The folder stores supporting Web resources:
-

Java .class files

-

Libraries

-

The deployment descriptor

-

.xmi files

-

.xml files

IBM AI - RAD

Navigating the Deployment Descriptor (2 of 2)

 You can enter information either through the UI
interface (the tabs), or directly in the XML source code
-

Changes in one will be reflected in the other

IBM AI - RAD

Organize Web Pages in a Site Hierarchy
 Web sites organize pages in a hierarchy
 The Web Site Designer is an editor that
allows you to design and maintain the site
hierarchy
-

Graphically design the navigation between Web
pages

-

Apply a common stylesheet and page template
to Web pages

-

Generate and automatically update navigation
links and a site map page

 Open the Web Site Designer by opening
the Web Site Navigation link in the Web
project

IBM AI - RAD

Web Site Navigation Overview

2

1

3

4

5

IBM AI - RAD

Relationship between Web Site Pages
 Lines between page icons denote a
relationship
-

For example, the index page is the parent of the
product and feedback Web pages

 Pages on the same level have a peer
relationship
 Dashed lines around a page icon denotes a
page that has been added to the site
hierarchy but not yet created
-

Realize the Web page by selecting Create Page
from the pop-up menu

 You can also share pages to create clones
that can be placed in the editor
-

For example a shared Help or Contact page

IBM AI - RAD

Relationship with External Links
 External links are links with Web pages in other Web projects
or other servers
 Use the External Links item in the Palette view to add the
following types of links:
-

File
 A Web page in the workspace

-

HTTP
 A Web page address

-

FTP
 An FTP site address

-

E-mail
 A mailto link to send e-mail

-

Other
 A URL address over any protocol

Icon represents an
external link in the
Web Site Navigation

IBM AI - RAD

Group Logical Set of Web Pages
 Group Web pages to:
-

Create a logical organization
 Group a branch of the site hierarchy
according to category

-

Create a reoccurring set of links, such
as header or footer
 Group a set of links that appears on
more than one page but have no
relationship to each other

 To create a group, select a set of
Web
pages and use the Group
command

IBM AI - RAD

Web Site Details Overview
1

2
3
4
5

IBM AI - RAD

Add Navigation Elements to Web Pages (1 of 2)

 In the Palette view, use the Web Site Navigation
drawer to add navigation elements to a Web page
-

Horizontal/Vertical Bar: Adds a row or column of links
Horizontal/Vertical Tabs: Adds a row or column of tabs
Horizontal/Vertical menu: Standard menu
Tabbed menu: Uses tabs to contain the hierarchy
Navigation Trail: Writes out the path to the current page
Drop-Down list: Displays a combo-box
Site Map: Creates a table of links in the current page

 The best practice is to add the navigation elements to
a template

IBM AI - RAD

Add Navigation Elements to Web Pages (2 of 2)

IBM AI - RAD

Visualize Dynamic Web Application Flow

 Dynamic Web sites can have
several levels of indirection before
returning a response.
-

For example, clicking a link on a JSP
page triggers a custom tag, which
determines which page to return

 Web diagrams help you to visualize
and modify the flow of a dynamic
Web application.
 Open the Web Diagram Editor by
opening the Web Diagram link in
the Web project.

IBM AI - RAD

Add Web Pages to the Web Diagram
1.Select a Web page in the Web Site Designer.
2.Open the pop-up menu, right-click and select Show Page in
Web Diagram Editor.
 Conversely, you can select a Web page in the Web Diagram
Editor and select Show Page in the Web Site Designer.

IBM AI - RAD

Add Web Page Links in the Web Diagram
 There are different ways to create links:
-

From the Palette view, select the Connection item, click the first page and
drag the connection to the second page.

-

Drag the connection handle to another page or an empty space to create
the end page.

-

From the fly out, choose a type of link and then drag its connection handle
to a page.
3

1
2

IBM AI - RAD

Compare Web Site Designer with Diagram
 Both the Web Site Designer and Web Diagram are tools to help
you visualize the design of a Web site.
 Use the Web Site Designer for the following tasks:
-

To automatically maintain navigation links and site map pages

-

To document static links between pages in the Web site and external to
the Web site

-

To apply a uniform look to all Web pages in the site

 The following tasks are better suited for the Web Diagram:
-

Document and modify the flow inside the Web application between
different Web resources

-

Visually examine and modify a Web application using an application
framework, such as Struts or JavaServer Faces

IBM AI - RAD

The New Web Page Wizard: HTML/XHTML Template
 The folder must
exist before the
file can be
created
-

Browse to a
legitimate
location

 Choose a
markup
language
-

HTML is the
default

IBM AI - RAD

The JSP Wizard
 The file can be
standard JSP or
Fragment
 If the Dynamic
Web Project has a
Faces or Struts
Facet added to it,
the Wizard Options
dialog will enable a
Faces or Struts
JSP to be created

IBM AI - RAD

The Page Designer Editor
 Page Designer is an HTML and JSP editor for
developing Web pages both visually and textually
-

Including form elements, Java applets, embedded scripts,
and JSP tags

 Three modes: Design, Source, and Preview
 Content assist is available in the Source page for
HTML, JSP, and JavaScript
-

The type of assistance is set automatically according to the
position of the cursor, type of page, and page contents
(such as included taglibs)

IBM AI - RAD

JSP Architecture





JSP Source Code runs on the Web server in the JSP Servlet Engine
The JSP Servlet Engine dynamically generates the HTML and send the output to the
client.
A JSP takes the same path as the “Servlet Life Cycle”

IBM AI - RAD

Adding Tags Using the Palette View
 The Palette view contains a series of drawers. Each drawer
contains items that can be dragged into the active editor.
 The Palette view can be customized
-

Right-click within the Palette view and select Customize

IBM AI - RAD

Using the Insert Menu
 HTML elements can be
inserted in the Design
 The element may not be
visible
-

There may be just an icon
to mark the place

 The area of the element
may be outlined for
design-time convenience
-

Forms, tables

IBM AI - RAD

Inserting JSP Code in the Page Designer
 If a JSP file is active in the
editor, an additional menu
appears
 JSP tags can be inserted in
either the Design view or
the Source view
-

For expressions, scriptlets,
and declarations, a tag icon is
inserted in the Design view,
but Content-assisted coding
can only be done in the
Source view

IBM AI - RAD

Inserting JSP Custom Tags
 Using the JSP menu, you can insert custom tags from any
custom tag libraries imported in the JSP
-

Select JSP > Insert Custom from the menus to open the Insert
Custom Tag dialog

-

Select the appropriate tag library, then the custom tag, and select
Insert

IBM AI - RAD

Modifying Tag Properties in the Properties View
 The Properties view displays names and basic properties of a
selected resource.
 The view can be toggled between graphic and tabular
presentation.

IBM AI - RAD

Adding Variables to the Page Data View
 The Page Data view allows you to manage data from a variety
of sources
 Data is added to the view
-

Scripting variables, session EJBs, JavaBeans, Web services, and so
on

 The data can then be configured and dragged onto a JSP

IBM AI - RAD

Editing JavaScript in the Quick Edit View
 The Quick Edit view is used to add short scripts to HTML and
JSP files.
-

For example, select a button tag on a JSP page, associate a click
event with that button and add a script to it.

 You can drag items from the Snippets view into the Quick Edit
view.

IBM AI - RAD

The Cascading StyleSheet Wizard
Style sheets define a consistent look and feel
throughout a Web site.
-

Very important to a well-managed dynamic or static Web
site

Contents (Web pages) and design (the style sheet)
are maintained separately.
-

Facilitate separation of presentation from content

CSS files should be under the Web content folder of
the Web project.
-

Rational Application Developer creates a theme folder for
CSS files.

IBM AI - RAD

Editing CSS Files in the CSS Designer
 CSS Designer
shows the
source of a style
sheet and helps
to edit styles by
using syntax
highlighting,
content assist,
and a preview
function.
 Modifications
you make in
CSS Designer
are immediately
applied to the
Design page of
Page Designer.

IBM AI - RAD

Using the Links View
 The Links view shows all links to and from a page.
 It presents the number of links to target files and indicates
where documents have broken links or links to external files.
 This view is good both to see the flow of a Web site and to
check the status of the links between resources.

IBM AI - RAD

Configuring Pages in the Deployment Descriptor
 Welcome and Error page lists can be configured.
 The Welcome page is selected if a user does not indicate
a particular page:
-

http://TheServer.com

 Error pages are
displayed in
response to
specific HTTP
error codes

IBM AI - RAD

What is a Servlet ?
 Servlets are programs that run on a web server and build
web pages dynamically
 Servlets run on server to accept request and send back the
response
 Servlets are Platform and Server independent
 Servlets have access to the entire family of Java API’s
( JDBC, HTTP etc..)

“A Servlet is a Web component, managed by a
container, that generates dynamic content.
Servlets are small, platform-independent Java
classes compiled to an architecture-neutral
byte code that can be loaded dynamically into
and run by a Web server”

IBM AI - RAD

Steps to Create a New Servlet
 In a dynamic Web project, to
create a new servlet:
-

Use the Create Servlet wizard.
1. In the Web perspective, select File > New >
Other.
2. Select Web > Servlet from the New wizard.

-

Use the Add servlet button in the Web
deployment descriptor.
1. Open Project Navigator > Web Application
> Web Deployment Descriptor.
2. Select the Servlets tab to reveal the Servlets
in the current Web project.
3. Click Add under the list of Servlets and
JSPs.

IBM AI - RAD

Create Servlet Wizard (1 of 3)
 The first page of the Create Servlet
wizard specifies the class file
1
location and information.
2
1. Select
–

–

the Web Project.

Specify the location folder for the Java
source file.
Declare the package to which the new
servlet belongs.

–

Set the class name for the servlet.

–

Define the superclass for the servlet.

–

Select Use existing Servlet class to
reference an existing Java servlet class.

–

Select Generate an annotated servlet
class to use XDoclet tags in the new
servlet.

3
4
5
6

7

IBM AI - RAD

 The second page of the
Create Servlet wizard
defines what packages and
classes to generate for the
servlet.

8

9

–

10

–
–
11

–

Define the servlet name and
description for the Web
Add initialization parameters
name and values.
Add additional URL mappings
for the servlet.
Click Next to add method stubs,
or click Finish to create the
servlet class.

IBM AI - RAD


 Set modifiers, interfaces to implement
and method stubs to create.
–

Configure the servlet class access
modifiers.

–

Implement additional interfaces in
the servlet class.

–

Select Constructors from
superclass check box to create
stubs for constructors defined in the
superclass.

–

Select the Inherited abstract
methods check box to create a stub
from abstract methods.

–

Create method stubs found in the
HTTP servlet class.

–

Click Finish to generate the servlet.

12
13

14
15
16

17

IBM AI - RAD

Servlets in the Web Project
Servlets appear in three locations
within the Web project:
1.

Deployment Descriptor
 In the hierarchical view of the web.xml
file contents, the servlet appears under
the Servlets branch

1.

Java Resources
 The JavaSource folder holds all Java
source files in the Web project, including
servlets

1.

1

2

WebContent
 Stores compiled Java classes, including
servlets, in the WEB-INF/classes subfolder
 Stores supporting JAR files in the WEBINF/lib sub-folder

3

IBM AI - RAD

Web Deployment Descriptor Servlet Settings
2
1
3

4

5

IBM AI - RAD

Servlet Settings Source Editor

IBM AI - RAD

Servlet Filters in Web Applications
2

1

Filters

Web
Resource

Filters

Web
Resource

Web Application

Servlet filters allow you to intercept inbound and outbound
HTTP messages between the Web client and the Web
resource.
–

One or more filters can intercept and modify an incoming HTTP
request before it reaches the Web resource.

–

Filters can also run when one resource forwards or includes
another Web resource using the request dispatcher.

IBM AI - RAD

Steps to Create a New Filter
 In a dynamic Web project, there
are two ways to create a new filter:
-

Use the Create Filter wizard.
a. In the Web perspective, select File > New
> Other.
b. Select Web > Filter from the New wizard.

-

Use the Add filter button in the Web
deployment descriptor tab.
a. From the Project Explorer view in the Web
perspective, open the Web Deployment
Descriptor.
b. Select the Filter tab to reveal the servlet
filters in the current Web project.
c. Click Add under the list of filters.

IBM AI - RAD

Create Filter Wizard

IBM AI - RAD

Web Deployment Descriptor Filter Settings

2
1
3

4

5

IBM AI - RAD

Filter Settings Source Editor

IBM AI - RAD

Life-Cycle Listeners in Web Applications

Servlet Request Listener
HTTP Session Listener
Web
Resource

Servlet Context Listener

Web Application
Web Container

Life-cycle listeners within your Web application monitor and respond
to changes from three scopes in the environment:
- Request

listeners are called when a request object is created, destroyed,
or modified.

- HTTP

session listeners are called when a session is created, destroyed, or
modified.

- Servlet

context listeners are called when the application scope (servlet
context) is created, destroyed, or modified.

IBM AI - RAD

Steps to Create a New Life-Cycle Listener
 In a dynamic Web project, there are
two ways to create a new life-cycle
listener:
-

Use the Create Life-cycle Listener
wizard.
a.In the Web perspective, select File > New >
Other.
b.Select Web > Life-cycle Listener from the
New wizard.

-

Use the Add Listener button in the Web
a.In the Project Navigator view, open the Web
Deployment Descriptor tab.
b.Select the Variables tab to reveal the servlet
filters in the current Web project.
c.Click Add under the list of Listeners.

IBM AI - RAD

Create Listener Wizard 
The pages are similar to the
Create Servlet wizard, with the
following exceptions:
-

Neither initialization parameters nor
annotations are available for lifecycle listeners.

-

Listeners have no URL mappings.

-

The default superclass for filters is
java.lang.Object

By default, the listener
implements the listener
interfaces for requests, sessions,
and application scope events.
-

Keep only the interfaces needed by
the type of event being monitored.

IBM AI - RAD

Web Container Listeners Interfaces
Object

Event

Listener interface and event class

Servlet
Context

Initialization and
destruction

javax.servlet.ServletContextListener

Attribute added,
removed or
replaced

javax.servlet.ServletContextAttributeListener

Creation,
invalidation,
activation,
passivation and
timeout

javax.servlet.http.HttpSessionListener

Attribute added,
removed or
replaced

javax.servlet.http.HttpSessionAttributeListener

Created and
destroyed

javax.servlet.ServletRequestListener

Attribute added,
removed or
replaced

javax.servlet.ServletRequestAttributeListener

HTTP
Session

Servlet
Request

javax.servlet.ServletContextEvent
javax.servlet.ServletContextAttributeEvent

javax.servlet.http.HttpSessionActivationListener
javax.servlet.http.HttpSessionEvent

javax.servlet.http.HttpSessionBindingEvent

javax.servlet.ServletRequestEvent
javax.servlet.ServletRequestAttributeEvent

IBM AI - RAD

Life-Cycle Listener Settings Source Editor

IBM AI - RAD

WebSphere Extensions for Web Resources
 File serving enabled specifies whether
the Web container should serve static
HTML and graphic images.
 Directory browsing enabled allows Web
clients to view the contents of
WebContent.
 Serve servlets by classname allows
clients to invoke a servlet through its
class name.
 Automatic Request/Response
Encoding enabled sets the character set
and locale information in the HTTP
header.
 Automatic Filter Loading enabled loads
all filters on Web container start up.

IBM AI - RAD

What Is Servlet Caching?
 Servlet caching reduces processing
time for infrequently updated
information.
-

Servlet caching is an extension provided
by IBM® WebSphere® Application
Server.

 Before you can enable servlet caching,
you must create a set of rules.
-

These rules decide whether the Web
container should retrieve a cached
value, or pass the request to a Web
resource for processing.

 In the Extensions tab, click Add in the
Servlet Caching Configuration list.

IBM AI - RAD

What Is Struts?
 An open-source framework for implementing Web applications
based on Java and J2EE
 The framework was originally developed by C. McClanahan
-

Technical lead for the Servlet and JSP reference implementation at Sun
Microsystems

 Rational Application Developer V7 supports Struts 1.1
 Struts 2.0.9 was released in July 2007
-

Struts 2 was originally known as WebWork 2.

-

The WebWork and Struts communities joined forces to create Struts 2.

-

Key features include:
 AJAX support
 Spring integration
 POJO Forms and POJO Actions

-

Requires Servlet API 2.4, JSP 2.0, and Java 5 or later .

IBM AI - RAD

Struts is an MVC Framework
 The Struts architecture encourages the implementation of the
concepts of the model-view-controller (MVC) architecture
pattern.
 The Struts framework is only concerned with the ViewController part of MVC.
Struts framework
request

Controller

Model
Configuration
files
(XML)

response

View

Data
Store

IBM AI - RAD

Extensions to the Basic Struts Framework

 Tiles
-

Build Web pages from several discrete fragments
 Similar to portlets

-

Each fragment can be reused where needed throughout
applications

 Validation
-

The Struts Validator plug-in provides a large number of basic
validation rules that can be used with Struts. For example:
 minlength (maxlength): Check that input data is not less than
(greater than) a specified length
 mask: Validate format according to a regular expression
 double: Verify that a field can be converted to a Double

IBM AI - RAD

Creating Struts Components Using Wizards
-

The Struts framework provides a default ActionServlet and
RequestProcessor that can be used in most cases
 Developers can subclass RequestProcessor and override the methods
to create a custom RequestProcessor
ActionServlet

strutsconfig.xml

Action

RequestProcessor

Beans

ActionForm

Resource
Bundle

JSP

Persistence
Tiles

IBM AI - RAD

A Struts-Enabled Project
 A dynamic Web project can be Struts-enabled:
-

At creation time

-

Through the properties dialog

IBM AI - RAD

Creating Struts Modules

 A Struts project can be divided into modules
-

A Struts Module consists of a configuration file and a set of
corresponding actions, form beans, and Web pages.

 Each module has its own configuration file
-

This allows multiple users to work on the same project
simultaneously, without the risk of overwriting the
configurations.

 A default module is created with the Struts project
-

The configuration file is called struts-config.xml.

IBM AI - RAD

Associating Struts Modules with a Project
 A module’s configuration
file is associated with a
project in the project
deployment descriptor
(web.xml)
 The first module created in
a Struts-based Web
application has no module
name and is the default
module
-

The default module has one or
more configuration files.
Each additional module has a
name and exactly one
configuration file.

<init-param>
<param-name>config</paramname>
<param-value>
/WEB-INF/strutsconfig.xml
</param-value>
</init-param>
<init-param>
<param-name>
config/NewModule
</param-name>
<param-value>
/WEB-INF/strutsNewModule.xml
</param-value>
</init-param>

IBM AI - RAD

Mapping Struts Applications with Web Diagrams

IBM AI - RAD

Examining Struts Resources

 Resources can be
examined in the Project
Explorer

IBM AI - RAD

Examining the Struts Configuration File
 There may be several configuration files
-

The default module may have several

-

There may be several modules, each with a configuration file

 The files are contained in the WebContent/WEB-INF folder
<init-param>
<param-name>config</param-name>
<param-value>/WEB-INF/struts-config.xml</param-value>
</init-param>
<init-param>
<param-name>config/Account</param-name>
<param-value>/WEB-INF/struts-Account.xml</param-value>
</init-param>
<init-param>
<param-name>config/Customer</param-name>
<param-value>/WEB-INF/struts-Customer.xml</param-value>
</init-param>

IBM AI - RAD

A Closer Look at the <action-mappings> Tag
<action-mappings> 1
2
<action name="loginForm" path="/login" scope="request"
3
type="com.ibm.mybankweb.actions.LoginAction"
4 input="/index.jsp">
5 <forward name="failure" path="/error.jsp"></forward>
6
<forward name="success" path="/home.jsp"></forward>
</action>
</action-mappings>
2
…/login.do

LoginForm

1

ActionErrors validate(args)
Validation OK? NO | YES

3

4
index.jsp

home.jsp

error.jsp

6

LoginAction

5

IBM AI - RAD

What Is JavaServer Faces Technology?
 JavaServer Faces (JSF) technology is a user interface
framework for developing Web-based applications:
-

Provides a rich library of user interface (UI) components

-

Abstracts request processing in an event-driven model

-

Contains declarative rules to define the Web application page flow

-

Helps you manage session data by initializing, persisting, and cleaning up
model data objects

-

Allows binding of reusable data validators to UI components

-

Supports internationalization through locale-specific text, number,
currency, time, and date formatting

 A JSF application is a Web application, as defined in the J2EE
specification
 WebSphere Application Server v6.1 and later supports JSF 1.1

IBM AI - RAD

Parts of a JSF Application

Faces Servlet

Faces Configuration File
Managed Beans
JSF Libraries/Tags

Web Client

Component Tree

Validators
Events

Faces JSP File

JSF Web Application
J2EE Enterprise Application
IBM WebSphere Application Server

IBM AI - RAD

JSF Development Steps
1.Create a Dynamic Web Project with JSF support
2.Create a Faces JSP File
3.Add data components to your Faces JSP file using the Page Data
view
4.Add JSF user interface components to the page to collect and
display data
5.Configure the properties for each JSF UI component using the
Properties view
6.Specify navigation rules driven by result from event handler code
7.Add event handler code to react to user interface events
8.Test and Debug the JSF application using the WebSphere Test
Environment

IBM AI - RAD

Create a Dynamic Web Project
 Switch to the Web
perspective
 Select File > New >
Dynamic Web Project
-

-

Enter a Project name
Select Faces Project in the
Configurations list
Click Finish

IBM AI - RAD

Create a Faces JSP File
1.Right-click the Web project and
select New > Web Page
- Once

the Faces facet is added to the
project, new Web pages will use
Faces technology

2.Specify a File Name and Folder
3.Click Options for more settings

IBM AI - RAD

Add Data Components to the Page Data View
 Types of Page Data objects:
- Scripting Variables
 Variables available to JSP file
- PageBean
 Local bean that can be bound to
data fields
- Faces Managed Beans
 A bean that is available to all Faces
pages
- Relational Record and Record List
 Displays a record or a list of records
from a relational database
- Domino
 Domino Note, View
- Service
 EJB Session bean, SDO, Web
Service

IBM AI - RAD

Bind Page Data to Faces Components

Create a value binding between a Page Data object
and a Faces component to display or modify its value
1. Add

a Faces component to the JSP file
2. Select a data object from the Page Data view
3. Select the Faces component to bind the data object with the
Faces component

IBM AI - RAD

Add UI Components to a Faces JSF File
2

1
3

4

5

IBM AI - RAD

Standard Faces Components
 Data Table displays and manipulates data in a
dynamic table
 Command - Button runs an action
 Link adds a simple hyperlink
 Input creates a form input field
 Input - Text Area creates a multi-line form input field
 Input - Password creates a form input field that hides
the input
 Check Box and Check Box group
 Radio Button Group
 Combo Box
 List Box – single and multiple select
 Output displays text or a value from a Java bean
 Output - Formatted Text displays a set of
concatenated values
 Image displays an image
 Label displays an accessibility label
 Display Error shows an error message
 Display Errors shows all error messages in the page

IBM AI - RAD

Enhanced Faces Components
 Data tree displays data in a hierarchy
 Panel – Group Box groups components
 Panel – Form Box organizes components in
label and field pairs
 Panel – Dialog behaves like a model or
modeless dialog
 Panels – Tabbed organizes panels in tabs
 Link – Request passes an action via the URL
 Form Item – inserts a label / field pair for a form
 Select – Color selects a color with a combo box
 Select – Calendar displays a selectable
calendar
 File Upload, Chart, Progress Bar
 Media Player inserts different players

IBM AI - RAD

Map JSF Components in Web Diagrams
 Use the Web Diagram to visually design Faces JSF
files, Faces Actions, and navigation rules
 Web Diagram can reverse-engineer individual pages
or the entire project
 Use the palette to create new Web projects, Web
pages, and actions
-

Then create connections between them

IBM AI - RAD

Code Event Handlers in the Quick Edit View
The Quick Edit view allows you to code the client-side and
server-side event logic for JSF components
To modify the event logic for a JSF component:
1.

Select the JSF component in the Page Designer

2.

Locate the Quick Edit view, and select the type of event you will handle

3.

Enter JavaScript code for client-side events, and Java code for server-side
events

IBM AI - RAD

JSF Application Organization and Artifacts

1
2
3

4
5

IBM AI - RAD

Multiple Faces-config Files
 Artifacts can be organized into multiple configuration files
 Individual artifact types can be organized into a folder hierarchy

IBM AI - RAD

JSF Pages and the Page Code Class
 Each Faces JSP file that you create usually has a
corresponding file that contains its Java page code
-

You can create Page code classes in Java Resources JavaSource
pagecode

 Server-side event logic added to a JSF component in the Quick
Edit view is added to the page code class
-

Page code event logic can be modified from this view later
Page Code
Class
Faces JSP
File

Events

beans

JSF Web Application

Persistence

IBM AI - RAD

Page Code Class Suppression

 To suppress page code generation
-

-

Before you create a Web page, select Windows >
Preferences > Web Tools > Faces from the main menu
Select the Suppress Page Code file generation
New Web pages will no longer have an associated page code
class

 A page code is required to support
-

A relational record
A relational record list

 If page code is suppressed, Quick Edit will no longer
have a Command entry for a Command button

IBM AI - RAD

Checkpoint
1.Describe two of the views of the Web perspective.
2.What is the principal difference between a static and
a dynamic Web project?
3.What is a context root?
4.Name two of the project facets that you can add
when you create a new Web project.
5.What is a validator?
6.What folders are contained in the WebContent
folder?

IBM AI - RAD

Checkpoint answers
1.See page 3, students notes.
2.A static Web project contains only static Web content. A
dynamic Web project contains resources needed for Web
applications, such as JSPs and Java Servlets.
3.A context root is the default relative path to the Web content
from the server root when a Web project is published.
4.Base JSF Faces support, Tiles 1.1 support, Struts support,
Web diagram, JSP Tag libraries, Crystal reports.
5.A program that checks data or code for correctness or for
compliance with applicable standards, rules, and conventions.
6.META-INF, theme, WEB-INF, and any folders defined in the
project

IBM AI - RAD

Checkpoint
1.In the Web Site Designer, how do you specify a set
of links that have no relation to each other but
appear on multiple pages?
2.The Pages to Add drawer lists all Web pages in the
Web project that have not been added to the Web
Site Navigation. Where is this list located?
3.What is the best practice for adding Web Site
Navigation elements into a Web site?
4.What is an external link in the Web Site Designer?

IBM AI - RAD

Checkpoint answers
1.Right-click the Web page icons and Group them.
2.The Pages to Add drawer is located on the left edge
of the Web Site Designer editor in the Navigation
tab.
3.The best practice is to add the navigation links to
the templates that the pages implement.
4.An external link is a hyperlink to a Web resource
outside of the Web project.

IBM AI - RAD

Checkpoint
1.In general, what are two ways to invoke the wizard
to create a servlet, a filter, or a life-cycle listener?
2.How do you ensure that the workbench does not
overwrite your custom Web deployment descriptor
settings with annotations within the Java source?
3.Regarding URL mappings and servlet mappings:
a)What is the difference between the two types of mappings?
b)When you create a new filter, where can you set a URL
mapping or a servlet mapping?

IBM AI - RAD

Checkpoint answers
1.The two ways to invoke any new Web resource wizard is to use the New
wizard dialog by selecting File New Other, or clicking add in the
respective section in the Web deployment descriptor.
2.To prevent the workbench from overwriting the Web deployment descriptor
settings with annotations in the servlet class, add the @annotationsdisabled tagset=”web” tag to the servlet class. The workbench will ask
whether you want to have the tag inserted into the servlet class if you
modify the settings in the Web deployment descriptor editor.
3.Regarding URL mappings and servlet mapping in filters:
a.URL mappings checks using a text comparison whether the incoming HTTP
request triggers a filter. Servlet mappings links the name of a servlet to a filter.
Using servlet mappings ensures that the container invokes the filter, even if the
URL mapping for the servlet changes. Using URL mappings allows you to map the
filter to more than one servlet per entry.
b.You can add an URL mapping in the Create Filter wizard or in the Filters tab in the
Web deployment descriptor editor. However, you can only add a servlet mapping
through the Web deployment descriptor editor.

IBM AI - RAD

Checkpoint
1.What is Struts?
2.Struts is involved in which parts of the MVC architecture?
3.Name an extension to the Struts framework.
4.Which are the controller components in Struts?
5.How many configuration files are there in a Struts project?
6.Which versions of Struts are supported by Rational
Application Developer?
7.In the following code, what is the purpose of the input
attribute?
<action name="loginForm" path="/login"
scope="request"
type="com.ibm.LoginAction"
input="/welcome.jsp">

IBM AI - RAD

Checkpoint answers
1.Struts is an open-source framework for implementing Web applications
based on Java and J2EE.
2.The Struts framework is only concerned with the View-Controller part of
MVC.
3.Tiles and Validation.
4.Controller layer is implemented using:
-

ActionServlet
Struts configuration file (struts-config.xml)
RequestProcessor
Action classes
ActionForward classes

5.Depends upon the number of modules. If you have only one module, then
there is only configuration file struts-config.xml
6.Struts 1.1
7.The page that will be returned to the browser if validation fails in the
ActionForm.

IBM AI - RAD

Checkpoint
1.How does the Page Data view help you develop
your Faces JSP file?
2.Which JSF component allows you to prompt the
user about an invalid username field in a login page?
3.Without manually editing the Faces configuration
file, how can you add new navigation rules to your
JSF application?
4.What is the purpose of using the Quick Edit view on
JSF UI components?

IBM AI - RAD

Checkpoint answers
1. The Page Data view displays the data components with which your
Faces JSP file interacts. In normal JSP pages, you must manually add a
bean into a request, session, page, or application scope. The name and
type of the object does not appear in the Page designer or any of its
views. With JSF technology, the Page Data view displays objects
managed by the framework in one of the available scopes. The Page
designer also understands any object dragged from the Page Data view
into the Page designer.
2. The Display Error JSF UI Component is best suited to return a single
error message about an invalid username in a Faces JSF login page.
The Display Errors component is designed to return multiple errors.
3. You can add JavaServer Faces navigation rules by visually drawing them
out in a Web diagram.
4. Developers would use the Quick Edit view to implement the event
handling code behind a JSF UI component event, such as a mouse click.

IBM AI - RAD

Lab
 Create Static Web Project
 HTML/XHTML Editor
 Quick Edit & Properties
 Create Dynamic Web Project
 Website Navigation / Web Diagram
 Deployment Descriptor
 JSP Editor
 Create Servlet
 Struts
 Java Server Faces
 JSF Components

IBM AI - RAD

Grazie

Hebrew

Italian

Gracias

Russian

Spanish

Arabic

Thank You

Merci
French
German

English

Thai

Korean
Japanese

Portuguese

Danke

Traditional Chinese

Simplified Chinese

Obrigado

web development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to web development

Similar to web development (20)

More from Sevajothi Crafts

More from Sevajothi Crafts (20)

Recently uploaded

Recently uploaded (20)

web development

Editor's Notes