當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
jsf标签p:ajax_JSF简单Ajax示例
生活随笔
收集整理的這篇文章主要介紹了
jsf标签p:ajax_JSF简单Ajax示例
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jsf標(biāo)簽<p:ajax>
今天，我們將看到一些使用JSF的Ajax簡(jiǎn)單樣本。如果要查看有關(guān)JSF / Web應(yīng)用程序的其他文章，請(qǐng)單擊以下鏈接： 重定向后的JSF持久化對(duì)象和消息 ， 使用JAAS和JSF進(jìn)行用戶登錄驗(yàn)證 ， JSF：Converter and Bean AutoComplete ， JSF – Hello World，Auto Complete ， 在WebApp上處理異常 ， 用戶身份驗(yàn)證（過(guò)濾器/ Servlet） ， 創(chuàng)建WebServer 。
在本文的結(jié)尾，您將找到下載示例源代碼的鏈接。 在本文（ 使用JAAS和JSF進(jìn)行用戶登錄驗(yàn)證 ）中，我展示了如何安裝JBoss 6，以防您從今天開(kāi)始運(yùn)行該項(xiàng)目。 您將需要在Eclipse中安裝JBoss工具插件。
看一下下面的頁(yè)面及其代碼：
<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'> <h:head> </h:head> <h:body><h:form>Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'/><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'/><br /></h:form> </h:body> </html>我們?nèi)绾问褂肁jax在同一屏幕上顯示鍵入的名稱？ 小菜一碟，只需添加“ f：ajax”組件。 檢查代碼更新和結(jié)果：
<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'> <h:head> </h:head> <h:body><h:form>Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'/><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'><f:ajax render='myName' execute='inputname' /></h:commandButton><br /><br /><h:outputText id='myName' value='#{user.name}' /></h:form> </h:body> </html>很容易吧？ 我們只需要將“ execute”參數(shù)傳遞給ManagedBean的值即可； 使用“ render”參數(shù)，我們將告訴JSF“刷新”哪個(gè)組件。
還要注意，鍵入的名稱將出現(xiàn)在控制臺(tái)中。
使用此代碼，我們可以“刷新”所有類型的組件。 讓我們看看另一個(gè)示例？
如果用戶鍵入的名稱少于4個(gè)字符，我們將顯示一條錯(cuò)誤消息。
檢查我們的新消息和新代碼：
<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'> <h:head> </h:head> <h:body><h:form><h:messages id='myMessage' globalOnly='true' showDetail='true'/>Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'/><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'><f:ajax render='myName myMessage' execute='inputname' /></h:commandButton><br /><br /><h:outputText id='myName' value='#{user.name}' /></h:form> </h:body> </html>package demo;import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.context.FacesContext;/*** Created by JBoss Tools*/ @ManagedBean(name = 'user') @RequestScoped public class User {private String name;public String sayHello() {if (isNameIncorrect()) {FacesContext context = FacesContext.getCurrentInstance();context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));}System.out.println(name);return null;}private boolean isNameIncorrect() {return ''.equals(name.trim()) || name.length() < 3;}public String getName() {return name;}public void setName(String name) {this.name = name;} }注意，我們有組件“ h：messages”，其ID在“ f：ajax”組件中使用。 當(dāng)您使用“ h：message for =“ YYY ”組件時(shí)，此代碼也適用。
如果我們現(xiàn)在使用組合框怎么辦？ 讓我們顯示一個(gè)組合框，當(dāng)我們使用少于6個(gè)字符的名稱時(shí)，將包含4個(gè)項(xiàng)目；如果鍵入的名稱超過(guò)6個(gè)字符，則將顯示一個(gè)包含4個(gè)以上項(xiàng)目的列表。
package demo;import java.util.ArrayList; import java.util.List;import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.component.UISelectItems; import javax.faces.component.html.HtmlSelectOneMenu; import javax.faces.context.FacesContext; import javax.faces.event.AjaxBehaviorEvent;/*** Created by JBoss Tools*/ @ManagedBean(name = 'user') @RequestScoped public class User {private String name;private List<String> cars;private String selectedCar;private HtmlSelectOneMenu htmlSelectCars;private static final String SELECT_A_CAR = 'Select One Car';public User() {cars = new ArrayList<String>();}public String sayHello() {if (isNameInCorrect()) {FacesContext context = FacesContext.getCurrentInstance();context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));}System.out.println(name);return null;}private boolean isNameInCorrect() {return name == null || ''.equals(name.trim()) || name.length() < 3;}public String getName() {return name;}public void setName(String name) {this.name = name;}public void editMyCarsList(AjaxBehaviorEvent event) {if (htmlSelectCars == null) {htmlSelectCars = new HtmlSelectOneMenu();}htmlSelectCars.getChildren().clear();UISelectItems items = new UISelectItems();items.setValue(getCars());htmlSelectCars.getChildren().add(items);}public List<String> getCars() {cars.clear();cars.add(SELECT_A_CAR);if (!isNameInCorrect() && name.length() >= 6) {cars.add('Ferrari');cars.add('Porch');cars.add('Beetle');cars.add('Opala');cars.add('Passat');cars.add('Vectra');cars.add('Chevet');cars.add('Corvet');} else {cars.add('Ferrari');cars.add('Porch');cars.add('Beetle');cars.add('Opala');}return cars;}public void setCars(List<String> cars) {this.cars = cars;}public String getSelectedCar() {return selectedCar;}public void setSelectedCar(String selectedCar) {this.selectedCar = selectedCar;}public HtmlSelectOneMenu getHtmlSelectCars() {editMyCarsList(null);return htmlSelectCars;}public void setHtmlSelectCars(HtmlSelectOneMenu htmlSelectCars) {this.htmlSelectCars = htmlSelectCars;} }現(xiàn)在看一下我們的頁(yè)面：
<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'> <h:head> </h:head> <h:body><h:form><h:messages id='myMessage' globalOnly='true' showDetail='true' />Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}' /><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'><f:ajax render='myName myCars myMessage' execute='inputname' listener='#{user.editMyCarsList}' /></h:commandButton><br /><br /><h:outputText id='myName' value='#{user.name}' /><br /><br />Choose your car: <h:selectOneMenu id='myCars' binding='#{user.htmlSelectCars}' value='#{user.selectedCar}' /><br /><br /></h:form> </h:body> </html>請(qǐng)注意，我們的組合框項(xiàng)目大小會(huì)根據(jù)鍵入的名稱進(jìn)行更新。 在本文的結(jié)尾，我將詳細(xì)討論為什么我對(duì)HtmlSelectOneMenu使用binding屬性而不是返回List <String>。
作為最后一個(gè)示例，讓我們創(chuàng)建一個(gè)組合框，該組合框?qū)⒏鶕?jù)Car組合框中的選定值出現(xiàn)和消失。
看看我們的ManagedBean：
package demo;import java.util.ArrayList; import java.util.List;import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.component.UISelectItems; import javax.faces.component.html.HtmlSelectOneMenu; import javax.faces.context.FacesContext; import javax.faces.event.AjaxBehaviorEvent;/*** Created by JBoss Tools*/ @ManagedBean(name = 'user') @RequestScoped public class User {private String name;private List<String> cars;private List<String> colors;private String selectedCar;private String selectedColor;private HtmlSelectOneMenu htmlSelectCars;private static final String SELECT_A_CAR = 'Select One Car';public User() {cars = new ArrayList<String>();colors = new ArrayList<String>();colors.add('Red');colors.add('Blue');colors.add('Orange');colors.add('Pink --> O.o');}public String sayHello() {if (isNameInCorrect()) {FacesContext context = FacesContext.getCurrentInstance();context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));}System.out.println(name);return null;}private boolean isNameInCorrect() {return name == null || ''.equals(name.trim()) || name.length() < 3;}public String getName() {return name;}public void setName(String name) {this.name = name;}public void editMyCarsList(AjaxBehaviorEvent event) {if (htmlSelectCars == null) {htmlSelectCars = new HtmlSelectOneMenu();}htmlSelectCars.getChildren().clear();UISelectItems items = new UISelectItems();items.setValue(getCars());htmlSelectCars.getChildren().add(items);}public List<String> getCars() {cars.clear();cars.add(SELECT_A_CAR);if (!isNameInCorrect() && name.length() >= 6) {cars.add('Ferrari');cars.add('Porch');cars.add('Beetle');cars.add('Opala');cars.add('Passat');cars.add('Vectra');cars.add('Chevet');cars.add('Corvet');} else {cars.add('Ferrari');cars.add('Porch');cars.add('Beetle');cars.add('Opala');}return cars;}public void setCars(List<String> cars) {this.cars = cars;}public String getSelectedCar() {return selectedCar;}public void setSelectedCar(String selectedCar) {this.selectedCar = selectedCar;}public List<String> getColors() {return colors;}public void setColors(List<String> colors) {this.colors = colors;}public boolean isColorsAlloweToDisplay() {if (isNameInCorrect()) {return false;}if (selectedCar == null || selectedCar.trim().equals('') || selectedCar.equals(SELECT_A_CAR)) {return false;}return true;}public String getSelectedColor() {return selectedColor;}public void setSelectedColor(String selectedColor) {this.selectedColor = selectedColor;}public HtmlSelectOneMenu getHtmlSelectCars() {editMyCarsList(null);return htmlSelectCars;}public void setHtmlSelectCars(HtmlSelectOneMenu htmlSelectCars) {this.htmlSelectCars = htmlSelectCars;} }我們的ManagedBean進(jìn)行了輕微的更新，我們只是添加了一個(gè)List，該List的方法返回了將填充組合框的顏色列表。 我們還添加了一個(gè)方法，該方法將返回布爾值-如果允許顯示組合框，則返回true。
檢查我們的新頁(yè)面：
<!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:ui='http://java.sun.com/jsf/facelets' xmlns:h='http://java.sun.com/jsf/html'xmlns:f='http://java.sun.com/jsf/core'> <h:head> </h:head> <h:body><h:form><h:messages id='myMessage' globalOnly='true' showDetail='true' />Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}' /><br /><h:commandButton action='#{user.sayHello}' value='Display my name here, now!'><f:ajax render='myName myCars myMessage myColors' execute='inputname' listener='#{user.editMyCarsList}' /></h:commandButton><br /><br /><h:outputText id='myName' value='#{user.name}' /><br /><br />Choose your car:<h:selectOneMenu id='myCars' binding='#{user.htmlSelectCars}' value='#{user.selectedCar}'><f:ajax render='myColors' execute='inputname myCars'/></h:selectOneMenu><br /><br /><h:panelGroup id='myColors'><h:selectOneMenu value='#{user.selectedColor}' rendered='#{user.colorsAlloweToDisplay}'><f:selectItems value='#{user.colors}' /></h:selectOneMenu></h:panelGroup></h:form></h:body> </html>我將討論帖子中使用的代碼：
- HtmlSelectOneMenu –我使用組件而不是列表，因?yàn)镴SF在用戶屏幕（DOM樹）中呈現(xiàn)組件的效果不是很好。 如果您的組合框有4行，并且使用ajax將更多行添加到列表中，那么JSF / Ajax將無(wú)法識(shí)別新添加的行； 您將只能使用舊值。 您可以嘗試將代碼與List <String>一起使用，而不是使用HtmlSelectOneMenu來(lái)查看結(jié)果； 我花了大約3到4個(gè)小時(shí)來(lái)通過(guò)互聯(lián)網(wǎng)上的大量搜索來(lái)了解這一點(diǎn)。
- “ h：panelGroup”組件內(nèi)的HtmlSelectOneMenu –之所以這樣做，是因?yàn)槊看文尸F(xiàn)未呈現(xiàn)的組件時(shí)，都需要更新其容器。 如果我們的selectOne位于汽車selectOne的同一窗體內(nèi)，則需要呈現(xiàn)所有窗體。
單擊此處從此帖子下載代碼 。
希望這篇文章對(duì)您有所幫助。
如果您有任何疑問(wèn)/疑問(wèn)/建議，請(qǐng)將其發(fā)布。
參考： uaiHebert博客上來(lái)自JCG合作伙伴 Hebert Coelho的JSF Simple Ajax Samples 。
翻譯自: https://www.javacodegeeks.com/2012/07/jsf-simple-ajax-samples.html
jsf標(biāo)簽<p:ajax>
總結(jié)
以上是生活随笔為你收集整理的jsf标签p:ajax_JSF简单Ajax示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 广东企业备案查询系统（广东企业备案）
- 下一篇： （shell与linux）