web jsf overview – rbd tooling – for web development

®

IBM Software Group

© 2006 IBM Corporation

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.

2Last update: 12/04/2007

Topic ObjectivesTopic 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 ToolingRBD Tooling Template pagesTemplate pages Page Designer view modesPage Designer view modes Customizing the paletteCustomizing the palette


Template Pages (.HTPL and .JTPL files)Template Pages (.HTPL and .JTPL files)

Found under \WebContent\theme\Found under \WebContent\theme\

An IBM-supplied template pageAn IBM-supplied template page


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. 2. 3.


Customizing the PaletteCustomizing 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 componentsJSF components Data 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.


Customizing the Palettes - SettingsCustomizing the Palettes - Settings

You can customize the settings of your Palette and show: Icons only More or less detail about the U.I. components


Customizing the Palettes – Un-hide a tags and Customizing the Palettes – Un-hide a tags and componentscomponents

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: CustomizeCustomize

1. 1. Select andSelect 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. 2. (Scroll down) and unun-hide-hide the following Faces Components Input Hidden Verbatim Link CommandLink Command

Click Apply … Click Apply … then Click OK Click OK


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…


Working with the New Tags and ComponentsWorking with the New Tags and Components

From within the dataTable, select (set focus to) the link on the LastNameLastName field: From Properties/All Attributes Specify/type: Target: frame2frame2

This icon toggles between This icon toggles between All Attributes and basic All Attributes and basic

Property attributesProperty attributes

This icon toggles between This icon toggles between All Attributes and basic All Attributes and basic

Property attributesProperty attributes

Type: Type: frame2frame2 Type: Type: frame2frame2


Run and Test the PageRun 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


Make the Page Request Scope Make the Page Request Scope (and allow multiple run-time links to updatecustomer2)(and allow multiple run-time links to updatecustomer2)

To modify this default setting (From Project Explorer): Open updatecustomer2.eglupdatecustomer2.egl Add a comma to the end of the cancelOnPageTransition = yes line Using Content Assist, add a scope = requestscope = request property

Save and retest allcustomers2 updatecustomer2 with multiple customer selections

Better?Better? Note that we will discuss request and session scope pages in great detail, in a unit towards the end of this course.


(Optional Topic) Changing the Default Page TitleChanging 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 SourceSource mode (of Page Designer) Find the <title> entry Modify Save and Run on the server Return to DesignDesign mode


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):Customized the Palette – adding new (un-hiding): HTML tags JSF – Enhanced Faces – Components

Unit Summary

web jsf overview – rbd tooling – for web development

Documents