Custom ADF ComponentsDeep Dive
About Us
Richard OlrichsMNwww.olrichs.nl@richardolrichs
Wilfred van der DeijlThe Future Groupwww.redheap.com@wilfreddeijl
Agenda
● Live Demo Custom ADF Component● How to use● Deep dive code roundtrip
○ server side java, css, client side javascript○ client and server events
● Lessons Learned
Live DemoCustom ADF Component
How to use
Setup Consuming Project
JSF Tag
● Facelets Tag(or JSP Tag for 11.1.1 and backwards compatibility)
Let’s Build ItServer Side
https://github.com/wvanderdeijl/adfcomponent (=http://bit.ly/adfcomp)
Component
FacesBean
Renderer
Skin
Component
Peer
Event
ItemSelectEvent
Server Side
Client Side
Facelets Tag Library - rh.taglib.xmlIdentifiers, not Java classes
Component Attributes
faces-config.xml - Faces Component
Maps Component-Type identifier to implementing Component Java Class
have ADF super classes do the heavy work
holds all state
key per attrreturnType & defaultValue
group of components that typically share a renderer
Getters & Settersfor component
properties
Component Class
● Server side instance○ what MyBean gets via MyBean.setSelector() with
binding=”#{myBean.selector}”● Setters and Getters for all properties● Internally keeps state in FacesBean with
setProperty, getProperty○ gives automatic state saving of JSF component tree
between requests and on failover in cluster
MultiSelect componentsetId, setValue, setItemSelectListener,
setPartialTriggers
Add custom rule to set from super class
Facelets Handler Class
● Supplies rules to automap facelets tag attributes from XML file to component class properties
● Needed custom rule to support our ItemSelectListener attribute as Oracle’s ADF version only works for listeners from oracle.adf.view.rich package
Component
FacesBean
Renderer
Skin
Component
Peer
Event
ItemSelectEvent
faces-config.xml - Renderer
ComponentFamily and RendererType from component used to lookup RendererClass
Which properties to expect from rendered component
Find property keys once and describe client side props
Encode the Item
Start of the HTML component
Add ADF skin
<input type=”hidden” value=”[0,1,2]”/>
render <li> for each itemwith <button> to select and <span> for delete
Component selector
pseudo selector
http://myfaces.apache.org/trinidad/devguide/skinning.html
style subclassing
Apache Trinidad Content Compression
Off
On
Component Renderer
● encodeAll method generates the HTML for the Component.
● ADF Skin (including compression)○ more powerful than plain CSS○ skinning properties for Renderer like -tr-open-
animation-duration○ relative colors: background-color: +#333333
● Renderer lookup based onFamily & RendererType from component
● Taglib custom tag can override RendererType and thus re-use same component with different Renderer
Component
FacesBean
Renderer
Skin
Component
Peer
Event
ItemSelectEvent
Let’s Build ItClient Side
Subclass from base ADF components
Client Side JavaScript Component
Additional methods for client-side interaction with the component
Server-side Renderer determines Client JavaScript Component
ADF JavaScript Partitioning
ADF only downloads and runs needed JScore.js and any needed features
Dependency JS Client Constructor (defined by Renderer)
Component Peer ClassCreates the
RhMultiSelectPeer
Use client side ADFLogger
Register this Peer to ClickEvent
Register this RhMultiSelectPeer for RhMultiSelect component
Best practice: assert for correct types
Clicked delete icon
Hidden input[0,1,2] ⇒ [0,2]
DOM interaction
Click button to select: Queue event to propagate to server
Client Side Select Event [1/2]
Call superclass initializer with our event name
getters and setters for client side interaction with event
Client Side Select Event [2/2]Queue event (called by Peer)
Client ComponentRhMultiSelect.js
● Client-side representation of a server-side component
● Public client-side API● Component state: Property container with
support for event handling● All ADF Faces JavaScript classes are
prefixed with Adf to avoid naming conflicts with other JavaScript libraries
Peer responsibilities:● DOM initialization and cleanup● DOM event handling● Geometry management● Partial page response handling● Child visibility change handling● Stateless private implementation
Client Peer ObjectRhMultiSelectPeer.js
Component
FacesBean
Renderer
Skin
Component
Peer
Event
ItemSelectEvent
Handle HTTP postsServer Side
Renderer Incoming HTTP Post
Detect submitted value
set Component’s SubmittedValue
RestoreView
ApplyRequestValues
Process Validations
UpdateModelValues
InvokeApplication
RenderResponse
Renderer invokesEditableValueHolder.setSubmittedValue()
SubmittedValue is converted to datatype of underlying model and stored in component’s “Local Value”
JSF component’s “Local Value”written to ValueExpressioneg. #{bindings.something.inputValue}
Invoke queued Listeners
JSF Lifecycle
Renderer uses SubmittedValue,
“LocalValue” or “ModelValue”
Renderer Incoming HTTP Post
Queue server-side ItemSelectEvent when receiving client itemSelect event
MultiSelect JSF Component Class
Managed Bean Event Listener
Renderer - Wrap up
● Renderer decodeInternal() decodes the incoming http request○ check if component value is submitted in this
request. If so, pass on to JSF component○ check for inbound events in the request
Component
FacesBean
Renderer
Skin
Component
Peer
Event
ItemSelectEvent
Documentation
Starting point (11.1.2.4)
http://docs.oracle.com/cd/E37975_01/web.111240/e16181/ad_custom.htm#CHDJIEDB
Documentation
● Full Github sample - http://bit.ly/adfcomp● ADF Web User Interface Dev Guide 11.1.2.4
○ 31 - Creating Custom ADF Faces Components● ADF Web User Interface Dev Guide 12.1.3
○ 4 - ADF Faces Client Side Architecture○ Appendix A.2 - web.xml parameters○ Appendix F.1.1 - adf-js-partitions.xml
● ADF Skin Editor Dev Guide 12.1.3● Apache Trinidad Skinning● JSF 2.1 Reference Documentation● ADF Source Code
○ available from Oracle Support
Questions
Hidden Backup Slides
JavaScript
● JavaScript libraries do not have namespaces, so prefix all JavaScript object names for the custom component using the same prefix.
● Place each JavaScript object in its own separate source file for best practice and consistency.
Helpful stuff
● web.xml parameters● Resource loading (zie:
ImageResourceLoader)● Toevoegen <method-signature> in de taglib
voor het snappen van methodExpression.●
Componentfaces-config
Tag Lib
view1.jsf
FacesBean
Renderer
Skin
Handler
Component
Peer
Event
ItemSelectEvent
Demo ShotsScreen shots from the Demo
Top Related