JSF Custom Components

52
Some Examples Michael A. Fons Aderas

description

This presentation explores and explains some concepts behind JSF/JSP Custom Components and how you might make them work for you.

Transcript of JSF Custom Components

Page 1: JSF Custom Components

Some ExamplesMichael A. Fons

Aderas

Page 2: JSF Custom Components
Page 3: JSF Custom Components
Page 4: JSF Custom Components
Page 5: JSF Custom Components
Page 6: JSF Custom Components

.

Page 7: JSF Custom Components
Page 8: JSF Custom Components

WEB BROWSER OUTPUT JSP/JSF SOURCE CODE

Page 9: JSF Custom Components
Page 10: JSF Custom Components
Page 11: JSF Custom Components
Page 12: JSF Custom Components
Page 13: JSF Custom Components
Page 14: JSF Custom Components
Page 15: JSF Custom Components
Page 16: JSF Custom Components
Page 17: JSF Custom Components
Page 18: JSF Custom Components
Page 19: JSF Custom Components
Page 20: JSF Custom Components
Page 21: JSF Custom Components
Page 22: JSF Custom Components
Page 23: JSF Custom Components
Page 24: JSF Custom Components

“I want to use RichOutputText, Fred.”

“Our default render kit of oracle.adf.rich will help

with that, Charlie.”

Page 25: JSF Custom Components

“So we agree then: Charlie is a

combineComponentType!”

“If that is how you feel, Fred, then we are agreed.”

Page 26: JSF Custom Components

<application> <default-render-kit-id>oracle.adf.rich</default-render-kit-id> </application> <component> <component-type>combineComponentType</component-type> <component-class>mfons.presentations.JSF.customcompdev.view.components.component.CombineSimple</component-class> </component>

Page 27: JSF Custom Components

I recognize all this!

Page 28: JSF Custom Components

private ValueExpression valueVE;

<attribute><description>first value</description><name>valueVE</name><deferred-value> <type>java.lang.String</type></deferred-value></attribute>

Page 29: JSF Custom Components
Page 30: JSF Custom Components
Page 31: JSF Custom Components

@Overridepublic void encodeEnd(FacesContext facesContext) throws IOException { ResponseWriter writer = facesContext.getResponseWriter(); super.encodeEnd(facesContext); encodeSecondField(facesContext);}

RichOutputText embedded

Page 32: JSF Custom Components
Page 33: JSF Custom Components
Page 34: JSF Custom Components

<?xml version = '1.0' encoding = 'windows-1252'?><taglib xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd" version="2.1" xmlns="http://java.sun.com/xml/ns/javaee">

<display-name>combinesimple</display-name> <tlib-version>1.0</tlib-version> <short-name>combine</short-name> <uri>http://mfonsadf.blogspot.com/JSF/customcomp/combine</uri> <tag> <description>Creating this component may be a useful exercise</description> <name>combinesimple</name> <tag-

class>mfons.presentations.JSF.customcompdev.view.components.component.CombineSimpleTag</tag-class>

<body-content>JSP</body-content> <attribute> <description>first value</description> <name>valueVE</name>

<deferred-value><type>java.lang.String</type></deferred-value> </attribute> <attribute> <description>second value</description> <name>value2VE</name> <deferred-value><type>java.lang.String</type></deferred-value> </attribute> </tag></taglib>

Page 35: JSF Custom Components

// Package and Imports omitted for brevity.

