Your SlideShare is downloading. ×
0
IBM RAD

Section -3) Web Development

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

© 2008 IB...
IBM AI - RAD

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

Create dynamic and static Web projects
Understand classpath...
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 ...
IBM AI - RAD

Web Application - Static

•Organizations want to make their information available to as many people
in the w...
IBM AI - RAD

Web Application Evolution - Servlets

Applets cannot access data on back-end systems. A Web container can
pr...
IBM AI - RAD

Web Application Evolution - JSPs

Servlets give poor separation between business logic and presentation
logi...
IBM AI - RAD

MVC design pattern
 MVC – Model View
Controller is a Design
Pattern
- Very widely used
and regarded as a
co...
IBM AI - RAD

An Overview of the Web Resource Wizards
 All Web resources can be created with a wizard.
 Web resources in...
IBM AI - RAD

Dynamic Web Project Wizard (1 of 3)

Specify
- Project

name

- Configuration
- EAR

Membership
IBM AI - RAD

Dynamic Web Project Wizard (2 of 3)

Choose Project
Facets
- Adds

functionality to a
project

- Manages

p...
IBM AI - RAD

Dynamic Web Project Wizard (3 of 3)
Set the Context Root
-

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

...
IBM AI - RAD

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

They provide you with a base lay...
IBM AI - RAD

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

Create...
IBM AI - RAD

Dynamic Templates Inheritance
 Templates can extend other templates
 Root templates capture shared layout ...
IBM AI - RAD

The Structure of a Web Project
 The J2EE model defines a
Web application directory
structure that specifies...
IBM AI - RAD

The WebContent Folder
 This folder contains items to be published to the server
 This is the root level fo...
IBM AI - RAD

The WEB-INF Folder
 This is the location for all protected resources.
 Files in this folder cannot be call...
IBM AI - RAD

Navigating the Deployment Descriptor (2 of 2)

 You can enter information either through the UI
