JSF-ページナビゲーション

ナビゲーションルールは、ボタンまたはリンクがクリックされたときに表示されるビューを記述するJSFフレームワークによって提供されるルールです。

ナビゲーションルールは、faces-config.xmlという名前のJSF構成ファイルで定義できます。それらはマネージドBeanで定義できます。

ナビゲーションルールには、結果のビューを表示するための条件を含めることができます。JSF 2.0は、ナビゲーションルールをそのように定義する必要がない暗黙的なナビゲーションも提供します。

暗黙のナビゲーション

JSF2.0は auto view page resolver 名前のメカニズム implicit navigation。この場合、アクション属性にビュー名を入力するだけで、JSFは正しいものを検索しますview デプロイされたアプリケーションで自動的にページングします。

JSFページの自動ナビゲーション

JSFUIコンポーネントのアクション属性にビュー名を設定します。

<h:form>
   <h3>Using JSF outcome</h3>
   <h:commandButton action = "page2" value = "Page2" />
</h:form>

ここで、 Page2 ボタンがクリックされると、JSFはビュー名を解決します。 page2 page2.xhtml拡張子として、対応するビューファイルを見つけます page2.xhtml 現在のディレクトリにあります。

マネージドBeanの自動ナビゲーション

ビュー名を返すようにマネージドBeanでメソッドを定義します。

@ManagedBean(name = "navigationController", eager = true)
@RequestScoped

public class NavigationController implements Serializable {
   public String moveToPage1() {
      return "page1";
   }
}

管理対象Beanを使用して、任意のJSFUIコンポーネントのアクション属性でビュー名を取得します。

<h:form> 
   <h3> Using Managed Bean</h3>  
   <h:commandButton action = "#{navigationController.moveToPage1}" 
   value = "Page1" /glt; 
</h:form>

ここで、 Page1 ボタンがクリックされると、JSFはビュー名を解決します。 page1 page1.xhtml拡張子として、対応するビューファイルを見つけます page1.xhtml 現在のディレクトリにあります。

条件付きナビゲーション

マネージドBeanを使用すると、ナビゲーションを非常に簡単に制御できます。マネージドBeanの次のコードを見てください。

@ManagedBean(name = "navigationController", eager = true)
@RequestScoped

public class NavigationController implements Serializable {
   //this managed property will read value from request parameter pageId
   @ManagedProperty(value = "#{param.pageId}")
   private String pageId;

   //condional navigation based on pageId
   //if pageId is 1 show page1.xhtml,
   //if pageId is 2 show page2.xhtml
   //else show home.xhtml
   
   public String showPage() {
      if(pageId == null) {
         return "home";
      }
      
      if(pageId.equals("1")) {
         return "page1";
      }else if(pageId.equals("2")) {
         return "page2";
      }else {
         return "home";
      }
   }
}

JSFUIコンポーネントのリクエストパラメータとしてpageIdを渡します。

<h:form>
   <h:commandLink action = "#{navigationController.showPage}" value = "Page1">
      <f:param name = "pageId" value = "1" />
   </h:commandLink>
   <h:commandLink action = "#{navigationController.showPage}" value = "Page2">
      <f:param name = "pageId" value = "2" />
   </h:commandLink>
   <h:commandLink action = "#{navigationController.showPage}" value = "Home">
      <f:param name = "pageId" value = "3" />
   </h:commandLink>
</h:form>

ここで、「Page1」ボタンをクリックすると。

  • JSFは、パラメーターpageId = 1でリクエストを作成します

  • 次に、JSFはこのパラメーターをnavigationControllerの管理プロパティpageIdに渡します

  • ここで、navigationController.showPage（）が呼び出され、pageIdをチェックした後にビューをpage1として返します。

  • JSFは、ビュー名page1をpage1.xhtml拡張子として解決します

  • 現在のディレクトリで対応するビューファイルpage1.xhtmlを見つけます

