3) web development

90
IBM RAD © 2008 IBM Corporation Vikas Manoria IT Specialist – IBM Academic Initiative [email protected] Section -3) Web Development

Transcript of 3) web development

Page 1: 3) web development

IBM RAD

© 2008 IBM Corporation

Vikas ManoriaIT Specialist – IBM Academic [email protected]

Section -3) Web Development

Page 2: 3) web development

IBM AI - RAD

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

Create dynamic and static Web projects Create dynamic and static Web projects Understand classpath and module dependencies Understand classpath and module dependencies Use Page Designer to add and modify HTML, Use Page Designer to add and modify HTML,

JavaScript, and JSP content JavaScript, and JSP content Configure Web project properties Configure Web project properties Understand the available JSF (JavaServer Faces) Understand the available JSF (JavaServer Faces)

development tools development tools Understand the available Struts development tools Understand the available Struts development tools Create and configure ServletsCreate and configure Servlets

Page 3: 3) web development

IBM AI - RAD

The Key Views of the Web Perspective

1

4

2

3

5

7

6

Page 4: 3) web development

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.

Page 5: 3) web development

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

Page 6: 3) web development

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

Page 7: 3) web development

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

Page 8: 3) web development

IBM AI - RAD

MVC design pattern 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

MVC – Model View Controller is a Design Pattern

V e r y w i d e l y u s e d a n d r e g a r d e d a s a c o r e

c o n c e p t i n J 2 E E d e v e l o p m e n t

V a r i o u s p r a c t i c a l b e n e f i t s

Promotes code reuse Reduces development

time

Page 9: 3) web development

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

Page 10: 3) web development

IBM AI - RAD

Dynamic Web Project Wizard (1 of 3)

Specify -Project name

-Configuration

-EAR Membership

Page 11: 3) web development

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

Page 12: 3) web development

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

Page 13: 3) web development

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 page templates

2.Dynamic page templates

Page 14: 3) web development

IBM AI - RAD

Design-Time and Dynamic TemplatesHTML and JavaServer pages can implement templatesTemplates:

- 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

Dynamic templates:- Leverage Struts-Tiles technology

- Can only be used with JSPs

- Generate pages during run time

ContentArea

NavBar

Header

Page 15: 3) web development

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.

Page 16: 3) web development

IBM AI - RAD

The WebContent FolderThis 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

Page 17: 3) web development

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

Page 18: 3) web development

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

Page 19: 3) web development

IBM AI - RAD

Organize Web Pages in a Site Hierarchy

Web sites organize pages in a hierarchyThe 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

Page 20: 3) web development

IBM AI - RAD

1

2

4 5

3

Web Site Navigation Overview

Page 21: 3) web development

IBM AI - RAD

Relationship between Web Site PagesLines 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

Page 22: 3) web development

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

Page 23: 3) web development

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

Page 24: 3) web development

IBM AI - RAD

Web Site Details Overview

1

2

3

4

5

Page 25: 3) web development

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

Page 26: 3) web development

IBM AI - RAD

Add Navigation Elements to Web Pages (2 of 2)

Page 27: 3) web development

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.

Page 28: 3) web development

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.

1

2

3

Page 29: 3) web development

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

Page 30: 3) web development

IBM AI - RAD

The JSP WizardThe 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

Page 31: 3) web development

IBM AI - RAD

The Page Designer EditorPage 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)

Page 32: 3) web development

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”

Page 33: 3) web development

IBM AI - RAD

Adding Tags Using the Palette ViewThe 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

Page 34: 3) web development

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 placeThe area of the element may be outlined for design-time convenience- Forms, tables

Page 35: 3) web development

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

Page 36: 3) web development

IBM AI - RAD

Inserting JSP Custom TagsUsing 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

Page 37: 3) web development

IBM AI - RAD

Modifying Tag Properties in the Properties ViewThe Properties view displays names and basic properties of a

selected resource.The view can be toggled between graphic and tabular

presentation.

Page 38: 3) web development

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

Page 39: 3) web development

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.

Page 40: 3) web development

IBM AI - RAD

The Cascading StyleSheet WizardStyle 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.

Page 41: 3) web development

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.

Page 42: 3) web development

IBM AI - RAD

Using the Links ViewThe 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.

Page 43: 3) web development

IBM AI - RAD

Configuring Pages in the Deployment DescriptorWelcome 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

Page 44: 3) web development

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”

Page 45: 3) web development

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.

Page 46: 3) web development

IBM AI - RAD

The first page of the Create Servlet wizard specifies the class file location and information.

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.

Create Servlet Wizard (1 of 3)

1

4

6

3

2

5

7

Page 47: 3) web development

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.

– 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.

9

10

11

8

Page 48: 3) web development

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

