Press enter to see results or esc to cancel.


JSF 2.0 + Ajax hello world example in Netbeans IDE JSF Tutorial Part 2

In this tutorial we are going to check a helloworld Java Server Faces Project with Ajax Support. In this page we are creating a button in a form. But once the button is clicked it will submit an ajax request instead of complete form,

  1. Project Structure in NetBeans
  2. You have to add core tag library xmlns:f=”http://xmlns.jcp.org/jsf/core” in the header as shown below to get the ajax tags in the page. Below code shows a jsf page with ajax support.
    index.xhtml

    <?xml version='1.0' encoding='UTF-8' ?>
    <!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://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
      <h:head>
        <title>Facelet Title</title>
      </h:head>
      <h:body>
        <h:form>
          Enter Name : <h:inputText id="name" value="#{helloAjax.name}"></h:inputText><br></br>
          <h:commandButton value="Submit">
            <f:ajax execute="name" render="output"></f:ajax>
          </h:commandButton>
          <h:outputText id="output" value="#{helloAjax.say_welcome_ajax}"></h:outputText>
        </h:form>
       </h:body>
    </html>
    

    In the above page, The form will submit an Ajax Request.
    In In the tag : The execute=”name” indicate the form field with id ‘name’ will be send to server. Here it will submit the text box value.
    render=”output” : Once the form is submitted it will refresh the field with an id of ‘output’. So here it will refresh the component.

  3. web.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
       <context-param>
         <param-name>javax.faces.PROJECT_STAGE</param-name>
         <param-value>Development</param-value>
       </context-param>
       <servlet>
         <servlet-name>Faces Servlet</servlet-name>
         <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
         <load-on-startup>1</load-on-startup>
       </servlet>
       <servlet-mapping>
         <servlet-name>Faces Servlet</servlet-name>
         <url-pattern>/faces/*</url-pattern>
       </servlet-mapping>
       <session-config>
         <session-timeout>
           30
         </session-timeout>
       </session-config>
       <welcome-file-list>
         <welcome-file>faces/index.xhtml</welcome-file>
       </welcome-file-list>
    </web-app>
    
  4. HelloAjax.java

    package com.chillyfacts.com;
    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.RequestScoped;
    @ManagedBean
    @RequestScoped
    public class HelloAjax {
        private String name;
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public String getSay_welcome_ajax() {
            if(name==null || name.equals("")){
                return "";
            }else{
                return "Hello Ajax "+name;
            }
        }
        public HelloAjax() {
        }
    }
    
  5. http://localhost:8080/HelloWorldAjax/faces/index.xhtml
  6. After Submitting the form.
  7. Download the Project here.

    JSFHelloWorld1