jsf/egl component properties deep dive
DESCRIPTION
JSF/EGL Component Properties Deep Dive. This section walks you through the options and settings for JSF Component Properties – as well as introducing you to the concept of “explicit page design” principles. JSF/EGL Web Page and Site Design and Development. Course. Units:. Course Setup - PowerPoint PPT PresentationTRANSCRIPT
®
IBM Software Group
© 2006 IBM Corporation
JSF/EGL Component Properties Deep Dive
This section walks you through the options and settings for JSF Component Properties – as well as introducing you to the concept of “explicit page design” principles.
2Last update: 12/04/2007
Course
Course Setup Web/JSF/EGL Overview JSF Properties Deep DiveJSF Properties Deep Dive Essential JSF Components Additional JSF Components JSF dataTables Page Flow and State Management AJAX Controls and JavaScript JSF Component Tree and Dynamic Property Setting Web Site Design and Template Pages Appendices
Internationalization Page Design Best Practices Additional Use Cases
Units:
JSF/EGL Web Page and Site Design JSF/EGL Web Page and Site Design and Developmentand Development
3Last update: 12/04/2007
Unit ObjectivesUnit Objectives
At the end of this unit, you will be able to:
Create new dynamic content web pages Describe the steps and general lifecycle
Populate the page with: JSF Components EGL variable data
Customize the JSF component properties And discover the richness of the JSF features and facilities you’ve
used but may not know about
4Last update: 12/04/2007
Page Development Methodology – Steps in Creating PagesPage Development Methodology – Steps in Creating Pages
1. Create a new Web Page Unique name .jsp extension Select a .JTPL or .HTPL template
2. Add static HTML resources HTML tables (or DIV tags) – layout and design the page Lines Graphics Text
3. Add dynamic data content from EGL variables – two options: Option 1 - Implicit Page Design
Drag and Drop the EGL variables from Page Data to create a form or dataTable layout Option 2 - Explicit Page Design
Drag and Drop JSF components from the Palette – place them “explicitly” on the page Bind the EGL variables to the JSF components
4. Customize the JSF properties
5. View the page in Design mode (optional)
6. Run the page on the server and test results
5Last update: 12/04/2007
1. Create jsfcomptest.jsp1. Create jsfcomptest.jsp
From \WebContent\ Right-click and select: Right-click and select:
New >New >– Web PageWeb Page
Name the page:
jsfcomptest.jspjsp
6Last update: 12/04/2007
2. Add Static Controls
From \WebContent\images\ Select ibm.gif Drag and drop it on to the page
Change the page title as shown
From the Palette (HTML tags drawer) – add a Horizontal Rule as shown
Select the Preview tab
If things look okay, re-select the DesignDesign tab and continue
7Last update: 12/04/2007
3. Add Dynamic Data Content3. Add Dynamic Data Content
Open the JSFHandler – and either by coding and using Content Assist, or by copying/pasting the code from the Notes section, modify the default content as shown here…(comments optional as always)
Press Ctrl/S – and fix any syntax errors
8Last update: 12/04/2007
4. Bind the EGL Variables – Implicit Design Approach4. Bind the EGL Variables – Implicit Design Approach
From Page Designer:1. Press Ctrl/S to save and synchronize Page Designer with the EGL
Editor
Note that if you don’t see your JSFHandler variables in Page Data, you might have to close the .JSP and .EGL pages and re-open them. This can happen when you copy/paste from external files (which will only occur during class)
2. (By holding down the Ctrl key) Select Drag and Drop: varTestRec moveFlds()
From Configure Controls, define an Updating an existing record
Make fieldOut an Output Field All other fields: Input Field Under Options
deselect the submit buttons
Ctrl/s to Save
Run the Page (on the server)
2.2.
***Notes***Notes
9Last update: 12/04/2007
Customize JSF Properties
In this section we will do a lot of JSF property customization
Including – but not limited to: Adding Helper icons Over-riding the default style class for a JSF component
We will also revisit selecting and manipulating JSF Components in Page Designer
10Last update: 12/04/2007
5. Customize JSF Properties – Add Helper Icons – Date Picker5. Customize JSF Properties – Add Helper Icons – Date Picker
From Page Designer: Select the {dateFld} control From the Properties view:
Change the Format to: Date/TimeDate/Time Under Input assistance:
– Check: Show helper button
11Last update: 12/04/2007
5. Customize JSF Properties – Add Helper Icons – Time Spinner5. Customize JSF Properties – Add Helper Icons – Time Spinner
From Page Designer: Select the {timeFld} control From the Properties view:
Change the Format to: Date/TimeDate/Time Change the Type to: Time onlyTime only Under Input assistance:
– Check: Show helper button
– Specify Increment: 15
12Last update: 12/04/2007
5. Customize JSF Properties – Add Helper Icons – Number Spinner5. Customize JSF Properties – Add Helper Icons – Number Spinner
From Page Designer: Select the {numFld} control From the Properties view:
Change the Format to: NumberNumber Under Input assistance:
– Check: Show helper button
– Type: Spinner
– Increment: 10
– Check: Integer only
Note: For fun, check out the Slider as well (from the Type: drop down)
13Last update: 12/04/2007
Run the PageRun the Page
Run the page on the Server Test out each of the new helper icons
14Last update: 12/04/2007
Over-riding the Default .CSS Properties for individual JSF ControlsOver-riding the Default .CSS Properties for individual JSF Controls
In order to customize an individual control’s look and feel, you may: Select a different .CSS style element (which contains the visual properties/settings you are looking for) Modify (over-ride) the .CSS settings – for this specific page’s HTML
To select a different .CSS style element for a control
With jsfcomptest.jspjsfcomptest.jsp loaded into the Content Area, click the control in question From Properties; click the Style Props: icon. From the Set Style Properties --- window:
– In the left-hand Style Navigator select a property to customize – Set/Customize properties specific to your selection new
Examples:Examples: - {fieldIn} Font: Courier New Font color: Maroon Background: Blue
- {fieldOut} Font-weight: Bold Font color: Orange
15Last update: 12/04/2007
OPTIONAL – More Style Properties You Can Set For a FieldOPTIONAL – More Style Properties You Can Set For a Field
Feel free to experiment with different aspects of this wizard – as your application may either require these U.I. features, or could benefit from them:
Note – customized properties:Note – customized properties:• background-color: #6096BF; background-color: #6096BF; • margin: 2px; margin: 2px; • color: #CFDCE6; color: #CFDCE6; • border-style: groove; border-style: groove; • border-width: thick; border-width: thick; • Font-weight: bold; Font-weight: bold; • Border-color: #CFDCE6; Border-color: #CFDCE6; • padding: 2px; padding: 2px; • cursor: help;cursor: help;
16Last update: 12/04/2007
Run the PageRun the Page
Run the page on the Server Check out the new colors!
17Last update: 12/04/2007
Over-riding the Default .CSS Properties – Width and MasksOver-riding the Default .CSS Properties – Width and Masks
You can change the size (width) of an Input Field, and give it a format mask that user data MUST adhere (or JSF throws an error).
Try it out: Select fieldIn
From Properties: Specify Size: Width: 44 Format: Mask Mask: (###) ###-####(###) ###-#### Check: Show prompt character
18Last update: 12/04/2007
Change the JSFHandler and Run the PageChange the JSFHandler and Run the Page
Edit the JSFHandler Change the fieldInfieldIn assignment
as shown here
Save your work (Ctrl/SCtrl/S) and from run the page on the Server
Click the moveFlds button. Note that the mask does NOT affect the data on the server. The mask affects the presentation
only.
19Last update: 12/04/2007
JSF Properties – Set Field Focus and Assign Clicked ActionJSF Properties – Set Field Focus and Assign Clicked Action
You can have JSF select a specific field in a form upon rendering in the browser, as well as assign the Enter key to Mouse Click of a button. This is a common input form requirement. Let’s try it.
From Page Designer: Select the dotted-line border around all the fields on the page. This is the page’s h:formh:form (JSF Form
property). From Properties-Keyboard Assist:
Specify: Specific fields: Specific fields: Id: textNumFld1textNumFld1 Click the AddAdd button, and from the combo-boxes, specify:
Key: Key: EnterEnter Action: Action: ClickClick Target: Target: buttonMoveFlds1buttonMoveFlds1
Run the page:Run the page:
Note that:Note that:-numFldnumFld is selected upon page open
- And you can click the Enter key, to submit the form.
20Last update: 12/04/2007
JSF Properties – Input Field ValidationsJSF Properties – Input Field Validations
You can have JSF generate a large % of standard data-entry types of Validations. Let’s
have a look at what it’s capable of. Before we start, you will define a new EGL variable to
experiment with: Edit the JSFHandler code. Add a string variable, named; fldIn2fldIn2: Save your changes (Ctrl/S) and from Page Designer/Page Data:
Drag the field on the page, and create an– Input text field– Delete any extra Submit Buttons
From Page Designer Select the fldIn2fldIn2 field
From Properties/Validation – specify: Value is required Display validation errorMinimum length: 33Maximum length: 88Constraint Uppercase lettersUppercase letters
Run the page on the server
Test all of these conditions!
Read the Notes for this slide!
21Last update: 12/04/2007
JSF Properties – Input Field AccessibilityJSF Properties – Input Field Accessibility
You can also have JSF: 1. Provide tabbing and hot-keys for a field, 2. ProvideMouse over help – even help that’s bound to server-side data
Select fieldInfieldIn – and from Properties/AccessibilityProperties/Accessibility
Specify: Access Key: A Tab order index: 2 Title:
Please refer to the Notes for an explanation of this syntax.Please refer to the Notes for an explanation of this syntax.
Specify different Access keys andTabs for the other input fields on the page
Run the page. Test with Alt/A, Alt/B, etc. to try outthe Access keys. If you want to tab, you’ll have to remove the Setting of field focus (previous slide).
Hover your mouse over fieldInfieldIn
#{jsfcomptest.varTestRec.fieldIn}#{jsfcomptest.varTestRec.fieldIn}
22Last update: 12/04/2007
JSF Properties – Input Field BehaviorJSF Properties – Input Field Behavior
You can also have JSF generate Client/Side JavaScript – that does all of these validations in the browser (and can save considerable server cycles)
Select fldIn2fldIn2 – and from Properties/BehaviorProperties/Behavior Check Validate field value in the browser On success, Run action: Disable fieldDisable field. On failure: Run action: Focus, select contentsFocus, select contents
Run the pageRun the page
CheckOutTheBehavior
Try both goodand bad valuesin fldIn2fldIn2
Note – TabNote – Tabout of the fieldout of the fieldAt run-time.At run-time.Don’t hit EnterDon’t hit Enter
23Last update: 12/04/2007
JSF Field Behavior – Invoke JavaScriptJSF Field Behavior – Invoke JavaScript
Sometimes you may want custom JavaScript edits as well. Try this out. SelectfldIn2fldIn2 – and from Properties/BehaviorProperties/Behavior
Check Additional behaviors…
From the Quick Edit view Select the onerroronerror event Code the following alert
Run the pageRun the page
Check out the behavior
Try both good and bad values in fldIn2fldIn2
24Last update: 12/04/2007
JSF Properties – All Attributes – Dynamic Style AttributesJSF Properties – All Attributes – Dynamic Style Attributes
There’s a list of all of your JSF component’s attributes – that contains not only yourcurrent specifications, but allows you to do some additional techniques.
All Attributes list
All AttributesAll Attributes is a is a toggledtoggled viewing “mode”. viewing “mode”.
Click Click the icon again to return to “normal” the icon again to return to “normal” PropertiesProperties viewing mode for a JSF component.viewing mode for a JSF component.
All AttributesAll Attributes is a is a toggledtoggled viewing “mode”. viewing “mode”.
Click Click the icon again to return to “normal” the icon again to return to “normal” PropertiesProperties viewing mode for a JSF component.viewing mode for a JSF component.
25Last update: 12/04/2007
Optional Workshop – All Attributes, Dynamic Property Setting – 1 of 2
From the JSFHandler Add the code shown inthe boxes
The Notes on this slidecontains new JSFHandlercode.
Save your changes(Ctrl/S)
Notes:Notes:• Setting styles dynamically (or programmatically changing a field’s U.I. characteristics) is a common requirement.
• You will learn more about this later.
• For now note that the All Attributes Properties view provides you with a way to bind a JSF component’s style to EGL variables (next slide)
26Last update: 12/04/2007
Optional Workshop – All Attributes, Dynamic Property Setting – 2 of 2Optional Workshop – All Attributes, Dynamic Property Setting – 2 of 2
From the Page Designer Select fieldInfieldIn
From Properties, toggle to the All Attributes view
For both the style and styleClass attributes:1. Click the Page Data icon2. Select: fldInStylefldInStyle
Run the PageEnter good (alpha data) in FldIn2Click moveFlds
Note the effect of the dynamic style propertiesNote the effect of the dynamic style properties
27Last update: 12/04/2007
Optional Workshop – JSF Validation Bypass – 1 of 2Optional Workshop – JSF Validation Bypass – 1 of 2
All of these JSF data validations are very nice, but what if your specifications require you to present the user with an option to cancel out of a page and bypass the edits? There are two ways to accomplish this:
Use a Link to immediately redirect to the new URL (but what if your JSFHandler needs to be invoked!!??!!)
Bypass the JSF Validations for a Submit Button that invokes a JSFHandler EGL Function You can do this by using the Immediate property of a Submit button. Let’s explore!
From Enhanced Faces Components drag and drop a new Button – Command on to the page (as shown) From Properties / Display – change its text to: Cancel Click the Quick Edit view. Note - for Command Buttons, Quick Edit opens an editor to the
EGL function bound to the button (and if one is not bound, it creates a new function). Add the code shown here to: forwardforward toto ""hello1";";
PressPressCtrl/SCtrl/S
28Last update: 12/04/2007
Optional Workshop – JSF Validation Optional Workshop – JSF Validation Bypass – 2 of 2Bypass – 2 of 2
With your cursor focus still on the Command Button
Re-select the Properties tab
From the All Attributes view
Find the immediate property From its combo-box, select: True
Modify the Validation Behavior for a control *** Notes*** Select the FldIn2 input text control From the Properties tab, return to standard mode
See screen capture below From the – Behavior sub-tab
Un-check: Validate field value in the browser
Run the page Test the behavior of the
immediate property
29Last update: 12/04/2007
Optional Topic – EGL Validation BypassOptional Topic – EGL Validation Bypass
So – for Validations set using the JSF properties you can bypass the framework code’s automatic checking using the technique you just learned (immediate/true). But what about the EGL DataItem validations?
The code generated for them is executed before your JSFHandler’s onConstruction() function is invoked
What if there are EGL Validations tied to input fields (how can you bypass the automatic EGL data-validation framework)?
(as mentioned in the slide notes) the JSF Immediate property will bypass them, but what if you want the EGL Validations (only) to be bypassed?
JSFHandlers have a property named: validationBypassFunctionsvalidationBypassFunctions – where you can list/select function names that if invoked from a JSP page – will act like the JSF Immediate property, in that all EGL DataItem validations will NOT be executed – only the function will be executed when the user clicks the button bound to it.
30Last update: 12/04/2007
Optional Topic – Displaying Date Fields as BlanksOptional Topic – Displaying Date Fields as Blanks
So – for some applications, you will want to display unknown date variable values in pages as blanks. Which can be problematic, as Java initializes date variables to the current date. So what to do? Declare your date as allowing nulls (add a question mark to the declaration as shown
below) If you want to display the date as blanks, set the variable to null If you want to find out if the user entered anything, check the variable for a null upon form
submit
31Last update: 12/04/2007
Now that you have completed this unit, you should have:
Created new dynamic content web pages
Populated the pages with: JSF Components EGL variable data
Customized the JSF component properties
Unit SummaryUnit Summary