隨筆-33  評論-1965  文章-0  trackbacks-0

上一篇文章,我介紹了通過JBoss Tools的向導生成一個簡單的Seam工程。Seam的中文意思就是“縫合線, 銜接口, 接縫”,所以大家可以將Seam當成一條能將EJB3、JSF等框架有機地結合起來的紐帶。如下圖所示。

由上圖可以看出Seam會涉及很多技術,不過大家不必驚慌,因為其中有些技術不是必須的。然而要學好Seam,掌握JSF是必不可少的。Seam基于JSF作了一些擴展,使JSF更易用。另外,在上圖中JSF上層有JSP、Facelets和Portal這三個框框,這三種技術是JSF的視圖(View)技術,三者可任選其一。現在JSF默認是使用JSP作為視圖技術,不過我早前在TSS上看過一篇關于JSF 2.0的文章,這方面會有所改變——Facelets將會取而代之。因為Facelets對比JSP要優越許多:

  1. Facelets使用XHTML規范,省卻了一大堆JSP的<f:verbatim />;
  2. 更強的性能;
  3. Facelets實現模板(Template)功能,這個可以稱得上是殺手锏功能。因為幾乎每個應用都要使用這個功能;
  4. Facelets還可以方便地創建自定義標簽和EL函數。

所以Facelets成為Seam的不二之選。通過上面的講述,我想大家應該了解Seam、JSF與Facelets的關系,故我介紹使用Facelets作為視圖技術的JSF。

基本的XHTML構成

如果大家可以通過上一篇文章可以順利創建Seam工程,可以在WebContent文件夾下看到一些XHTML文件。不過,這些XHTML都并不是獨立的,需要依賴模板頁面。下面讓我們來看一個完整的XHTML:

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

<html xmlns="//www.w3.org/1999/xhtml" xmlns:h="//java.sun.com/jsf/html">
    
<head>
        
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
        
<title>
            Hello World
        
</title>
    
</head>
    
<body>
        
<h1><h:outputText value="Hello World!" /></h1>
    
</body>
</html>

這個文件的構成很簡單,與普通的XHTML區別就是引入了“//java.sun.com/jsf/html”命名空間。這個URI正是JSF常用的組件(Component,在JSF里的稱呼,可以理解為JSP中的標簽)的URI,<h:outputText />就是其中之一。

另外,需要指出的是上述文件并沒有<f:viewRoot />。這個在以JSP作為視圖技術的JSF的頁面中是必需的。因為JSF的頁面其實在內存中模型就是一棵樹,如下圖所示。理解這點非常重要,所以是必須有根節點。Facelets的FaceletViewHandler會自動創建一個UIViewRoot,如果XHTML中沒有定義的話。

常用的JSF組件

常用的JSF組件可以分為以下幾大類:表單輸入組件、命令組件、輸出組件、數據組件和輔助組件。

除了輔助組件之外,有些屬性是組件共有的:

  1. id屬性,正如我前邊所說“JSF的頁面其實在內存中模型就是一棵樹”,每個組件對應一個節點。每個節點都有一個唯一標識,這就是id屬性。如果你沒有顯式地設置id,JSF會自動幫你生成一個。
  2. binding屬性,只能設置一個EL為值,它作用是可以將組件對應的對象綁定到后臺的Managed Bean。當我們拿到這個對象后,我們可以通過JSF的API改變其行為。這個會在以后文章詳細講述。
  3. rendered屬性,用于指定該組件是否會被輸出到頁面中。

下面我分別對每類組件進行概述。

常用的表單輸入組件

對于表單輸入組件,都會有一個叫value的屬性,通常被設置為一個EL表達式,如#{myBean.myProperty}。在JSF中有一個概念叫雙向綁定,即是在提交表單的時候,JSF通過EL將用戶輸入的值綁定到后臺的Managed Bean中;同樣地請求完成后渲染頁面時,JSF亦會通過EL將Managed Bean的值輸出相應的位置。

常用的表單輸入組件有如下 :

  • h:inputText
  • h:inputSecret
  • h:inputTextarea
  • h:selectBooleanCheckbox
  • h:selectManyCheckbox
  • h:selectOneRadio
  • h:selectOneListbox
  • h:selectManyListbox
  • h:selectOneMenu
  • h:selectManyMenu

在這,我就不一一介紹這些組件的詳細用法,大家可以找一下《Core JavaServer Faces, 2nd Edition》來看一下。

命令組件

JSF的命令組件有<h:commandButton />和<h:commandLink />,分別輸出一個<input type="submit" />和<a />。它們都有兩個屬性action和actionListener,可以綁定到Managed Bean的事件處理方法。例如:

    <h:commandButton action="#{myBean.myEvent}" value="Click Me" />
    
