Vikas Manoria IT Specialist – IBM Academic Initiative [email_address] Section -3) Web Development
Section 3 - Web Development (20%)
Create dynamic and static Web projects
Understand classpath and module dependencies
Configure Web project properties
Understand the available JSF (JavaServer Faces) development tools
Understand the available Struts development tools
Create and configure Servlets
The Key Views of the Web Perspective 1 4 2 3 5 7 6
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.
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
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
Web Application Evolution - JSPs Servlets give poor separation between business logic and presentation logic. Use JavaServer Pages and JavaBeans to improve separation
MVC design pattern
Represents the underlying data and business logic in one place
Contains no information about the user interface
The user interface – things the user can see and respond to
Represent a "window" into the model – there can be many of these
Connects the model and the view
Used to communicate between the model and view
MVC – M odel V iew C ontroller 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
An Overview of the Web Resource Wizards
All Web resources can be created with a wizard.
Web resources include:
Servlet, filter, listener, bean
Struts, JavaServer Faces
Dynamic Web Project Wizard (1 of 3)
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
Dynamic Web Project Wizard (3 of 3)
Set the Context Root
http://hostname:port/ <contextRoot> /<resource>
Other support files
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
Design-Time page templates
Dynamic page templates
Design-Time and Dynamic Templates
HTML and JavaServer pages can implement 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
Leverage Struts-Tiles technology
Can only be used with JSPs
Generate pages during run time
Content Area Nav Bar Header
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.
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
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
The deployment descriptor
Navigating the Deployment Descriptor (1 of 2)
The deployment descriptor file (web.xml) is in the WEB-INF folder, but there is a shortcut to open the editor easily.
It is recommended that you use the tabbed pages to construct the deployment descriptor for your Web application.
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
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
Web Site Navigation Overview 1 2 4 5 3
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
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:
A Web page in the workspace
A Web page address
An FTP site address
A mailto link to send e-mail
A URL address over any protocol
Icon represents an external link in the Web Site Navigation
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
Web Site Details Overview 1 2 3 4 5
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
Add Navigation Elements to Web Pages (2 of 2)
Add Web Pages to the Web Diagram
Select a Web page in the Web Site Designer.
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 .
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
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
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
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
The type of assistance is set automatically according to the position of the cursor, type of page, and page contents (such as included taglibs)
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”
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
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
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
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
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.
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
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.
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.
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.
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.
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:
Error pages are
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”
Steps to Create a New Servlet
In a dynamic Web project, to create a new servlet:
Use the Create Servlet wizard.
In the Web perspective, select File > New > Other .
Select Web > Servlet from the New wizard.
Use the Add servlet button in the Web deployment descriptor.
Open Project Navigator > Web Application > Web Deployment Descriptor .
Select the Servlets tab to reveal the Servlets in the current Web project.
Click Add under the list of Servlets and JSPs.
The first page of the Create Servlet wizard specifies the class file location and information.
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
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
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
Servlets in the Web Project
Servlets appear in three locations within the Web project:
In the hierarchical view of the web.xml file contents, the servlet appears under the Servlets branch
The JavaSource folder holds all Java source files in the Web project, including servlets
Stores 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
Web Deployment Descriptor Servlet Settings 1 4 3 2 5
Servlet Settings Source Editor
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
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
Parts of a JSF Application IBM WebSphere Application Server J2EE Enterprise Application JSF Web Application Faces Configuration File Faces Servlet Faces JSP File Component Tree Web Client Managed Beans JSF Libraries/Tags Validators Events
JSF Development Steps
Create a Dynamic Web Project with JSF support
Create a Faces JSP File
Add data components to your Faces JSP file using the Page Data view
Add JSF user interface components to the page to collect and display data
Configure the properties for each JSF UI component using the Properties view
Specify navigation rules driven by result from event handler code
Add event handler code to react to user interface events
Test and Debug the JSF application using the WebSphere Test Environment
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
Create a Faces JSP File
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
Specify a File Name and Folder
Click Options for more settings
Add Data Components to the Page Data View
Types of Page Data objects:
Variables available to JSP file
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 Note, View
EJB Session bean, SDO, Web Service
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
Add a Faces component to the JSP file
Select a data object from the Page Data view
Select the Faces component to bind the data object with the Faces component
Add UI Components to a Faces JSF File 1 3 2 4 5
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
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
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
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
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:
Select the JSF component in the Page Designer
Locate the Quick Edit view, and select the type of event you will handle
JSF Application Organization and Artifacts 1 2 3 4 5
Multiple Faces-config Files
Artifacts can be organized into multiple configuration files
Individual artifact types can be organized into a folder hierarchy
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 Code Class Events
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
Describe two of the views of the Web perspective.
What is the principal difference between a static and a dynamic Web project?
What is a context root?
Name two of the project facets that you can add when you create a new Web project.
What is a validator?
What folders are contained in the WebContent folder?
See page 3, students notes.
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.
A context root is the default relative path to the Web content from the server root when a Web project is published.
Base JSF Faces support, Tiles 1.1 support, Struts support, Web diagram, JSP Tag libraries, Crystal reports.
A program that checks data or code for correctness or for compliance with applicable standards, rules, and conventions.
META-INF, theme, WEB-INF, and any folders defined in the project
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?
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?
What is the best practice for adding Web Site Navigation elements into a Web site?
What is an external link in the Web Site Designer?
Right-click the Web page icons and Group them.
The Pages to Add drawer is located on the left edge of the Web Site Designer editor in the Navigation tab.
The best practice is to add the navigation links to the templates that the pages implement.
An external link is a hyperlink to a Web resource outside of the Web project.
In general, what are two ways to invoke the wizard to create a servlet, a filter, or a life-cycle listener?
How do you ensure that the workbench does not overwrite your custom Web deployment descriptor settings with annotations within the Java source?
Regarding URL mappings and servlet mappings:
What is the difference between the two types of mappings?
When you create a new filter, where can you set a URL mapping or a servlet mapping?
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.
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.
Regarding URL mappings and servlet mapping in filters:
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.
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.
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?
Struts is an open-source framework for implementing Web applications based on Java and J2EE.
The Struts framework is only concerned with the View-Controller part of MVC.
Tiles and Validation.
Controller layer is implemented using:
Struts configuration file (struts-config.xml)
Depends upon the number of modules. If you have only one module, then there is only configuration file struts-config.xml
The page that will be returned to the browser if validation fails in the ActionForm.
How does the Page Data view help you develop your Faces JSP file?
Which JSF component allows you to prompt the user about an invalid username field in a login page?
Without manually editing the Faces configuration file, how can you add new navigation rules to your JSF application?
What is the purpose of using the Quick Edit view on JSF UI components?
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.
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.
You can add JavaServer Faces navigation rules by visually drawing them out in a Web diagram.
Developers would use the Quick Edit view to implement the event handling code behind a JSF UI component event, such as a mouse click.
Create Static Web Project
Quick Edit & Properties
Create Dynamic Web Project
Website Navigation / Web Diagram
Java Server Faces
Japanese Hebrew Thank You English Merci French Russian Danke German Grazie Italian Gracias Spanish Obrigado Portuguese Arabic Simplified Chinese Traditional Chinese Thai Korean