Writing new Components for JSF Berner Fachhochschule-Technik und - PowerPoint PPT Presentation

Writing new Components for JSF Berner Fachhochschule-Technik und Informatik Motivations � Write a simple component � Extend a UIComponent Advanced Web Technologies Define the renderer Create a custom tag 7) Create a new JSF Components A composite Component � Example of JSP file Subclass UIInput Dr. E. Benoist Creating a custom tag for FieldComponent The Renderer Fall Semester 09-10 Mapping a renderer to a component Conclusion � Advanced Web Technologies 7) Create a new JSF Components Advanced Web Technologies 7) Create a new JSF Components 1 2 Need a Component? JSF Component Model ◮ Much like Swing’s component model • It has events and properties ◮ Use an existing • also has containers that contain components, • and that also are components that can be contained by other • Text fields containers. • Buttons • In theory, the JSF component model is divorced from HTML • Tabbed Pannels and JSP. ◮ Create your own new Component • The standard set of components that ships with JSF has JSP ◮ Import (or buy) an existing component bindings and generates HTML renderings. • A special calendar for choosing a date Component functionality typically centers around two ◮ • A field doing special validation client side, 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 Advanced Web Technologies 7) Create a new JSF Components Motivations Motivations 3 4

Component and Renderer JSF lifecycle and JSF components ◮ 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 Advanced Web Technologies 7) Create a new JSF Components Motivations Motivations 5 6 Further component concepts Hello World, JSF style! ◮ UIComponent is the base class for all JSF components. • When you develop your own components you will subclass ◮ Example: render tag <label>Form Test</label> UIComponentBase , 1. Extend a UIComponent • it extends UIComponent , • default implementations for the abstract methods in ◮ Create a class that extends UIComponent ◮ Save the component state UIComponent . ◮ Register the component with faces-config.xml ◮ Components: 2. Define the renderer or implement inline • have parents and identifiers. ◮ Override encode • They are associated with a component type, (for registring in ◮ Override decode faces-config.xml ) ◮ Register the renderer with faces-config.xml • You can use the JSF-EL (expression language) to bind JSF 3. Create a custom tag that subclasses UIComponentTag components to managed bean properties. ◮ Return the renderer type ◮ A component can be a ValueHolder or an ◮ Return the component type EditableValueHolder . ◮ Set up properties that might use JSF expressions ◮ 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 Advanced Web Technologies 7) Create a new JSF Components Motivations Write a simple component 7 8

Label Rendering example Using a JSF tag in a JSP ◮ 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 Advanced Web Technologies 7) Create a new JSF Components Write a simple component Write a simple component 9 10 Step 1: Extend a UIComponent 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 import java.io.IOException; you configure.). import javax.faces.component.UIOutput; import javax.faces.context.FacesContext; @Override import javax.faces.context.ResponseWriter; public Object saveState(FacesContext context) { Object values[] = new Object[2]; public class LabelComponent extends UIOutput { values[0] = super.saveState(context); private String label; values[1] = label; public String getLabel() { return ((Object) (values)); return label; } } @Override public void setLabel(String label) { public void restoreState(FacesContext context, Object state) { this.label = label; Object values[] = (Object[])state; } super.restoreState(context, values[0]); label = (String)values[1]; ... } Advanced Web Technologies 7) Create a new JSF Components Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Extend a UIComponent Write a simple component: Extend a UIComponent 11 12

Extend a UIComponent (Cont.) Step 2: Define the renderer ◮ Encode the component output The final step of creating the component is to register it with the public class LabelComponent extends UIOutput { faces-config.xml , as shown below: ... public void encodeBegin(FacesContext context) < faces − config > throws IOException { ResponseWriter writer = < component > context.getResponseWriter(); < component − type > simple.Label < /component − type > < component − class > writer.startElement(”label”, this); arcmind.simple.LabelComponent writer.write(label); < /component − class > writer.endElement(”label”); < /component > writer.flush(); ... } ... } Advanced Web Technologies 7) Create a new JSF Components Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Extend a UIComponent Write a simple component: Define the renderer 13 14 Define the renderer (Cont.) A side step: Hacking the JSF-RI ◮ f you’re using the JSF reference implementation from Sun Microsystems (and not the MyFaces ◮ The family property shown below is used to associate implementation), you’ll have to add the following to the Label component with a renderer. your component-creation code: public class LabelComponent extends UIOutput { public void encodeEnd(FacesContext context) ... throws IOException { public String getFamily() { return; return ”simple.Label”; } } ... public void decode(FacesContext context) { } return; } Advanced Web Technologies 7) Create a new JSF Components Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Define the renderer Write a simple component: Define the renderer 15 16

Step 3: Create a custom tag Create a custom tag (Cont.) ◮ Bridging JSF and JSP [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 Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Create a custom tag Write a simple component: Create a custom tag 17 18 Binding JSF and JSP 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 Advanced Web Technologies 7) Create a new JSF Components Write a simple component: Create a custom tag Write a simple component: Create a custom tag 19 20