{"id":1501,"date":"2012-07-20T22:00:00","date_gmt":"2012-07-20T22:00:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/jsf-simple-ajax-samples.html"},"modified":"2012-10-22T05:56:05","modified_gmt":"2012-10-22T05:56:05","slug":"jsf-simple-ajax-samples","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2012\/07\/jsf-simple-ajax-samples.html","title":{"rendered":"JSF Simple Ajax Samples"},"content":{"rendered":"
Today we will see some Simple Samples of Ajax with JSF.<\/p>\n

If you want to see other posts about JSF\/Web Applications click on the next links: JSF Persisting Objects and Messages after a Redirect<\/a> ,User Login Validation with JAAS and JSF<\/a>, JSF: Converter and Bean AutoComplete<\/a>, JSF \u2013 Hello World, Auto Complete<\/a>, Handling Exceptions on a WebApp<\/a>, User Authentication (Filter\/Servlet)<\/a>, Creating a WebServer<\/a>. <\/p>\n

In the end of this post you will find the link to download the source code of the samples. In this post (User Login Validation with JAAS and JSF<\/a>) I show how to install the JBoss 6 in case you want to run the project from today. You will need to install the JBoss tools plugin in your Eclipse. <\/p>\n

Take a look at the page bellow and its code:<\/p>\n

<\/a><\/div>\n
<!DOCTYPE html PUBLIC '-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN' 'http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd'>\r\n<html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:ui='http:\/\/java.sun.com\/jsf\/facelets' xmlns:h='http:\/\/java.sun.com\/jsf\/html'\r\n xmlns:f='http:\/\/java.sun.com\/jsf\/core'>\r\n<h:head>\r\n<\/h:head>\r\n<h:body>\r\n <h:form>\r\n  Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'\/>\r\n  <br \/>\r\n  <h:commandButton action='#{user.sayHello}' value='Display my name here, now!'\/>\r\n  <br \/>\r\n <\/h:form>\r\n<\/h:body>\r\n<\/html><\/pre>\n
How could we display the typed name in the same screen using Ajax? Piece of cake, just add the \u201cf:ajax\u201d component. Check the code update and the result:<\/p>\n
<\/a><\/div>\n
\n<\/div>\n
<\/a><\/div>\n
<!DOCTYPE html PUBLIC '-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN' 'http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd'>\r\n<html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:ui='http:\/\/java.sun.com\/jsf\/facelets' xmlns:h='http:\/\/java.sun.com\/jsf\/html'\r\n xmlns:f='http:\/\/java.sun.com\/jsf\/core'>\r\n<h:head>\r\n<\/h:head>\r\n<h:body>\r\n <h:form>\r\n  Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'\/>\r\n  <br \/>\r\n  <h:commandButton action='#{user.sayHello}' value='Display my name here, now!'>\r\n   <f:ajax render='myName' execute='inputname' \/>\r\n  <\/h:commandButton>\r\n  <br \/>\r\n  <br \/>\r\n  <h:outputText id='myName' value='#{user.name}' \/>\r\n <\/h:form>\r\n<\/h:body>\r\n<\/html><\/pre>\n
It is very easy right? We just need to pass the value that will be carried to the ManagedBean by the \u201cexecute\u201d parameter; with the \u201crender\u201d parameter we will tell to the JSF which component will be \u201crefreshed\u201d.            <\/p>\n
Notice also that the typed name appears in the Console.            <\/p>\n
With this code we can \u201crefresh\u201d all kind of components. Let us see another sample?            <\/p>\n
Let us display an error message if the user types a name with less than 4 characters.            <\/p>\n
Check our new message and the new code:<\/p>\n
<\/a><\/div>\n
<!DOCTYPE html PUBLIC '-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN' 'http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd'>\r\n<html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:ui='http:\/\/java.sun.com\/jsf\/facelets' xmlns:h='http:\/\/java.sun.com\/jsf\/html'\r\n xmlns:f='http:\/\/java.sun.com\/jsf\/core'>\r\n<h:head>\r\n<\/h:head>\r\n<h:body>\r\n <h:form>\r\n  <h:messages id='myMessage' globalOnly='true' showDetail='true'\/>\r\n  Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}'\/>\r\n  <br \/>\r\n  <h:commandButton action='#{user.sayHello}' value='Display my name here, now!'>\r\n   <f:ajax render='myName myMessage' execute='inputname' \/>\r\n  <\/h:commandButton>\r\n  <br \/>\r\n  <br \/>\r\n  <h:outputText id='myName' value='#{user.name}' \/>\r\n <\/h:form>\r\n<\/h:body>\r\n<\/html><\/pre>\n
package demo;\r\n\r\nimport javax.faces.application.FacesMessage;\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.RequestScoped;\r\nimport javax.faces.context.FacesContext;\r\n\r\n\/**\r\n * Created by JBoss Tools\r\n *\/\r\n@ManagedBean(name = 'user')\r\n@RequestScoped\r\npublic class User {\r\n\r\n private String name;\r\n\r\n public String sayHello() {\r\n  if (isNameIncorrect()) {\r\n   FacesContext context = FacesContext.getCurrentInstance();\r\n   context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));\r\n  }\r\n\r\n  System.out.println(name);\r\n  return null;\r\n }\r\n\r\n private boolean isNameIncorrect() {\r\n  return ''.equals(name.trim()) || name.length() < 3;\r\n }\r\n\r\n public String getName() {\r\n  return name;\r\n }\r\n\r\n public void setName(String name) {\r\n  this.name = name;\r\n }\r\n}<\/pre>\n
Notice that we have the component \u201ch:messages\u201d and its ID is used in the \u201cf:ajax\u201d component. This code also works when you use the \u201ch:message for=\u201cYYY\u201d<\/em>\u201d component.            
 
<\/div> <\/div><\/p>\n
What if we work now with comboboxes? Let us display a combobox that will contain 4 items when we have a name with less than 6 characters, and a list with more than 4 items if the typed name has more than 6 characters.            <\/p>\n
package demo;\r\n\r\nimport java.util.ArrayList;\r\nimport java.util.List;\r\n\r\nimport javax.faces.application.FacesMessage;\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.RequestScoped;\r\nimport javax.faces.component.UISelectItems;\r\nimport javax.faces.component.html.HtmlSelectOneMenu;\r\nimport javax.faces.context.FacesContext;\r\nimport javax.faces.event.AjaxBehaviorEvent;\r\n\r\n\/**\r\n * Created by JBoss Tools\r\n *\/\r\n@ManagedBean(name = 'user')\r\n@RequestScoped\r\npublic class User {\r\n\r\n private String name;\r\n\r\n private List<String> cars;\r\n\r\n private String selectedCar;\r\n private HtmlSelectOneMenu htmlSelectCars;\r\n\r\n private static final String SELECT_A_CAR = 'Select One Car';\r\n\r\n public User() {\r\n  cars = new ArrayList<String>();\r\n }\r\n\r\n public String sayHello() {\r\n  if (isNameInCorrect()) {\r\n   FacesContext context = FacesContext.getCurrentInstance();\r\n   context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));\r\n  }\r\n\r\n  System.out.println(name);\r\n  return null;\r\n }\r\n\r\n private boolean isNameInCorrect() {\r\n  return name == null || ''.equals(name.trim()) || name.length() < 3;\r\n }\r\n\r\n public String getName() {\r\n  return name;\r\n }\r\n\r\n public void setName(String name) {\r\n  this.name = name;\r\n }\r\n\r\n public void editMyCarsList(AjaxBehaviorEvent event) {\r\n  if (htmlSelectCars == null) {\r\n   htmlSelectCars = new HtmlSelectOneMenu();\r\n  }\r\n\r\n  htmlSelectCars.getChildren().clear();\r\n\r\n  UISelectItems items = new UISelectItems();\r\n  items.setValue(getCars());\r\n  htmlSelectCars.getChildren().add(items);\r\n }\r\n\r\n public List<String> getCars() {\r\n  cars.clear();\r\n\r\n  cars.add(SELECT_A_CAR);\r\n\r\n  if (!isNameInCorrect() && name.length() >= 6) {\r\n   cars.add('Ferrari');\r\n   cars.add('Porch');\r\n   cars.add('Beetle');\r\n   cars.add('Opala');\r\n   cars.add('Passat');\r\n   cars.add('Vectra');\r\n   cars.add('Chevet');\r\n   cars.add('Corvet');\r\n  } else {\r\n   cars.add('Ferrari');\r\n   cars.add('Porch');\r\n   cars.add('Beetle');\r\n   cars.add('Opala');\r\n  }\r\n\r\n  return cars;\r\n }\r\n\r\n public void setCars(List<String> cars) {\r\n  this.cars = cars;\r\n }\r\n\r\n public String getSelectedCar() {\r\n  return selectedCar;\r\n }\r\n\r\n public void setSelectedCar(String selectedCar) {\r\n  this.selectedCar = selectedCar;\r\n }\r\n\r\n public HtmlSelectOneMenu getHtmlSelectCars() {\r\n  editMyCarsList(null);\r\n\r\n  return htmlSelectCars;\r\n }\r\n\r\n public void setHtmlSelectCars(HtmlSelectOneMenu htmlSelectCars) {\r\n  this.htmlSelectCars = htmlSelectCars;\r\n }\r\n}<\/pre>\n
Take a look now at our page:<\/p>\n
<\/a><\/div>\n
<\/a><\/div>\n
<!DOCTYPE html PUBLIC '-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN' 'http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd'>\r\n<html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:ui='http:\/\/java.sun.com\/jsf\/facelets' xmlns:h='http:\/\/java.sun.com\/jsf\/html'\r\n xmlns:f='http:\/\/java.sun.com\/jsf\/core'>\r\n<h:head>\r\n<\/h:head>\r\n<h:body>\r\n <h:form>\r\n  <h:messages id='myMessage' globalOnly='true' showDetail='true' \/>\r\n  Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}' \/>\r\n  <br \/>\r\n  <h:commandButton action='#{user.sayHello}' value='Display my name here, now!'>\r\n   <f:ajax render='myName myCars myMessage' execute='inputname' listener='#{user.editMyCarsList}' \/>\r\n  <\/h:commandButton>\r\n  <br \/>\r\n  <br \/>\r\n  <h:outputText id='myName' value='#{user.name}' \/>\r\n  <br \/>\r\n  <br \/>\r\n  Choose your car: <h:selectOneMenu id='myCars' binding='#{user.htmlSelectCars}' value='#{user.selectedCar}' \/>\r\n  <br \/>\r\n  <br \/>\r\n <\/h:form>\r\n<\/h:body>\r\n<\/html><\/pre>\n
Notice that our combobox items size is updated according to the typed name. At the end of this post I will talk more about why I used the binding attribute to the HtmlSelectOneMenu instead returning the List<String>.            <\/p>\n
As our last sample, let us create a combobox that will appear and disappear according to the selected value in the Car combobox.            <\/p>\n
Take a look at our ManagedBean:            <\/p>\n
package demo;\r\n\r\nimport java.util.ArrayList;\r\nimport java.util.List;\r\n\r\nimport javax.faces.application.FacesMessage;\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.RequestScoped;\r\nimport javax.faces.component.UISelectItems;\r\nimport javax.faces.component.html.HtmlSelectOneMenu;\r\nimport javax.faces.context.FacesContext;\r\nimport javax.faces.event.AjaxBehaviorEvent;\r\n\r\n\/**\r\n * Created by JBoss Tools\r\n *\/\r\n@ManagedBean(name = 'user')\r\n@RequestScoped\r\npublic class User {\r\n\r\n private String name;\r\n\r\n private List<String> cars;\r\n private List<String> colors;\r\n\r\n private String selectedCar;\r\n private String selectedColor;\r\n private HtmlSelectOneMenu htmlSelectCars;\r\n\r\n private static final String SELECT_A_CAR = 'Select One Car';\r\n\r\n public User() {\r\n  cars = new ArrayList<String>();\r\n  colors = new ArrayList<String>();\r\n\r\n  colors.add('Red');\r\n  colors.add('Blue');\r\n  colors.add('Orange');\r\n  colors.add('Pink --> O.o');\r\n }\r\n\r\n public String sayHello() {\r\n  if (isNameInCorrect()) {\r\n   FacesContext context = FacesContext.getCurrentInstance();\r\n   context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, 'Too small', 'Can you write it a little bigger?'));\r\n  }\r\n\r\n  System.out.println(name);\r\n  return null;\r\n }\r\n\r\n private boolean isNameInCorrect() {\r\n  return name == null || ''.equals(name.trim()) || name.length() < 3;\r\n }\r\n\r\n public String getName() {\r\n  return name;\r\n }\r\n\r\n public void setName(String name) {\r\n  this.name = name;\r\n }\r\n\r\n public void editMyCarsList(AjaxBehaviorEvent event) {\r\n  if (htmlSelectCars == null) {\r\n   htmlSelectCars = new HtmlSelectOneMenu();\r\n  }\r\n\r\n  htmlSelectCars.getChildren().clear();\r\n\r\n  UISelectItems items = new UISelectItems();\r\n  items.setValue(getCars());\r\n  htmlSelectCars.getChildren().add(items);\r\n }\r\n\r\n public List<String> getCars() {\r\n  cars.clear();\r\n\r\n  cars.add(SELECT_A_CAR);\r\n\r\n  if (!isNameInCorrect() && name.length() >= 6) {\r\n   cars.add('Ferrari');\r\n   cars.add('Porch');\r\n   cars.add('Beetle');\r\n   cars.add('Opala');\r\n   cars.add('Passat');\r\n   cars.add('Vectra');\r\n   cars.add('Chevet');\r\n   cars.add('Corvet');\r\n  } else {\r\n   cars.add('Ferrari');\r\n   cars.add('Porch');\r\n   cars.add('Beetle');\r\n   cars.add('Opala');\r\n  }\r\n\r\n  return cars;\r\n }\r\n\r\n public void setCars(List<String> cars) {\r\n  this.cars = cars;\r\n }\r\n\r\n public String getSelectedCar() {\r\n  return selectedCar;\r\n }\r\n\r\n public void setSelectedCar(String selectedCar) {\r\n  this.selectedCar = selectedCar;\r\n }\r\n\r\n public List<String> getColors() {\r\n  return colors;\r\n }\r\n\r\n public void setColors(List<String> colors) {\r\n  this.colors = colors;\r\n }\r\n\r\n public boolean isColorsAlloweToDisplay() {\r\n  if (isNameInCorrect()) {\r\n   return false;\r\n  }\r\n\r\n  if (selectedCar == null || selectedCar.trim().equals('') || selectedCar.equals(SELECT_A_CAR)) {\r\n   return false;\r\n  }\r\n\r\n  return true;\r\n }\r\n\r\n public String getSelectedColor() {\r\n  return selectedColor;\r\n }\r\n\r\n public void setSelectedColor(String selectedColor) {\r\n  this.selectedColor = selectedColor;\r\n }\r\n\r\n public HtmlSelectOneMenu getHtmlSelectCars() {\r\n  editMyCarsList(null);\r\n\r\n  return htmlSelectCars;\r\n }\r\n\r\n public void setHtmlSelectCars(HtmlSelectOneMenu htmlSelectCars) {\r\n  this.htmlSelectCars = htmlSelectCars;\r\n }\r\n}<\/pre>\n
Our ManagedBean were lightly updated, we just added a List with a method that return a list of colors that will populate our combobox; we added also a method that will return a Boolean \u2013 true if the combobox is allowed to be displayed.            <\/p>\n
Check our new page:<\/p>\n
<\/a><\/div>\n
<\/a><\/div>\n
<!DOCTYPE html PUBLIC '-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN' 'http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd'>\r\n<html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:ui='http:\/\/java.sun.com\/jsf\/facelets' xmlns:h='http:\/\/java.sun.com\/jsf\/html'\r\n xmlns:f='http:\/\/java.sun.com\/jsf\/core'>\r\n<h:head>\r\n<\/h:head>\r\n<h:body>\r\n <h:form>\r\n  <h:messages id='myMessage' globalOnly='true' showDetail='true' \/>\r\n  Your Name: <h:inputText id='inputname' label='${msgs.prompt}' value='#{user.name}' \/>\r\n  <br \/>\r\n  <h:commandButton action='#{user.sayHello}' value='Display my name here, now!'>\r\n   <f:ajax render='myName myCars myMessage myColors' execute='inputname' listener='#{user.editMyCarsList}' \/>\r\n  <\/h:commandButton>\r\n  <br \/>\r\n  <br \/>\r\n  <h:outputText id='myName' value='#{user.name}' \/>\r\n  <br \/>\r\n  <br \/>\r\n  Choose your car:\r\n  <h:selectOneMenu id='myCars' binding='#{user.htmlSelectCars}' value='#{user.selectedCar}'>\r\n   <f:ajax render='myColors' execute='inputname myCars'\/>\r\n  <\/h:selectOneMenu>\r\n  <br \/>\r\n  <br \/>\r\n  <h:panelGroup id='myColors'>\r\n   <h:selectOneMenu value='#{user.selectedColor}' rendered='#{user.colorsAlloweToDisplay}'>\r\n    <f:selectItems value='#{user.colors}' \/>\r\n   <\/h:selectOneMenu>\r\n  <\/h:panelGroup>\r\n <\/h:form>\r\n <\/h:body>\r\n<\/html><\/pre>\n
I will talk about the code used in the post:            <\/p>\n