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>