from-actionに基づくナビゲーションの解決

JSFは、マネージドBeanの異なるメソッドが同じビュー名を返す場合でも、ナビゲーション解決オプションを提供します。

マネージドBeanの次のコードを見てください。

public String processPage1() { 
   return "page"; 
} 
public String processPage2() { 
   return "page"; 
}

ビューを解決するには、で次のナビゲーションルールを定義します faces-config.xml

<navigation-rule> 
   <from-view-id>home.xhtml</from-view-id> 
   
   <navigation-case> 
      <from-action>#{navigationController.processPage1}</from-action> 
      <from-outcome>page</from-outcome> 
      <to-view-id>page1.jsf</to-view-id> 
   </navigation-case> 
   
   <navigation-case> 
      <from-action>#{navigationController.processPage2}</from-action> 
      <from-outcome>page</from-outcome> 
      <to-view-id>page2.jsf</to-view-id> 
   </navigation-case> 

</navigation-rule>

ここで、Page1ボタンをクリックすると−

  • navigationController.processPage1() ビューをページとして返すが呼び出されます

  • JSFはビュー名を解決します。 page1 ビュー名は page and from-action に faces-config is navigationController.processPage1

  • 対応するビューファイルを見つける page1.xhtml 現在のディレクトリ

転送とリダイレクト

JSFはデフォルトで、別のページに移動しているときにサーバーページを転送し、アプリケーションのURLは変更されません。

ページリダイレクトを有効にするには、 faces-redirect=true ビュー名の最後にあります。

<h:form>
   <h3>Forward</h3>
   <h:commandButton action = "page1" value = "Page1" />
   <h3>Redirect</h3>
   <h:commandButton action = "page1?faces-redirect = true" value = "Page1" />
</h:form>

ここで、 Page1 下のボタン Forward をクリックすると、次の結果が得られます。

ここでいつ Page1 下のボタン Redirect をクリックすると、次の結果が得られます。

アプリケーション例

上記のナビゲーション例をすべてテストするためのテストJSFアプリケーションを作成しましょう。

ステップ 説明
1 JSF-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.testの下にhelloworldという名前のプロジェクトを作成します。
2 以下で説明するように、パッケージcom.tutorialspoint.testの下にNavigationController.javaを作成します。
3 WEB-INFフォルダーの下にfaces-config.xmlを作成し、以下で説明するようにその内容を更新します。
4 以下で説明するように、WEB-INFフォルダーの下のweb.xmlを更新します。
5 作成page1.xhtmlとpage2.xhtmlと変更home.xhtml下のwebapp以下に説明するようにフォルダ。
6 アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。
7 最後に、warファイルの形式でアプリケーションをビルドし、Apache TomcatWebサーバーにデプロイします。
8 最後のステップで以下に説明するように、適切なURLを使用してWebアプリケーションを起動します。

NavigationController.java

package com.tutorialspoint.test;
  
import java.io.Serializable;  

import javax.faces.bean.ManagedBean; 
import javax.faces.bean.ManagedProperty; 
import javax.faces.bean.RequestScoped;  

@ManagedBean(name = "navigationController", eager = true) 
@RequestScoped 
public class NavigationController implements Serializable {  
   private static final long serialVersionUID = 1L;  
   @ManagedProperty(value = "#{param.pageId}")    
   private String pageId;  
   
   public String moveToPage1() {      
      return "page1";    
   }  
   
   public String moveToPage2() {       
      return "page2";    
   }  
   
   public String moveToHomePage() {      
      return "home";    
   }  
   
   public String processPage1() {       
      return "page";    
   }  
   
   public String processPage2() {       
      return "page";    
   } 
   
   public String showPage() {       
      if(pageId == null) {          
         return "home";       
      }       
      
      if(pageId.equals("1")) {          
         return "page1";       
      }else if(pageId.equals("2")) {          
         return "page2";       
      }else {          
         return "home";       
      }    
   }  
   
