用于操作和导航的JSF命令组件标签
JSF提供了两个命令组件标签,用于执行操作和导航。
他们是
- <h:commandButton>标记
- <h:commandLink>标记
让我们详细看看上述每个标签的功能。
<h:commandButton>标记
<h:commandButton>标记呈现一个提交表单的按钮,从而为处理用户输入的数据铺平了道路。
commandButton指定动作属性,其中可以指定导航详细信息,例如单击按钮时要呈现的页面。
考虑一个示例,演示单击按钮时提交表单的情况。
创建页面" mobile.xhtml"为;
mobile.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Add a button</title> </h:head> <h:body> <h3>Adding a button</h3> <h:form> <h:panelGrid columns="3"> <h:outputLabel for="companyname">Company Name:</h:outputLabel> <h:inputText value="#{mobile.companyname}" id="companyname"></h:inputText> <br <br <h:outputLabel for="model">Model Number:</h:outputLabel> <h:inputText value="#{mobile.modelnumber}" id="model" size="20"></h:inputText> <br <br <h:outputLabel for="color">Color:</h:outputLabel> <h:inputText value="#{mobile.color}" id="color" size="20"></h:inputText> <br <br <h:commandButton value="Submit" action="mobdetails"></h:commandButton> </h:panelGrid> </h:form> </h:body> </html>
其中我们声明字段名称,型号和颜色。
我们使用commandButton标记显示"提交"按钮,并提到借助action属性将导航重定向到" mobdetails"页面。
现在,我们将创建" mobdetails.xhtml"页面,该页面显示用户在mobile.xhtml页面中输入的详细信息;
mobdetails.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Command Button Tag</title> </h:head> <h:body> Mobile Company Name:#{mobile.companyname} <br <br Mobile model Number:#{mobile.modelnumber} <br <br Color:#{mobile.color} <br <br </h:body> </html>
其中我们用点运算符调用Bean名称,后跟字段名称以从Bean类中获取值。
创建托管bean Mobile.java为
package com.theitroad.jsf.beans; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class Mobile { private String companyname; private String modelnumber; private String color; public Mobile() { } public Mobile(String companyname, String modelnumber, String color) { this.companyname = companyname; this.modelnumber = modelnumber; this.color = color; } public String getCompanyname() { return companyname; } public void setCompanyname(String companyname) { this.companyname = companyname; } public String getModelnumber() { return modelnumber; } public void setModelnumber(String modelnumber) { this.modelnumber = modelnumber; } public String getColor() { return color; } public void setColor(String color) { this.color = color; } }
其中我们声明名称,型号和颜色这三个字段,并编写用于设置和检索值的getter和setter方法。
现在运行mobile.xhtml页面,它将在浏览器中产生以下输出。
<h:commandLink>标记
commandLink提供了等效于HTML中锚标记的超链接,该超链接的作用类似于提交按钮,并且可以与支持bean或者操作类关联以进行事件处理。
action属性可用于指定导航,或者actionListener可用于处理来自Bean类的导航。
考虑一个示例,该示例演示了commandLink标记用于呈现超链接的用法。
创建页面" mobilehyperlink.xhtml"为;
mobilehyperlink.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Command Link tag</title> </h:head> <h:body> <h3>Command Link tag example</h3> <h:form> <h:commandLink value="Add Mobile Details" action="mobile"></h:commandLink> <br <br <h:commandLink value="View Mobile Details" action="viewdetails"></h:commandLink> </h:form> </h:body> </html>
其中我们指定两个超链接,一个超链接用于添加移动设备的详细信息,另一个通过在action属性中指定视图页面名称来显示移动设备的详细信息。
创建viewdetails.xhtml
为;
viewdetails.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html"> <h:head> <title>Mobile Details Page</title> </h:head> <h:body> Mobile Company Name:Micromax <br <br Model Number:A-114 Canvas 2.2 <br <br Color:White </h:body> </html>
我们将重新使用上面创建的mobile.xhtml页面来添加移动设备的详细信息。
现在运行该应用程序.