1. 程式人生 > >jsf 頁面配置導航總結

jsf 頁面配置導航總結


3,高階的導航
主要討論在你web程式中如何配置導航,即如何讓你的程式從一個頁面跳轉到下一個頁面,當然要根據你業務

邏輯的actions和outcomes。

1,靜態導航(Static Navigation)
在一個簡單的web應用程式中,頁面導航一般是靜態指定的,在jsf中你只需要給每個按鈕一個action屬性,然

後再faces-config.xml中配置以下就可以輕鬆實現頁面之間的跳轉問題。
例如:
<h:commandButton label="Login" action="login"/>
但是這樣還不行,action必須匹配在faces-config.xml檔案中的導航規則的outcome:
<navigation-rule>

   <from-view-id>/index.jsp</from-view-id>

   <navigation-case>

     <from-outcome>login</from-outcome>

     <to-view-id>/welcome.jsp</to-view-id>

   </navigation-case>

</navigation-rule>
這表明如果按鈕在/index.jsp中被點選,頁面將跳轉到/welcome.jsp.
注意:這裡的view-id必須以"/"開始,副檔名為.jsp。例:如果你把from-view-id設定為/index.faces,將不

能工作。

我們看下面這個導航規則:
<navigation-rule>

   <navigation-case>

     <from-outcome>logout</from-outcome>

     <to-view-id>/logout.jsp</to-view-id>

   </navigation-case>

</navigation-rule>

可以看到他沒有from-view-id,這就意味著:無論你在整個web程式中的任何頁面點選,只要outcome為logout

,她都會跳轉到/logout.jsp頁面。

我們再看下面這段導航規則:

<navigation-rule>

   <from-view-id>/index.jsp</from-view-id>

   <navigation-case>

     <from-outcome>login</from-outcome>

     <to-view-id>/welcome.jsp</to-view-id>

   </navigation-case>

   <navigation-case>

     <from-outcome>signup</from-outcome>

     <to-view-id>/newuser.jsp</to-view-id>

   </navigation-case>

</navigation-rule>


我們可以看到,她有一個相同的from-view-id,意思就是說在/index.jsp中如果你觸發的outcome為login,頁面

就會跳轉到/welecom.jsp,要是為signup的話就跳轉到/newuser.jsp頁面。事實上我們會經常用到這種規則的

配置。

注意:如果沒有導航規則來匹配一個給定的action,那麼當前頁面將簡單的重新顯示一下。


2,動態的導航(Dynamic Navigation)
在大多數web程式中,導航都不是靜態的。頁面的流程不僅僅依靠你點選的那個按鈕,而且還有根據你輸入的

內容來判斷。最常見的就是提交一個處理登陸的頁面,可能有兩種結果:success or failure!結果(outcome)

將依賴於一定的計算判斷,譬如使用者名稱和密碼是否合法。

為了實現動態的導航,提交按鈕必須有一個方法來參考,例如:

<h:commandButton label="Login" action="#{loginController.verifyUser}"/>
loginController是某個類的受管Bean,這個類必須有一個方法名字是verifyUser,返回一個String,供

action屬性使用,這個方法可能是這樣:
String verifyUser() {
   if (...)
      return "success";
   else
      return "failure";
}
注意:如果一個action method返回null,那麼將重新顯示頁面本身。


3,高階的導航

As you can see from the syntax diagram, each navigation-rule and navigation-case element can

have arbitrary description, display-name, and icon elements. These elements are intended for use

in builder tools, and we do not discuss them further.

我們來看下面的導航規則:
<navigation-case>

   <from-outcome>success</from-outcome>

   <to-view-id>/success.jsp</to-view-id>

   <redirect/>

</navigation-case>

你會發現在to-view-id後面多了一個redirect元素,Redirecting the page is slower than forwarding

because another round trip to the browser is involved. However, the redirection gives the

browser a chance to update its address field.
註釋:沒有redirect,原來的url(localhost:8080/javaquiz/index.faces)在你從/index.jsp到/success.jsp

後在位址列中沒有改變,反之改變了,變成了localhost:8080/javaquiz/success.faces。

