jsf 导航_JSF页面导航示例教程

jsf 导航

Page navigation is the redirection of a page based on the events performed for instance – on click of a button or on click of a link.

页面导航是基于例如单击按钮或单击链接时执行的事件的页面重定向。

There are many ways of defining page navigation. These include

定义页面导航的方法有很多。这些包括

Specifying the page name in the action attribute of the submit button在提交按钮的操作属性中指定页面名称
Indicate the page in the managed bean指示托管bean中的页面
Specify the navigations in faces-config.xml在faces-config.xml中指定导航
Define the navigations based on the conditions根据条件定义导航

隐式导航（在action属性中指定页面名称） (Implicit Navigation (Specifying the page name in the action attribute))

JSF allows us to specify the page name or view name in action attribute of submit button which will resolve the page name with .xhtml extension.

JSF允许我们在“提交”按钮的action属性中指定页面名称或视图名称，这将解析带有.xhtml扩展名的页面名称。

Consider an example below.

考虑下面的示例。

pagenav.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>Page Navigation</title>
</h:head>
<h:body>
<h3>Page Navigation</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:outputLabel for="model">Model:</h:outputLabel>
<h:inputText value="#{car.model}"></h:inputText>
<br /><br /><h:outputLabel for="regno">Registration Number:</h:outputLabel>
<h:inputText value="#{car.regno}"></h:inputText>
<br /><br />
<h:commandButton action="viewdetails" value="Submit"></h:commandButton></h:panelGrid>
</h:form>
</h:body>
</html>

Here the view name viewdetails is specified in the action attribute of commandbutton tag.

在这里，视图名称viewdetails在commandbutton标签的action属性中指定。

Create viewdetails.xhtml wherein the redirection is set to this page(target) on click of submit button

创建viewdetails.xhtml其中在单击“ 提交”按钮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://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 />Car Model:#{car.model}
<br /><br />Car Registration Number:#{car.regno}
</h:body>
</html>

Create a managed bean Car.java as

创建一个托管bean Car.java为

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 = 4672207931321758371L;private String cname;private String color;private String Id;private String model;private String regno;public Car() {}public Car(String cname, String color, String Id, String model, String regno) {this.cname = cname;this.color = color;this.Id = Id;this.model = model;this.regno = regno;}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 getRegno() {return regno;}public void setRegno(String regno) {this.regno = regno;}public String getModel() {return model;}public void setModel(String model) {this.model = model;}public String getId() {return Id;}public void setId(String Id) {this.Id = Id;}public String add() {return "form";}public String view() {return "form";}}

Once done with these changes run the application. When the user clicks on submit button, he is taken to the new page.

完成这些更改后，运行应用程序。当用户单击提交按钮时，他将被带到新页面。

通过托管Bean导航 (Navigation through Managed Bean)

In this second type, we specify the view page with the help of a method in the managed bean and invoke this method of the managed bean in the view page.

在第二种类型中，我们借助于托管Bean中的方法指定视图页面，并在视图页面中调用托管Bean的此方法。

Consider the example below

考虑下面的例子

Create a managed bean CarBean.java

创建一个托管bean CarBean.java

CarBean.java

