Detailed explanation of a full custom Oracle ADF Component that leverages ADF core features like partial rendering, partial state saving, ADF skinning, etcetera.
2. About Us
Richard Olrichs
MN
www.olrichs.nl
@richardolrichs
Wilfred van der Deijl
The Future Group
www.redheap.com
@wilfreddeijl
3. 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
11. Facelets Tag Library - rh.taglib.xml
Identifiers, not Java classes
Component Attributes
12. faces-config.xml - Faces Component
Maps Component-Type identifier to
implementing Component Java Class
13. have ADF super classes
do the heavy work
holds all state
key per attr
returnType &
defaultValue
group of components that
typically share a renderer
15. 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
16. MultiSelect component
setId, setValue, setItemSelectListener,
setPartialTriggers
Add custom rule to
set from super class
17. 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
25. 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 on
Family & RendererType from component
● Taglib custom tag can override
RendererType and thus re-use same
component with different Renderer
30. ADF JavaScript Partitioning
Dependency JS Client Constructor
(defined by Renderer)
ADF only downloads and runs needed JS
core.js and any needed features
31. Component Peer Class
Creates the
RhMultiSelectPeer
Use client side ADFLogger
Register this Peer
to ClickEvent
Register this RhMultiSelectPeer
for RhMultiSelect component
32. Best practice: assert for correct types
Clicked delete icon
DOM interaction
Hidden input
[0,1,2] ⇒ [0,2]
Click button to select: Queue event to propagate to server
33. Client Side Select Event [1/2]
Call superclass initializer
with our event name
getters and setters for client
side interaction with event
35. Client Component
RhMultiSelect.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
40. Restore
View
Apply
Request
Values
Process
Validations
Update
Model
Values
Invoke
Application
Render
Response
JSF component’s “Local Value”
written to ValueExpression
eg. #{bindings.something.inputValue}
SubmittedValue is converted to
datatype of underlying model and
stored in component’s “Local Value”
Renderer invokes
EditableValueHolder.setSubmittedValue()
Invoke queued
Listeners
JSF Lifecycle
Renderer uses
SubmittedValue,
“LocalValue” or
“ModelValue”
41. Renderer Incoming HTTP Post
Queue server-side
ItemSelectEvent when receiving
client itemSelect event
44. 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
51. 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.
52. Helpful stuff
● web.xml parameters
● Resource loading (zie:
ImageResourceLoader)
● Toevoegen <method-signature> in de taglib
voor het snappen van methodExpression.
●