advanced javaserver technology custom component development
TRANSCRIPT
![Page 1: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/1.jpg)
2006 JavaOneSM Conference | Session TS-3187 |
Advanced JavaServer™ Faces Technology Custom Component Development
Chris SchalkPrincipal Product Manager/Technology EvangelistOracle Corporationwww.oracle.com
TS-3187
![Page 2: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/2.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 2
Learn how to build a variety of custom JavaServer Faces based components ranging from simple to rich client architectures
Goal
![Page 3: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/3.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 3
Agenda
The BasicsRendering StrategiesKey things to knowRendering in different MarkupsBuilding Rich Client componentsStrategies for integrating AJAX into
JavaServer Faces technologySummary
![Page 4: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/4.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 4
Agenda
The BasicsRendering StrategiesKey things to knowRendering in different MarkupsBuilding Rich Client componentsStrategies for integrating AJAX into
JavaServer Faces technologySummary
![Page 5: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/5.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 5
Of custom JavaServer Faces based Component development
The “Basics”
• JavaServer Faces based UI Components consists of these “moving parts”• UIComponent class
● Provides the behavior of the component• Renderer class
● Rendering class that display component to client● Is optional, rendering can be in UIComponent as well
• UIComponentTag Class● Tag handler for using UI component in JavaServer PagesTM (JSPTM)
technology● Associates Renderer with UIComponent● Is also optional, only for use with JSP based clients
• Tag library descriptor (TLD)● Optional, again only for JSP technology
![Page 6: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/6.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 6
Of custom JavaServer Faces based Component development
The “Basics”
• JavaServer Faces based UI Components can also contain other non-visual components such as:• Validators
● Validates incoming data• Converters
● Converts submitted String value to custom server-side value (Ex: CreditCard…)
• And so on…
![Page 7: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/7.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 7
The “Basics”
<f:view><html><body><h:form> <jcr:mywidget>
</h:form></body></html></f:view>
Usage in JSP technologyUI Component Elements
UIComponentClass
A JavaServer Faces “UI component”
RendererClass
JSPUIComponentTag
Class
TLD
Validator ConverterConverterConverter
Of custom JavaServer Faces based Component development
![Page 8: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/8.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 8
A UIComponent Code Samplepublic class HtmlHelloWorld extends UIComponentBase { public String getFamily(){ return null; } public void encodeBegin(FacesContext context) throws IOException { String hellomsg = (String)getAttributes().get("hellomsg"); ResponseWriter writer = context.getResponseWriter(); writer.startElement("div", this); writer.writeAttribute("style", "color : red", null ); writer.writeText(hellomsg, null); writer.endElement("div"); }}
![Page 9: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/9.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 9
A UIComponent Structure
Public class HtmlHelloWorld extends UIComponentBase
Public String getFamily(){ ...}Public void encodeBegin(){ ...}Public void encodeChildren(){ ...}Public void encodeEnd(){ ...}Public void decode(){ ...} ...
![Page 10: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/10.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 10
A UIComponentTag Samplepublic class HtmlHelloInputTag extends UIComponentTag { public String getComponentType(){ return "HtmlHelloInput"; } public String getRendererType(){ return null; } protected void setProperties(UIComponent component){ super.setProperties(component); … } public void release(){ super.release(); }}
![Page 11: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/11.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 11
A Renderer Samplepublic class HtmlInputDateRenderer extends Renderer { public HtmlInputDateRenderer() { super(); } public void encodeBegin(FacesContext context, UIComponent component) throws IOException { … } public void decode(FacesContext context, UIComponent component) { … }}
![Page 12: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/12.jpg)
2006 JavaOneSM Conference | Session XXXX | 12
DEMOHtmlHelloworld and HtmlInputDate—Some first custom components
![Page 13: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/13.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 13
How to Register Renderkits and Renderer Families
• Registered Faces-config.xml• Allows for association of component-family with
renderer types
![Page 14: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/14.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 14
How to Register Renderkits and Renderer Families
<render-kit> <renderer> <component-family>InputDateFamily</component-family> <renderer-type>WmlInputDateRenderer</renderer-type> <renderer-class> com.jsfcompref.components.component.WmlInputDateRenderer </renderer-class> </renderer> <renderer> <component-family>InputDateFamily</component-family> <renderer-type>HtmlInputDateRenderer</renderer-type> <renderer-class> com.jsfcompref.components.component.HtmlInputDateRenderer </renderer-class> </renderer></render-kit>
![Page 15: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/15.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 15
Agenda
The BasicsRendering StrategiesKey things to knowRendering in different MarkupsBuilding Rich Client componentsStrategies for integrating AJAX into
JavaServer Faces technologySummary
![Page 16: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/16.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 16
Key things to Know When Building Custom JavaServer Faces Based Components
Thread Safety • When building renderers should not use
instance variables as they are not threadsafe• Can place variables in rendering methods
instead
![Page 17: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/17.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 17
Key things to Know When Building Custom JavaServer Faces Based Components
Tag Coding Details• In general, you shouldn’t place client specific
code in your JSP Tag Class• Tag Class properties should always be
initialized with null values• Do not set default values in JSP Tag class• Set default values in renderer code
• Tag code should only have setters (no getters)
![Page 18: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/18.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 18
Key things to Know When Building Custom JavaServer Faces Based Components
Component Naming Guidelines• Should use hierarchical naming for registered
components in faces-config.• Should convey rendering technology along with
component type• For example: HtmlInputDate
![Page 19: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/19.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 19
Agenda
The BasicsRendering StrategiesKey things to knowRendering in different MarkupsBuilding Rich Client componentsStrategies for integrating AJAX into
JavaServer Faces technologySummary
![Page 20: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/20.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 20
Rendering in Different Markups
• In addition to HTML, Faces renderers can render in any Markup such as WML, XML, SVG or even binary
![Page 21: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/21.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 21
An InputDate Component for WML
• WmlInputDate a variation of the HtmlInputDate component that renders WML instead• Same UI Component, but uses different renderer
![Page 22: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/22.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 22
HtmlInputDate and WmlInputDate Component Architecture
UI Component Elements
UIComponentClass
WML/HTML InputDate component
WML RendererClass
HTML RendererClass
WML UIComponentTag
Class
HTML UIComponentTag
Class
![Page 23: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/23.jpg)
2006 JavaOneSM Conference | Session XXXX | 23
DEMOWMLInputDate —A WML InputDate Variation
![Page 24: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/24.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 24
Rendering SVG for Charts
• Can render SVG markup to build chart components
![Page 25: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/25.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 25
SVG Bar Chart Component Architecture
UI Component Elements
UIComponent Class
SVG BarChart UI component
SVG RenderingCode
![Page 26: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/26.jpg)
2006 JavaOneSM Conference | Session XXXX | 26
DEMOAn SVG Charting Component
![Page 27: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/27.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 27
Agenda
The BasicsRendering StrategiesKey things to knowRendering in different MarkupsBuilding Rich Client componentsStrategies for integrating AJAX into
JavaServer Faces technologySummary
![Page 28: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/28.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 28
Making Components Come Alive
• General shift towards Rich Client Architecture• Realization that most browsers can
support a much richer user interface in a consistent manner
• No longer a need to do the old-fashioned full page refresh for each interaction
• Ajax provides an easy way to extract data from server without page refresh. Hottest thing!
![Page 29: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/29.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 29
Making Components Come Alive
• The more general definition of AJAX: includes both rich client architecture as well as XMLHttpRequest
• A first rich client example (without XMLHttpRequest)• A slider component
![Page 30: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/30.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 30
A Slider JavaServer Faces Based Component
• Provides user with ability to manipulate a slider without incurring Http transaction.
• Uses JavaScriptTM technology
• A first rich client example (without XMLHttpRequest)• A slider component
![Page 31: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/31.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 31
<f:view><html><head> <jcr:sliderscript /></head><body><h:form>… <jcr:slider … />
</h:form></body></html></f:view>
Usage in JSP technology
UI Component Elements
The SliderScript UI component
UIComponentTagSliderScript
UIComponentRenderer
UI Component Elements
The SliderInput UI component
UIComponentTagSliderInput
UIComponentRenderer
Slider JavaServer Faces Component Architecture
![Page 32: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/32.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 32
<f:view><html><head> <jcr:sliderscript /></head><body><h:form>… <jcr:slider … />
</h:form></body></html></f:view>
Usage in JSP technology
UI Component Elements
The SliderScript UI component
UIComponentTagSliderScript
UIComponentRenderer
UI Component Elements
The SliderInput UI component
UIComponentTagSliderInput
UIComponentRenderer
<script language="JavaScript" src="slider/js/Slider.js"></script>
<div id=\"" + destinationDiv + "\"></div><script>var " + destinationDiv + " = document.getElementById(\"" + destinationDiv + "\"); " ... …</script>
![Page 33: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/33.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 33
Strategies for Rendering JavaScript Code
• Can simply render JavaScript based inclusion tag • Ex: <script language="JavaScript"
src="slider/js/Slider.js"></script>• Ideal for static JavaScript code
• Can render JavaScript code dynamically• Sometimes needed when JavaScript code must be
“made to order”• Both strategies used for Slider component
![Page 34: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/34.jpg)
2006 JavaOneSM Conference | Session XXXX | 34
DEMOBuilding a JavaServer Faces Based Slider Component
![Page 35: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/35.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 35
Agenda
The BasicsRendering StrategiesKey things to knowRendering in different MarkupsBuilding Rich Client componentsStrategies for integrating AJAX into
JavaServer Faces technologySummary
![Page 36: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/36.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 36
Adding AJAX to Your Custom Components
• AJAX (Asynchronous JavaScript™ technology and XML) allows for independent Web requests that don’t necessitate full page refresh
• Provides for a much richer user interface• JavaScript XMLHttpRequest object must be
used by client side JavaScript code
![Page 37: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/37.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 37
Using XMLHttpRequestif (window.XMLHttpRequest) { req = new XMLHttpRequest();}else if (window.ActiveXObject) { req = newActiveXObject("Microsoft.XMLHTTP");} // To initiate request usereq.open("GET", url, true);
![Page 38: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/38.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 38
Using XMLHttpRequestreq.onreadystatechange = processXMLResponse; // The function processXMLResponse( ), which processes the // XML response, is invoked when the request is fulfilled. // A callback function can also declared inline in the // onreadystatechange statement: req.onreadystatechange = processXMLResponse() { // process request };
![Page 39: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/39.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 39
DirectorySearch an AJAX JavaServer Faces Based Component
• Allows user to lookup employee directory information simply by keying in characters
![Page 40: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/40.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 40
DirectorySearch JavaServer Faces Based Component Architecture
![Page 41: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/41.jpg)
2006 JavaOneSM Conference | Session XXXX | 41
DEMOBuilding an AJAX directory search component
![Page 42: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/42.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 42
Strategies for Rendering JavaScript Code● Can render static JavaScript based libraries
separately● Can even provide tag/component for this● Slider uses this approach
● Component can render all JavaScript code necessary● Can check to see if JavaScript based library
already rendered on client to prevent duplicates
● Can use PhaseListener, or Renderer code
![Page 43: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/43.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 43
Vendor Supplied Rich Client Components
![Page 44: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/44.jpg)
2006 JavaOneSM Conference | Session XXXX | 44
DEMOOracle’s ADF Faces Rich Client Components
![Page 45: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/45.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 45
Summary
• JavaServer Faces Based Component Development is slightly complex at first, but soon reveals its powerful flexibility
• AJAX/Rich client components can be attained by rendering JavaScript code although there are different strategies to rendering JavaScript code
• Be creative! Use JavaServer Faces to draw new developers to Java world.
![Page 46: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/46.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 46
More Info
• http://jroller.com/page/cschalk• http://jsfcentral.com• http://otn.oracle.com/jsf• http://otn.oracle.com/ajax
![Page 47: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/47.jpg)
2006 JavaOneSM Conference | Session TS-3187 | 47
More Info
• Available summer 2006!
● Authors: Chris Schalk Ed Burns
● Tech Editor: Adam Winer
![Page 48: Advanced JavaServer Technology Custom Component Development](https://reader031.vdocument.in/reader031/viewer/2022022507/62171ee7e33781426a756074/html5/thumbnails/48.jpg)
2006 JavaOneSM Conference | Session XXXX | 48
Q&AChris Schalk