Ajax Simple Calculator ie dynamic ajax
amontobin Aug 1, 2007 6:10 PMHi,
I would like to develop my Ajax simple calculator but i've got some troubles with HtmlAjaxSupport. How do you use it ?
i've called theses methods setReRender, setEvent, setParent but nothing is done.
My Ajax Button (HtmlAjaxCommandButton) seems to work.
Thank for your help,
Sebastien Boutte
Here is my code :
// Calculator with Ajax
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <html> <head> <title>Hello World</title> </head> <body> <f:view> <h:form id="form"> <h:panelGrid binding="#{CalculatorBeanWithAjax.buttonPanelGrid}"/> <h:panelGrid id="panel" binding="#{CalculatorBeanWithAjax.panelGrid}"/> <h:panelGrid id="panel1" binding="#{CalculatorBeanWithAjax.totalPanelGrid}"/> </h:form> </f:view> </body> </html>
package com.calculator; import java.util.HashMap; import java.util.Iterator; import java.util.Set; import javax.faces.application.Application; import javax.faces.component.html.HtmlCommandButton; import javax.faces.component.html.HtmlInputText; import javax.faces.component.html.HtmlOutputText; import javax.faces.component.html.HtmlPanelGrid; import javax.faces.context.FacesContext; import javax.faces.el.MethodBinding; import org.ajax4jsf.ajax.html.HtmlAjaxCommandButton; import org.ajax4jsf.ajax.html.HtmlAjaxSupport; public class CalculatorBeanWithAjax extends Object { private HtmlPanelGrid buttonGrid; private HtmlPanelGrid grid; private HtmlPanelGrid totalGrid; private HashMap data = new HashMap(); private int i = 0; public HtmlPanelGrid getButtonPanelGrid() { if (buttonGrid == null) { Application app = FacesContext.getCurrentInstance().getApplication(); buttonGrid = (HtmlPanelGrid) app.createComponent(HtmlPanelGrid.COMPONENT_TYPE); MethodBinding mb = FacesContext.getCurrentInstance().getApplication().createMethodBinding("#{CalculatorBeanWithAjax.add}", null); HtmlAjaxCommandButton button1 = (HtmlAjaxCommandButton) app.createComponent(HtmlAjaxCommandButton.COMPONENT_TYPE); button1.setValue("Add"); button1.setAction(mb); button1.setType("submit"); button1.setReRender("form:panel"); HtmlCommandButton button2 = (HtmlCommandButton) app.createComponent(HtmlCommandButton.COMPONENT_TYPE); button2.setValue("Remove"); button2.setAction(mb); buttonGrid.getChildren().add(button1); buttonGrid.getChildren().add(button2); } return buttonGrid; } public String add() { Application app = FacesContext.getCurrentInstance().getApplication(); HtmlInputText text = (HtmlInputText) app.createComponent(HtmlInputText.COMPONENT_TYPE); text.setValueBinding("value", app.createValueBinding("#{CalculatorBeanWithAjax.data['" + i + "']}")); HtmlAjaxSupport ajaxSupport = (HtmlAjaxSupport) app.createComponent(HtmlAjaxSupport.COMPONENT_TYPE); ajaxSupport.setEvent("onchange"); ajaxSupport.setReRender("form:panel1"); ajaxSupport.setParent(text); getPanelGrid().getChildren().add(text); data.put(Integer.toString(i), 0); i++; return null; } public HtmlPanelGrid getPanelGrid() { if (grid == null) { Application app = FacesContext.getCurrentInstance().getApplication(); grid = (HtmlPanelGrid) app.createComponent(HtmlPanelGrid.COMPONENT_TYPE); } return grid; } public void setPanelGrid(HtmlPanelGrid grid) { this.grid = grid; } public HtmlPanelGrid getTotalPanelGrid() { if (totalGrid == null) { Application app = FacesContext.getCurrentInstance().getApplication(); totalGrid = (HtmlPanelGrid) app.createComponent(HtmlPanelGrid.COMPONENT_TYPE); HtmlOutputText text = (HtmlOutputText) app.createComponent(HtmlOutputText.COMPONENT_TYPE); text.setValueBinding("value", app.createValueBinding("#{CalculatorBeanWithoutAjax.total}")); totalGrid.getChildren().add(text); } return totalGrid; } public int getTotal() { int total = 0; Set s = getData().keySet(); for (Iterator i = s.iterator(); i.hasNext();) { String key = (String) i.next(); total += ((Integer) getData().get(key)).intValue(); } return total; } public void setTotalPanelGrid(HtmlPanelGrid totalGrid) { this.totalGrid = totalGrid; } public HashMap getData() { return data; } }