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