JSF 自定义组件

E:/workspace/zdy/src/com/Field/FieldComponent.java

package  com.Field;

import  javax.faces.component.UIInput;
import  javax.faces.context.FacesContext;

// 继承UIInput类
public   class  FieldComponent  extends  UIInput  ... {
    // 定义image属性名称src
    private String src;
    // 定义image属性名称height
    private String height;
    // 定义image属性名称width
    private String width;
    // 定义label控件
    private String label;
    //定义table中td的width属性
    private String tdwidth;
    
    @Override
    public Object saveState(FacesContext context) ...{
        // 定义values数组,用来保存属性
        Object values[] = new Object[6];
        values[0] = super.saveState(context);
        // 保存文件路径src到values[1]中
        values[1] = src;
        // 保存image的height属性
        values[2] = height;
        // 保存image的width属性
        values[3] = width;
        
        // 保存label的值
        values[4] = label;
        // 保存table中td的width值
        values[5] = tdwidth;
        return ((Object) (values));
    }

    //必要的
    @Override
    public void restoreState(FacesContext context, Object state) ...{
        Object values[] = (Object[]) state;
        super.restoreState(context, values[0]);
        src = (String) values[1];
        height=(String) values[2];
        width=(String) values[3];
        label=(String) values[4];
        tdwidth=(String) values[5];
    }
    
    //必要的
    public FieldComponent() ...{
        this.setRendererType("Field");
    }
    
    @Override
    public String getFamily() ...{
        return "Field";
    }

    public boolean isError() ...{
        return !this.isValid();
    }
    
    // 生成src的get方法
    public String getSrc() ...{
        return src;
    }

    // 生成src的set方法
    public void setSrc(String src) ...{
        this.src = src;
    }
    
    //生成height的get方法
    public String getHeight() ...{
        return height;
    }

    //生成height的set方法
    public void setHeight(String height) ...{
        this.height = height;
    }
    
    //生成width的get方法
    public String getWidth() ...{
        return width;
    }

    //生成width的set方法
    public void setWidth(String width) ...{
        this.width = width;
    }

    //生成label控件的get方法
    public String getLabel() ...{
        return label;
    }

    //生成label控件的set方法
    public void setLabel(String label) ...{
        this.label = label;
    }

    public String getTdwidth() ...{
        return tdwidth;
    }

    public void setTdwidth(String tdwidth) ...{
        this.tdwidth = tdwidth;
    }
}

E:/workspace/zdy/src/com/Field/FieldTag.java

package  com.Field;

import  javax.faces.application.Application;
import  javax.faces.component.UIComponent;
import  javax.faces.context.FacesContext;
import  javax.faces.el.ValueBinding;
import  javax.faces.webapp.UIComponentTag;

import  com.Field.FieldComponent;

public   class  FieldTag  extends  UIComponentTag  ... {
    // 定义变量src用以保存文件路径
    private String src;

    // 定义变量height用以保存图片的属性height
    private String height;

    // 定义变量width用以保存image的属性width
    private String width;
    
    // 定义label属性
    private String label;
    
    private String tdwidth;

