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

2. 2 Last update: 12/04/2007 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

3. 3 Last update: 12/04/2007 Template Pages (.HTPL and.JTPL files) Found under \WebContent\theme\ An IBM-supplied template page

4. 4 Last update: 12/04/2007 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.

5. 5 Last update: 12/04/2007 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.

6. 6 Last update: 12/04/2007 Customizing the Palettes - Settings  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

7. 7 Last update: 12/04/2007 Customizing the Palettes – Un-hide a tags and components  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: Customize  Right-click over the HTML palette and select: Customize 1. Select and 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. un-hide 2. (Scroll down) and un-hide the following Faces Components  Input Hidden  Verbatim  Link Command Click Apply … Click OK  Click Apply … then Click OK

8. 8 Last update: 12/04/2007  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…

9. 9 Last update: 12/04/2007 Working with the New Tags and Components  Working with the New Tags and Components LastName  From within the dataTable, select (set focus to) the link on the LastName field:  From Properties/All Attributes frame2  Specify/type: Target: frame2 This icon toggles between All Attributes and basic Property attributes  Type: frame2

10. 10 Last update: 12/04/2007 Run and Test the Page  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

11. 11 Last update: 12/04/2007 Make the Page Request Scope (and allow multiple run-time links to updatecustomer2)  Make the Page Request Scope (and allow multiple run-time links to updatecustomer2) T o modify this default setting (From Project Explorer): updatecustomer2.egl  Open updatecustomer2.egl  Add a comma to the end of the cancelOnPageTransition = yes line scope = request  Using Content Assist, add a scope = 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.

12. 12 Last update: 12/04/2007 Changing the Default Page Title  (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: Source  Enter Source mode (of Page Designer)  Find the entry  Modify  Save and Run on the server Design  Return to Design mode

13. 13 Last update: 12/04/2007  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 Unit Summary