JSF导航规则示例教程

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

JSF导航规则指定单击按钮或者超链接后页面之间的导航。
可以根据逻辑结果(例如成功,失败或者通过操作方法)来指定导航。

JSF导航规则

可以通过<navigation-rule>标签在faces-config.xml中指定JSF导航规则。

在Netbeans IDE中配置JSF导航规则

  • 右键单击并展开项目节点

  • 展开WEB-INF节点,然后双击faces-config.xml文件

  • 在faces-config.xml中,打开编辑器窗格,然后从"插入"菜单中选择导航规则。

  • 在添加导航对话框中,浏览或者添加规则的JSF页面名称,然后单击添加。

  • 右键单击编辑器窗格,然后从"插入"菜单中选择导航用例

  • 在"添加导航"对话框中,添加或者浏览代表导航规则的初始视图的JSF页面名称,并添加或者浏览以查看当导航系统选择导航案例时打开的JSF页面名称。

  • 当组件触发在from动作字段中激活的导航时,我们可以输入要调用的action方法,并且如果用户愿意,可以在from成果字段中输入逻辑结果字符串。

但是我个人更喜欢手动编辑XML文件。
因此,让我们考虑一个手动配置导航规则的示例。

创建JSF页面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>Navigation rule</title>
</h:head>
<h:body>
	<h3>Configuring Navigation Rules</h3>
	<h:form>

		<h:commandLink action="#{mobile.add}" value="Add Mobile Details" 
		<br>
		<br>

		<h:commandLink action="#{mobile.view}" value="View Mobile Details" 

	</h:form>
</h:body>
</html>

创建addmob.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>Configuring navigation rules</title>
</h:head>
<h:body>
	<h3>Add Mobile Details</h3>

	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="mname">Mobile Name:</h:outputLabel>
			<h:inputText value="#{mobile.mname}"></h:inputText>
			<br>
			<br>

			<h:outputLabel for="color">Color:</h:outputLabel>
			<h:inputText value="#{mobile.color}"></h:inputText>
			<br>
			<br>

			<h:outputLabel for="model">Model Number:</h:outputLabel>
			<h:inputText value="#{mobile.modelno}"></h:inputText>
			<br>
			<br>

			<h:commandButton value="Submit" action="viewmob"></h:commandButton>

		</h:panelGrid>
	</h:form>
</h:body>
</html>

创建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>

</h:head>
<h:body>
      Mobile Name:Micromax 
      <br>
	<br>
     Mobile color:Black
      <br>
	<br>
      Model Number:A114 Canvas 2.2
      <br>
	<br>

</h:body>
</html>

创建viewmob.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>Mobile Details</title>
</h:head>
<h:body>
      Mobile Name:#{mobile.mname}
      <br>
	<br>
    
     Mobile color:#{mobile.color}
      <br>
	<br>
      Model Number:#{mobile.modelno}
      <br>
	<br>

</h:body>
</html>

现在创建托管beanMobile.java作为

package com.theitroad.jsf.beans;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Mobile implements Serializable {

	private static final long serialVersionUID = 8914753191519956089L;
	private String mname;
	private String modelno;
	private String color;

	public Mobile() {
	}

	public Mobile(String mname, String modelno, String color) {
		this.mname = mname;
		this.modelno = modelno;
		this.color = color;
	}

	public String getMname() {
		return mname;
	}

	public void setMname(String mname) {
		this.mname = mname;
	}

	public String getModelno() {
		return modelno;
	}

	public void setModelno(String modelno) {
		this.modelno = modelno;
	}

	public String getColor() {
		return color;
	}

	public void setColor(String color) {
		this.color = color;
	}

	public String add() {
		return "addform";
	}

	public String view() {
		return "viewform";
	}
}

完成上述更改后,在" faces-config.xml"中添加导航规则,如下所示。

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="2.2"
            xmlns="https://xmlns.jcp.org/xml/ns/javaee"
            xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee 
            https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">
  <navigation-rule>
      <from-view-id>/mobile.xhtml</from-view-id>
      <navigation-case>
          <from-action>#{mobile.add}</from-action>
          <from-outcome>addform</from-outcome>
          <to-view-id>/addmob.xhtml</to-view-id>
      </navigation-case>
      <navigation-case>
          <from-action>#{mobile.view}</from-action>
          <from-outcome>viewform</from-outcome>
          <to-view-id>/viewdetails.xhtml</to-view-id>
      </navigation-case>
  </navigation-rule>
</faces-config>

现在运行该应用程序以在浏览器中查看以下输出。

点击"添加手机详细信息"链接,您将看到下一页。

提交以上表格后,您将获得以下回复页面。

返回首页,然后点击"查看移动详细信息"链接,您将看到下一页。

隐式页面导航

可以在commandButton标记的action属性中隐式指定导航,以找到单击按钮即可呈现的合适页面。

让我们看一个在页面上单击"提交"按钮时显示数据的示例

如下所示创建addcar.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>

</h:head>
<h:body>
	<h3>Add Car Details</h3>

	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="cname">Car Name:</h:outputLabel>
			<h:inputText value="#{car.cname}" id="cname"></h:inputText>
			<br>
			<br>

			<h:outputLabel for="Id">Car Id:</h:outputLabel>
			<h:inputText value="#{car.id}"></h:inputText>
			<br>
			<br>

			<h:outputLabel for="color">Color:</h:outputLabel>
			<h:inputText value="#{car.color}"></h:inputText>
			<br>
			<br>

			<h:commandButton action="viewdet" value="Submit"></h:commandButton>

		</h:panelGrid>
	</h:form>

</h:body>
</html>

在提交按钮中,我们在action属性中指定JSF页面名称viewdet,该属性在单击提交按钮时呈现

创建viewdet.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>Car Details</title>
</h:head>
<h:body>
     Car Id:#{car.id}
     <br>
     Car Name:#{car.cname}
      <br>
     Car color:#{car.color}
      <br>

</h:body>
</html>

创建托管beanCar.java作为

package com.theitroad.jsf.beans;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Car implements Serializable {

	private static final long serialVersionUID = -4018866884298600517L;
	private String cname;
	private String color;
	private String Id;

	public Car() {
	}

	public Car(String cname, String color, String Id) {
		this.cname = cname;
		this.color = color;
		this.Id = Id;

	}

	public String getColor() {
		return color;
	}

	public void setColor(String color) {
		this.color = color;
	}

	public String getCname() {

		System.out.println("car name is" + cname);
		return cname;
	}

	public void setCname(String cname) {
		this.cname = cname;
	}

	public String getId() {
		return Id;
	}

	public void setId(String Id) {
		this.Id = Id;
	}

}