    /** *//**
     * @see javax.faces.webapp.UIComponentTag#setProperties
     *      (javax.faces.component.UIComponent)
     */
    @Override
    protected void setProperties(UIComponent component) ...{
        /**//* You have to call the super class */
        super.setProperties(component);
        // ((FieldComponent) component).setSrc(src);这行可加可不加
        ((FieldComponent) component).setSrc(src);
        // 下面的初始值必须要加
        ((FieldComponent) component).setHeight(height);
        ((FieldComponent) component).setWidth(width);
        //下面是label
        ((FieldComponent) component).setLabel(label);
        
        ((FieldComponent) component).setTdwidth(tdwidth);
        
        FacesContext context = FacesContext.getCurrentInstance();
        Application application = context.getApplication();

        //TODO table中td的属性width
        if (UIComponentTag.isValueReference(tdwidth)) ...{
            ValueBinding tdwidthbinding = application.createValueBinding(tdwidth);
            component.setValueBinding("tdwidth", tdwidthbinding);
        }else...{
            ((FieldComponent) component).setTdwidth(tdwidth);
        }
        
        //TODO label控件
        if (UIComponentTag.isValueReference(label)) ...{
            // 创建一个ValueBinding对象,将label路径保binding到label中
            ValueBinding labelbinding = application.createValueBinding(label);
            component.setValueBinding("label", labelbinding);
        } else ...{
            // 对FieldComponent类中的src进行赋值
            ((FieldComponent) component).setLabel(label);
        }
        
        // TODO image的src属性设置
        // 判断参数是否为绑定值,是的时候绑定,不是的时候直接赋值.
        if (UIComponentTag.isValueReference(src)) ...{
            // 创建一个ValueBinding对象,将src路径保binding到src中
            ValueBinding binding = application.createValueBinding(src);
            component.setValueBinding("src", binding);
        } else ...{
            // 对FieldComponent类中的src进行赋值
            ((FieldComponent) component).setSrc(src);
        }

        // TODO image的height属性设置
        // 判断参数是否为绑定值,是的时候绑定,不是的时候直接赋值.
        if (UIComponentTag.isValueReference(height)) ...{
            // 创建一个ValueBinding对象,将图片height属性binding到height中
            ValueBinding bindingheight = application.createValueBinding(height);
            component.setValueBinding("height", bindingheight);
        } else ...{
            ((FieldComponent) component).setHeight(height);
        }

        // TODO image的width属性设置
        // 判断参数是否为绑定值,是的时候绑定,不是的时候直接赋值.
        if (UIComponentTag.isValueReference(width)) ...{
            // 创建一个ValueBinding对象,将图片width属性binding到width中
            ValueBinding bindingwidth = application.createValueBinding(width);
            component.setValueBinding("width", bindingwidth);
        } else ...{
            ((FieldComponent) component).setWidth(width);
        }
    }

    /** *//**
     * @see javax.faces.webapp.UIComponentTag#getComponentType() 必要的方法,如没有则类报错.
     */
    @Override
    public String getComponentType() ...{
        return "Field";
    }

    /** *//**
     * @see javax.faces.webapp.UIComponentTag#getRendererType() 必要的方法,如没有则类报错.
     */
    @Override
    public String getRendererType() ...{
        return "Field";
    }

    public String getSrc() ...{
        return src;
    }

    public void setSrc(String src) ...{
        this.src = src;
    }

    public String getHeight() ...{
        return height;
    }

    public void setHeight(String height) ...{
        this.height = height;
    }

    public String getWidth() ...{
        return width;
    }

    public void setWidth(String width) ...{
        this.width = width;
    }

    public String getLabel() ...{
        return label;
    }

    public void setLabel(String label) ...{
        this.label = label;
    }

    public String getTdwidth() ...{
        return tdwidth;
    }

    public void setTdwidth(String tdwidth) ...{
        this.tdwidth = tdwidth;
    }
}

E:/workspace/zdy/src/com/Field/FieldRenderer.java

package  com.Field;

import  java.io.IOException;

import  javax.faces.application.Application;
import  javax.faces.component.UIComponent;
import  javax.faces.context.FacesContext;
import  javax.faces.context.ResponseWriter;
import  javax.faces.el.ValueBinding;
import  javax.faces.render.Renderer;
import  javax.faces.webapp.UIComponentTag;

import  com.Field.FieldComponent;

// 继承Renderer类
public   class  FieldRenderer  extends  Renderer  ... {

    @Override
    public void encodeBegin(FacesContext context, UIComponent component)
            throws IOException ...{
        FieldComponent fieldComponent = (FieldComponent) component;
        ResponseWriter writer = context.getResponseWriter();
        writer.write("<table>");
        writer.write("<tr>");
        writer.write("<td align='center'>");
        // 引用下面的encodesrc方法
        encodesrc(writer, fieldComponent);
        writer.write("</td>");
        writer.write("</tr>");
        writer.write("<tr>");
        writer.write("<td align='center' style='word-wrap:break-word;' width='"
                + encodetdwidth(writer, fieldComponent) + "'>");
        // 引用下面的encodelabel方法
        encodelabel(writer, fieldComponent);
        writer.write("</td>");
        writer.write("</tr>");
        writer.write("</table>");

        writer.flush();
    }


