`

jee6 学习笔记 4 - JSF2 Ajax Basic

阅读更多
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.
  • 大小: 13.4 KB
  • 大小: 23.8 KB
分享到:
评论

相关推荐

    开发工具 eclipse-jee-mars-2-win32

    开发工具 eclipse-jee-mars-2-win32开发工具 eclipse-jee-mars-2-win32开发工具 eclipse-jee-mars-2-win32开发工具 eclipse-jee-mars-2-win32开发工具 eclipse-jee-mars-2-win32开发工具 eclipse-jee-mars-2-win32...

    jee6 学习笔记 5 - Struggling with JSF2 binding GET params

    这篇"jee6 学习笔记 5 - Struggling with JSF2 binding GET params"主要探讨了开发者在使用JSF2绑定GET参数时可能遇到的挑战和解决方案。 JSF2是一个基于MVC(模型-视图-控制器)设计模式的Java框架,用于创建交互...

    eclipse-jee-mars-1-win32-x86_64.7z

    eclipse-jee-mars-1-win32-x86_64.7z eclipse-jee-mars-1-win32-x86_64.zip 我打的 7z 压缩包 关于有 Alt + / 不起作用解决办法: window -&gt; General -&gt; Keys -&gt; Content Assist -&gt; Binding: 改为 Alt + / When:...

    eclipse-jee-mars-2-win32

    eclipse-jee-mars-2-win32 javaee开发工具 eclipse-jee-mars-2-win32 javaee开发工具

    eclipse-jee-ganymede-SR2-win32.zip2

    eclipse-jee-ganymede-SR2-win32.zip

    eclipse-jee-juno-SR2-linux-gtk-x86_64.tar.gz

    标题 "eclipse-jee-juno-SR2-linux-gtk-x86_64.tar.gz" 指示的是一个特定版本的Eclipse集成开发环境(IDE)针对Java企业版(Java Enterprise Edition,简称JEE)的发行包,适用于Linux操作系统,并且是64位(x86_64...

    eclipse-jee-2023-09-R-linux-gtk-x86-64.tar.gz

    "eclipse-jee-2023-09-R-linux-gtk-x86_64.tar.gz" 文件是Eclipse专为Java企业版(Java EE)开发者设计的2023年9月版本,适用于64位的Linux操作系统。这个版本包含了对Java EE开发所需的全部工具和功能,如Web服务器...

    eclipse-jee-luna-SR2-win32-x86_64网盘下载地址(官网厂货)

    eclipse-jee-luna-SR2-win32-x86_64网盘下载地址(官网厂货); 绿色纯净版,解压缩方可运行(亲测可行)

    jee6 学习笔记 6.3 - @Asynchronous

    在Java企业版(Java EE)6中,`@Asynchronous`注解是一个非常重要的特性,它使得开发者可以方便地在应用程序中实现异步处理。这个注解是Java EE并发编程的一部分,主要应用于EJB(Enterprise JavaBeans)环境,用于...

    eclipse-jee-2022-06-R-win32-x86_64.zip

    在解压eclipse-jee-2022-06-R-win32-x86_64.zip后,我们会得到一个名为“eclipse”的文件夹,这个文件夹包含了整个IDE的所有组件和配置。启动Eclipse IDE,用户会看到熟悉的界面,包括工作区(Workspace)、透视图...

    eclipse-jee-2021-12-R-win32-x86_64

    eclipse-jee-2021-12-R-win32-x86_64 eclipse-jee-2021-12-R-win32-x86_64 eclipse-jee-2021-12-R-win32-x86_64

    eclipse-jee-neon-1a-win_64

    eclipse-jee-neon-1a-win_64

    eclipse-jee-kepler-SR2-win32 svn插件

    大家下载eclipse-jee-kepler-SR2-win32.zip解压后运行,发现不能直接从SVN中导入项目,下面是我自己想到的方法: 方法:找到自己使用过的带有svn的,低版本的eclipse,找到features和plugins目录,将其中的带有“org...

    eclipse-jee-2018-09-win32-x86_64.zip

    标题 "eclipse-jee-2018-09-win32-x86_64.zip" 提供的信息表明这是一款针对Java企业级开发的Eclipse集成开发环境(IDE)的2018年9月版本,适用于Windows 32位操作系统、x86_64架构的计算机。Eclipse是一个开源的、跨...

    eclipse-jee-juno-SR2-win32-x86_64

    eclipse-jee-juno-SR2-win32-x86_64, 百度云盘下载!

    eclipse-jee-2023-06-R-win32-x86-64.zip

    在Eclipse JEE版本中,这些功能得到了进一步增强,特别是对于Java EE应用程序的开发,如Web服务、Java服务器页面(JSP)、JavaServer Faces(JSF)以及Enterprise JavaBeans(EJB)等,提供了全面的工具集和模板。...

    eclipse-jee-2020-09-R-win32-x86_64.zip

    2. `eclipse-jee-2020-09-R-win32-x86_64.zip`:这个文件名再次确认了压缩包的内容,即Eclipse IDE的可执行安装程序。通常,用户会解压这个文件,然后运行其中的可执行文件来安装Eclipse。 Eclipse IDE for Java EE...

    Eclipse64位3.6.2太阳神版eclipse-jee-helios-SR2-win32-x86_64.zip支持jdk1.5

    Eclipse64位3.6.2太阳神版eclipse-jee-helios-SR2-win32-x86_64.zip支持jdk1.5 Eclipse 支持jdk1.5 64位 helios 太阳神版 eclipse-jee-helios-SR2-win32-x86_64.zip 更多eclipse版本可看查看我的系列,欢迎下载~

    eclipse-jee-2022-09-R-win32-x86-64.zip

    开始使用Eclipse JEE 2022-09 R,首先需要下载"eclipse-jee-2022-09-R-win32-x86_64.zip"压缩包,解压后运行“eclipse.exe”。初次启动,用户需要配置工作空间,选择Java开发工具,以及根据项目需求添加服务器...

    eclipse-jee-2023-09-R-macosx-cocoa-x86-64.dmg

    eclipse-jee-2023-09-R-macosx-cocoa-x86_64.dmg 适用于macOS Intel芯片系统

Global site tag (gtag.js) - Google Analytics