jsf 导航_JSF导航规则示例教程

cunchi4221

于 2020-07-12 16:10:03 发布

阅读量319

点赞数

文章标签： java eclipse xml vue spring ViewUI

原文链接：https://www.journaldev.com/7042/jsf-navigation-rule-example-tutorial

版权

jsf 导航

JSF Navigation rules specifies the navigation between the pages on click of button or hyperlink. Navigation can be specified in terms of the logical outcome such as success, failure or through action method.

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

JSF导航规则 (JSF Navigation Rules)

JSF Navigation rules can be specified in faces-config.xml with the help of <navigation-rule> tag.

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

在Netbeans IDE中配置JSF导航规则 (Configuring JSF navigation rule in Netbeans IDE)

Right click and expand the project node
右键单击并展开项目节点
Expand the WEB-INF node and double click on faces-config.xml file
展开WEB-INF节点，然后双击faces-config.xml文件
In the faces-config.xml open the editor pane and choose navigation rule from Insert menu.
在faces-config.xml中，打开编辑器窗格，然后从“插入”菜单中选择导航规则。
From the add navigation dialog browse or add the JSF page name for the rule and click add.
在添加导航对话框中，浏览或添加规则的JSF页面名称，然后单击添加。
Right click the editor pane and select navigation case from Insert menu
右键单击编辑器窗格，然后从“插入”菜单中选择导航用例
In the add navigation dialog box add or browse JSF page name that represents the starting view for the navigation rule and add or browse the to view JSF page name that opens when navigation case is selected by the navigation system.
在“添加导航”对话框中，添加或浏览代表导航规则的初始视图的JSF页面名称，并添加或浏览以查看当导航系统选择导航案例时打开的JSF页面名称。
We can enter the action method to be invoked when the component triggers the navigation activated in the from action field and can enter the logical outcome strings in the from outcome field if the user wishes.
当组件触发在from动作字段中激活的导航时，我们可以输入要调用的action方法，并且如果用户愿意，可以在from成果字段中输入逻辑结果字符串。

But personally I prefer editing the XML files manually. So let’s consider an example of configuring navigation rules manually.

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

Create the JSF page mobile.xhtml as

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

Create the addmob.xhtml as

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

Create viewdetails.xhtml as

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

Create viewmob.xhtml as

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

Now create the managed bean Mobile.java as

现在将托管bean Mobile.java创建为

package com.journaldev.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";
	}
}

Once done with above changes add navigation rules in faces-config.xml as shown below.

完成上述更改后，如下所示在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>

Now run the application to see the following output in the browser.

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

Click on “Add Mobile Details” link and you will see below page.

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

Once you submit above form, you will get below response page.

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

Go back to first page and click on “View Mobile Details” link and you will see below page.

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

隐式页面导航 (Implicit page navigation)

Navigation can be specified implicitly in the action attribute of the commandButton tag to find the suitable page to be rendered upon the click of a button.

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

Let us see an example of displaying the data on click of submit button in a page

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

Create addcar.xhtml as shown below.

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

In the submit button we specify the JSF page name viewdet in the action attribute which is rendered upon the click of submit button

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

Create viewdet.xhtml as;

创建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><br>
       Car Name:#{car.cname}
        <br><br>
       Car color:#{car.color}
        <br><br>

</h:body>
</html>

Create managed bean Car.java as

创建托管bean Car.java为

package com.journaldev.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;
	}

}

Now run the application to see the following output pages.

现在运行该应用程序以查看以下输出页面。

On submitting the form in above page.