Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Custom ADF 
Components 
Deep Dive
About Us 
Richard Olrichs 
MN 
www.olrichs.nl 
@richardolrichs 
Wilfred van der Deijl 
The Future Group 
www.redheap.com 
...
Agenda 
● Live Demo Custom ADF Component 
● How to use 
● Deep dive code roundtrip 
○ server side java, css, client side j...
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)
Let’s Build It 
Server Side 
https://github.com/wvanderdeijl/adfcomponent (=http://bit.ly/adfcomp)
Component 
FacesBean 
Skin 
Renderer 
Component 
Peer 
Event 
ItemSelectEvent 
Server Side 
Client 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 ...
Getters & Setters 
for component 
properties
Component Class 
● Server side instance 
○ what MyBean gets via MyBean.setSelector() with 
binding=”#{myBean.selector}” 
●...
MultiSelect component 
setId, setValue, setItemSelectListener, 
setPartialTriggers 
Add custom rule to 
set from super cla...
Facelets Handler Class 
● Supplies rules to automap facelets tag 
attributes from XML file to component class 
properties ...
Component 
FacesBean 
Skin 
Renderer 
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
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 ...
Component 
FacesBean 
Skin 
Renderer 
Component 
Peer 
Event 
ItemSelectEvent
Let’s Build It 
Client Side
Client Side JavaScript Component 
Subclass from base ADF components 
Additional methods for client-side 
interaction with ...
Server-side Renderer determines 
Client JavaScript Component
ADF JavaScript Partitioning 
Dependency JS Client Constructor 
(defined by Renderer) 
ADF only downloads and runs needed J...
Component Peer Class 
Creates the 
RhMultiSelectPeer 
Use client side ADFLogger 
Register this Peer 
to ClickEvent 
Regist...
Best practice: assert for correct types 
Clicked delete icon 
DOM interaction 
Hidden input 
[0,1,2] ⇒ [0,2] 
Click button...
Client Side Select Event [1/2] 
Call superclass initializer 
with our event name 
getters and setters for client 
side int...
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 
● ...
Client Peer Object 
RhMultiSelectPeer.js 
Peer responsibilities: 
● DOM initialization and cleanup 
● DOM event handling 
...
Component 
FacesBean 
Skin 
Renderer 
Component 
Peer 
Event 
ItemSelectEvent
Handle HTTP posts 
Server Side
Renderer Incoming HTTP Post 
Detect submitted value 
set Component’s 
SubmittedValue
Restore 
View 
Apply 
Request 
Values 
Process 
Validations 
Update 
Model 
Values 
Invoke 
Application 
Render 
Response ...
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 submitte...
Component 
FacesBean 
Skin 
Renderer 
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 ...
Questions
Hidden Backup 
Slides
JavaScript 
● JavaScript libraries do not have 
namespaces, so prefix all JavaScript object 
names for the custom componen...
Helpful stuff 
● web.xml parameters 
● Resource loading (zie: 
ImageResourceLoader) 
● Toevoegen <method-signature> in de ...
view1.jsf 
Tag Lib 
Skin 
faces-config Component 
FacesBean 
Renderer 
Handler 
Component 
Peer 
Event 
ItemSelectEvent
Demo Shots 
Screen shots from the Demo
Adf component tech14
Adf component tech14
Upcoming SlideShare
Loading in …5
×

Adf component tech14

1,442 views

Published on

Presentation from UKOUG Tech14 on the 8th of December 2014. How to create a custom ADF Component from scratch.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Adf component tech14

  1. 1. Custom ADF Components Deep Dive
  2. 2. About Us Richard Olrichs MN www.olrichs.nl @richardolrichs Wilfred van der Deijl The Future Group www.redheap.com @wilfreddeijl
  3. 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. 4. Live Demo Custom ADF Component
  5. 5. How to use
  6. 6. Setup Consuming Project
  7. 7. JSF Tag ● Facelets Tag (or JSP Tag for 11.1.1 and backwards compatibility)
  8. 8. Let’s Build It Server Side https://github.com/wvanderdeijl/adfcomponent (=http://bit.ly/adfcomp)
  9. 9. Component FacesBean Skin Renderer Component Peer Event ItemSelectEvent Server Side Client Side
  10. 10. Facelets Tag Library - rh.taglib.xml Identifiers, not Java classes Component Attributes
  11. 11. faces-config.xml - Faces Component Maps Component-Type identifier to implementing Component Java Class
  12. 12. have ADF super classes do the heavy work holds all state key per attr returnType & defaultValue group of components that typically share a renderer
  13. 13. Getters & Setters for component properties
  14. 14. 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
  15. 15. MultiSelect component setId, setValue, setItemSelectListener, setPartialTriggers Add custom rule to set from super class
  16. 16. 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
  17. 17. Component FacesBean Skin Renderer Component Peer Event ItemSelectEvent
  18. 18. faces-config.xml - Renderer ComponentFamily and RendererType from component used to lookup RendererClass
  19. 19. Which properties to expect from rendered component Find property keys once and describe client side props
  20. 20. Start of the HTML component Add ADF skin Encode the Item <input type=”hidden” value=”[0,1,2]”/>
  21. 21. render <li> for each item with <button> to select and <span> for delete
  22. 22. Component selector pseudo selector style subclassing http://myfaces.apache.org/trinidad/devguide/skinning.html
  23. 23. Apache Trinidad Content Compression On Off
  24. 24. 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
  25. 25. Component FacesBean Skin Renderer Component Peer Event ItemSelectEvent
  26. 26. Let’s Build It Client Side
  27. 27. Client Side JavaScript Component Subclass from base ADF components Additional methods for client-side interaction with the component
  28. 28. Server-side Renderer determines Client JavaScript Component
  29. 29. ADF JavaScript Partitioning Dependency JS Client Constructor (defined by Renderer) ADF only downloads and runs needed JS core.js and any needed features
  30. 30. Component Peer Class Creates the RhMultiSelectPeer Use client side ADFLogger Register this Peer to ClickEvent Register this RhMultiSelectPeer for RhMultiSelect component
  31. 31. 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
  32. 32. Client Side Select Event [1/2] Call superclass initializer with our event name getters and setters for client side interaction with event
  33. 33. Client Side Select Event [2/2] Queue event (called by Peer)
  34. 34. 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
  35. 35. 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
  36. 36. Component FacesBean Skin Renderer Component Peer Event ItemSelectEvent
  37. 37. Handle HTTP posts Server Side
  38. 38. Renderer Incoming HTTP Post Detect submitted value set Component’s SubmittedValue
  39. 39. 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”
  40. 40. Renderer Incoming HTTP Post Queue server-side ItemSelectEvent when receiving client itemSelect event
  41. 41. MultiSelect JSF Component Class
  42. 42. Managed Bean Event Listener
  43. 43. 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
  44. 44. Component FacesBean Skin Renderer Component Peer Event ItemSelectEvent
  45. 45. Documentation
  46. 46. Starting point (11.1.2.4) http://docs.oracle.com/cd/E37975_01/web.111240/e16181/ad_custom.htm#CHDJIEDB
  47. 47. 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
  48. 48. Questions
  49. 49. Hidden Backup Slides
  50. 50. 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.
  51. 51. Helpful stuff ● web.xml parameters ● Resource loading (zie: ImageResourceLoader) ● Toevoegen <method-signature> in de taglib voor het snappen van methodExpression. ●
  52. 52. view1.jsf Tag Lib Skin faces-config Component FacesBean Renderer Handler Component Peer Event ItemSelectEvent
  53. 53. Demo Shots Screen shots from the Demo

×