Custom ADF

Components
Deep Dive
About Us
Richard Olrichs Wilfred van der Deijl
MN The Future Group
www.olrichs.nl www.redheap.com
@richardolrichs @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 Demo
Custom ADF Component
How to use
Setup Consuming Project
JSF Tag

Facelets Tag
(or JSP Tag for 11.1.1 and backwards
compatibility)
Lets Build It
Server Side

https://github.com/wvanderdeijl/adfcomponent (=http://bit.ly/adfcomp)
 Client Side

Skin

Peer

Component

Event
Renderer

Component ItemSelectEvent

FacesBean
Server Side
Facelets Tag Library - rh.taglib.xml
Identifiers, 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 attr

returnType &
defaultValue

group of components that

typically share a renderer
Getters & Setters
for 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 component
setId, 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 Oracles ADF
version only works for listeners from oracle.
adf.view.rich package
 Skin

Peer

Component

Event
Renderer

Component ItemSelectEvent

FacesBean
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
 Start of the HTML
component

Add ADF skin

Encode the Item

<input type=hidden
value=[0,1,2]/>
render <li> for each item
with <button> to select and <span> for delete
 Component selector

pseudo selector

style subclassing

http://myfaces.apache.org/trinidad/devguide/skinning.html
Apache Trinidad Content Compression

On

Off
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
 Skin

Peer

Component

Event
Renderer

Component ItemSelectEvent

FacesBean
Lets Build It
Client Side
Client Side JavaScript Component

Subclass from base ADF components

Additional methods for client-side

interaction with the component
Server-side Renderer determines
Client JavaScript Component
ADF JavaScript Partitioning

JS Client Constructor
Dependency
(defined by Renderer)

ADF only downloads and runs needed JS

core.js and any needed features
Component Peer Class
Creates 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

DOM interaction
Hidden input
[0,1,2] [0,2]

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 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
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
 Skin

Peer

Component

Event
Renderer

Component ItemSelectEvent

FacesBean
Handle HTTP posts
Server Side
Renderer Incoming HTTP Post

Detect submitted value

set Components
SubmittedValue
 JSF Lifecycle

Apply Update
Restore Process Invoke Render
Request Model
View Validations Application Response
Values Values

Invoke queued
Listeners

JSF components Local Value

written to ValueExpression
eg. #{bindings.something.inputValue}

SubmittedValue is converted to
datatype of underlying model and
stored in components Local Value Renderer uses
SubmittedValue,
Renderer invokes LocalValue or
EditableValueHolder.setSubmittedValue() 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
 Skin

Peer

Component

Event
Renderer

Component ItemSelectEvent

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

 view1.jsf

Skin
Peer

Tag Lib
Renderer Component

Event

Handler

faces-config Component ItemSelectEvent

FacesBean
Demo Shots
Screen shots from the Demo