JSF Component Behaviors
- 1. JSF Component Behaviors Andy Schwartz | Oracle Corporation
- 2. Agenda History Behavior API: Basics A Simple Sample Behavior Behavior API: Advanced Topics Auto Suggest Sample Behavior Future
- 3. History
- 4. First First, there was Ajax. And it was good. But it required JavaScript code.
- 5. Sample: Ajax JavaScript API <h:outputScript name="jsf.js" library="javax.faces"/> <h:commandButton value="Do something Ajaxy" onclick="jsf.ajax.request(this, event, {render: 'out'}); return false;"/> <h:outputText id=”out” value=”Update me!”/>
- 6. Ajax JavaScript API The Good Standard Flexible The Bad Verbose Error-prone
- 7. Time for a declarative Ajax API
- 8. Declarative Ajax, Take 1 New Components?
- 9. Sample: New Components? <h:commandButton value=“Not Ajax”/> <a:commandButton value=“Ajax!”/>
- 10. New Components? The Good Simple Familiar The Bad Component explosion Next feature: more components?
- 11. Declarative Ajax, Take 2 New Attributes?
- 12. Sample: New Attributes? <h:commandButton ajax=“true”/>
- 13. New Attributes? The Good Simple No new components The Bad Attribute explosion Next feature: more attributes?
- 14. Declarative Ajax, Take 3 Attached Objects? Remember those?
- 15. What Are Attached Objects? Attached objects enhance components with functionality not anticipated by the original component author.
- 16. Some Existing Attached Objects Converters f:convertNumber f:convertDateTime Validators f:validateLength f:validateBean f:validateRegex
- 17. Ajax Attached Object? <!-- We already do this…--> <h:inputText> <f:convertNumber/> </h:inputText> <!-- Why not this? --> <h:commandButton> <f:ajax/> </h:commandButton>
- 18. Ajax Attached Object Yes!
- 19. Ajax Attached Object The Good Easy to use Familiar pattern No attribute explosion No component explosion Some precedent exists Think a4j:support as attached object instead of component The Bad More verbose than component/attribute alternatives Somebody needs to design the API!
- 21. API Requirements Loose Coupling Surprise?
- 22. Loose Coupling Components should not contain Ajax-specific code Objects contribute scripts to component markup Components know where to insert attached scripts Objects may be attached to arbitrary components Objects may implement arbitrary behaviors Not limited to Ajax
- 23. Two New Contracts ClientBehavior ClientBehaviorHolder
- 24. ClientBehavior Contract String getScript(ClientBehaviorContext)
- 25. ClientBehavior Scripts What can a ClientBehavior script do?
- 26. Say Hello // Some people *always* start with “Hello, World!” public String getScript(ClientBehaviorContext c) { return “alert(‘Hello, World!’)”; }
- 27. Ajax // Slightly more interesting public String getScript(ClientBehaviorContext c) { return “jsf.ajax.request(this, event)”; }
- 28. What Else? Client-side validation DOM manipulation Tooltips, hover content Disclosures Logging Confirmation Key handling Auto-suggest
- 29. Who Calls getScript()? Components/Renderers call getScript() during rendering and insert scripts into the generated markup.
- 30. Standard ClientBehaviors Just one for now Java API: AjaxBehavior Tag API: <f:ajax>
- 31. Attaching ClientBehaviors Remember EditableValueHolder?
- 32. ClientBehaviorHolder Contract void addClientBehavior( String eventName, ClientBehavior behavior)
- 33. What Events? Components define available events/attach points Behavior events can correspond to DOM events Events can also be “logical” (component-level) Some obvious events: h:commandButton: click h:inputText: change Some less obvious events h:commandButton: focus, blur h:inputText: keyup, keydown, keypress h:panelGroup: mouseover, mouseout foo: bar
- 34. ClientBehaviorHolder Contract Collection<String> getEventNames();
- 35. Usage <h:commandButton> <f:ajax event=“focus”/> </h:commandButton> <h:inputText> <f:ajax event=“keypress”/> </h:inputText> <h:panelGroup> <foo:showHoverContent event=“mouseover”/> </h:panelGroup>
- 36. Logical Events Some components expose logical events Command: action (not DOM click) Input: valueChange (not DOM change) Client-side event abstraction over DOM Hides arbitrary DOM implementations Matches server-side abstraction Helpful in wrapping scenarios
- 37. Logical Events <!-- "click" event doesn't work if we want to target command components exclusively. --> <f:ajax event="click"> <h:panelGroup> <h:commandButton/> <h:inputText/> <h:commandButton/> </h:panelGroup> </f:ajax>
- 38. Logical Events <!-- Use logical "action" event instead. --> <f:ajax event="action"> <h:panelGroup> <h:commandButton/> <h:inputText/> <h:commandButton/> </h:panelGroup> </f:ajax>
- 39. Default Events What happens if you do not specify an event?
- 40. ClientBehaviorHolder Contract String getDefaultEventName();
- 41. Default Event Usage <h:commandButton> <!-- Default event: action --> <f:ajax/> </h:commandButton> <h:inputText> <!-- Default event: value change --> <f:ajax/> </h:inputText> <h:panelGroup> <!-- No default event defined: Boom! --> <f:ajax/> </h:panelGroup>
- 42. More Event Fun: Chaining <h:commandButton> <foo:confirm/> <f:ajax/> </h:commandButton>
- 43. More Event Fun: Multiple Events <h:commandButton> <f:ajax/> <foo:showHoverContent event=“mouseover”/> <foo:hideHoverContent event=“mouseout”/> </h:commandButton>
- 44. Standard ClientBehaviorHolders All standard components implement ClientBehaviorHolder.
- 45. A Simple Sample Behavior
- 46. Our Simple Sample Behavior Confirm Behavior
- 47. Step 1: Implement the Behavior Extend ClientBehaviorBase Implement getScript()
- 48. ConfirmBehavior public class ConfirmBehavior extends ClientBehaviorBase { @Override public String getScript( ClientBehaviorContext behaviorContext) { return "return confirm('Are you sure?')"; } }
- 49. Step 2: Register the Behavior Two ways to do this Old School: faces-config.xml New School: annotations Both call Application.addBehavior(String, Class) Associates Behavior class with a behavior id. Enables Application.createBehavior(String)
- 50. Register Behavior: Old School <faces-config> <behavior> <behavior-id>jsf2foo.behavior.Confirm</behavior-id> <behavior-class> org.jsf2foo.behavior.confirm.ConfirmBehavior </behavior-class> </behavior> </faces-config>
- 51. Register Behavior: New School @FacesBehavior("jsf2foo.behavior.Confirm”) public class ConfirmBehavior …
- 52. Step 3: Define the Tag Registering Behavior enables Application.createBehavior(String) Still need a tag to expose to page authors Facelets tags are defined in taglib.xml file taglib.xml files live in WEB-INF or META-INF
- 53. Jsf2foo.taglib.xml <facelet-taglib> <namespace>http://jsf2foo.org/behavior</namespace> <tag> <tag-name>confirm</tag-name> <behavior> <behavior-id>jsf2foo.behavior.Confirm</behavior-id> </behavior> </tag> </facelet-taglib>
- 54. Step 4: Ready To Go The Behavior is now available for use under namespace specified in the taglib.xml file
- 55. ConfirmBehavior Usage <html … xmlns:j2f="http://jsf2foo.org/behavior"> … <h:commandButton value="Submit"> <j2f:confirm/> </h:commandButton>
- 56. What Gets Rendered? <input type="submit" value="Submit" onclick="return confirm('Are you sure?')" />
- 57. Behavior API: Advanced Topics
- 58. ClientBehaviorContext Provides context for getScript() FacesContext Component Event name Parameters Source id
- 59. ClientBehaviorHints Enum returned by ClientBehavior.getHints() Provides hints to component/renderer Currently only one hint: SUBMITTING
- 60. ClientBehavior Decoding ClientBehaviors also participate in decoding ClientBehavior.decode() Allows scripts to communicate back to server What can ClientBehaviors do in decode? Queue an event Send a response
- 61. Server-Side Events ClientBehaviors can queue events Events are queued on parent component Leverage existing FacesEvent lifecycle BehaviorEvent extends FacesEvent BehaviorListener extends FacesListener
- 62. AjaxBehavior Event Sample <!-- Don't need a special event here --> <h:commandButton actionListener="#{foo.doIt}"> <f:ajax/> </h:commandButton> <!-- But comes in handy here --> <h:panelGroup> <foo:showHoverContent event=“mouseover” listener="#{foo.hover}"/> </h:panelGroup>
- 63. Behavior API So far we've been focusing on ClientBehavior API There is more to the story: Behavior API ClientBehavior extends Behavior Base class for other possible non-client Behaviors Phased behavior Behavior defines event handling contract broadcast(BehaviorEvent)
- 64. ClientBehaviorRenderer ClientBehaviors can delegate to RenderKit-specific ClientBehaviorRenderers Similar to UIComponent/Renderer split Allows RenderKit-specific script generation and decoding Allows frameworks to plug in framework-specific functionality without replacing ClientBehavior implementations.
- 66. Goals/Assumptions Provide Google Auto Suggest-like functionality Behavior attached to arbitrary input components Assumption: Access to specific client events Assumption: DOM input element
- 67. Contract We need an API for retrieving suggestions.
- 68. Contract: Suggester public interface Suggester { public Collection<String> suggest(String prefix); }
- 69. Contract We need a tag API.
- 70. Contract: Tag <!-- Attach to standard inputText --> <h:inputText id="search"> <j2f:suggest suggester="#{suggester}"/> </h:inputText> <!-- Attach to Trinidad inputText too --> <tr:inputText id="search"> <j2f:suggest suggester="#{suggester}"/> </tr:inputText>
- 71. Event Handling Behavior Key events: Retrieve suggestions, show list Up/down arrow: Navigate suggestions list Enter: Accept suggestion Escape: Hide suggestions list Blur: Hide suggestions list
- 72. Handler Implementation Typically the default BehaviorHandler is sufficient We have special requirements Single Behavior instance, multiple events Solution: Need a custom BehaviorHandler
- 73. SuggestBehavior: getScript() Typically ClientBehaviors generate a single script We have special requirements SuggestBehavior generates event-specific scripts Solution: ClientBehaviorContext.getEventName()
- 74. Requesting Suggestions Key up activity triggers suggestions list Suggestions retrieved from server Target the SuggestBehavior instance Solution: Use jsf.ajax.request to implement fetch
- 75. Requesting Suggestions Key up activity triggers suggestions list Suggestions retrieved from server Target the SuggestBehavior instance Solution: Use jsf.ajax.request to implement fetch
- 76. Selecting a Suggestion Handle key up for arrow key navigation Enter key accepts current selection However, enter key also submits form Solution: cancel default enter key behavior
- 77. Resource Dependencies SuggestBehavior requires JavaScript, CSS Dependencies should be transparent to application Solution: Use new ResourceHandler mechanism
- 78. What's Left? State saving Error handling Request collapsing Autocomplete
- 79. Future
- 80. Ideas Targeted postback paylaods Ajax over GET Out of band Ajax Improved Ajax queueing/event collapsing Pre-execute behavior processing Alternate behavior contracts Fallback behavior Attached object value expression support Attached object state saving Initialization/DOM modifiers