jee6 学习笔记 4 - JSF2 Ajax Basic - 加瓦的境界

jXee

浏览: 99579 次

最近访客更多访客>>

lbyzx123

bincheng123

wangyy

abc123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jee6 学习笔记 4 - JSF2 Ajax Basic

博客分类：

JEE
JSF
Java

jsf2 built-in ajax <f:ajax>@form

JSF 2 has Ajax built in, lets take a look at how it works.

the tag (all attributes optional): <f:ajax event="keyup" render="ID to update, or EL" listener="#{bean.method}"/>

use case: user input a message, an output field renders the message vi ajax call to server side backing bean.

screenshot:

the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
    
<h:head>
    <title>Test JSF Ajax</title>
</h:head>

<h:body>
	<h:form>
	    <p:panel header="message input" toggleable="true" style="width:50%">
	        ur message to backing bean: <p:inputText id="input" value="#{jsfAjaxTest.message}"/>
	        <h:commandButton name="cmdBtn" value="Go" action="#{jsfAjaxTest.go}">
	        	<f:ajax execute="input" render="output"/>
	        </h:commandButton>
	    </p:panel>
	    
	    <p:panel header="ur message ajax-rendered" style="width:50%">
	    	<h:outputText id="output" value="#{jsfAjaxTest.hi}"/>
	    </p:panel>
    </h:form>
</h:body>
</html>

the backing bean

package com.jxee.action.jsfajax;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class JsfAjaxTest {
  
  private String message;

  public String getMessage() {
    return message;
  }

  public void setMessage(String message) {
    this.message = message;
  }
  
  public String getHi() {
    return (message != null ? message : "nothing");
  }
  
  /**
   * jsf ajax enabled action method.
   * although it could be "public void go()", returning a String would
   * satisfy a normal action handler and ajax method call as well.
   */
  public String go() {
    return null;  // null would cause form re-displayed
  }
  
}

next, we add a dropdown list input component and use execute="@form" to submit all the fields in the http form for server processing:

screenshot 2:

source code of the updated page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
    
<h:head>
    <title>Test JSF Ajax</title>
</h:head>

<h:body>
	<h:form>
	    <p:panel header="message input" toggleable="true" style="width:50%">
	        ur message to backing bean: 
	        <p:inputText id="msgInput" value="#{jsfAjaxTest.message}"/>
	        <br/>
	        select ur preferred language: 
	        <p:selectOneMenu id="idSelectLang" value="#{jsfAjaxTest.lang}">
	        	<f:selectItems value="#{jsfAjaxTest.languages}"/>
	        	<f:ajax execute="@form" render="output1 output2"/>
	        </p:selectOneMenu>
	    </p:panel>
	    
	    <p:panel header="ajax-rendered" style="width:50%">
	    	<h:outputText id="output1" value="#{jsfAjaxTest.hi}"/>
	    	<br/>
	    	<h:outputText id="output2" value="#{jsfAjaxTest.lang}"/>
	    </p:panel>
    </h:form>
</h:body>
</html>

updated source code of the supporting bean:

package com.jxee.action.jsfajax;

import javax.faces.bean.ManagedBean;
import javax.faces.model.SelectItem;

@ManagedBean
public class JsfAjaxTest {
  
  private String message;
  private String lang;
  
  private SelectItem[] languages;
  

  public JsfAjaxTest() {
    languages = new SelectItem[] {
        new SelectItem("unknown", "-select one-"), 
        new SelectItem("C", "-C"), 
        new SelectItem("Java", "-Java"), 
        new SelectItem("PHP", "-PHP"), 
        new SelectItem("Ruby", "-Ruby")
    };
  }
  
  public SelectItem[] getLanguages() {
    return languages;
  }

  public void setLanguages(SelectItem[] languages) {
    this.languages = languages;
  }

  public String getLang() {
    return (lang != null ? "ur favorite language: " + lang : "");
  }

  public void setLang(String lang) {
    this.lang = lang;
  }

  public String getMessage() {
    return message;
  }

  public void setMessage(String message) {
    this.message = message;
  }
  
  public String getHi() {
    return (message != null ? "ur input msg: " + message : "");
  }
  
  /**
   * jsf ajax enabled action method.
   * although it could be "public void go()", returning a String would
   * satisfy a normal action handler and ajax method call as well.
   */
  public String go() {
    return null;  // null would cause form re-displayed
  }
  
}

Next, add a listener to the ajax event

Add the listener method in the backing bean:

/**
   * an jsf ajax listener
   */
  public void myAjaxListener(AjaxBehaviorEvent event) { 
    log.debug("hi, im ur JSF ajax listener and working hard... ");
 }

Add the listener attribute to the tag:
1. event="keyup": the text would be rendered on the output panel as you type, and
2. u'll get lots of debug lines in your server log

<f:ajax event="keyup" render="output1" listener="#{jsfAjaxTest.myAjaxListener}"/>

小姐一下：

1. JSF2 has ajax functionality built-in.

2. Simple usage: <f:ajax execute="id0 id1 ..." render="id10 id12 ..."/>

3. In the simple usage, "execute" defines the elements(thus its value) to pass to server for process, and "render" defines the elements to update after server process completes. Multiple DOM IDs can use space as delimiter.

4. Note though that the elements to be ajax updated must be in the same "form" as the <f:ajax/>

5. JSF built-in Ajax can catch other events, like "keyup", "blur" etc, with the "event" attribute. this is not explored in this example.

6. If you want to submit all the fields in the "form" to server, then the "execute" attribute can set like execute="@form".

7. Primefaces Ajax functionalities are said to be based on JSF's built-in Ajax function.

查看图片附件

分享到：

A good blog about learning JSF2.0 | jee6 学习笔记 4 - CRUD 2: View Details, ...

2012-07-10 08:43
浏览 1234
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jee6 学习笔记 4 - JSF2 Ajax Basic

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jee6 学习笔记 4 - JSF2 Ajax Basic

评论

发表评论

相关推荐

ActiveMQ and Spring JMS Framework Message Loss

how to proxy to k8s web console

Call Stored Procedure with JPA 2.1

Send response and then process - async processing

java 8 time api test

Setup ApiKey in header with Swagger generated client code

Simple tool to monitor jvm memory usage and garbage collection

Externalize Application Config properties with JBoss 7.1

JPA native query does not support setting list parameters

Owning Side and Inverse Side of JPA entity relationships

avoid setParameter for "order by" in JPQL

JPA Path Expression, operator IN and Collection properties

与JEE6/EJB3.1相比, Spring framework 丧失了几乎所有的优势

Simple EasyMock tutorial

Servlet 3.0 @WebFilter and @WebServlet

Why JSF2 @ViewScoped not working?

When to configure an XA datasource?

java ee transaction and datasource concepts

pass params to primefaces confirmation dialog box

Handle Big Dataset with Real Pagination with Primefaces 3.3 LazyDataModel

最近访客更多访客>>