我們接著看下面的導航規則:
<navigation-rule>

   <from-view-id>/secure/*</from-view-id>

   <navigation-case>

      . . .

   </navigation-case>

</navigation-rule>
你會發現from-view-id中使用了萬用字元(wildcards),/secure目錄下面的所有頁面將應用導航規則。同理:
<from-view-id>/*</from-view-id>or<from-view-id>*</from-view-id>將應用的所有的頁面。

我們再看下面的導航規則:

<navigation-rule>
     <from-view-id>/index/zhuce/denglu.jsp</from-view-id>
     <navigation-case>
       <from-action>#{LoginBean.doLogin}</from-action>
       <from-outcome>success</from-outcome>
       <to-view-id>/index/zhuce/welcome.jsp</to-view-id>
     </navigation-case>
     <navigation-case>
<from-action>#{LoginBean.doLogin}</from-action>
         <from-outcome>failed</from-outcome>
         <to-view-id>/index/zhuce/denglu.jsp</to-view-id>
    </navigation-case>
</navigation-rule>
你會發現多了一個<from-action>,上邊這個好像不太恰當,因為from-action一般在下面這種情況下才能顯示

出靈活性:

That flexibility can be useful if you have two separate actions with the same action string, or

two action method references that return the same action string.
如果你有連個單獨的actions卻有相同的action string或兩個相同的action method返回相同的action

string.
舉個例子:answerAction和startOverAction都返回again
<navigation-case>

<from-action>#{quiz.answerAction}</from-action>

<from-outcome>again</from-outcome>

<to-view-id>/again.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-action>#{quiz.startOverAction}</from-action>

<from-outcome>again</from-outcome>

<to-view-id>/index.jsp</to-view-id>

</navigation-case>

例如,假設在我們的測驗程式中,startOverAction返回字串"again"而不是"Start Over"。answerAction也可能返回相同的字串。為了區別兩種導航情況,可以使用from-action元素。該元素的內容必須與action屬性的方法表示式字串相同。

 <navigation-case>
<from-action>#{quiz.answerAction}</from-action>
<from-outcome>again</from-outcome>
<to-view-id>/again.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{quiz.startOverAction}</from-action>
<from-outcome>again</from-outcome>
<to-view-id>/index.jsp</to-view-id>
</navigation-case>

說明

導航處理程式不會呼叫#{...}分隔符中的方法。在導航處理程式處理之前,該方法已經被呼叫。導航處理程式只是使用from-action字串作為一個主鍵,用於查詢匹配導航的情況

相關推薦

jsf 頁面配置導航總結

3,高階的導航主要討論在你web程式中如何配置導航,即如何讓你的程式從一個頁面跳轉到下一個頁面,當然要根據你業務邏輯的actions和outcomes。1,靜態導航(Static Navigation)在一個簡單的web應用程式中,頁面導航一般是靜態指定的,在jsf中你只需要

由於啟動計算機時出現了頁面配置問題

ont bdc 什麽 sig 驅動器 img 性能 計算機 是什麽 由於啟動計算機時出現了頁面配置問題: 開機時會出現這樣一個對話框。 2 然後我們會點擊確定,然後會出現這樣一個對話框。反正我也看不懂這是什麽意思,想必大多數人也是看不懂,沒關系,跟我來做

Nginx配置問題總結

中文字符 pcr 重新啟動 重新 ins 集群 server 需要 logs 1、Nginx直接下載解壓,有個nginx.exe文件,雙擊即開啟Nginx服務(windows系統下)。默認是80端口。 若服務無法啟動,考慮以下三方面問題: (1)端口號80是否被占用 (2)

前端頁面重構技巧總結TIP【持續更新...】

code lock 項目 居中 經驗 ade 布局 baidu round 本文均為項目實戰經驗,要求兼容至IE8,所以以下內容均為兼容代碼,歡迎各位小夥伴批評指教。其實重構頁面是一門學問,看似簡單,卻暗藏很多學問。實際項目中頁面的重構有以下幾點最基本需求: 1.需要使用

Druid監控頁面配置與使用

method mil 使用 blog troy ict 密碼 一次 div 一、Maven中添加Durid連接池依賴 <!-- druid連接池 --> <dependency> <groupId>com.alibaba<

給當前頁或者跳轉後頁面導航欄添加選中樣式

cat oca [0 ddc == list ring this ref $("ul.nav-list li a").each(function () { //$("ul.nav-list li").removeClass("active");

ERP合同列表頁面自動導航(二十八)

date sheet ioe sage 技術 部門 lis highlight tid 合同審核完成頁面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CRMContractOver.asp

nginx偽靜態配置教程總結

配置 設置 設置方法 靜態 com 配置教程 apche 入門 rewrite 在nginx中配置偽靜態,也就是常說的url重寫功能,只需在nginx.conf配置文件中寫入重寫規則即可。 當然,這個規則是需要熟悉正則表達式,只掌握nginx自身的正則匹配模式即可,對正則不

解決js中post提交數據並且跳轉到指定頁面的問題總結

設置 表單 for 並且 無法 fun 開發 完成 我們 今天在開發中過程中遇到了這個問題,js中利用JQuery中的 $.post("url", id, function(){}); 這個方法是數據提交正常,但是後臺處理完成之後跳轉無法成功。經過分析,後臺只是將要跳轉

vue2.0 配置環境總結(都是淚啊)

fan all oba 都是 cnpm 2.0 git lex tex   最近有點空閑時間,終於把一直想學的vue提上了日程,以下是收集的一些幫助入門的鏈接   1:https://vuefe.cn/v2/guide/  vue2.0中文官網   2:https://ro

移動端h5頁面常見問題總結

webkit style 總結 mar 常見問題 就會 所有 真的 abs   從去年開始在公司一直做嵌入式的h5頁面,遇見了很多問題,做一個小小的總結~   1.IOS設備鏈接、按鈕等點擊產生灰色背景   在傲嬌的iOS中可點擊元素被點擊時候會出現覆蓋顯示的高亮顏色,也就

django 重新學習 前段頁面配置(五)

spa try 登入 exc object ati profile users ews setting配置 class CustomBackend(ModelBackend): def authenticate(self, username=None, pass

「Vue」起步 - vue-router路由與頁面導航

port details cal 重定向 替換 特色 插件 實戰 顯式 vue-router 我們知道路由定義了一系列訪問的地址規則,路由引擎根據這些規則匹配找到對應的處理頁面,然後將請求轉發給頁進行處理。可以說所有的後端開發都是這樣做的,而前端路由是不存在"請求"一說的

Django註冊頁面配置設計

value 回顧 admin creat tps 註冊 templates 註冊頁面 tar 一、上次回顧 Django數據的增查改刪 models 中有userInfo 三個字段 user password phonenumber,models.userInfo.obje

NodeJs爬蟲抓取古代典籍,共計16000個頁面心得體會總結及項目分享

star 完成 這樣的 過程 優點 header 時間 eof ssi 項目技術細節 項目大量用到了 ES7 的async 函數, 更直觀的反應程序了的流程。為了方便,在對數據遍歷的過程中直接使用了著名的async這個庫,所以不可避免的還是用到了回調promise

nginx配置location總結及rewrite規則寫法

location href write post targe nginx配置 nginx blank clas 作者的布局挺好,直接戳下面的鏈接吧 轉:http://seanlook.com/2015/05/17/nginx-location-rewrite/nginx配置

橫向滑動頁面導航條滑動居中的 js 實現思路

let blog turn 頭條 2個 fse ret 咨詢 導航欄 最近在做新聞咨詢頁的項目,各個新聞頻道通過橫向滑動切換,頂部的導航active欄需要跟著切換到對應頻道,並且active到達中部時,要一直處在中間。 類似效果就是uc瀏覽器《UC頭條》的導航欄滑動居中一樣

安卓APP載入HTML5頁面解決方式總結

true ide 不同 webclient devtools 先來 介紹 未來 童鞋 因為H5頁面在移動端的兼容性及擴展性方面體現出來的優勢,又兼得APP中植入H5

mysql lamp 配置命令總結

mysql lamp 三 Mysql1.卸載MySQL的RPM包rpm -e mysql --nodeps2.安裝cmake包tar zxf cmake-2.8.6.tar.gz cd cmake-2.8.6./configuregmake && gmake install3.創建數據

靜態頁面導航切換時的當前狀態(四中方法)

HA 靜態頁 () ctype urn ren -- func class <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <