JSF标签学习总结下

た入场券 2022-06-17 02:15 154阅读 0赞

*   *  显示图片
     *  组件排版
     *  表格

--------------------

## 显示图片 ##

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>

显示效果：  
![这里写图片描述][SouthEast]

## 表格 ##

例如显示用户名和密码  
①编写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>

[SouthEast]: /images/20220617/7009b841ec394ec5966d7b247dcd08e8.png