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)

Lets 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 Oracles 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

render for each itemwith to select and 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

Lets 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 Components SubmittedValue

RestoreView

ApplyRequestValues

Process Validations

UpdateModelValues

InvokeApplication

RenderResponse

Renderer invokesEditableValueHolder.setSubmittedValue()

SubmittedValue is converted to datatype of underlying model and stored in components Local Value

JSF components Local Valuewritten 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 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