    private String encodetdwidth(ResponseWriter writer,
            FieldComponent fieldComponent) throws IOException ...{
        FacesContext currentInstance = FacesContext.getCurrentInstance();
        Application application = currentInstance.getApplication();

        // TODO table中td的属性width
        // TODO label设置
        Object tdwidth;
        // 判断参数是否为绑定值,是的时候绑定,不是的时候直接赋值.
        if (UIComponentTag.isValueReference(fieldComponent.getTdwidth())) ...{
            // 创建ValueBinding的对象保存src路径
            ValueBinding binding = application
                    .createValueBinding(fieldComponent.getTdwidth());
            tdwidth = binding.getValue(currentInstance);
        } else ...{
            tdwidth = fieldComponent.getTdwidth();
        }
        writer.startElement("tdwidth", fieldComponent);
        return (String) tdwidth;
    }

    // 定义encodelabel方法
    private void encodelabel(ResponseWriter writer,
            FieldComponent fieldComponent) throws IOException ...{
        FacesContext currentInstance = FacesContext.getCurrentInstance();
        Application application = currentInstance.getApplication();
        // TODO label设置
        Object labelvalue;
        // 判断参数是否为绑定值,是的时候绑定,不是的时候直接赋值.
        if (UIComponentTag.isValueReference(fieldComponent.getLabel())) ...{
            // 创建ValueBinding的对象保存src路径
            ValueBinding binding = application
                    .createValueBinding(fieldComponent.getLabel());
            labelvalue = binding.getValue(currentInstance);
        } else ...{
            labelvalue = fieldComponent.getLabel();
        }
        writer.startElement("label", fieldComponent);
        if (!fieldComponent.isError()) ...{
            // 当HTML标签有某属性时才应用writeAttribute
            // 当没有标签属性时用write直接输出
            writer.write((String) labelvalue);
        }
        writer.endElement("label");
    }

    // 定义encodesrc方法
    private void encodesrc(ResponseWriter writer, FieldComponent fieldComponent)
            throws IOException ...{
        FacesContext currentInstance = FacesContext.getCurrentInstance();
        Application application = currentInstance.getApplication();

        // TODO image的src属性设置
        Object path;
        // 判断参数是否为绑定值,是的时候绑定,不是的时候直接赋值.
        if (UIComponentTag.isValueReference(fieldComponent.getSrc())) ...{
            // 创建ValueBinding的对象保存src路径
            ValueBinding binding = application
                    .createValueBinding(fieldComponent.getSrc());
            path = binding.getValue(currentInstance);
        } else ...{
            path = fieldComponent.getSrc();
        }

        // TODO image的height属性设置
        Object height;
        // 判断参数是否为绑定值,是的时候绑定,不是的时候直接赋值.
        if (UIComponentTag.isValueReference(fieldComponent.getHeight())) ...{
            // 创建ValueBinging的对象保存height属性
            ValueBinding bindingheight = application
                    .createValueBinding(fieldComponent.getHeight());
            height = bindingheight.getValue(currentInstance);
        } else ...{
            height = fieldComponent.getHeight();
        }

        // TODO image的width属性设置
        Object width;
        // 判断参数是否为绑定值,是的时候绑定,不是的时候直接赋值.
        if (UIComponentTag.isValueReference(fieldComponent.getWidth())) ...{
            // 创建ValueBinging的对象保存width属性
            ValueBinding bindingwidth = application
                    .createValueBinding(fieldComponent.getWidth());
            width = bindingwidth.getValue(currentInstance);
        } else ...{
            width = fieldComponent.getWidth();
        }

        writer.startElement("image", fieldComponent);
        if (!fieldComponent.isError()) ...{
            writer.writeAttribute("src", (String) path, "src");
            writer.writeAttribute("height", (String) height, "height");
            writer.writeAttribute("width", (String) width, "width");
        }
        writer.endElement("image");
    }
}

在webRoot 下的WEB-INF下创建Field.tld文件

< taglib >
     < tlib-version > 0.03 </ tlib-version >
     < jsp-version > 1.2 </ jsp-version >
     < short-name > F </ short-name >
     < uri > http://Field.com </ uri >
     < description > ArcMind tags </ description >

     < tag >
         < name > field </ name >
         < tag-class > com.Field.FieldTag </ tag-class >

         < body-content > JSP </ body-content >
         < attribute >
             < name > height </ name >
         </ attribute >
         < attribute >
             < name > width </ name >
         </ attribute >
         < attribute >
             < name > src </ name >
         </ attribute >
         < attribute >
             < name > label </ name >
         </ attribute >
         < attribute >
             < name > tdwidth </ name >
         </ attribute >
     </ tag >
