18 Invaluable Lessons About ADF-JSF Interaction
-
Upload
steven-davelaar -
Category
Technology
-
view
9.058 -
download
9
description
Transcript of 18 Invaluable Lessons About ADF-JSF Interaction
![Page 1: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/1.jpg)
<Insert Picture Here>
18 Invaluable Lessons About ADF Faces Page
Lifecycle
Steven Davelaar twitter:@stevendavelaarblogs: www.ateam-oracle.com and blogs.oracle.com/jheadstartOracle Fusion Middleware Architects Team (the “A-team”)
![Page 2: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/2.jpg)
Agenda
• Worls’s most comprehensive Hello World Demo
![Page 3: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/3.jpg)
Just Say Hello – JSF Lifecycle Initial
1. Restore View
UI Component Tree
RichPanelHeader
RichPanelGroupLayout
6. Render
Response
RichPanelGroupLayout
RichPanelFormLayout
RichInputText
RichInputDate
![Page 4: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/4.jpg)
JSF Lifecycle - Postback
1. Restore View
2. Apply Request Values
richInputText.setSubmittedValue(“Steven”)
richInputDate.setSubmittedValue(“04-12-2012”)
![Page 5: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/5.jpg)
JSF Lifecycle - Postback
1. Restore View
2. Apply Request Values
3. Process Validations
•Validate and convert (if needed) name and date
•Call richInputText.setValue() with converted value if valid
•Clear submittedValue
•Queue valueChange event (if applicable)
![Page 6: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/6.jpg)
1. Restore View
2. Apply Request Values
3. Process Validations
value=“#{viewScope.HelloBean.name}
value=“#{viewScope.HelloBean.date}
JSF Lifecycle Postback
4. Update Model
•Call HelloBean.setName with component value
•Call HelloBean.setDate with component value
•Clear submitted and (local) component value
![Page 7: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/7.jpg)
JSF Lifecycle Postback
1. Restore View
2. Apply Request Values
3. Process Validations
actionListener=“#{viewScope.helloBean.sayHello}
4. Update Model
•Call HelloBean.sayHello
5. Invoke Application
![Page 8: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/8.jpg)
JSF Lifecycle - Postback
1. Restore View
2. Apply Request Values
3. Process Validations
4. Update Model
5. Invoke Application
6. Render Response
![Page 9: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/9.jpg)
Current Lifecycle Phase in JDeveloper
while Debugging
![Page 10: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/10.jpg)
Just Say Hello – Reset Values
• Clicking the Reset button should not fire validation,
and should clear the Name and Date fields
• We need a lifecycle shortcut that bypasses validation
(both client-side and server-side) and model update
![Page 11: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/11.jpg)
JSF Lifecycle – Postback Immediate
• Lesson 1: An immediate command executes the
action and actionListener in phase 2. Apply Request
Values and then jumps to phase 6. Render
Response, skipping validation and model update
phases.
![Page 12: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/12.jpg)
JSF Lifecycle – Postback Immediate
1. Restore View
2. Apply Request Values
• richInputText.setSubmittedValue(“Steven”)
• richInputDate.setSubmittedValue(“04-12-2012”)
•Call HelloBean.reset
![Page 13: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/13.jpg)
JSF Lifecycle – Postback Immediate
1. Restore View
2. Apply Request Values
6. Render Response
• We clicked the Reset button8.
• Name and date are cleared in HelloBean8.
• But we still see the old values in the page!
• How come??
![Page 14: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/14.jpg)
JSF Lifecycle – Postback Immediate
• Lesson 2: When executing an immediate command, the
UI components do NOT re-evaluate their underlying
value binding, possibly showing stale data
• How to force the UI components to do this?
• Three options
• Use af:resetActionListener
• Use oracle.adf.view.rich.util.ResetUtils.reset()
• UIComponent.resetValue()
• On an individual UI component, the reset action
• Clears the submittedValue
• Clears local component value so value binding is re-evaluated
• Marks the component as valid
![Page 15: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/15.jpg)
Using af:resetActionListener
• Easiest option, no Java method needed
• Automatically added when dragging and dropping a
Rollback operation from Data Control Palette
• Lesson 3: af:resetActionListener does NOT reset child
regions, use ResetUtils.reset() instead.
![Page 16: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/16.jpg)
Using ResetUtils.reset(UIComponent
startComponent)
• Reset method takes one
parameter: the start UI
Component to reset
• However, this is not the REAL start component
• Is used to traverse up the component tree
• until a region, form, subform, popup, carrousel or
panelCollection is found
• that component is used as the real starting point
![Page 17: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/17.jpg)
Agenda
• Worls’s most comprehensive Hello World Demo
![Page 18: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/18.jpg)
Say Hello Suggestions
• Suggest the type of greeting based on a person’s
name
![Page 19: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/19.jpg)
Say Hello Suggestions – Will this work?
Not reallyD..
![Page 20: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/20.jpg)
Say Hello Suggestions – Will
immediate=true work?
• No, model is no longer updated, getName() will return
null (or old model value): remember lesson 1!
• AND (wrong) greeting will NOT be displayed anyway:
remember lesson 2!
![Page 21: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/21.jpg)
Say Hello Suggestions – Challenges
• We need immediate=true to prevent premature
validation of greeting field and date field
• We need to refresh the greeting field properly
• We need somehow to get hold of value entered in
name fieldname field
• We do want required validation on name field
-----------------------------------------------------------------------
• We already learned how to refresh the greeting field
with underlying model value8..
• 8 we need to call resetValue on the greeting
inputText
![Page 22: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/22.jpg)
Say Hello Suggestions – Use Binding
Property to Refresh Greeting Field
![Page 23: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/23.jpg)
Say Hello Suggestions – Greeting Field
Refreshed
• At least the suggested greeting is displayed now,
although it is still the wrong default greeting because
getName() returns null in the suggest method
![Page 24: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/24.jpg)
Side Step – More About Component
Binding
• The getter/setter methods generated by JDeveloper
when using binding property are wrong
• Code is not serializable, causing errors in clustered env.
• UI Tree not released properly, more memory usage
• UI component might be reused in UI Tree of another page
(fragment)(fragment)
• This can happen EVEN with request-scoped and
backingBean-scoped beans
• Lesson 4: Always use ComponentReference in
component binding getter/setter methods
• Lesson 5: Never use component binding in session-
scoped bean, even ComponentReference won’t be
safe then.
![Page 25: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/25.jpg)
Side Step – Correct Code for
Component Binding Methods
![Page 26: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/26.jpg)
Side Step – More About Component
Binding
• Component binding is often overly used
• Use UIManager pattern from Duncan Mills to avoid
unnecessary component binding
• https://blogs.oracle.com/groundside/entry/the_uimanager_pattern
• You can also find a component by id programmatically
using invokeOnComponent API
• See (google for) “ADF Code Corner sample 58”
• Starting UI component should be as low as possible in UI Tree,
starting at UIViewRoot can kill performance with large, multi-tab
pages
![Page 27: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/27.jpg)
Say Hello Suggestions – Challenges
• We need immediate=true to prevent premature
validation of greeting field and date field
• We need to refresh the greeting field properly
• We need somehow to get hold of value entered in
name fieldname field
• We do want required validation on name field
• -----------------------------------------------------------------------
• May be we can use a valueChangeListener on name
field?
• May be we can use immediate=true on the name
field?
![Page 28: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/28.jpg)
Say Hello Suggestions – Using a
ValueChangeListener
• ValueChangeListener fires in phase 3. Process
Validations
• That phase is skipped with immediate command
• Now, let’s set immediate=true on name field 8
![Page 29: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/29.jpg)
Say Hello Suggestions – Using a
ValueChangeListener
• Lesson 6: When immediate=“true” on an Editable UI
Component Component
• Component validation is processed in phase 2. Apply
Request Values
• The validated and converted value is stored on the
component
• valueChangeListener is also called in this phase
• YES, now it works!
• But wait 8.
![Page 30: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/30.jpg)
Say Hello Suggestions – Using
immediate on editable component
• If we enter all fields except name, then Reset button
no longer works!
• Why? Because of Lesson 6: name field now validated
in Apply request Values, before reset command is
executed. Arrrrggghhh!executed. Arrrrggghhh!
![Page 31: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/31.jpg)
Say Hello Suggestions – Using
Immediate on Editable Component
• This makes setting immediate=“true on an editable UI
component pretty useless, because then the general
rule
“Validations are skipped when setting a command
component to immediate=“true”component to immediate=“true”
is no longer true!
• Lesson 7: Never set immediate=“true” on an editable
UI component, it prevents you from
cancelling/abandoning a page.
![Page 32: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/32.jpg)
Say Hello Suggestions – Back to the
Challenges
• We need immediate=true to prevent premature
validation of greeting field and date field
• We need to refresh the greeting field properly
• We need somehow to get hold of value entered in
name field name field
• We do want required validation on name field
-----------------------------------------------------------------------
• Not a solution: valueChangeListener and
immediate=true on name field
• New solution: we need to get the value entered for
name directly from the UI component
![Page 33: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/33.jpg)
Say Hello Suggestions – Use
Component Binding to Get Name Value
• YES, this works, and the reset button still works too!
• But wait8. it works too well8
• Method should not execute when name empty, or less than 4 chars
![Page 34: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/34.jpg)
Say Hello Suggestions – Use
Component Binding to Get Name Value
• We are using the raw, possibly invalid value by calling
getSubmittedValue() on the name field
• We need to do programmatically what normally
happens automatically
in phase 33. Process Validations
in phase 3
•Validate and convert (if needed) name and date
•Call richInputText.setValue() with converted value if valid
•Clear submittedValue
•Queue valueChange event (if applicable)
![Page 35: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/35.jpg)
Say Hello Suggestions – Use
Component Binding to Get Name Value
• Lesson 8: You can programmatically execute JSF
lifecycle phases 3 and 4 on a component:
• comp.processValidations(FacesContext.getCurrentInstance())
• comp.processUpdates(FacesContext.getCurrentInstance())
![Page 36: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/36.jpg)
Say Hello Suggestions – Optimizing
Using Partial Page Rendering (PPR)
• When clicking the suggest button, only the greeting
field needs to be refreshed in browser.
• Easily implemented using ADF Faces PPR
![Page 37: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/37.jpg)
Agenda
• Worls’s most comprehensive Hello World Demo
![Page 38: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/38.jpg)
Sub Forms of Hello Saying
• It was quite a challenge to get this greeting
suggestion implemented
• Is there really no easier way to do this?
• The af:subform tag represents an independently
submittable region of a page. The contents of a submittable region of a page. The contents of a
subform will only be validated (or otherwise
processed) if a component inside of the subform is
responsible for submitting the page.
• Sounds promising, let’s try!
![Page 39: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/39.jpg)
Sub Forms of Hello Saying – Try 1
![Page 40: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/40.jpg)
Sub Forms of Hello Saying – Try 1
![Page 41: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/41.jpg)
Sub Forms of Hello Saying –Try 1
Findings
• Lesson 9: Items not in any sub-form are still
processed in lifecycle when submitting a sub-form.
• Fix: put all items in sub-forms
• Lesson 10: Layout messed up when using sub form
• Fix: Each subform must contain its own panelFormLayout, • Fix: Each subform must contain its own panelFormLayout,
align accross panelFormLayouts using labelWidth property
• Submitting the main form, does not submit items in
sub-form
• Solution: set property default=“true” on the subform
![Page 42: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/42.jpg)
Sub Forms of Hello Saying – Try 2
![Page 43: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/43.jpg)
Sub Forms of Hello Saying – Try 2
Findings
• Suggest button now works with empty date!
• Layout cleaned up!
• Pressing enter key on name shows suggested greeting!
• But wait8. what is functionally different from previous
samples?
• Greeting field is not required, what if we fix that?
![Page 44: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/44.jpg)
Sub Forms of Hello Saying – Try 2
Findings
• Let’s try to move greeting field to other subform
![Page 45: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/45.jpg)
Sub Forms of Hello Saying – Try 3
![Page 46: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/46.jpg)
Sub Forms of Hello Saying – Try 3
Findings
• No validation error on greeting field!
• But greeting no longer shown
• Lesson 11: Partial page refresh does not work across
sub-forms
• Sub forms do not work for this use case �
![Page 47: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/47.jpg)
Sub Forms of Say Hello - Conclusion
• Sub forms can be used in corner cases to avoid
premature validation
• Sub forms most useful for “default command” behavior
![Page 48: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/48.jpg)
Agenda
• Worls’s most comprehensive Hello World Demo
![Page 49: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/49.jpg)
Auto-Suggested Hello Saying
• Auto-suggest the type of greeting when tabbing out
the name field
![Page 50: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/50.jpg)
Auto-Suggested Hello Saying – Will
this work?
• Will field validations fire prematurely?
• Will greeting field be refreshed correctly?
![Page 51: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/51.jpg)
Auto-Suggested Hello Saying – ADF-
optimized lifecycle
• Using autoSubmit = true on an editable UI
Component kicks of the ADF-Optimized JSF Lifecycle
• This optimized lifecycle always:
• fires a partial submit
• By default will only process and refresh the autoSubmitted• By default will only process and refresh the autoSubmitted
component itself
• Additional UI components will be processed in this lifecycle
when partialTriggers property points to autoSubmitted item
• So, with code in previous slide no premature
validations fire but greeting field is not refreshed
• So, what will happen when we add partialTrigger
property to greeting field?
![Page 52: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/52.jpg)
Auto-Suggested Hello Saying –
Refreshing Greeting Field
• Greeting field now processed as well -> validation
error when null
• Solutions:
1. make greeting optional
2. add greeting programmatically as partial target
![Page 53: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/53.jpg)
Auto-Suggested Hello Saying – Making
Greeting Optional
• Making greeting optional seems to work
• But it doesn’t work always 8
• It does not work when user clears greeting first
• User clears existing greeting
• User navigates back to name field and changes the name• User navigates back to name field and changes the name
• User tabs out name field, nothing happens!
• Why??
![Page 54: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/54.jpg)
What happens when greeting is cleared
1. Restore View
2. Apply Request Values
3. Process Validations
•Calls valueChangeListener method HelloBean.nameChanged which in turn calls.setGreeting(“Hi”)
![Page 55: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/55.jpg)
1. Restore View
2. Apply Request Values
3. Process Validations
What happens when greeting is cleared
4. Update Model
•Calls HelloBean.setGreeting(null)
•Overrides the value set by valueChangeListenermethod D.
![Page 56: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/56.jpg)
How to prevent suggested greeting is
overridden again
• The JSF Model Update phase only updates
underlying model value when the local component
value differs from the model value
• We need to reset the local UI Component value in
namedChanged methodnamedChanged method
![Page 57: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/57.jpg)
Auto-Suggested Hello Saying –
Refreshing Greeting Field In Code
![Page 58: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/58.jpg)
Auto-Suggested Hello Saying –
Lessons Learned
12.Auto-submitted fields use ADF optimized lifecycle
preventing premature validation on other fields
13.The components that are processed by ADF optimized
lifecycle can be configured using partialTrigger
property. This is known as Cross Component Refreshproperty. This is known as Cross Component Refresh
14.Values set in value change listeners might be
overridden in model update phase if not coded
correctly
15.Use programmatic PPR instead of partialTriggers
property to prevent components to be processed by
ADF optimized lifecycle, avoiding premature validation
![Page 59: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/59.jpg)
New in JDeveloper 12c: the af:target
tag!
• Provides a declarative way to allow a component to
specify the list of targets it wants executed and
rendered when an event is fired by the component.
• The list of components on which the JSF lifecycle will
be executed, can be defined separately from the list be executed, can be defined separately from the list
of components that needs to be re-rendered
(refreshed).
• Let’s revisit our previous examples8.
![Page 60: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/60.jpg)
JSF Lifecycle – Postback Immediate
1. Restore View
2. Apply Request Values
6. Render Response
• We clicked the Reset button8.
• Name and date are cleared in HelloBean8.
• But we still see the old values in the page!
• How come??
![Page 61: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/61.jpg)
JSF Lifecycle – Postback Immediate
• Lesson 2: When executing an immediate command, the
UI components do NOT re-evaluate their underlying
value binding, possibly showing stale data
• How to force the UI components to do this?
• Three options
• Use af:resetActionListener
• Use oracle.adf.view.rich.util.ResetUtils.reset()
• UIComponent.resetValue()
• On an individual UI component, the reset action
• Clears the submittedValue
• Clears local component value so value binding is re-evaluated
• Marks the component as valid
![Page 62: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/62.jpg)
Implementing Reset/Cancel
Functionality using af:target tag!
• No need to set immediate=true on the button
• No issues with fields not being refreshed
• No issues with subregions not being refreshed when
using af:resetActionListener
![Page 63: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/63.jpg)
Say Hello Suggestions
• Suggest the type of greeting based on a person’s
name
![Page 64: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/64.jpg)
Say Hello Suggestions – Challenges
• We need(ed) immediate=true to prevent premature
validation of greeting field and date field
• We need to refresh the greeting field properly
• We need somehow to get hold of value entered in
name fieldname field
• We do want required validation on name field
-----------------------------------------------------------------------
• With af:target tag this becomes easy!
![Page 65: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/65.jpg)
Suggest Greeting Using af:target tag
![Page 66: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/66.jpg)
Auto-Suggested Hello Saying
• Auto-suggest the type of greeting when tabbing out
the name field
![Page 67: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/67.jpg)
Auto-Suggest Greeting Using af:target
tag
![Page 68: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/68.jpg)
The af:target tag is your friend!
• Lesson 16: When using JDeveloper 12c, use the
af:target tag to easily define which components
should be validated and submitted, and which
components should be re-rendered.
![Page 69: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/69.jpg)
Agenda
• A bit more on the ADF optimized lifecycle
![Page 70: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/70.jpg)
ADF Optimized Lifecycle
• ADF Faces sets boundaries on the page that allow
the JSF lifecycle to run just on components within the
boundary
• As we learned before, when autosubmitting an
editable field, the boundary is the component itselfeditable field, the boundary is the component itself
• Boundaries can be changed by using partialTriggers
property
![Page 71: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/71.jpg)
ADF Optimized Lifecycle
• A number of component events always trigger the
optimized lifecycle
• Events on table, treeTable: disclosureEvent, selectionEvent,
rangeChangeEvent, columnSelectionEvent, etc
• Events on tree: disclosureEvent, selectionEvent
• Events on showDetailIHeader: disclosureEvent
• Events on panelAccordion (showDetailIItem) :
disclosureEvent
• Events on components inside panelCollection (toolbar,
context menu, etc)
• 8
![Page 72: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/72.jpg)
Optimized Lifecycle of Employees –
Overflow Right
• When clicking on another row
• Overflow area should be refreshed
• Changes in overflow area should be preserved
![Page 73: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/73.jpg)
Optimized Lifecycle of Employees –
Configuring optimized lifecycle
• When clicking on another row, changes in overflow
area are now preserved
![Page 74: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/74.jpg)
Optimized Lifecycle of Employees –
Adding New Employee
• Clicking the New Employee button should also preserve
changes made in table overflow area
• Easy8 works out-of-the-box
• Now, let’s move that button to panelCollection toolbar
![Page 75: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/75.jpg)
Optimized Lifecycle of Employees –
Adding New Employee
• Now, it will NOT work out-of-the-box
• Button inside panelCollection will trigger optimized lifecycle
• Changes in table overflow area will not be submitted
• What is the “obvious” fix?
![Page 76: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/76.jpg)
Optimized Lifecycle of Employees –
Adding New Employee
• “Obvious” fix is to add button id to partialTriggers
property of panelFormLayout
• Lesson 17: To add components that should be
processed in optimized lifecycle, the partialTrigger
property must point to the boundary component
• In this use case, the boundary component of the
optimized lifecycle is the panelCollection
• So, “obvious” fix does not work, this will work:
• Note that you can use cascading partialTriggers
• If panelCollection partialTriggers property refers to table,
panelFormLayout only needs to refer to panelCollection
![Page 77: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/77.jpg)
Agenda
• Worls’s most comprehensive Hello World Demo
![Page 78: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/78.jpg)
Say Hello with a Song
![Page 79: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/79.jpg)
Say Hello with a Song
• Choose Song checkbox will need autoSubmit = true
• Question 1: Can we use a partialTrigger property or
do we need programmatic PPR to show/hide the
Song drop-down list?
• Song selectOneChoice will need autoSubmit = true• Song selectOneChoice will need autoSubmit = true
• Question 2: Can we use a partialTrigger property or
do we need programmatic PPR to show/hide the
YouTube video frame?
![Page 80: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/80.jpg)
Say Hello with a Song
• Choose Song checkbox will need autoSubmit = true
• Question 1: Can we use a partialTrigger property or
do we need programmatic PPR to show/hide the
Song drop-down list?
• Song selectOneChoice will need autoSubmit = true• Song selectOneChoice will need autoSubmit = true
• Question 2: Can we use a partialTrigger property or
do we need programmatic PPR to show/hide the
YouTube video frame?
![Page 81: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/81.jpg)
Say Hello with a Song – Try 1
• Will this work?
![Page 82: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/82.jpg)
Say Hello with a Song
• Lesson 18: To show/hide a component, the parent
component should be refreshed
• Answer 1: we need to refresh the enclosing
panelFormLayout to see the song selectOneChoice
• Using partialTrigger would cause premature validation errors • Using partialTrigger would cause premature validation errors
(lesson 15), so we use programmatic PPR
• Answer 2: No validation issues, we can safely use
partialTriggers property
![Page 83: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/83.jpg)
Say Hello with a Song – Correct Code
![Page 84: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/84.jpg)
More Info
• Understanding the JSF and ADF Optimized Lifeycle
• Slides and sample apps downloadable
• http://www.ateam-oracle.com/?p=3719
• Avoiding JSF and ADF Lifecycle Frustrations
• Shortened recording of this presentation by Frank Nimphius• Shortened recording of this presentation by Frank Nimphius
• http://download.oracle.com/otn_hosted_doc/jdeveloper/11gde
mos/JsfADFLifecycle/adfInsiderJsfAdfLifecycle.html
• A Hidden Gem of ADF Faces: The af:target tag:
• http://www.ateam-oracle.com/?p=20570
![Page 85: 18 Invaluable Lessons About ADF-JSF Interaction](https://reader034.fdocuments.in/reader034/viewer/2022050804/54847936b4af9f910d8b4b44/html5/thumbnails/85.jpg)
Final Recommendation
• Write the lessons down, print them, put them on the
wall, learn them by heart, and rehearse them every
week, it will save you tons of frustration!