14

13

15

16

17

Page 49: 3) web development

IBM AI - RAD

Servlets in the Web ProjectServlets 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

2. Java ResourcesThe JavaSource folder holds all Java source files in the Web project, including servlets

3. WebContentStores compiled Java classes, including servlets, in the WEB-INF/classes sub-folder

Stores supporting JAR files in the WEB-INF/lib sub-folder

1

3

2

Page 50: 3) web development

IBM AI - RAD

Web Deployment Descriptor Servlet Settings

1

4

3

2

5

Page 51: 3) web development

IBM AI - RAD

Servlet Settings Source Editor

Page 52: 3) web development

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.1Struts 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 .

Page 53: 3) web development

IBM AI - RAD

Struts is an MVC FrameworkThe Struts architecture encourages the implementation of the

concepts of the model-view-controller (MVC) architecture pattern.

The Struts framework is only concerned with the View-Controller part of MVC.

Controller

View

Configurationfiles

(XML)

Model

DataStore

request

response

Struts framework

Page 54: 3) web development

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

Page 55: 3) web development

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

JSPPersistence

ResourceBundle

RequestProcessor

ActionForm

Tiles

struts-config.xml

Action Beans

Page 56: 3) web development

IBM AI - RAD

A Struts-Enabled Project

A dynamic Web project can be Struts-enabled: - At creation time- Through the properties dialog

Page 57: 3) web development

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.

Page 58: 3) web development

IBM AI - RAD

<init-param> <param-name>config</param-name> <param-value> /WEB-INF/struts-config.xml </param-value></init-param>

<init-param> <param-name> config/NewModule </param-name> <param-value> /WEB-INF/struts-NewModule.xml </param-value></init-param>

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.

Page 59: 3) web development

IBM AI - RAD

Mapping Struts Applications with Web Diagrams

Page 60: 3) web development

IBM AI - RAD

Examining Struts Resources

Resources can be examined in the Project Explorer

Page 61: 3) web development

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>

Page 62: 3) web development

IBM AI - RAD

A Closer Look at the <action-mappings> Tag<action-mappings> <action name="loginForm" path="/login" scope="request" type="com.ibm.mybankweb.actions.LoginAction" input="/index.jsp">

<forward name="failure" path="/error.jsp"></forward> <forward name="success" path="/home.jsp"></forward> </action></action-mappings>

index.jsp

LoginFormActionErrors validate(args)Validation OK? NO | YES

LoginAction

1 2

34

5 6

error.jsp

home.jsp

…/login.do

12

34

6

5

Page 63: 3) web development

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

Page 64: 3) web development

IBM AI - RAD

Parts of a JSF Application

IBM WebSphere Application Server

J2EE Enterprise Application

JSF Web Application

Faces Configuration FileFaces Servlet

Faces JSP File

Component TreeWeb Client

Managed Beans

JSF Libraries/Tags

Validators

Events

Page 65: 3) web development

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

Page 66: 3) web development

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

Page 67: 3) web development

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

Page 68: 3) web development

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

Page 69: 3) web development

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 value1.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

Page 70: 3) web development

IBM AI - RAD

Add UI Components to a Faces JSF File

1

3

2

4 5

Page 71: 3) web development

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

Page 72: 3) web development

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

Page 73: 3) web development

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

Page 74: 3) web development

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 componentsTo 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

Page 75: 3) web development

IBM AI - RAD

JSF Application Organization and Artifacts

1

2

3

4

5

Page 76: 3) web development

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

Page 77: 3) web development

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

JSF Web Application Persistence

Faces JSP File

beans

Page CodeClass

Events

Page 78: 3) web development

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

classA 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

Page 79: 3) web development

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?

Page 80: 3) web development

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

Page 81: 3) web development

IBM AI - RAD

Checkpoint1.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?

Page 82: 3) web development

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.

Page 83: 3) web development

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:

Page 84: 3) web development

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 @annotations-disabled 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.

Page 85: 3) web development

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">

Page 86: 3) web development

IBM AI - RAD

Checkpoint answers1.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.

Page 87: 3) web development

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?

Page 88: 3) web development

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.

Page 89: 3) web development

IBM AI - RAD

Lab

Create Static Web ProjectHTML/XHTML EditorQuick Edit & PropertiesCreate Dynamic Web ProjectWebsite Navigation / Web DiagramDeployment DescriptorJSP EditorCreate ServletStrutsJava Server FacesJSF Components

Page 90: 3) web development

IBM AI - RAD

Japanese

Hebrew

Thank You

English

MerciFrench

Russian

DankeGerman

GrazieItalian

GraciasSpanish

Obrigado Portuguese

Arabic

Simplified Chinese

Traditional Chinese

Thai

Korean