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>