- 浏览: 96406 次
文章分类
最新评论
-
jXee:
lgs0626 写道求源码,兄弟给共享下吧 "jee ...
jee6 学习笔记 4 - CRUD 2: View Details, Primefaces row selection -
lgs0626:
求源码,兄弟给共享下吧
jee6 学习笔记 4 - CRUD 2: View Details, Primefaces row selection
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
the backing bean
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:
updated source code of the supporting bean:
Next, add a listener to the ajax event
Add the listener method in the backing bean:
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
小姐一下:
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.
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.
发表评论
-
ActiveMQ and Spring JMS Framework Message Loss
2019-06-28 07:15 29Java Message Service (JMS) prov ... -
how to proxy to k8s web console
2018-06-28 07:16 530### how to access k8s web conso ... -
Call Stored Procedure with JPA 2.1
2018-06-27 10:57 619JPA 2.1 introduces APIs to call ... -
Send response and then process - async processing
2017-10-12 09:35 511If your request processing take ... -
java 8 time api test
2017-08-29 05:40 440public class ParseUtcDateTime ... -
Setup ApiKey in header with Swagger generated client code
2017-08-23 06:41 439@Value("${api.base.path} ... -
Simple tool to monitor jvm memory usage and garbage collection
2016-10-13 06:06 320JDK has built-in tool to moni ... -
Externalize Application Config properties with JBoss 7.1
2017-06-02 12:09 307If you have configuration pro ... -
JPA native query does not support setting list parameters
2014-03-27 06:45 972you might want to do the ... -
Owning Side and Inverse Side of JPA entity relationships
2013-09-10 07:08 760Entity relationships may be b ... -
avoid setParameter for "order by" in JPQL
2013-03-07 05:55 752you might want to create a JP ... -
JPA Path Expression, operator IN and Collection properties
2013-01-23 16:25 1340If we want to select the Orde ... -
与JEE6/EJB3.1相比, Spring framework 丧失了几乎所有的优势
2013-01-19 13:13 997The Spring framework was a ma ... -
Simple EasyMock tutorial
2012-12-20 11:57 622http://veerasundar.com/blog/20 ... -
Servlet 3.0 @WebFilter and @WebServlet
2012-12-04 07:09 2634Servlet 3.0 provides new annota ... -
Why JSF2 @ViewScoped not working?
2012-12-03 06:55 1343javax.faces.bean.ViewScoped sai ... -
When to configure an XA datasource?
2012-11-16 12:58 1226If you ever came across this wa ... -
java ee transaction and datasource concepts
2012-11-10 13:48 9891. What is a transaction? A tra ... -
pass params to primefaces confirmation dialog box
2012-09-28 19:30 1301<p:dataTable id="idStuD ... -
Handle Big Dataset with Real Pagination with Primefaces 3.3 LazyDataModel
2012-09-21 13:41 5584If you have millions of record ...
相关推荐
开发工具 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 javaee开发工具 eclipse-jee-mars-2-win32 javaee开发工具
NULL 博文链接:https://jxee.iteye.com/blog/1596084
eclipse-jee-ganymede-SR2-win32.zip
eclipse-jee-2020-06-R-win32-x86_64
eclipse-jee-2022-09-R-win32-x86_64.zip 适用于Windows x86_64
eclipse-jee-2022-03-R-win32-x86_64.zip
eclipse-jee-juno-SR2-linux-gtk-x86_64.tar.gz
NULL 博文链接:https://jxee.iteye.com/blog/1608820
eclipse-jee-kepler-SR2-win32.zip
eclipse-jee-juno-SR2-win32-x86_64, 百度云盘下载!
eclipse-jee-mars-R-win32-x86_64.zip 截至2015.06.30 eclipse-j2ee 最新版
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版本可看查看我的系列,欢迎下载~
NULL 博文链接:https://jxee.iteye.com/blog/1575432
eclipse-jee-2021-06-R-win32-x86_64.zip
Eclipse IDE for Enterprise Java and Web Developers (eclipse-jee-2021-12-R-win32-x86_64.zip)适用于Windwos 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-mars-2-win32-x86_64集成maven、git等环境,适用于快捷搭建开发环境
eclipse-jee-2021-03-R-win32-x86_64
eclipse-jee-oxygen-R-win32.7z.003