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