新聞中心
理解組件和客戶端標(biāo)識符

10年積累的成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你,你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有濱州免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
我們接觸了客戶端標(biāo)識符的概念,現(xiàn)在來看看它與在JSP中分配給組件的標(biāo)識符有何不同。
我們說過,UI 組件跨越兩個世界:在服務(wù)器端,它被表示為組件樹中的一個對象;在客戶端,它可以有多種表現(xiàn)形式。服務(wù)器是由一個Java虛擬機(jī)以及servlet、 JSF、應(yīng)用代碼和其他支持庫組成。客戶端則通常是能夠顯示諸如HTML之類的標(biāo)記的瀏覽器。瀏覽器則是屬于客戶端腳本語言(如JavaScript或者 VBScript)、層疊樣式表(CSS)之類的樣式機(jī)制以及像錨和超鏈接之類的導(dǎo)航方案的世界。
在兩個世界中都需要有找到特定組件的特定的方式。在服務(wù)器端,每個組件都可以通過組件標(biāo)識符找到。如果你為某個組件指定了標(biāo)識符,便可以在 Java 代碼中訪問該組件。在客戶端,每個組件都可以通過其客戶端標(biāo)識符找到,而該標(biāo)識符則衍生自組件標(biāo)識符??蛻舳藰?biāo)識符是允許你通過JavaScript、 CSS和其他類似技術(shù)來操作組件的表現(xiàn)。
客戶端標(biāo)識符也在服務(wù)器和客戶端之間架了一座橋。當(dāng)用戶提交表單時,客戶端標(biāo)識符也隨表示用戶對該組件所執(zhí)行的動作的數(shù)據(jù)一起發(fā)送給服務(wù)器,然后被用來將用戶數(shù)據(jù)映射到服務(wù)器上的組件實例,以便修改其值,產(chǎn)生事件,以及進(jìn)行其他一些操作。
這似乎有些含混,所以我們來看一個例子。展示了運行于服務(wù)器端的組件、它們在客戶端的表示以及使用標(biāo)識符的技術(shù)種類之間的關(guān)系。下面的 JSP代碼定義了圖中所示的組件——一個 HtmlOutputText組件和一個具有兩個HtmlInputText子組件的HtmlForm組件:
服務(wù)器中的組件實例是通過組件標(biāo)識符來引用的。而在客戶端它們則是通過客戶端標(biāo)識符來引用的。有時候兩者相同
首先,需要指出的是,這里的id屬性是組件標(biāo)識符。另外,你將注意到***個
組件標(biāo)識符必須由字母或下劃線開始,并且由字母、數(shù)字、連字符和下劃線組成。它們也應(yīng)該簡短一些,以便使返回給客戶端的響應(yīng)最小化。
現(xiàn)在,來看看對應(yīng)的HTML輸出:
HTML 元素是由HtmlOutputText組件產(chǎn)生的。其客戶端標(biāo)識符為outputText,與我們在JSP為其定義的組件標(biāo)識符一樣。
HtmlForm 組件的子組件的客戶端標(biāo)識符以HtmlForm的客戶端標(biāo)識符開始,因為HtmlForm組件是個命名容器。命名容器是下一節(jié)的內(nèi)容。
注解 組件標(biāo)識符通常是可選的,但是如果需要用一個組件引用另一個組件,或者通過已知的標(biāo)識符在客戶端或服務(wù)器端引用組件時,則是必要的。如果沒有為其指定,JSF 將在服務(wù)器中自動產(chǎn)生一個,但是取決于具體的組件,你可能不能在呈現(xiàn)好的標(biāo)記中看到客戶端標(biāo)識符。而如果指定了一個組件標(biāo)志符,則盡可能地保持其簡短,以便減小JSF響應(yīng)的大小。
命名容器
命名容器是個組件,它的所有兒子都有***的組件標(biāo)識符。所以不能在一個命名容器中存在兩個具有相同組件標(biāo)識符的組件。視圖的根節(jié)點(UIViewRoot),即某個給定頁面中所有組件的父親,不是命名容器,但是的確需要使同一個視圖中的頂層組件具有不同的標(biāo)識符。
HtmlForm就是命名容器,所以位于同一個 HtmlForm 中的組件不能有相同的組件標(biāo)識符。這是有意義的,因為如果具有兩個名稱都為foo的組件并且類型也相同,你將不能區(qū)分它們。另一個標(biāo)準(zhǔn)的命名容器是 HtmlDataTable。某些第三方組件(或者你自己編寫的組件),也可以是命名容器。
如果在控件層次體系中有不只一個命名容器,客戶端標(biāo)識符可以不同于組件標(biāo)識符。這是因為客戶端標(biāo)識符對整個頁面必須保證***,而不管其中有多少命名組件。它們必須是***的,因為客戶并不知道命名容器——它僅僅提交回表單數(shù)據(jù)給JSF 應(yīng)用。應(yīng)用必須能將數(shù)據(jù)映射到具體的組件,即必須能夠區(qū)分針對某個組件的數(shù)據(jù)。
為了演示,來看看同一個視圖中的兩個HtmlForm組件。它們都包含一個具有相同組件標(biāo)識符的HtmlInputText子組件:
這兩個聲明,除了HtmlForm 組件的標(biāo)識符不同外,其余都是一樣的。下面是與其對應(yīng)的HTML輸出:
UIViewRoot不產(chǎn)生任何輸出;它僅是標(biāo)明組件樹的開始。然而重要的是,即便兩個HtmlTextInput組件具有相同的組件標(biāo)識符 inputText,但其客戶端標(biāo)識符卻是不同的。因為***個表單的客戶端標(biāo)識符是firstForm,其子控件的客戶端標(biāo)識符則為 firstForm:inputText。而后一個表單的客戶端標(biāo)識符是 secondForm,其子組件的客戶端標(biāo)識符為secondForm:inputText。如你所見,客戶端標(biāo)識符等于命名容器的客戶端標(biāo)識符加上冒號再加上其自身的組件標(biāo)識符。
因為客戶端標(biāo)識符的默認(rèn)分隔符為":",這在CSS樣式,試圖使用客戶端標(biāo)識符應(yīng)用樣式到某個組件時,可能會出現(xiàn)問題。解決方法是對組件應(yīng)用CSS 類樣式(基于此目的,所有的標(biāo)準(zhǔn)HTML 組件都有一個styleClass屬性)。
你可能想知道命名容器將如何影響JSF開發(fā)人員的日常開發(fā)工作。知道哪個組件是命名容器,將有助于你了解一個組件的客戶端標(biāo)識符。并且,如果你認(rèn)識客戶端標(biāo)識符,便可以在客戶端引用它,并且在服務(wù)器中為其解碼,這些都可以在后面的內(nèi)容中看到。
引用標(biāo)識符
好了,現(xiàn)在已經(jīng)知道UI組件在客戶端和服務(wù)器端都有標(biāo)識符,并且知道如果涉及命名容器這些標(biāo)識符可能不同。現(xiàn)在我們來看看如何使用這些標(biāo)識符在客戶端和服務(wù)器引用組件。
1.客戶端引用
如前所述,客戶端技術(shù)可以通過客戶端標(biāo)識符引用組件。請看下面的JSP 代碼:
這里有個HtmlForm 組件,而它又分別有兩個HtmlOutputLabel 和 HtmlInputText 子組件。HtmlOutputLabel組件有一個HtmlOutput子組件。這樣產(chǎn)生了下面的HTML代碼:
label元素的onmouseout 和 onmouseover屬性中的JavaScript代碼,通過input字段的name 屬性(clientForm:myTextBox)引用了它,該名稱也是HtmlInputText 組件的客戶端標(biāo)識符。用戶的鼠標(biāo)移到label上,文本框的值將變?yōu)?84"。用戶移開鼠標(biāo),它將變?yōu)榭?。這并不是什么很有用的功能,但從這知道,你可以在JavaScript 中通過其客戶端標(biāo)識符訪問文本字段。
針對HTML 瀏覽器,組件的客戶端標(biāo)識符映射至對應(yīng)的HTML元素的name或者id屬性。這意味著也可以在CSS中使用它,或者將其作為錨引用等(關(guān)于HTML 的快速參考,請訪問W3School的站點[W3Schools])。
然而,請記住JSF 并不限于是HTML應(yīng)用,可以是不同類型的瀏覽器、桌面客戶、applet或者干脆完全不同的其他東西。不管使用何種技術(shù),運行于客戶端的代碼都必須考慮客戶端標(biāo)識符,特別是在和服務(wù)器通信時。
2.服務(wù)器端引用
當(dāng)你在服務(wù)器上和JSF組件交互時,編寫的代碼通常位于后臺bean的事件監(jiān)聽器方法或者事件監(jiān)聽器類中。然而,它可以位于任何位置,只要具有對組件實例的引用。這是因為基本組件類—— UIComponent——具有一個快捷的findComponent方法。該方法使用類似于客戶端標(biāo)識符的特殊表達(dá)式來查找組件。
例如,假定在JSP中定義了如下的表單:
這樣就定義了一個messageForm的 HtmlForm組件,以及一個outputMessage的HtmlOutputText子組件以及沒有指定標(biāo)識符的 HtmlCommandButton子組件。HtmlCommandButton 引用了testForm.sendMessage 事件監(jiān)聽器方法,該方法是:
這里,我們首先獲取視圖的根組件,然后使用 HtmlOutputText 組件的客戶端標(biāo)識符調(diào)用findComponent方法。接下來修改了它的顏色(使用CSS樣式)和值。用戶點擊按鈕時,此方法被調(diào)用,并且在頁面重新顯示時,HtmlOutputText控件將以藍(lán)色顯示“Who’s the Mann?”(后臺bean也可以直接引用組件,特別是由IDE產(chǎn)生時,所以這種查找并不是很必要)。關(guān)于findComponent方法的詳細(xì)信息,參考第11章。在為了將請求參數(shù)映射到組件值而編寫組件和呈現(xiàn)器時,你也需要使用客戶端標(biāo)識符。
現(xiàn)在,已經(jīng)知道關(guān)于組件和客戶端標(biāo)識符的所有內(nèi)容,接下來則看看JSF的另一個基本部分,在日常工作中會經(jīng)常遇到:JSF表達(dá)式語言。
【編輯推薦】
- JSF基礎(chǔ)框架
- 使用G4JSF集成GWT和JSF
- 過渡技術(shù)的Ajax及Apusic JSF
- NetBeans中JSF的可視化開發(fā)
- 詳細(xì)介紹Seam Remoting API和Ajax4jsf
本文標(biāo)題:JSF理解組件和客戶端標(biāo)識符
文章源于:http://www.fisionsoft.com.cn/article/djsshes.html


咨詢
建站咨詢