<h:commandButton actionListener="#{myBean.myActionListener}" value="Click Me" />

對應的JAVA代碼:

    public String myEvent() {
        
return null;
    }
    
    
public void myActionListener(ActionEvent event) {
        
    }

常用的輸出組件

這些組件輸出一些常用的HTML元素,如<span />、<a />、<div />和<table />等。其中最常用的應該是<h:outputText />、<h:panelGroup />和<h:panelGrip />。

  • h:outputText,當id、style和styleClass等屬性不為空時,它會輸出<span />包住value。另外,它還有一個屬性叫escape,用于指示是否需要對值進行HTML編碼,默認為true。對值進行HTML可以從一定程序上防止XSS(Cross Site Scripting,跨站腳本)攻擊。
  • h:panelGroup,當id、style和styleClass行屬性不為空,且layout不為block時,它輸出<span />。而當上述屬性不為空,且layout為block時,它會輸出<div />。不過,當上述屬性為空時,它將什么也不輸出??贍苡械吶笥鴉崳?,如果什么不輸出,那要它何用?這個問題稍后再答。
  • h:panelGrid,輸出<table />。它的用法有點奇怪,它有屬性叫columns,默認為1。它將包含在其內的JSF組件,分別放到<td />元素輸出。有時,我可能需要將兩個或多個JSF組件放到同一個td中定位,就需要使用到h:panelGroup了。此時,我們不用對<h:panelGroup/>設置任何屬性。這就是上個問題的答案。<h:panelGroup />用于將兩個或多個JSF組件當作一個使用,統一設置它們是否rendered等。例如:
            <h:panelGrid columns="2">
                
    <h:outputText value="1" />
                
    <h:outputText value="2" />
                
    <h:panelGroup>
                    
    <h:outputText value="3" />
                    
    <h:outputText value="-" />
                    
    <h:outputText value="4" />
                
    </h:panelGroup>
                
    <h:outputText value="5" />
            
    </h:panelGrid>
    的輸出如下圖所示:

常用的數據組件

JSF的數據組件有<h:dataTable />,它的使用相對比較簡單,可以將綁定到集合類型。如

<h:dataTable value="#{myBean.myProps}" var="_prop">
    
<h:column>
        
<f:facet name="header">
            
<h:outputText value="Header" />
        
</f:facet>
        
<h:outputText value="#{_prop.myProp}" />
    
</h:column>
</h:dataTable>

常用的輔助組件

這些組件一般不能單獨使用,而是作為輔助用在不同的組件中,其作用也有所不同。它們的命名空間是xmlns:f="

小結

本文大概地介紹了一下JSF的組件。雖然JSF默認已經有這么多的組件,但是對于時下盛行的富客戶端的瀏覽器應用而言還是杯水車薪。因此許多軟件廠商都開發各式各樣的第三方組件,以方便大家構建AJAX應用,如Richfaces、IceFaces等。至于這些組件的詳細用法,大家可以在日后的學習中慢慢熟悉。


評論:
# re: 基于Facelets的JSF 2009-04-01 17:34 | cx
看到 Seam系列二 ,高興 !
寫系列專題不容易, 這里表示 支持!!!!!  回復  更多評論
  
# re: 基于Facelets的JSF 2009-04-02 17:48 | Max
@cx
謝謝,的確有點難,我會堅持的。  回復  更多評論
  
# re: 基于Facelets的JSF 2009-04-09 00:03 | koumei
You are indeed a J-Guru !  回復  更多評論
  
# re: 基于Facelets的JSF 2009-04-09 14:58 | koumei
Happy Easter day bro.  回復  更多評論
  
# re: 基于Facelets的JSF 2009-06-09 20:09 | paopao
max 期待你寫一篇JSF+SEAM+EJB整合文章 目前仿佛還沒有...  回復  更多評論
  
# re: 基于Facelets的JSF 2009-07-24 13:37 | seam初學者
讀了頗有收獲 辛苦了 呵呵  回復  更多評論
  
# re: 基于Facelets的JSF 2009-07-24 13:41 | seam初學者
我是初學者 希望加我為好友 qq:348234691 十分期待你的到來  回復  更多評論
  

只有注冊用戶登錄后才能發表評論。


網站導航:
 
{ganrao} 王中王四肖选一肖 pk10走势技巧 白小姐四肖选一肖中特 广东麻将推倒胡技巧 pk10走势图 上海麻将技巧 快乐扑克派视频 捕鸟达人旧版本下载 - 视频 星悦云南麻将卡二条 网上怎么能赚钱 麻将算钱规则图 快乐扑克开奖视频 西甲皇马vs巴萨 北京赛车pk10怎么才能赢钱 棋牌捕鱼送169彩 开元棋牌官方网站