package com.journaldev.jsf.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;@ManagedBean
@SessionScoped
public class CarBean {private String cname;private String Id;private String color;private String model;private String regno;private String description;public String getColor() {return color;}public void setColor(String color) {this.color = color;}public String getCname() {return cname;}public void setCname(String cname) {this.cname = cname;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public String getRegno() {return regno;}public void setRegno(String regno) {this.regno = regno;}public String getModel() {return model;}public void setModel(String model) {this.model = model;}public String getId() {return Id;}public void setId(String Id) {this.Id = Id;}public String add() {return "pagenav";}}

Here we define the method add wherein we specify the corresponding view page to be rendered on click of buttons.

在这里，我们定义了add方法，其中我们指定了要在单击按钮时呈现的相应视图页面。

Create a view named managedbeannav.xhtml

创建一个名为managedbeannav.xhtml的视图

managedbeannav.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>Page Navigation</title>
</h:head>
<h:body>
<h3>Page Navigation using Managed Bean</h3>
<h:form>
<h:commandButton action="#{carBean.add()}" value="Add Car Details" />
</h:form>
</h:body>
</html>

The pagenav.xhtml is rendered on click of “Add Car Details” button. Please refer to the pagenav.xhtml jsf page created above in implicit navigation.

单击“添加汽车详细信息”按钮，将显示pagenav.xhtml 。请参考上面在隐式导航中创建的pagenav.xhtml jsf页面。

From the add method in the car bean, the pagenav.xhtml page is called and in the action attribute we invoke the method add.

从car bean中的add方法中，调用pagenav.xhtml页面，在action属性中，我们调用方法add。

This is what happens when we run the application.

这是我们运行应用程序时发生的情况。

在faces-config.xml中导航 (Navigation in faces-config.xml)

In this third type, we specify the pages in faces-config.xml file. Let’s look in detail with an example.

在第三种类型中，我们在faces-config.xml文件中指定页面。我们来看一个例子。

We will reuse the Car.java bean defined in earlier steps.

我们将重用前面步骤中定义的Car.java bean。

Now create the car.xhtml page as

现在，将car.xhtml页面创建为

car.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>Facelet Title</title>
</h:head>
<h:body><h3>Navigation through faces-config.xml</h3><h:form><h:commandLink action="#{car.add}" value="Add Car details " /><br /><br /><h:commandLink action="#{car.view}" value="View Details" /></h:form>
</h:body>
</html>

Next create the view pages as to be rendered during navigation.

接下来，创建要在导航期间呈现的视图页面 。

view.xhtml

<!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>Facelet Title</title>
</h:head>
<h:body>Car Id:C1 <br />Car Name:Alto <br />Car color:blue</h:body>
</html>

The pagenav.xhtml will be reused as created above which will rendered upon clicking Add link.

pagenav.xhtml将如上面创建的pagenav.xhtml被重用，单击“ 添加”链接后将呈现该页面。

Now create a new file faces-config.xml to containing navigation mappings. This should go inside WEB-INF folder.

现在，创建一个新文件faces-config.xml以包含导航映射。这应该放在WEB-INF文件夹中。

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="https://java.sun.com/xml/ns/javaee"xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="https://java.sun.com/xml/ns/javaeehttps://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"version="2.0"><navigation-rule><from-view-id>car.xhtml</from-view-id><navigation-case><from-action>#{car.add}</from-action><from-outcome>form</from-outcome><to-view-id>pagenav.xhtml</to-view-id></navigation-case><navigation-case><from-action>#{car.view}</from-action><from-outcome>form</from-outcome><to-view-id>view.xhtml</to-view-id></navigation-case></navigation-rule>
</faces-config>

We invoke the add and view methods of managed bean car.java and this returns the form string. The form string is searched in faces-config.xml for the method name from which it was invoked which is then mapped to pagenav.xhtml page for rendering. Similarly view page is rendered too.

我们调用托管bean car.java的add和view方法，这将返回表单字符串。在faces-config.xml中搜索表单字符串以查找从中调用该方法的方法名称，然后将该方法名称映射到pagenav.xhtml页面以进行呈现。同样，也呈现了视图页面。

Let’s run the application.

让我们运行该应用程序。

Add Car Details

添加汽车详细信息

View Car Details

查看汽车详细信息

转发与重定向导航 (Forward versus Redirect navigation)

JSF, by default provides forward navigation while navigating from one page to the other and the browser url does not change. To enable page redirection, set faces-redirect = true at the end of the view name.

默认情况下，JSF在从一个页面导航到另一页面时提供向前导航，并且浏览器URL不会更改。要启用页面重定向，请在视图名称的末尾设置faces-redirect = true 。

We will look at an example that explains forward and redirect navigation.

我们将看一个解释前进和重定向导航的示例。

Create the JSF view page forward.xhtml as

创建JSF视图页面forward.xhtml为

forward.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>Facelet Title</title>
</h:head>
<h:body><h:form><h3>Forward Navigation</h3><h:commandButton action="pagenav" value="Add Car Details" /><h3>Redirect Navigation</h3><h:commandButton action="pagenav?faces-redirect=true"value="Add Car Details" /></h:form>
</h:body>
</html>

We set faces-redirect=true after at the end of the view page name ‘pagenav’. This ensures redirect navigation is enabled.

我们在视图页面名称'pagenav'的末尾设置了faces-redirect=true 。这样可确保启用了重定向导航。

Refer to the pagenav.xhtml code as created above.

请参考上面创建的pagenav.xhtml代码。

Now run the application which produces the following output.

现在运行产生以下输出的应用程序。

In the above screenshot, even though the add.xhtml page is rendered the url shows the forward.xhtml as the page name. This is used for making the application more secure and robust.

在上面的截图中，即使add.xhtml呈现页面的网址显示的forward.xhtml页面名称。这用于使应用程序更安全和健壮。

In the redirect navigation, the url shows the actual current page rendered in the browser which is – pagenav.xhtml.

在重定向导航中，URL显示在浏览器中呈现的实际当前页面，即– pagenav.xhtml 。

条件导航 (Conditional Navigation)

In conditional navigation which is the last type, we specify conditions based upon which the view should be rendered. Let’s consider an example to demonstrate the conditional navigation

在最后一种类型的条件导航中，我们指定应基于哪些条件呈现视图。让我们考虑一个示例来演示条件导航

Create a managed bean CarNav.java as shown below

创建托管Bean CarNav.java ，如下所示

CarNav.java

package com.journaldev.jsf.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;@ManagedBean(name = "carnav", eager = true)
@RequestScoped
public class CarNav {@ManagedProperty(value = "#{param.pid}")private String pid;public String showPage() {if (pid == null) {return "car_nav";}if (pid.equals("1")) {return "pagenav";} else if (pid.equals("2")) {return "view";} else {return "car_nav";}}public String getPid() {return pid;}public void setPid(String pid) {this.pid = pid;}}

In the CarNav bean, if the pid is 1, pagenav is rendered and if the page id is 2, view page is rendered. The conditions for this is written in the showPage() method.

在CarNav bean中，如果pid为1，则呈现pagenav，如果页面id为2，则呈现视图页面。此条件写在showPage（）方法中。

We will create the car_nav.xhtml page that accepts the page id as parameter.

我们将创建car_nav.xhtml页面，该页面接受页面ID作为参数。

car_nav.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"xmlns:c="https://java.sun.com/jsf/core">
<h:head><title>Facelet Title</title>
</h:head>
<h:body><h3>Conditional Navigation</h3><h:form><h:commandLink action="#{carnav.showPage()}" value="Add"><c:param name="pid" value="1" /></h:commandLink><br /><br /><h:commandLink action="#{carnav.showPage()}" value="View"><c:param name="pid" value="2" /></h:commandLink></h:form>
</h:body>
</html>

Reuse the pagenav.xhtml and view view.xhtml JSF code for the navigation.

重复使用pagenav.xhtml并查看view.xhtml JSF代码进行导航。

Run the application that produces the following output

运行产生以下输出的应用程序

The project structure looks as shown below.

项目结构如下图所示。

This post is all about handling JSF Page Navigation. We will be looking into JSF Beans in the coming tutorial. In the mean time, you can download the project from below link and play around with it to learn more.

这篇文章全部关于处理JSF页面导航 。在接下来的教程中，我们将研究JSF Bean。同时，您可以从下面的链接下载该项目并进行试用以了解更多信息。

Download JSF Page Navigation Project下载JSF页面导航项目

翻译自: https://www.journaldev.com/6708/jsf-page-navigation-example-tutorial

jsf 导航