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