Jsf2 custom component programming series part 2

 

Part 2 noncomposite component with independent Renderer

<Verse>

Generally, a UI component contains two parts: behavior and Renderer. It is best to implement the two parts separately. The uicomponent class is used to implement behavior, such as event processing and attribute binding through El. Specifically implement an Renderer class to take charge of encoding and decoding. Encoding refers to the generation of Markup languages that can be displayed on the client, such as HTML. decoding is used to convert requests sent from the client (usually in a markup language style) to Java variables.

Before proceeding to the next more comprehensive UI component programming, let's look at some basic concepts. In the previous example, htmlhelloworld inherits the uicomponentbase class and needs to implement the getfamily method. The string returned by this method is used to indicate the type of UI component. For example, uiinput belongs to javax. faces. and uicommand belongs to javax. faces. command. in the faces-config.xml, We will pair uicomponent with Renderer, such as the configuration in primefaces:

<Render-kit>

<Renderer>

<Component-family> javax. Faces. Output </component-family>

<Renderer-type> javax. Faces. Head </Renderer-type>

<Renderer-class> org. primefaces. renderkit. headrenderer </Renderer-class>

</Renderer>

</Render-kit>

 

With this pairing relationship, we can easily specify which type of uicomponent to use and which Renderer. As a custom UI component, we can use any string to mark the family of its uicomponent class, if there is no Renderer (that means no need to configure render-kit in the faces-config.xml ), you can simply return NULL. The first part of the example is to do this.

Now we are developing a helloworld2 tag, which is the same as the previous function, but an Renderer is used for rendering. The first is the code of uicomponent htmlhelloworld2.java:

Package com. freebird. component;

 

Import javax. Faces. component. uicomponentbase;

Import javax. Faces. Context. responsewriter;

Import java. Io. ioexception;

Import javax. Faces. Context. facescontext;

Import java. util. date;

 

Public class htmlhelloworld2 extends uicomponentbase {

 

@ Override

Public String getfamily (){

Return "helloworld2 ";

}

 

}

 

Note that getfamily returns the "helloworld2" string, which will be used later. Then implement the Renderer class htmlhelloworld2renderer. Java:

Package com. freebird. Renderer;

 

Import javax. Faces. Render. Renderer;

Import javax. Faces. Context. responsewriter;

Import java. Io. ioexception;

Import javax. Faces. component. uicomponent;

Import javax. Faces. Context. facescontext;

Import java. util. date;

 

/**

* Describe class htmlhelloworld2renderer here.

*

*

* Created: Tue Dec 28 10:46:08 2010

*

* @ Author <a href = "mailto: chenshu @ csdesktop"> chenshu </a>

* @ Version 1.0

*/

Public class htmlhelloworld2renderer extends Renderer {

 

@ Override

Public void encodebegin (facescontext context, uicomponent) throws ioexception {

 

}

 

@ Override

Public void encodechildren (facescontext context, uicomponent) throws ioexception {

 

}

 

@ Override

Public void encodeend (facescontext context, uicomponent) throws ioexception {

// String clientid = component. getclientid (context );

// Char Sep = uinamingcontainer. getseparatorchar (context );

Responsewriter writer = context. getresponsewriter ();

Writer. startelement ("Div", component );

Writer. writeattribute ("style", "color: Red", null );

Writer. writetext ("helloworld! Today is: "+ new java. util. Date (), null );

Writer. endelement ("Div ");

}

}

 

Now add the configuration information to the helloworld. taglib. xml file:

<Tag>

<Tag-Name> helloworld2 </Tag-Name>

<Component>

<Component-type> htmlhelloworld2 </component-type>

<Renderer-type> htmlhelloworld2renderer </Renderer-type>

</Component>

</Tag>

Finally add configuration information to the faces-config.xml file:

<Component>

<Component-type> htmlhelloworld2 </component-type>

<Component-class> com. freebird. component. htmlhelloworld2 </component-class>

</Component>

<Render-kit>

<Renderer>

<Component-family> helloworld2 </component-family>

<Renderer-type> htmlhelloworld2renderer </Renderer-type>

<Renderer-class> com. freebird. Renderer. htmlhelloworld2renderer </Renderer-class>

</Renderer>

</Render-kit>

 

Compile and package it. You can use it.