This document provides an overview and deep dive into creating custom ADF components. It discusses building a custom multi-select component including developing the server-side Java code, client-side JavaScript, and handling server-side and client-side events. Documentation references and questions from the audience are also included.

1. Custom ADF
Components
Deep Dive

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

4. Live Demo
Custom ADF Component

5. How to use

6. Setup Consuming Project

7. JSF Tag
● Facelets Tag
(or JSP Tag for 11.1.1 and backwards
compatibility)

8. Let’s Build It
Server Side
https://github.com/wvanderdeijl/adfcomponent (=http://bit.ly/adfcomp)

9. Component
FacesBean
Skin
Renderer
Component
Peer
Event
ItemSelectEvent
Server Side
Client Side

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

14. Getters & Setters
for component
properties

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

18. Component
FacesBean
Skin
Renderer
Component
Peer
Event
ItemSelectEvent

19. faces-config.xml - Renderer
ComponentFamily and RendererType from
component used to lookup RendererClass

20. Which properties to expect
from rendered component
Find property keys once and
describe client side props

21. Start of the HTML
component
Add ADF skin
Encode the Item
<input type=”hidden”
value=”[0,1,2]”/>

22. render <li> for each item
with <button> to select and <span> for delete

23. Component selector
pseudo selector
style subclassing
http://myfaces.apache.org/trinidad/devguide/skinning.html

24. Apache Trinidad Content Compression
On
Off

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

26. Component
FacesBean
Skin
Renderer
Component
Peer
Event
ItemSelectEvent

27. Let’s Build It
Client Side

28. Client Side JavaScript Component
Subclass from base ADF components
Additional methods for client-side
interaction with the component

29. Server-side Renderer determines
Client JavaScript Component

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

34. Client Side Select Event [2/2]
Queue event (called by Peer)

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

36. Client Peer Object
RhMultiSelectPeer.js
Peer responsibilities:
● DOM initialization and cleanup
● DOM event handling
● Geometry management
● Partial page response handling
● Child visibility change handling
● Stateless private implementation

37. Component
FacesBean
Skin
Renderer
Component
Peer
Event
ItemSelectEvent

38. Handle HTTP posts
Server Side

39. Renderer Incoming HTTP Post
Detect submitted value
set Component’s
SubmittedValue

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

42. MultiSelect JSF Component Class

43. Managed Bean Event Listener

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

45. Component
FacesBean
Skin
Renderer
Component
Peer
Event
ItemSelectEvent

46. Documentation

47. Starting point (11.1.2.4)
http://docs.oracle.com/cd/E37975_01/web.111240/e16181/ad_custom.htm#CHDJIEDB

48. 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

49. Questions

50. Hidden Backup
Slides

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.
●

53. view1.jsf
Tag Lib
Skin
faces-config Component
FacesBean
Renderer
Handler
Component
Peer
Event
ItemSelectEvent

54. Demo Shots
Screen shots from the Demo