JSF理解組件和客戶端標識符
理解組件和客戶端標識符
我們接觸了客戶端標識符的概念，現在來看看它與在JSP中分配給組件的標識符有何不同。
我們說過，UI 組件跨越兩個世界：在服務器端，它被表示為組件樹中的一個對象；在客戶端，它可以有多種表現形式。服務器是由一個Java虛擬機以及servlet、 JSF、應用代碼和其他支持庫組成。客戶端則通常是能夠顯示諸如HTML之類的標記的瀏覽器。瀏覽器則是屬于客戶端腳本語言（如JavaScript或者 VBScript）、層疊樣式表（CSS）之類的樣式機制以及像錨和超鏈接之類的導航方案的世界。
在兩個世界中都需要有找到特定組件的特定的方式。在服務器端，每個組件都可以通過組件標識符找到。如果你為某個組件指定了標識符，便可以在 Java 代碼中訪問該組件。在客戶端，每個組件都可以通過其客戶端標識符找到，而該標識符則衍生自組件標識符。客戶端標識符是允許你通過JavaScript、 CSS和其他類似技術來操作組件的表現。
客戶端標識符也在服務器和客戶端之間架了一座橋。當用戶提交表單時，客戶端標識符也隨表示用戶對該組件所執行的動作的數據一起發送給服務器，然后被用來將用戶數據映射到服務器上的組件實例，以便修改其值，產生事件，以及進行其他一些操作。
這似乎有些含混，所以我們來看一個例子。展示了運行于服務器端的組件、它們在客戶端的表示以及使用標識符的技術種類之間的關系。下面的 JSP代碼定義了圖中所示的組件——一個 HtmlOutputText組件和一個具有兩個HtmlInputText子組件的HtmlForm組件：
服務器中的組件實例是通過組件標識符來引用的。而在客戶端它們則是通過客戶端標識符來引用的。有時候兩者相同
首先，需要指出的是，這里的id屬性是組件標識符。另外，你將注意到***個<h:inputText>元素并沒有特定的標識符。這是因為標識符是可選的——如果沒有指定一個，JSF將生成一個。
組件標識符必須由字母或下劃線開始，并且由字母、數字、連字符和下劃線組成。它們也應該簡短一些，以便使返回給客戶端的響應最小化。
現在，來看看對應的HTML輸出：
HTML <span>元素是由HtmlOutputText組件產生的。其客戶端標識符為outputText，與我們在JSP為其定義的組件標識符一樣。<form> 元素是HtmlForm 組件的輸出，其客戶端標識符也與組件標識符相同。但是其所有子組件的客戶端標識符卻要以HtmlForm 組件的客戶端標識符myForm開始。因為我們沒有為第二個HtmlInputText組件指定組件標識符，JSF自動為其分配了一個標識符_id0（輸入控件通常將id和name屬性一起輸出為客戶端標識符）。
HtmlForm 組件的子組件的客戶端標識符以HtmlForm的客戶端標識符開始，因為HtmlForm組件是個命名容器。命名容器是下一節的內容。
注解 組件標識符通常是可選的，但是如果需要用一個組件引用另一個組件，或者通過已知的標識符在客戶端或服務器端引用組件時，則是必要的。如果沒有為其指定，JSF 將在服務器中自動產生一個，但是取決于具體的組件，你可能不能在呈現好的標記中看到客戶端標識符。而如果指定了一個組件標志符，則盡可能地保持其簡短，以便減小JSF響應的大小。
命名容器
命名容器是個組件，它的所有兒子都有***的組件標識符。所以不能在一個命名容器中存在兩個具有相同組件標識符的組件。視圖的根節點（UIViewRoot），即某個給定頁面中所有組件的父親，不是命名容器，但是的確需要使同一個視圖中的頂層組件具有不同的標識符。
HtmlForm就是命名容器，所以位于同一個 HtmlForm 中的組件不能有相同的組件標識符。這是有意義的，因為如果具有兩個名稱都為foo的組件并且類型也相同，你將不能區分它們。另一個標準的命名容器是 HtmlDataTable。某些第三方組件（或者你自己編寫的組件），也可以是命名容器。
如果在控件層次體系中有不只一個命名容器，客戶端標識符可以不同于組件標識符。這是因為客戶端標識符對整個頁面必須保證***，而不管其中有多少命名組件。它們必須是***的，因為客戶并不知道命名容器——它僅僅提交回表單數據給JSF 應用。應用必須能將數據映射到具體的組件，即必須能夠區分針對某個組件的數據。
為了演示，來看看同一個視圖中的兩個HtmlForm組件。它們都包含一個具有相同組件標識符的HtmlInputText子組件：
這兩個聲明，除了HtmlForm 組件的標識符不同外，其余都是一樣的。下面是與其對應的HTML輸出：
UIViewRoot不產生任何輸出；它僅是標明組件樹的開始。然而重要的是，即便兩個HtmlTextInput組件具有相同的組件標識符 inputText，但其客戶端標識符卻是不同的。因為***個表單的客戶端標識符是firstForm，其子控件的客戶端標識符則為 firstForm:inputText。而后一個表單的客戶端標識符是 secondForm，其子組件的客戶端標識符為secondForm:inputText。如你所見，客戶端標識符等于命名容器的客戶端標識符加上冒號再加上其自身的組件標識符。
因為客戶端標識符的默認分隔符為":"，這在CSS樣式，試圖使用客戶端標識符應用樣式到某個組件時，可能會出現問題。解決方法是對組件應用CSS 類樣式（基于此目的，所有的標準HTML 組件都有一個styleClass屬性）。
你可能想知道命名容器將如何影響JSF開發人員的日常開發工作。知道哪個組件是命名容器，將有助于你了解一個組件的客戶端標識符。并且，如果你認識客戶端標識符，便可以在客戶端引用它，并且在服務器中為其解碼，這些都可以在后面的內容中看到。
引用標識符
好了，現在已經知道UI組件在客戶端和服務器端都有標識符，并且知道如果涉及命名容器這些標識符可能不同。現在我們來看看如何使用這些標識符在客戶端和服務器引用組件。
1．客戶端引用
如前所述，客戶端技術可以通過客戶端標識符引用組件。請看下面的JSP 代碼：
這里有個HtmlForm 組件，而它又分別有兩個HtmlOutputLabel 和 HtmlInputText 子組件。HtmlOutputLabel組件有一個HtmlOutput子組件。這樣產生了下面的HTML代碼：
label元素的onmouseout 和 onmouseover屬性中的JavaScript代碼，通過input字段的name 屬性（clientForm:myTextBox）引用了它，該名稱也是HtmlInputText 組件的客戶端標識符。用戶的鼠標移到label上，文本框的值將變為"84"。用戶移開鼠標，它將變為空。這并不是什么很有用的功能，但從這知道，你可以在JavaScript 中通過其客戶端標識符訪問文本字段。
針對HTML 瀏覽器，組件的客戶端標識符映射至對應的HTML元素的name或者id屬性。這意味著也可以在CSS中使用它，或者將其作為錨引用等（關于HTML 的快速參考，請訪問W3School的站點[W3Schools]）。
然而，請記住JSF 并不限于是HTML應用，可以是不同類型的瀏覽器、桌面客戶、applet或者干脆完全不同的其他東西。不管使用何種技術，運行于客戶端的代碼都必須考慮客戶端標識符，特別是在和服務器通信時。
2．服務器端引用
當你在服務器上和JSF組件交互時，編寫的代碼通常位于后臺bean的事件監聽器方法或者事件監聽器類中。然而，它可以位于任何位置，只要具有對組件實例的引用。這是因為基本組件類—— UIComponent——具有一個快捷的findComponent方法。該方法使用類似于客戶端標識符的特殊表達式來查找組件。
例如，假定在JSP中定義了如下的表單：
這樣就定義了一個messageForm的 HtmlForm組件，以及一個outputMessage的HtmlOutputText子組件以及沒有指定標識符的 HtmlCommandButton子組件。HtmlCommandButton 引用了testForm.sendMessage 事件監聽器方法，該方法是：
這里，我們首先獲取視圖的根組件，然后使用 HtmlOutputText 組件的客戶端標識符調用findComponent方法。接下來修改了它的顏色（使用CSS樣式）和值。用戶點擊按鈕時，此方法被調用，并且在頁面重新顯示時，HtmlOutputText控件將以藍色顯示“Who’s the Mann?”（后臺bean也可以直接引用組件，特別是由IDE產生時，所以這種查找并不是很必要）。關于findComponent方法的詳細信息，參考第11章。在為了將請求參數映射到組件值而編寫組件和呈現器時，你也需要使用客戶端標識符。
現在，已經知道關于組件和客戶端標識符的所有內容，接下來則看看JSF的另一個基本部分，在日常工作中會經常遇到：JSF表達式語言。
【編輯推薦】