</ taglib >

faces-config文件

<? xml version="1.0" encoding="UTF-8" ?>
<! DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd" >

< faces-config >

     <!--  当FieldComponent类没有继承UIInput类时报错  -->
     < component >
         < component-type > Field </ component-type >
         < component-class > com.Field.FieldComponent </ component-class >
     </ component >

     <!--  当FieldRenderer类没有继承Renderer类时报错  -->
     < render-kit >
         < renderer >
             < component-family > Field </ component-family >
             < renderer-type > Field </ renderer-type >
             < renderer-class > com.Field.FieldRenderer </ renderer-class >
         </ renderer >
     </ render-kit >

     < managed-bean >
         < managed-bean-name > FieldBean </ managed-bean-name >
         < managed-bean-class > com.Bean.FieldBean </ managed-bean-class >
         < managed-bean-scope > session </ managed-bean-scope >
     </ managed-bean >

     < navigation-rule >
         < navigation-case >
             < from-outcome > index </ from-outcome >
             < to-view-id > /index.jsp </ to-view-id >
         </ navigation-case >
     </ navigation-rule >
</ faces-config >

E:/workspace_new/zdy/src/com/Bean/FieldBean.java

package  com.Bean;

import  java.util.ArrayList;
import  java.util.Iterator;
import  java.util.List;

import  javax.faces.context.ExternalContext;
import  javax.faces.context.FacesContext;
import  javax.faces.event.ActionEvent;
import  javax.servlet.http.HttpServletRequest;

public   class  FieldBean  ... {
    private String outcome;
    private int rows = 0;

    private int colums = 0;
    
    private String src = "c:/cat.jpg";

    private String height = "100";

    private String width = "100";

    private String label = "abcdabcdabcdabcd";

    private String tdwidth = "100";

    private List listItem;

    private Iterator itr;

    // 初始init方法
    public String init() throws Exception ...{
        this.setListItem(this.listadd());
        return "index";
    }

    //将List的值赋给叠代器
    public void initIterator() ...{
        itr = listItem.iterator();
    }

    //判断List下一条数据是否存在.
    public boolean hasNext() ...{
        if (itr == null) ...{
            itr = listItem.iterator();
        }
        return itr.hasNext();
    }

    //将List中下一条的值赋给Bean的变量.
    public void getNext() ...{
        FieldBean listItem = (FieldBean) itr.next();
        this.setSrc(listItem.getSrc());
        this.setHeight(listItem.getHeight());
        this.setWidth(listItem.getWidth());
        this.setLabel(listItem.getLabel());
        this.setTdwidth(listItem.getTdwidth());
    }

    public void itemadd(int num) ...{
        System.out.println(this.getListItem().get(num));
    }

    //为list添加几项值
    public List listadd() ...{
        List listitem = new ArrayList();
        FieldBean fb = new FieldBean();
        fb.setSrc("c:/cat.jpg");
        fb.setHeight("100");
        fb.setWidth("100");
        fb.setLabel("aaaaaaaaaaaaaaa");
        fb.setTdwidth("100");
        listitem.add(fb);
        FieldBean fb1 = new FieldBean();
        fb1.setSrc("c:/tree.jpg");
        fb1.setHeight("100");
        fb1.setWidth("100");
        fb1.setLabel("bbbbbbbbbbbbbbb");
        fb1.setTdwidth("100");
        listitem.add(fb1);
        FieldBean fb2 = new FieldBean();
        fb2.setSrc("c:/cc.jpg");
        fb2.setHeight("100");
        fb2.setWidth("100");
        fb2.setLabel("ccccccccccccccc");
        fb2.setTdwidth("100");
        listitem.add(fb2);
        FieldBean fb3 = new FieldBean();
        fb3.setSrc("c:/dd.jpg");
        fb3.setHeight("100");
        fb3.setWidth("100");
        fb3.setLabel("dddddddddddddddd");
        fb3.setTdwidth("100");
        listitem.add(fb3);
        return listitem;
    }

