JSF标签学习总结下

---

显示图片

value中加上图片路径

<h:graphicImage value="" />

组件排版

h:panelGrid
例如：

<h:panelGrid columns="2">
            <h:outputText value="姓名：" />
            <h:inputText id="name" value="" />
            <h:outputText value="密码：" />
            <h:inputText id="password" value="" />
            <h:commandButton value="登录" action="login" />
            <h:commandButton value="重置" type="reset" />
</h:panelGrid>

显示效果：

表格

例如显示用户名和密码
①编写TableBean和UserBean1

UserBean1.java：

public class UserBean1 {
    private String name;
    private String password;

    public UserBean1() {
    }

    public UserBean1(String name, String password) {
        this.name = name;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

}

TableBean.java：

public class TableBean {
    private List<UserBean1> list;

    public List<UserBean1> getList() {
        if(list==null){
            list=new ArrayList<UserBean1>();
            list.add(new UserBean1("zwq1", "123"));
            list.add(new UserBean1("zwq2", "123"));
            list.add(new UserBean1("zwq3", "123"));
        }

        return list;
    }

    public void setList(List<UserBean1> list) {
        this.list = list;
    }
}

②在faces-config.xml中配置两个bean：

<managed-bean>
        <managed-bean-name>tablebean</managed-bean-name>
        <managed-bean-class>beans.TableBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<managed-bean>
        <managed-bean-name>userbean1</managed-bean-name>
        <managed-bean-class>beans.UserBean1</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

③在前台jsp中编写代码如下：

<h:dataTable value="#{tablebean.list }" var="user">
<h:column>
   <h:outputText value="#{user.name}"></h:outputText>
</h:column>
<h:column>
   <h:outputText value="#{user.password}"></h:outputText>
</h:column>

以列为单位，一列列的添加

---

④添加表头、表尾，把③中代码替换为以下代码：

<h:dataTable value="#{tablebean.list }" var="user">
            <h:column>
                <f:facet name="header">
                    <h:outputText value="用户名" />
                </f:facet>
                <h:outputText value="#{user.name}" />
                <f:facet name="footer">
                    <h:outputText value="..." />
                </f:facet>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="密码" />
                </f:facet>
                <h:outputText value="#{user.password}" />
                <f:facet name="footer">
                    <h:outputText value="..." />
                </f:facet>
            </h:column>
</h:dataTable>