Transcript Slide 1
®
IBM Software Group
Web JSF Overview – RBD Tooling – for Web Development
This unit introduces you to the aspects of the RBD tooling – specifically the palette,
and how to customize it, use the new customized widgets, and introduces a few other
miscellaneous topics.
© 2006 IBM Corporation
Topic Objectives
Sub-topics for this section:
Internet “101”
Lifecycle
URL/URI
Browser technology
.CSS
Dynamic Content Web Pages
Terms and concepts
JSPs and Servlets
JSF
– Terms and concepts
– Lifecycle
EGL and JSF
Faces-config.xml
RBD Tooling
Template pages
Page Designer view modes
Customizing the palette
Last update: 12/04/2007
2
Template Pages (.HTPL and .JTPL files)
An IBM-supplied template page
Found under \WebContent\theme\
Last update: 12/04/2007
3
Page Designer View “modes”
There are three distinct modes of viewing or editing you can be in, when using Page Designer:
1. Design mode
The default mode, where you do work graphically (mouse-based/drag & drop development)
Access to other views and the Palette
2. Source mode
Contains JSF expressions.
Should rarely need to access – although, once you know what you’re doing you get another dimension of
control)
Supposed to be for source-level work, but can still work graphically, with access to other views and the
Palette
3. Preview mode
Simulated browser rendering
(Read/Only) Cannot do any development while in Preview mode
1.
Last update: 12/04/2007
2.
4
3.
Customizing the Palette
You can customize your Page Designer Palette in the following ways:
Add new Drawers – and new options within Drawers (as you’ll do in the workshops that
follow)
Remove Drawers that you don’t need or want in your Workspace – i.e. From the Page
Designer Palette, you rarely (if ever) will use:
JSF components
Data
Un-hide controls from the palette that are hidden by installation default
Modify the palette visual settings (development)
You can judge for yourself the usefulness of these options, but typically you would
want to:
Add a few of the hidden HTML and JSF Components
Remove (hide) some of the drawers that are seldom used
Note that Palette customization remains in effect for (is tied to) your workspace.
That is – if you change workspaces your Palette customization will not be inherited by other
workspaces.
Last update: 12/04/2007
5
Customizing the Palettes - Settings
You can customize the settings of your Palette and show:
Icons only
More or less detail about the U.I. components
Last update: 12/04/2007
6
Customizing the Palettes – Un-hide a tags and
components
Via installation default, a number of (IMHO) useful HTML/Faces Tags and
controls available from the Palette are hidden.
For your U.I. work, you might un-hide some of these. Here’s how:
Right-click over the HTML palette and select: Customize
1. Select and un-check Hide (un-hide) for these HTML Tags
Anchor
P Paragraph
Non-breaking Space
Date and Time
Inline Frame (iFrame)
Marquee
Style Container (DIV)
HTML Source
Script
File
2. (Scroll down) and un-hide the following Faces Components
Input Hidden
Verbatim
Link Command
Click Apply … then Click OK
Last update: 12/04/2007
7
Working with the New Tags and Components
So what are some things we can do with these new components? Actually quite a bit
throughout this course. But to show just a few things possible, try the following:
From Project Explorer, open allcustomers2.jsp into the Content Area
From the Palette, open the HTML Tags.
And below the current dataTable add:
- a Horizontal Rule. And below it …
- an Inline Frame – named: frame2
- with the layout properties shown here…
Last update: 12/04/2007
8
Working with the New Tags and Components
From within the dataTable, select (set focus to) the link on the LastName field:
From Properties/All Attributes
Specify/type: Target: frame2
This icon toggles between
All Attributes and basic
Property attributes
Type: frame2
Last update: 12/04/2007
9
Run and Test the Page
From Navigator, Run allcustomers2.jsp and click a LastName. Note the result - that
updatecustomer2.jsp is loaded into the iFrame control
Not bad, but, there’s one final thing we need to do.
If you click more than one customer you will see that the selected customer does not change in
updatecustomer2.jsp.
What have we here? A bug?
Actually no… the page is in “session” scope
This means it will remain in memory while
we’re logged into the application
But --- “what if I don’t want this?”
(we hear you protest)
Not to worry – the next slide shows
how to change this behavior
Last update: 12/04/2007
10
Make the Page Request Scope (and allow multiple run-time links to updatecustomer2)
To modify this default setting (From Project Explorer):
Open updatecustomer2.egl
Add a comma to the end of the cancelOnPageTransition = yes line
Using Content Assist, add a scope = request property
Save and retest allcustomers2 updatecustomer2 with multiple customer selections
Better? Note that we will discuss request and session scope pages in great detail, in a unit
towards the end of this course.
Last update: 12/04/2007
11
(Optional Topic) Changing the Default Page Title
You might have noticed that by default, new .JSP pages inherit their page title from the
template page they use. This might not suit your requirements. To change the default
title:
Enter Source mode (of Page Designer)
Find the <title> entry
Modify
Save and Run on the server
Return to Design mode
Last update: 12/04/2007
12
Unit Summary
Now that you have completed this unit, you should have:
Defined and described the elements of dynamic data content web technology:
Basics of creating and designing web applications
Describe the relevance of JSF and EGL
Identified and described the components of JSF life
cycle and their functions
Identified the properties of JSF handler and Web Project:
Cascading Style Sheet (.CSS)
web.xml
Faces-config.xml
.EAR file
Customized the Palette – adding new (un-hiding):
HTML tags
JSF – Enhanced Faces – Components
Last update: 12/04/2007
13