    // CommandLink按钮actionListener属性对应的方法
    public void listener(ActionEvent e) throws Exception ...{
        this.setRows(1);
        this.setColums(1);
         ExternalContext context = FacesContext.getCurrentInstance().getExternalContext();
         HttpServletRequest request = (HttpServletRequest) context.getRequest();
           this.setLabel(request.getParameter("name"));
        outcome = "index";
    }
    
    public String outcome() ...{
        return outcome;
    }

    public String getSrc() ...{
        return src;
    }

    public void setSrc(String src) ...{
        this.src = src;
    }

    public String getHeight() ...{
        return height;
    }

    public void setHeight(String height) ...{
        this.height = height;
    }

    public String getWidth() ...{
        return width;
    }

    public void setWidth(String width) ...{
        this.width = width;
    }

    public String getLabel() ...{
        return label;
    }

    public void setLabel(String label) ...{
        this.label = label;
    }

    public String getTdwidth() ...{
        return tdwidth;
    }

    public void setTdwidth(String tdwidth) ...{
        this.tdwidth = tdwidth;
    }

    public List getListItem() ...{
        return listItem;
    }

    public void setListItem(List listItem) ...{
        this.listItem = listItem;
    }

    public int getColums() ...{
        return colums;
    }

    public void setColums(int colums) ...{
        this.colums = colums;
    }

    public int getRows() ...{
        return rows;
    }

    public void setRows(int rows) ...{
        this.rows = rows;
    }
}

index.jsp

<% ... @ page language="java" pageEncoding="UTF-8" %>
<% ... @ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<% ... @ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<% ... @ taglib uri="http://Field.com" prefix="F" %>
< html >
     < head >
         < title > My JSP 'index.jsp' starting page </ title >
     </ head >
     < body >
         < f:view >
             < h:form >
                行 < h:inputText  value ="#{FieldBean.rows}" ></ h:inputText >
                列 < h:inputText  value ="#{FieldBean.colums}" ></ h:inputText >
                 <!--  #{FieldBean.src}  -->
                 < h:commandButton  value ="显示"  action ="#{FieldBean.init}" ></ h:commandButton >


                 < jsp:useBean  id ="FieldBean"  class ="com.Bean.FieldBean"
                    scope ="session"   />
                 < h:outputText  value ="#{sessionScope.FieldBean.src}"   />
                 < h:outputText  value ="#{sessionScope.FieldBean.label}"   />
                 < table >
                     <% ...
                                FieldBean.init();
                                //System.out.println(FieldBean.getListItem().size());
                                if (FieldBean.getListItem().size() != 0) {
                            FieldBean.initIterator();
                            for (int i = 0; i < FieldBean.getRows(); i++) {
                     %>
                     < tr >
                         <% ...
                                        for (int j = 0; j < FieldBean.getColums(); j++) {
                                        if (FieldBean.hasNext()) {
                                    FieldBean.getNext();
                                    //System.out.print(i);
                         %>
                         < td >
                             < h:commandLink  actionListener ="#{FieldBean.listener}"
                    action ="#{FieldBean.outcome}" >
                                 < f:param  name ="name"  value ="#{sessionScope.FieldBean.label}" ></ f:param >
                                 < F:field  src ="#{sessionScope.FieldBean.src}"
                                    height ="#{sessionScope.FieldBean.height}"
                                    width ="#{sessionScope.FieldBean.width}"
                                    label ="#{sessionScope.FieldBean.label}"
                                    tdwidth ="#{sessionScope.FieldBean.tdwidth}" >
                                 </ F:field >
                             </ h:commandLink >
                         </ td >
                         <% ...
                                    }
                                    }
                                }
                         %>
                     </ tr >
                     <% ...
                    }
                     %>
                 </ table >
                 < hr >
                                 < h:dataTable  value ="#{FieldBean.listItem}"  var ="list"  rows ="2"
                    first ="0"  rendered ="true" >
                     < h:column >
                         < F:field  src ="#{list.src}"  height ="#{list.height}"
                            width ="#{list.width}"  label ="#{list.label}"
                            tdwidth ="#{list.tdwidth}" >
                         </ F:field >
                     </ h:column >
                 </ h:dataTable >
             </ h:form >
         </ f:view >
     </ body >
</ html >