public class CombineSimpleTag extends UIComponentELTag {// public CombineSimpleTag() {// } private ValueExpression valueVE; private ValueExpression value2VE; // Mandatory to implement. public String getComponentType() { return "combineComponentType"; }

public String getRendererType() { return null; } // Override: release, setProperties methods also.

Page 36: JSF Custom Components

@Override public void release() { super.release(); valueVE = null; value2VE = null; }

@Override protected void setProperties(UIComponent uIComponent) { super.setProperties(uIComponent); if (valueVE != null) { uIComponent.setValueExpression("value", valueVE); } if (value2VE != null) { ((CombineSimple) uIComponent).setValue2VE(value2VE); } }

// Accessor methods omitted for brevity.}

Ew…

Page 37: JSF Custom Components

// Package/imports omitted...

/** * The point of this component is going to be an output of some sort * followed by a programmatic insertion of a separate output component. */public class CombineSimple extends UIOutput { /** * Create a place-holder value for the second value gathered in the tag * class. */ private ValueExpression value2VE = null;

@Override public void encodeBegin(FacesContext facesContext) throws IOException { super.encodeBegin(facesContext); }

@Override public void encodeChildren(FacesContext facesContext) throws

IOException { super.encodeChildren(facesContext); }

Page 38: JSF Custom Components

@Override public void encodeEnd(FacesContext facesContext) throws IOException { ResponseWriter writer = facesContext.getResponseWriter(); super.encodeEnd(facesContext); encodeSecondField(facesContext); }// Decode and property accessor methods omitted for brevity.private void encodeSecondField(FacesContext facesContext) throws IOException {oracle.adf.view.rich.component.rich.output.RichOutputText output2 = new RichOutputText(); output2.setValue(value2VE.getValue(facesContext.getELContext())); output2.setParent(this); output2.setId("_second"); // NB: This needs to start with an underscore,

and will // subsequently be used to set the ClientId value. output2.encodeBegin(FacesContext.getCurrentInstance()); // Most components come with a hasChildren() to test if encodeChildren() // will do anything. output2.encodeChildren(FacesContext.getCurrentInstance()); // Only the encodeEnd does something for output text. output2.encodeEnd(FacesContext.getCurrentInstance()); }}

Page 39: JSF Custom Components

<component><component-

type>combineComponentType</component-type>

<component-class>mfons.presentations.JSF.customcompdev.view.components.component.CombineSimple</component-class>

</component>

Page 40: JSF Custom Components

oracle.adf.view.rich.component.rich.input.RichInputText inputComp = new RichInputText();

Page 41: JSF Custom Components
Page 42: JSF Custom Components

encodeSubmitButton(facesContext, clientId + ":submitButon"); … … … … … … … private void encodeSubmitButton(FacesContext facesContext,

String clientId) throws IOException { ResponseWriter writer =

facesContext.getResponseWriter(); writer.startElement("input", this); writer.writeAttribute("type", "submit", null); writer.writeAttribute("name", clientId, "clientId"); writer.writeAttribute("value", "Click Me to

Postback!", null); writer.endElement("input"); } … … … … … … …OUTPUT PRODUCED: <input type=“submit” name=“…” id=“…”

value=“Click Me to Postback!” />

Page 43: JSF Custom Components

OPTION 1:<xyz:combinesimple valueVE="the first value" value2VE="Type something!"/>

OPTION 2:<xyz:combinesimple valueVE="the first value" value2VE=“#{myBackingBean.initialValue}"/>

Page 44: JSF Custom Components
Page 45: JSF Custom Components

The decode method is as follows: public void decode(FacesContext facesContext) { super.decode(facesContext); Map requestParameterMap =

facesContext.getExternalContext().getRequestParameterMap(); String clientId = getClientId(facesContext); String formName = clientId.substring(0, clientId.indexOf(":"));String submittedValue = (String)requestParameterMap.get(formName + ":" + "_second");this.setValue(submittedValue); // The purpose of the next statement is to let this component know that a // postback has occurred, and that a new value is available to put in the

input // field, if desired. this.setPostbackValue2(submittedValue); }

Page 46: JSF Custom Components

The decode method is as follows: public void decode(FacesContext facesContext) { super.decode(facesContext); Map requestParameterMap =

facesContext.getExternalContext().getRequestParameterMap(); String clientId = getClientId(facesContext); String formName = clientId.substring(0, clientId.indexOf(":"));String submittedValue = (String)requestParameterMap.get(formName + ":" + "_second");this.setValue(submittedValue); // The purpose of the next statement is to let this component know that a // postback has occurred, and that a new value is available to put in the

input // field, if desired. this.setPostbackValue2(submittedValue); }

Page 47: JSF Custom Components

if (this.getPostbackValue2() == null){ inputComp.setValueExpression("value", value2VE);

}else { inputComp.setValue(this.getPostbackValue2());

}

Page 48: JSF Custom Components

INITIAL SCREENAFTER FIELD ENTRY AND BUTTON-PRESS

Page 49: JSF Custom Components

? ? ? ? ? ?

Page 50: JSF Custom Components

Me: [email protected] Blog: http://mfonsadf.blogspot.com/ Aderas: http://www.aderas.com/ (This presentation is located also at

the above two web locations.)

Page 51: JSF Custom Components

Burns, S. a. (2007). JavaServer Faces: The Complete Reference. New York: McGraw Hill.

Chapter 20 -- JSF. (n.d.). Retrieved from J2EE 1.4 tutorial: http://java.sun.com/j2ee/1.4/docs/tutorial/doc/index.html

How to Write your own JSF Components. (n.d.). Retrieved from http://www.exadel.com/tutorial/jsf/HowToWriteYourOwnJSFComponents.pdf

JSF Component Writing Checklist. (n.d.). Retrieved from http://blogs.steeplesoft.com/jsf-component-writing-check-list/

Oracle Corporation. (2006). ADF vs JSF FAQ. http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/faq.html , 4.

Vogel, L. (n.d.). JavaServer Faces 1.2 development with Eclipse WTP JSF Tooling - Tutorial. Retrieved from http://www.vogella.de/articles/JavaServerFaces/article.html

Wang, Dan and Huang, Wei. (2009). Combine JSF with Dojo widgets to create a better user experience. Retrieved from http://www.ibm.com/developerworks/web/library/wa-aj-jsfdojo/index.html

Page 52: JSF Custom Components

Smirnov, Sergey. (Aug 2006). Integrating the Google Web Toolkit with JSF using G4jsf. Retrieved from http://www.theserverside.com/tt/articles/article.tss?1=GWTandJSF

Hightower, Richard. (Jul 2005). JSF for nonbelievers: JSF component development. Retrieved from http://www.ibm.com/developerworks/library/j-jsf4

Schalk, Chris.(Aug 2005). Building Custom Java Server Face UI Components. Retrieved from http://www.theserverside.com/tt/articles/article.tss?1=BuildingCustomJSF

Wessendorf, Matthias. (Feb 2008). Custom JSF components with Facelets. Retrieved from http://matthiaswessendorf.wordpress.com/2008/02/29/custom-jsf-components-with-facelets/

Dudney, Bill. (Jul 2004). Creating JSF Custom Components. Retrieved from http://today.java.net/pub/a/today/2004/07/16/jsfcustom.html

<author unknown>. (Jun 2009). Custom JSF Component 1.2. Retrieved from http://blog.evolutionarydawn.com/2009/06/11/custom-jsf-component-12/

Norbye, Tor. (n.d.). AJAX Auto-Completion Custom JSF Component: Design Details. Retrieved from http://bpcatalog.dev.java.net/ajax/textfield-jsf/design.html