interface (...
IBM AI - RAD

Organize Web Pages in a Site Hierarchy
 Web sites organize pages in a hierarchy
 The Web Site Designer is ...
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 ind...
IBM AI - RAD

Relationship with External Links
 External links are links with Web pages in other Web projects
or other se...
IBM AI - RAD

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

Create a logical organization
 Group a branch of th...
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 ...
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
re...
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...
IBM AI - RAD

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

From the Palette view, ...
IBM AI - RAD

Compare Web Site Designer with Diagram
 Both the Web Site Designer and Web Diagram are tools to help
you vi...
IBM AI - RAD

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

Brows...
IBM AI - RAD

The JSP Wizard
 The file can be
standard JSP or
Fragment
 If the Dynamic
Web Project has a
Faces or Struts...
IBM AI - RAD

The Page Designer Editor
 Page Designer is an HTML and JSP editor for
developing Web pages both visually an...
IBM AI - RAD

JSP Architecture





JSP Source Code runs on the Web server in the JSP Servlet Engine
The JSP Servlet En...
IBM AI - RAD

Adding Tags Using the Palette View
 The Palette view contains a series of drawers. Each drawer
contains ite...
IBM AI - RAD

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

Ther...
IBM AI - RAD

Inserting JSP Code in the Page Designer
 If a JSP file is active in the
editor, an additional menu
appears
...
IBM AI - RAD

Inserting JSP Custom Tags
 Using the JSP menu, you can insert custom tags from any
custom tag libraries imp...
IBM AI - RAD

Modifying Tag Properties in the Properties View
 The Properties view displays names and basic properties of...
IBM AI - RAD

Adding Variables to the Page Data View
 The Page Data view allows you to manage data from a variety
of sour...
IBM AI - RAD

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

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

Ve...
IBM AI - RAD

Editing CSS Files in the CSS Designer
 CSS Designer
shows the
source of a style
sheet and helps
to edit sty...
IBM AI - RAD

Using the Links View
 The Links view shows all links to and from a page.
 It presents the number of links ...
IBM AI - RAD

Configuring Pages in the Deployment Descriptor
 Welcome and Error page lists can be configured.
 The Welco...
IBM AI - RAD

What is a Servlet ?
 Servlets are programs that run on a web server and build
web pages dynamically
 Servl...
IBM AI - RAD

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

Use the Create Servlet...
IBM AI - RAD

Create Servlet Wizard (1 of 3)
 The first page of the Create Servlet
wizard specifies the class file
1
loca...
IBM AI - RAD

Create Servlet Wizard (2 of 3)
 The second page of the
Create Servlet wizard
defines what packages and
clas...
IBM AI - RAD

Create Servlet Wizard (3 of 3)

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

Conf...
IBM AI - RAD

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

Deployment Descr...
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

Se...
IBM AI - RAD

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

Use t...
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

Servl...
IBM AI - RAD

Steps to Create a New Life-Cycle Listener
 In a dynamic Web project, there are
two ways to create a new lif...
IBM AI - RAD

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

Web Container Listeners Interfaces
Object

Event

Listener interface and event class

Servlet
Context

Initi...
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 ser...
IBM AI - RAD

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

...
IBM AI - RAD

What Is Struts?
 An open-source framework for implementing Web applications
based on Java and J2EE
 The fr...
IBM AI - RAD

Struts is an MVC Framework
 The Struts architecture encourages the implementation of the
concepts of the mo...
IBM AI - RAD

Extensions to the Basic Struts Framework

 Tiles
-

Build Web pages from several discrete fragments
 Simil...
IBM AI - RAD

Creating Struts Components Using Wizards
-

The Struts framework provides a default ActionServlet and
Reques...
IBM AI - RAD

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

At creation time

-

Through the ...
IBM AI - RAD

Creating Struts Modules

 A Struts project can be divided into modules
-

A Struts Module consists of a con...
IBM AI - RAD

Associating Struts Modules with a Project
 A module’s configuration
file is associated with a
project in th...
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...
IBM AI - RAD

A Closer Look at the <action-mappings> Tag
<action-mappings> 1
2
<action name="loginForm" path="/login" scop...
IBM AI - RAD

What Is JavaServer Faces Technology?
 JavaServer Faces (JSF) technology is a user interface
framework for d...
IBM AI - RAD

Parts of a JSF Application

Faces Servlet

Faces Configuration File
Managed Beans
JSF Libraries/Tags

Web Cl...
IBM AI - RAD

JSF Development Steps
1.Create a Dynamic Web Project with JSF support
2.Create a Faces JSP File
3.Add data c...
IBM AI - RAD

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

-
...
IBM AI - RAD

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

the Faces facet is a...
IBM AI - RAD

Add Data Components to the Page Data View
 Types of Page Data objects:
- Scripting Variables
 Variables av...
IBM AI - RAD

Bind Page Data to Faces Components

Create a value binding between a Page Data object
and a 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 r...
IBM AI - RAD

Enhanced Faces Components
 Data tree displays data in a hierarchy
 Panel – Group Box groups components
 P...
IBM AI - RAD

Map JSF Components in Web Diagrams
 Use the Web Diagram to visually design Faces JSF
files, Faces Actions, ...
IBM AI - RAD

Code Event Handlers in the Quick Edit View
The Quick Edit view allows you to code the client-side and
serve...
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 arti...
IBM AI - RAD

JSF Pages and the Page Code Class
 Each Faces JSP file that you create usually has a
corresponding file tha...
IBM AI - RAD

Page Code Class Suppression

 To suppress page code generation
-

-

Before you create a Web page, select W...
IBM AI - RAD

Checkpoint
1.Describe two of the views of the Web perspective.
2.What is the principal difference between a ...
IBM AI - RAD

Checkpoint answers
1.See page 3, students notes.
2.A static Web project contains only static Web content. A
...
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...
IBM AI - RAD

Checkpoint answers
1.Right-click the Web page icons and Group them.
2.The Pages to Add drawer is located on ...
IBM AI - RAD

Checkpoint
1.In general, what are two ways to invoke the wizard
to create a servlet, a filter, or a life-cyc...
IBM AI - RAD

Checkpoint answers
1.The two ways to invoke any new Web resource wizard is to use the New
wizard dialog by s...
IBM AI - RAD

Checkpoint
1.What is Struts?
2.Struts is involved in which parts of the MVC architecture?
3.Name an extensio...
IBM AI - RAD

Checkpoint answers
1.Struts is an open-source framework for implementing Web applications
based on Java and ...
IBM AI - RAD

Checkpoint
1.How does the Page Data view help you develop
your Faces JSP file?
2.Which JSF component allows ...
IBM AI - RAD

Checkpoint answers
1. The Page Data view displays the data components with which your
Faces JSP file interac...
IBM AI - RAD

Lab
 Create Static Web Project
 HTML/XHTML Editor
 Quick Edit & Properties
 Create Dynamic Web Project
...
IBM AI - RAD

Grazie

Hebrew

Italian

Gracias

Russian

Spanish

Arabic

Thank You

Merci
French
German

English

Thai

K...
Upcoming SlideShare
Loading in...5
×

web development

1,051

Published on

web development

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,051
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Main Point: IBM is continuing to evolve and enhance the value that we bring to companies by building on the SOA announcements we made last fall…today we are going to talk to you about how a Business Centric Perspective to SOA is necessary to drive innovation that matters*
    As you know, SOA is one of IBM’s long term strategies to enable innovation that matters. IBM will continue to deliver SOA centric offerings. But we also want you to know that IBM’s view of SOA is business centric. and we’ll talk about this important concept. Further, we’ll discuss ways to get started through existing parts of your business (people process, information). Additionally, we’ll show how reuse and connectivity is critical to support the business centric approach. We’ll then give you detail on how the specific entry points are accelerated by SOA Foundation products and the business insight these products provide.
    Lastly, we’ll discuss an important part of the story called SOA Governance to ensure we’re aligning the business with IT.
  • Notes:
    You could drag an empty text file into a legitimate point in the project structure, give it the extension you want (for example, .jsp), and work with it. However, the wizards fill the file with the basic structure of the resource type for you.
    Instructor notes:
    Purpose --
    Details --
    Additional information -- Point out that it is best to right-click the folder where you want the resource to be created and select New, because this will (1) ensure that the resource you want to create can be added to this folder, and (2) limit the options to relevant resources.
    Transition statement -- We shall look at two wizards, HTML and JSP; first the simpler HTML page wizard.
  • Notes:
    Configurations group together a collection of facets. Facets add functionality to your projects (for example, project builders, style sheets, and included JAR files).
    Note the Dynamic Web Project with XDoclet configuration choice. XDoclet allows you to embed tags directly in your source code to generate extra code.
    For example, you can use the @web.servlet tag to indicate the deployment information for a servlet. The tags are then used to add deployment information to web.xml.
    This course will use the standard builders from Rational Application Developer V7.0 and later and not the XDoclet technology.
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: Create Web Project Wizard (2 of 3)
  • Notes:
    Project facets allow you to add and remove functionality from a project. In this case, the project can be deployed as an EAR to an IBM® WebSphere® Application Server v6.1. You can select a facet to display a description. You can right-click a facet and Show Constraints to show the other facets that it depends on. You can also click on Show Runtimes to display the available runtimes.
    You can add and remove project facets using the Properties dialog of a project.
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: Create Web Project Wizard (3 of 3)
  • Notes:
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: Create Servlet Wizard (1 of 3)
  • Instructor notes: While designing a web site or web application, you start to see common layout elements in different pages. Templates allow you to capture these common elements. Also the front end is what clients see, thus there is a lot of churn and updates required. Changing the template updates the pages.
    Purpose --
    Details --
    Additional information --
    Transition statement --
  • Perform these steps to create a template that extends a root template:
    Create a root template.
    Create a JSP that implements the root template.
    Select the JSP in Page Designer and click File &gt; Page Template &gt; Register as Dynamic Page.
    Instructor notes: Template inheritance captures even more shared elements in between pages. Updates to the parent template will update the child, again reducing maintenance issues.
    Purpose --
    Details --
    Additional information --
    Transition statement --
  • Notes:
    HTML Frameset : An HTML document that describes frame layout (called a frameset document ). It has a &lt;HEAD&gt; section and a &lt;FRAMESET&gt; section (no &lt;BODY&gt;).
    Compact HTML : A derivative of HTML used for mobile devices.
    XHTML : A reformulation of HTML 4.0 as an application of XML.
    WML : A markup language based on XML that is used to present content and user interfaces for wireless devices such as cellular phones, pagers, and personal digital assistants.
    Instructor notes:
    Purpose --
    Details --
    Additional information -- If you have not checked `Create from page template` the advanced options available are:
    Encoding: The default (ISO Latin-1) is the value set in Window -&gt; Preferences-&gt; Web and XML Files -&gt; HTML Files.
    Content Type: The default is text/html.
    Document Type: HTML 4.01 Transitional (the default) or Strict (which excludes the presentation attributes and elements).
    Cascading stylesheet (CSS) file: Remove the default Master.css, or add other CSS files.
     
    Transition statement -- Next: The JSP Wizard
  • Notes:
    The choice of markup languages is the same as for HTML pages.
    The XML-style syntax box is enabled if the markup language is XHTML or WML.
    Enabling a Struts JSP will add tag libraries (struts-html and struts-bean) to the source code. It will also replace the basic &lt;HTML&gt; tag with an &lt;html:html&gt; tag.
    Enabling a Faces JSP will add the Sun Faces core tag library to the source code. It will add a &lt;f:html&gt; tag enclosing the HTML &lt;body&gt; tag.
    Instructor notes:
    Purpose —
    Details —
    Additional information — Advanced options are more complex for JSPs:
    Tag libraries: Add libraries.
    The next page has the identical options as the HTML wizard.
    Method stubs: Create init() or destroy90 methods. Also you can choose to add the file to web.xml, which will add the JSP name to the servlets list.
    Transition statement — Next: JSP Page Syntax and Document Syntax
  • Notes:
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: The Use of the Design, Source and Preview tabs
  • Notes:
    There are typically 7 drawers: HTML, Form, JSP, Crystal Reports, Page Template, Data, and Web Site Navigation. Most of the selections are also available from the Insert menu or the JSP menu. Other drawers may be available for Struts tags
    In the example, an Image is being dragged to the middle of the JSP.
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: Inserting JSP Custom Tags
  • Notes:
    An element such as Background music, for example, is not rendered in design mode.
    The music file (.mp3, .wav, and so on) is added to the project. This can increase the project size enormously, especially with .wav files.
    If you add several music files to the background, they execute simultaneously.
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — The Insert menu includes items that might be necessary in any HTML page. In a JavaServer page, there are other options that are available in the JSP menu.
  • Notes:
    Instructor notes:
    Purpose —
    Details —
    Additional information — Underline the first bullet on this page: this menu is not available if the file in the active editor is not JSP.
    Transition statement — The options we have just seen in the menus are also available in the drawers of the palette view.
  • Notes:
    The Insert Custom menu item launches the Insert Custom Tag dialog. It shows all custom tags available to that page (ones included via taglib directives).
    Instructor notes:
    Purpose —
    Details —
    Additional information — Note that if you try to insert by dragging from the palette view, any tag libraries you Add... will only be available if you close the dialog and reopen it...
    Transition statement — Next: Modifying Tag properties in the Properties view.
  • Notes:
    The tabular view shows all attributes of the selected resource. The graphic view shows only a few properties.
    The grey bar at the left shows how the selected resource fits into the tree. The &lt;B&gt; tag has been selected (bold text). The text is in a data cell, which is part of a row which is itself part of a table. Furthermore, the table is part of a form, all of which has been created in the &lt;BODY&gt; of the page. The properties displayed will change according to which resource is selected, and clicking a label in the grey bar will change the selection in the design or source view.
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: Adding Variables to the Page Data View
  • Notes:
    The image shows the available context pop-up menu for Use Bean.
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: Editing JavaScript in the Quick Edit View
  • Notes:
    Select a tag in a JSP or HTML file, select an event in the Quick Edit event list pane, right-click the Quick Edit editor and select a script.
    Here is a simple example: onmouseover &gt; Jump to the specified URL:
    Inserted at the point the mouse will roll over (a table data cell in this instance):
    &lt;TD onmouseover=&quot;return func_1(this, event);&quot;&gt;
    Inserted into the &lt;HEAD&gt;:
    &lt;SCRIPT type=&quot;text/javascript&quot;&gt;
    function func_1(thisObj, thisEvent) {
    _JumpURLinNewWindow(&quot;http://MyServer/MyFile&quot;);
    }&lt;/SCRIPT&gt;
    &lt;SCRIPT type=&quot;text/javascript&quot;&gt;
    function _JumpURLinNewWindow(url)
    {
    if (url != &quot;&quot;)
    {
    window.open(url, &apos;_blank&apos;);
    }
    }
    &lt;/SCRIPT&gt;
    Instructor notes:
    Purpose —
    Details — The nice thing about the Quick Edit view is that you can add scripts that are accurately coded even when you don’t remember (or never knew) the syntax. The code given in the student notes is a good example. You should run through the code in Rational Application Developer before presenting this unit, then give a live demonstration of the changing image.
    Expand on the idea to swap two images when the mouse moves into and out of a table data cell.
    Additional information —
    Transition statement — Next: The Cascading StyleSheet Wizard
  • Notes:
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: Editing CSS Files in the CSS Designer
  • Notes:
    Any change you make in the code to the right is reflected visually in the left pane. Here, the color of the font has been set to 66-00-00 and the family to Arial. Both of these changes are previewed in “Style of H1” to the left. Any open file that uses this CSS will also pick up the changes. A line is being inserted using content assist, showing all the possible choices to complete the word font.
    Note that if there is more than one stylesheet referenced in the JSP or HTML code, their style definitions is combined. If there is a conflict, it is the last-referenced stylesheet that will be applied.
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement — Next: Defining Styles Using the Styles View
  • Notes:
    The file template.jtpl has focus. Files to the left are making reference to this file. Files to the right are referenced by template.jtpl.
    Link to a file outside the Web content folder.
    There are two references to this gif in template.jtpl
    The validity of the link cannot be verified.
    The file referenced by template.jtpl itself references other files. Clicking the ‘-&apos; collapses this part of the tree.
    Right-clicking a file and selecting the item “Become new center&apos; moves focus from template.jtpl to this file (template will now be a file to the left which references the new file).
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    [TODO: The following content could not be copied correctly to PPT, since it contains screen captures of the icons]
    Other icons:
    A link is to a cascading stylesheet:
    A link is to a graphic. Links to graphics are sometimes referred to as an embedded links because they are rendered as part of the same HTTP request (appear on the same page):
    A link is one of a number of industry standard link types:
    A link is to a mailing address:
    A link to file types that are not recognized:
    Transition statement — Next: Configuring Pages in the Deployment Descriptor
  • Notes:
    By default, Rational Application Developer generates a list of six default Welcome pages. You can remove any or all of them, and add any other.
    Clicking Add for Error Pages brings up a list of standard error codes (100 through 505).
    Instructor notes:
    Purpose —
    Details —
    Additional information — The pages are not created simply by listing them here. This is an error that many students make! It should be explained clearly that the developer first needs to create any page that is required, then link the page to a specific scenario (welcome or error).
    Transition statement — Next: Checkpoint Questions
  • Notes:
    Standard components have been removed from the palette in the above image
  • Notes:
    Write down your answers here:
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement —
  • Notes:
    Write down your answers here:
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement —
  • Notes:
    Write down your answers here:
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement —
  • Notes:
    Write down your answers here:
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement —
  • Notes:
    What is Struts?
    Struts is involved in which parts of the MVC architecture?
    Name an extension to the Struts framework.
    Which are the controller components in Struts?
    How many configuration files are there in a Struts project?
    Which versions of Struts are supported by Rational Application Developer?
    In the following code, what is the purpose of the input attribute?
    &lt;action name=&quot;loginForm&quot; path=&quot;/login&quot;
    scope=&quot;request&quot;
    type=&quot;com.ibm.LoginAction&quot;
    input=&quot;/welcome.jsp&quot;&gt;
    http://struts.apache.org/1.x/struts-core/dtddoc/struts-config_1_0.dtd.html#action
  • Notes:
    Write down your answers here:
    Instructor notes:
    Purpose —
    Details —
    Additional information —
    Transition statement —
  • RUP
    Rational Unified Process, Developer Tab, Designer &gt; Concepts &gt; J2EE to RUP Mapping
    Rational Unified Process, Developer Tab, Designer &gt; Enterprise JavaBean (EJB) Design &gt; Guidelines &gt; Designing Enterprise JavaBeans (EJBs)
    Web Resources
    http://www-130.ibm.com/developerworks/
    http://w3.ams1.ibm.com/services/ams/competency/ams/tools_support/rational/learn_about/ams_rational_advanced_learning.html
    EJB Best Practices: Entity Bean Protection: http://www-106.ibm.com/developerworks/java/library/j-ejb1008.html
    Literature
    Enterprise Java Programming with IBM® WebSphere®, Second Edition By Kyle Brown, Gary Craig, Greg Hester, Russell Stinehour, W. David Pitt, Mark Weitzel, Jim Amsden, Peter M. Jakab, Daniel Berg
    Additional Courses
    Introduction to Web Services - http://w3-3.ibm.com/education/CourseDescriptionServlet.wss?city=&amp;state=&amp;countrycode=&amp;coursecode=XM371&amp;courseDescrLanguageId=1
    WebSphere Training and Technical enablement: http://www-128.ibm.com/developerworks/websphere/education/enablement/curriculum/cur_webtoolside.html
  • Self explanatory
  • Transcript of "web development"

    1. 1. IBM RAD Section -3) Web Development Vikas Manoria IT Specialist – IBM Academic Initiative vmanoria@in.ibm.com © 2008 IBM Corporation
    2. 2. 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
    3. 3. IBM AI - RAD The Key Views of the Web Perspective 1 7 3 2 5 4 6
    4. 4. 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.
    5. 5. 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
    6. 6. 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
    7. 7. 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
    8. 8. 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
    9. 9. 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
    10. 10. IBM AI - RAD Dynamic Web Project Wizard (1 of 3) Specify - Project name - Configuration - EAR Membership
    11. 11. IBM AI - RAD Dynamic Web Project Wizard (2 of 3) Choose Project Facets - Adds functionality to a project - Manages project builders - Adds appropriate Jars, class files and other resources Configurations group facets
    12. 12. IBM AI - RAD Dynamic Web Project Wizard (3 of 3) Set the Context Root - http://hostname:port/<contextRoot>/<resource> Content Directory - - Class files Deployment descriptor JSPs Servlets HTML Other support files
    13. 13. 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
    14. 14. 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
    15. 15. 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
    16. 16. 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.
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. 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
    21. 21. IBM AI - RAD Web Site Navigation Overview 2 1 3 4 5
    22. 22. 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
    23. 23. 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
    24. 24. 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
    25. 25. IBM AI - RAD Web Site Details Overview 1 2 3 4 5
    26. 26. 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
    27. 27. IBM AI - RAD Add Navigation Elements to Web Pages (2 of 2)
    28. 28. 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.
    29. 29. 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.
    30. 30. 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
    31. 31. 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
    32. 32. 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
    33. 33. 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
    34. 34. 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)
    35. 35. 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”
    36. 36. 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
    37. 37. 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
    38. 38. 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
    39. 39. 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
    40. 40. 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.
    41. 41. 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
    42. 42. 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.
    43. 43. 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.
    44. 44. 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.
    45. 45. 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.
    46. 46. 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
    47. 47. 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”
    48. 48. 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.
    49. 49. 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
    50. 50. IBM AI - RAD Create Servlet Wizard (2 of 3)  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 deployment descriptor. 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.
    51. 51. IBM AI - RAD Create Servlet Wizard (3 of 3)  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
    52. 52. 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
    53. 53. IBM AI - RAD Web Deployment Descriptor Servlet Settings 2 1 3 4 5
    54. 54. IBM AI - RAD Servlet Settings Source Editor
    55. 55. 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.
    56. 56. 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.
    57. 57. IBM AI - RAD Create Filter Wizard
    58. 58. IBM AI - RAD Web Deployment Descriptor Filter Settings 2 1 3 4 5
    59. 59. IBM AI - RAD Filter Settings Source Editor
    60. 60. 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.
    61. 61. 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 deployment descriptor. 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.
    62. 62. 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.
    63. 63. 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
    64. 64. IBM AI - RAD Life-Cycle Listener Settings Source Editor
    65. 65. 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.
    66. 66. 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.
    67. 67. 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 .
    68. 68. 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
    69. 69. 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
    70. 70. 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
    71. 71. IBM AI - RAD A Struts-Enabled Project  A dynamic Web project can be Struts-enabled: - At creation time - Through the properties dialog
    72. 72. 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.
    73. 73. 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>
    74. 74. IBM AI - RAD Mapping Struts Applications with Web Diagrams
    75. 75. IBM AI - RAD Examining Struts Resources  Resources can be examined in the Project Explorer
    76. 76. 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>
    77. 77. 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
    78. 78. 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
    79. 79. 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
    80. 80. 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
    81. 81. 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
    82. 82. 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
    83. 83. 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
    84. 84. 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
    85. 85. IBM AI - RAD Add UI Components to a Faces JSF File 2 1 3 4 5
    86. 86. 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
    87. 87. 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
    88. 88. 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
    89. 89. 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
    90. 90. IBM AI - RAD JSF Application Organization and Artifacts 1 2 3 4 5
    91. 91. 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
    92. 92. 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
    93. 93. 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
    94. 94. 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?
    95. 95. 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
    96. 96. 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?
    97. 97. 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.
    98. 98. 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?
    99. 99. 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.
    100. 100. 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">
    101. 101. 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.
    102. 102. 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?
    103. 103. 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.
    104. 104. 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
    105. 105. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×