2 Replies Latest reply on Jul 1, 2008 10:51 AM by Berkay Aktan

    Custom JSF component with facelets

    Berkay Aktan Newbie

      hi.
      I developed a custom color picker component.But i've a little problem.


      I created ColorPicker and ColorPickerTag classes.ColorPicker class works fine but without ColorPickerTag 's properties.


      I couldn't find where ColorPickerTag should be written ?


      I hope you've been created a custom component before and can help me..


      thanks.



      • ColorPicker (UIComponent)

      • ColorPickerTag (UIComponentELTag)




      xx-taglib.xml (for facelets)


       <facelet-taglib>  
              <namespace>http://domain/jsf</namespace>
           <tag>  
               <tag-name>colorPicker</tag-name> 
              <component>
                  <component-type>colorPicker</component-type>
              </component>
           </tag>  
      </facelet-taglib>



      faces-config.xml


       <component>
        <component-type>colorPicker</component-type>
        <component-class>domain.project.component.ColorPicker</component-class>
       </component>




        • 1. Re: Custom JSF component with facelets
          Stephen Friedrich Novice

          Not really Seam-related, but anyway:


          If you only use facelets and you don't need to support usage of your component in a JSP context, then you do not need to code a ColorPickerTag class at all.



          ... ColorPicker class works fine but without ColorPickerTag 's properties.

          I don't understand this statement. What exactly is not working?


          To get code completion and validation of attributes in your IDE you can create a xx.tld file that specifies the tag's attributes, for example here's a snippet adapted from one of my tld files:



          <?xml version="1.0" encoding="UTF-8"?>
          <taglib xmlns="http://java.sun.com/xml/ns/j2ee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
              version="2.0">
          
              <!--
                  THIS FILE IS NOT ACTUALLY USED at runtime.
                  Because we use Facelets (rather than JSP) all relevant definitions are in xx.taglib.xml
                  However this file enables code completion and validation for tag attributes in IDEA.
              -->
          
              <tlib-version>1.1</tlib-version>
          
              <short-name>xx</short-name>
              <uri>http://domain/jsf</uri>
          
              <tag>
                  <name>colorPicker</name>
                  <tag-class/> <!-- No tag class needed - we aren't using JSP -->
                  <body-content>empty</body-content>
          
                  <attribute>
                      <description>Property of a backing bean that holds the Color.</description>
                      <name>value</name>
                      <required>true</required>
                  </attribute>
              </tag>
          
          </tagblib>
          



          • 2. Re: Custom JSF component with facelets
            Berkay Aktan Newbie

            I ve created xx-taglib.xml ColorPicker works fine but i wanted to bind a expression from my facelets.



            public class ColorPickerTag extends UIComponentELTag {
            
                    String style;
                    String title;
            
                    public void release() {
                            super.release();
                            style = null;
                            title = null;
                    }
            
                    protected void setProperties(UIComponent component) {
                            super.setProperties(component);
                            if (style != null) {
                                    component.getAttributes().put("style", style);
                            }
                            ValueExpression ve = component.getValueExpression("title");
                        if (ve != null) {
                            title = (String) ve.getValue(getFacesContext().getELContext());
                        }
            
                    }
            
                    public String getComponentType() {
                            return "colorPicker";
                    }
            
                    public String getRendererType() {
                            return null;
                    }
            
                    public String getStyle() {
                            return style;
                    }
            
                    public void setStyle(String style) {
                            this.style = style;
                    }
            
                    public String getTitle() {
                            return title;
                    }
            
                    public void setTitle(String title) {
                            this.title = title;
                    }




            public class ColorPicker extends UIInput{
                 
                 public void encodeBegin(FacesContext context) throws IOException {
                     ResponseWriter writer = context.getResponseWriter();
                     writer.startElement("div", this);
                     writer.writeAttribute("id", getClientId(context), null);
                     String style = (String)getAttributes().get("style");
                     if (style!=null){
                          writer.writeAttribute("style", style, null);
                     }
                     String title = (String)getAttributes().get("title");
                      if (title!=null){
                         writer.writeAttribute("title", title, null);
                      }
                     /*
                        *  writer.write( javascript codes..... );
                        */
                 }
                 public void encodeEnd(FacesContext context) throws IOException {
                     ResponseWriter writer = context.getResponseWriter();
                     writer.endElement("div");
                 }
            }