   public String getPageId() {       
      return pageId;    
   }  
   
   public void setPageId(String pageId) {       
      this.pageId = pageId;   
   } 
}

顔-config.xml

<?xml version = "1.0" encoding = "UTF-8"?>

<faces-config
   xmlns = "http://java.sun.com/xml/ns/javaee"
   xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee
   http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
   version = "2.0">
   
   <navigation-rule>
      <from-view-id>home.xhtml</from-view-id>
      <navigation-case>
         <from-action>#{navigationController.processPage1}</from-action>
         <from-outcome>page</from-outcome>
         <to-view-id>page1.jsf</to-view-id>
      </navigation-case>
      <navigation-case>
         <from-action>#{navigationController.processPage2}</from-action>
         <from-outcome>page</from-outcome>
         <to-view-id>page2.jsf</to-view-id>
      </navigation-case>
   </navigation-rule>

</faces-config>

web.xml

<!DOCTYPE web-app PUBLIC
   "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
   "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
   <display-name>Archetype Created Web Application</display-name>

   <context-param>
      <param-name>javax.faces.PROJECT_STAGE</param-name>
      <param-value>Development</param-value>
   </context-param>
   <context-param>
      <param-name>javax.faces.CONFIG_FILES</param-name>
      <param-value>/WEB-INF/faces-config.xml</param-value>
   </context-param>
   
   <servlet>
      <servlet-name>Faces Servlet</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   </servlet>
   <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.jsf</url-pattern>
   </servlet-mapping>

</web-app>

page1.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html">
   
   <h:body>
      <h2>This is Page1</h2>
      <h:form>
         <h:commandButton action = "home?faces-redirect = true"
            value = "Back To Home Page" />
      </h:form>
   </h:body>
</html>

page2.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html">
   
   <h:body>
      <h2>This is Page2</h2>
      <h:form>
         <h:commandButton action = "home?faces-redirect = true"
            value = "Back To Home Page" />
      </h:form>
   </h:body>
</html>

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:h = "http://java.sun.com/jsf/html">

   <h:body>
      <h2>Implicit Navigation</h2>
      <hr />
      
      <h:form>
         <h3>Using Managed Bean</h3>
         <h:commandButton action = "#{navigationController.moveToPage1}"
            value = "Page1" />
         <h3>Using JSF outcome</h3>
         <h:commandButton action = "page2" value = "Page2" />
      </h:form>
      <br/>
      
      <h2>Conditional Navigation</h2>
      <hr />
      <h:form>
         <h:commandLink action = "#{navigationController.showPage}"
            value="Page1">
            <f:param name = "pageId" value = "1" />
         </h:commandLink>
              
         
         <h:commandLink action = "#{navigationController.showPage}"
            value="Page2">
            <f:param name = "pageId" value = "2" />
         </h:commandLink>
              
         
         <h:commandLink action = "#{navigationController.showPage}"
            value = "Home">
            <f:param name = "pageId" value = "3" />
         </h:commandLink>
      </h:form>
      <br/>
      
      <h2>"From Action" Navigation</h2>
      <hr />
      
      <h:form>
         <h:commandLink action = "#{navigationController.processPage1}"
         value = "Page1" />
              
         <h:commandLink action = "#{navigationController.processPage2}"
         value = "Page2" />
              
      </h:form>
      <br/>
      
      <h2>Forward vs Redirection Navigation</h2>
      <hr />
      <h:form>
         <h3>Forward</h3>
         <h:commandButton action = "page1" value = "Page1" />
         <h3>Redirect</h3>
         <h:commandButton action = "page1?faces-redirect = true"
         value = "Page1" />
      </h:form>
   </h:body>
</html>

すべての変更を行う準備ができたら、JSF-アプリケーションの作成の章で行ったように、アプリケーションをコンパイルして実行します。アプリケーションに問題がない場合は、次の結果が得られます。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved