JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » Web Framework » JSF  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友    訂閱主題
reply to postflat modego to previous topicgo to next topic
己加入精華區
by browser at 2007-04-18 18:21
本主題所含的標籤
無標籤
作者 使用Ajax(4jsf)驗證資料 [精華]
holicy





發文: 14
積分: 2
於 2007-04-18 17:25 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
JavaServer Faces雖然已提供了(伺服器端)資料驗證(Validation)的機制,
但如果每次驗證都需要重新讀取頁面,感覺既沒有效率,操作起來也不方便。
Ajax能解決這個問題,但要如何應用在JSF技術上呢?

Ajax4jsf應該是可行的答案之一,可惜用Google找不到什麼文件和參考範例。
後來我在JBoss網頁上其中一個Ajax4jsf demo,a4j-numberguess-facelets,
發現了使用Ajax4jsf驗證資料的方法。

我自己也寫了一個簡單範例,讓大家參考!

未使用Ajax4jsf的範例:
1
2
3
4
5
6
7
8
9
10
11
<f:view>
  <h:form>
    <h3>Please input something:</h3>
    <h:inputText id="msg-in" value="#{echoBean.message}" validator="#{echoBean.validate}" />
    <h:message for="msg-in" showSummary="true" showDetail="false"
        style="margin-left:.2em; color:red; font-size:.9em" />
    <h3>
      Echo: <h:outputText id="msg" value="#{echoBean.message}" />
    </h3>
  </h:form>
</f:view>

加入Ajax4jsf功能後的範例:
1
2
3
4
5
6
7
8
9
10
11
12
13
<f:view>
  <a4j:form ajaxSubmit="true" reRender="msg">
    <h3>Please input something:</h3>
    <h:inputText id="msg-in" value="#{echoBean.message}" validator="#{echoBean.validate}" />
    <a4j:outputPanel ajaxRendered="true">
      <h:message for="msg-in" showSummary="true" showDetail="false"
          style="margin-left:.2em; color:red; font-size:.9em" />
    </a4j:outputPanel>
    <h3>
      Echo: <h:outputText id="msg" value="#{echoBean.message}" />
    </h3>
  </a4j:form>
</f:view>

基本上就是替換原本的h:form成為a4j:form,並設定屬性ajaxSubmit為true,
範例還設定了reRender屬性,此為指定當在輸入欄中按下Enter時,欲動態更新的輸出元件。
另外為了讓驗證訊息也能動態更新,使用a4j:outputPanel把h:message包起來,
並設定屬性ajaxRendered為true。

順便附上Bean的原始檔

EchoBean.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package org.demo;
 
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.ValidatorException;
 
public class EchoBean {
 
  private String message;
  
  public EchoBean() {}
  
  public void setMessage( String message )
  {
    this.message = message;
  }
  
  public String getMessage()
  {
    return message;
  }
  
  public void validate( FacesContext context, UIComponent component, Object value )
  throws ValidatorException
  {
    if( !value.toString().matches( "\\w*" ) ) {
      FacesMessage msg = new FacesMessage( "must match regex: \\w*" );
      throw new ValidatorException( msg );
    }
  }
  
}

其它部份,如設定檔web.xml與faces-config.xml等,在此省略不提。

* * *
Ajax4jsf Online Demos:
http://labs.jboss.com/portal/jbossajax4jsf/demo/index.html

Ajax4jsf Developer Guide:
http://labs.jboss.com/file-access/default/members/jbossajax4jsf/freezone/docs/devguide/index.html


holicy edited on 2007-04-18 19:27
reply to postreply to post
話題樹型展開
人氣 標題 作者 字數 發文時間
5946 [精華] 使用Ajax(4jsf)驗證資料 holicy 2556 2007-04-18 17:25
5358 Re:使用Ajax(4jsf)驗證資料 kcleung 4139 2007-06-04 01:37
» JWorld@TW »  Web Framework » JSF

reply to postflat modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8