Press enter to see results or esc to cancel.

Jinu in JAVA, JAVA SERVER FACES
  0 Comments

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

Related posts:

  1. JSF Error Failed to parse the expression [#{navController.go_to_index()}]
  2. JSF Helloworld Netbeans IDE – JSF Tutorial Part 1
  3. How to install NetBeans IDE in Windows PC

0 Comments
Written By
Jinu
Tags
Comments

Leave a Comment

Recent Posts

Categories