Advanced Web Technologies 7) Create a new JSF Components Dr. E. - PowerPoint PPT Presentation

Berner Fachhochschule-Technik und Informatik Advanced Web Technologies 7) Create a new JSF Components Dr. E. Benoist Fall Semester 09-10 Advanced Web Technologies 7) Create a new JSF Components 1

Writing new Components for JSF Motivations � Write a simple component � Extend a UIComponent Define the renderer Create a custom tag A composite Component � Example of JSP file Subclass UIInput Creating a custom tag for FieldComponent The Renderer Mapping a renderer to a component Conclusion � Advanced Web Technologies 7) Create a new JSF Components 2

Need a Component? ◮ Use an existing • Text fields • Buttons • Tabbed Pannels ◮ Create your own new Component ◮ Import (or buy) an existing component • A special calendar for choosing a date • A field doing special validation client side, • . . . Advanced Web Technologies 7) Create a new JSF Components Motivations 3

JSF Component Model ◮ Much like Swing’s component model • It has events and properties • also has containers that contain components, • and that also are components that can be contained by other containers. • In theory, the JSF component model is divorced from HTML and JSP. • The standard set of components that ships with JSF has JSP bindings and generates HTML renderings. Component functionality typically centers around two ◮ actions: decoding and encoding data. • Decoding is the process of converting incoming request parameters to the values of the component. • Encoding is converting the current values of the component into the corresponding markup, that is, HTML. Advanced Web Technologies 7) Create a new JSF Components Motivations 4

Component and Renderer ◮ Two implementation approach • direct implementation , the component itself implements decoding and encoding. • delegated implementation , the component delegates to a renderer that does the encoding and decoding. • delegated implementation: you can associate your component with different renderers that will represent it in different ways on the page; for example a multi-select list box versus a list of check boxes. JSF components consist of two parts: the component ◮ and the renderer. • The JSF Component class defines the state and behavior of a UI component; • a renderer defines how the component will be read from the request and how it will be displayed – usually though HTML. Advanced Web Technologies 7) Create a new JSF Components Motivations 5

JSF lifecycle and JSF components Advanced Web Technologies 7) Create a new JSF Components Motivations 6

Further component concepts ◮ UIComponent is the base class for all JSF components. • When you develop your own components you will subclass UIComponentBase , • it extends UIComponent , • default implementations for the abstract methods in UIComponent . ◮ Components: • have parents and identifiers. • They are associated with a component type, (for registring in faces-config.xml ) • You can use the JSF-EL (expression language) to bind JSF components to managed bean properties. ◮ A component can be a ValueHolder or an EditableValueHolder . ◮ Components like form field components have a ValueBinding that must be bound to a JavaBean read-write property. Advanced Web Technologies 7) Create a new JSF Components Motivations 7

Hello World, JSF style! ◮ Example: render tag <label>Form Test</label> 1. Extend a UIComponent ◮ Create a class that extends UIComponent ◮ Save the component state ◮ Register the component with faces-config.xml 2. Define the renderer or implement inline ◮ Override encode ◮ Override decode ◮ Register the renderer with faces-config.xml 3. Create a custom tag that subclasses UIComponentTag ◮ Return the renderer type ◮ Return the component type ◮ Set up properties that might use JSF expressions Advanced Web Technologies 7) Create a new JSF Components Write a simple component 8

Label Rendering example ◮ Creating a component ◮ Directly implementing a renderer ◮ Encoding output ◮ Associating a custom tag with a component Advanced Web Technologies 7) Create a new JSF Components Write a simple component 9

Using a JSF tag in a JSP Advanced Web Technologies 7) Create a new JSF Components Write a simple component 10

Step 1: Extend a UIComponent import java.io.IOException; import javax.faces.component.UIOutput; import javax.faces.context.FacesContext; import javax.faces.context.ResponseWriter; public class LabelComponent extends UIOutput { private String label; public String getLabel() { return label; } public void setLabel(String label) { this.label = label; } ... Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Extend a UIComponent 11

Extend a UIComponent (Cont.) JSF does the actual storage and state management, typically though a session, a hidden form field, cookies, etc. (This is usually a setting that you configure.). @Override public Object saveState(FacesContext context) { Object values[] = new Object[2]; values[0] = super.saveState(context); values[1] = label; return ((Object) (values)); } @Override public void restoreState(FacesContext context, Object state) { Object values[] = (Object[])state; super.restoreState(context, values[0]); label = (String)values[1]; } Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Extend a UIComponent 12

Extend a UIComponent (Cont.) The final step of creating the component is to register it with the faces-config.xml , as shown below: < faces − config > < component > < component − type > simple.Label < /component − type > < component − class > arcmind.simple.LabelComponent < /component − class > < /component > ... Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Extend a UIComponent 13

Step 2: Define the renderer ◮ Encode the component output public class LabelComponent extends UIOutput { ... public void encodeBegin(FacesContext context) throws IOException { ResponseWriter writer = context.getResponseWriter(); writer.startElement(”label”, this); writer.write(label); writer.endElement(”label”); writer.flush(); } ... } Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Define the renderer 14

Define the renderer (Cont.) ◮ The family property shown below is used to associate the Label component with a renderer. public class LabelComponent extends UIOutput { ... public String getFamily() { return ”simple.Label”; } ... } Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Define the renderer 15

A side step: Hacking the JSF-RI ◮ f you’re using the JSF reference implementation from Sun Microsystems (and not the MyFaces implementation), you’ll have to add the following to your component-creation code: public void encodeEnd(FacesContext context) throws IOException { return; } public void decode(FacesContext context) { return; } Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Define the renderer 16

Step 3: Create a custom tag ◮ Bridging JSF and JSP Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Create a custom tag 17

Create a custom tag (Cont.) [LabelTag.java] public class LabelTag extends UIComponentTag { ... protected void setProperties(UIComponent component) { / ∗ you have to call the super class ∗ / super.setProperties(component); ((LabelComponent)component).setLabel(label); } Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Create a custom tag 18

Binding JSF and JSP Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Create a custom tag 19

Registering a custom tag [arcmind.tld] < taglib > < tlib − version > 0.03 < /tlib − version > < jsp − version > 1.2 < /jsp − version > < short − name > arcmind < /short − name > < uri > http: //arcmind.com/jsf/component/tags < /uri > < description > ArcMind tags < /description > < tag > < name > slabel < /name > < tag − class > arcmind.simple.LabelTag < /tag − class > < attribute > < name > label < /name > < description > The value of the label < /description > < /attribute > < /tag > ... Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Create a custom tag 20

start using the tag in JSPs [test.jsp] < %@ taglib prefix=”arcmind” uri=”http://arcmind.com/jsf/component/tags” % > ... < arcmind:slabel label=”Form Test”/ > Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Create a custom tag 21