用于操作和导航的JSF命令组件标签

时间:2020-02-23 14:33:42  来源:igfitidea点击:

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页面来添加移动设备的详细信息。

现在运行该应用程序.