A simple JSF example with AJAX in Netbeans

Today, I was trying to do Ajax on JSF. As it was my first AJAX in JSF, I had struggled little bit. But finally I got output as I had needed.

In this application, I have given two dropdown list related to mobile. In which, one will be company name and another mobile model. As the company will be selected from company dropdown list, the content of the model dropdown will get change according to the selected company.

Here is the procedure, that can be followed to complete this example in Netbeans(6.9).

Create a new project as Web Application

File > New Project >Java Web > Web Application

Provide a project name

Select Web Server for the application

Select JSF as a Framework

To create a JSF Manage Bean, right Click on the Project name on project pan.
New > Other…  > Java Server Faces > JSF Manage Bean

Provide the Class name (JsfBean) and package name (beans)

Now the JsfBean.java contains the following code, which provide the Item list for the dropdown list, and the setModel(AjaxBehaviorEvent evt) method is called using Ajax on the Company dropdown list, which will change the content of the model drop down list according to the selected item in the company name.

/*******JsfBean.java********\
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.model.SelectItem;

/**
 *
 * @author Prashant
 */
@ManagedBean
@RequestScoped
public class JsfBean {

    /** Creates a new instance of JsfBean */
    private SelectItem[] company=new SelectItem[]{
        new SelectItem("nokia", "Nokia"),
        new SelectItem("samsung", "Samsung"),
        new SelectItem("sony ericson", "Sony Ericsson"),
        new SelectItem("black berry", "Black Berry")
    };
    private SelectItem[] nokia=new SelectItem[]{
        new SelectItem("8800 Carbon","8800 Carbon"),
        new SelectItem("E90 Communicator", "E90 Communicator"),
        new SelectItem("N97", "N97"),
        new SelectItem("N96", "N96"),
        new SelectItem("N95", "N95"),
        new SelectItem("6260 Slide", "6260 Slide"),
        new SelectItem("5800 Express music", "5800 Express music"),
        new SelectItem("N73 Music Edition", "N73 Music Edition")
    };
    private SelectItem[] samsung=new SelectItem[]{
        new SelectItem("OMNIA i900","OMNIA i900"),
        new SelectItem("S8330 Ultra TOUCH", "S8330 Ultra TOUCH"),
        new SelectItem("M8800 Pixon", "M8800 Pixon"),
        new SelectItem("Jet S8003", "Jet S8003"),
        new SelectItem("Jet U900 Soul", "U900 Soul"),
        new SelectItem("DJ M7603", "DJ M7603"),
        new SelectItem("U800 Soul B", "U800 Soul B"),
        new SelectItem("Beat M3510", "Beat M3510"),
        new SelectItem("D780", "D780"),
        new SelectItem("E251", "E251"),
    };
    private SelectItem[] sony=new SelectItem[]{
        new SelectItem("Xperia X1","Xperia X1"),
        new SelectItem("C905", "C905"),
        new SelectItem("W995", "W995"),
        new SelectItem("W980i", "W980i"),
        new SelectItem("K850i", "K850i"),
        new SelectItem("C902", "C902"),
        new SelectItem("W705", "W705")
    };
    private SelectItem[] blackberry=new SelectItem[]{
        new SelectItem("Bold 9000","Bold 9000"),
        new SelectItem("8820", "8820"),
        new SelectItem("8830", "8830"),
        new SelectItem("8800", "8800"),
        new SelectItem("Curve 8900", "Curve 8900"),
        new SelectItem("Curve 8310", "Curve 8310"),
        new SelectItem("Pearl 8110", "Pearl 8110"),
        new SelectItem("Pearl Flip 8220", "Pearl Flip 8220")
    };
    private SelectItem model[]=nokia;
    private String company_name="company_name";
    private String model_no;
    public JsfBean() {

    }

    public SelectItem[] getCompany() {
        return company;
    }

    public void setCompany(SelectItem[] company) {
        this.company = company;
    }

    public String getCompany_name() {
        return company_name;
    }

    public void setCompany_name(String company_name) {
        this.company_name = company_name;
    }

    public String getModel_no() {
        return model_no;
    }

    public void setModel_no(String model_no) {
        this.model_no = model_no;
    }

    public SelectItem[] getNokia() {
        return nokia;
    }

    public void setNokia(SelectItem[] nokia) {
        this.nokia = nokia;
    }

    public SelectItem[] getSamsung() {
        return samsung;
    }

    public void setSamsung(SelectItem[] samsung) {
        this.samsung = samsung;
    }

    public SelectItem[] getModel() {
       //
       // this.model = nokia;
        return model;
    }

    public void setModel(AjaxBehaviorEvent evt) {
       if(company_name.equalsIgnoreCase("nokia"))
            this.model =nokia;
       else if(company_name.equalsIgnoreCase("samsung"))
           this.model =samsung;
       else if(company_name.equalsIgnoreCase("sony ericson"))
           this.model =sony;
       else if(company_name.equalsIgnoreCase("black berry"))
           this.model =blackberry;
    }

}

The index.xhtml will contains following tags to display two dropdown list and to link then using Ajax.

<?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">
<!-- index.xhtml -->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>JSF AJAX</title>
    </h:head>
    <h:body>
        <h3>Select Mobile</h3>
            <h:form>
                Company : <h:selectOneMenu value="#{jsfBean.company_name}">
                        <f:selectItems value="#{jsfBean.company}"/>
                        <f:ajax event="change" render="model" listener="#{jsfBean.setModel}" />
                    </h:selectOneMenu><br></br><br></br>

                Model :
                <h:selectOneMenu value="#{jsfBean.model_no}" id="model" style="width: 120px;">
                    <f:selectItems value="#{jsfBean.model}"/>
                </h:selectOneMenu>
            </h:form>

    </h:body>
</html>

This application can be more effective if the given application can be implemented with database, where the dropdown lists will be loaded from database records.

Outputs :

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/package beans; 

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.model.SelectItem;

/**
*
* @author Prashant
*/
@ManagedBean
@RequestScoped
public class JsfBean {

/** Creates a new instance of JsfBean */
private SelectItem[] company=new SelectItem[]{
new SelectItem(“nokia”, “Nokia”),
new SelectItem(“samsung”, “Samsung”),
new SelectItem(“sony ericson”, “Sony Ericsson”),
new SelectItem(“black berry”, “Black Berry”)
};
private SelectItem[] nokia=new SelectItem[]{
new SelectItem(“8800 Carbon”,”8800 Carbon”),
new SelectItem(“E90 Communicator”, “E90 Communicator”),
new SelectItem(“N97”, “N97”),
new SelectItem(“N96”, “N96”),
new SelectItem(“N95”, “N95”),
new SelectItem(“6260 Slide”, “6260 Slide”),
new SelectItem(“5800 Express music”, “5800 Express music”),
new SelectItem(“N73 Music Edition”, “N73 Music Edition”)
};
private SelectItem[] samsung=new SelectItem[]{
new SelectItem(“OMNIA i900″,”OMNIA i900”),
new SelectItem(“S8330 Ultra TOUCH”, “S8330 Ultra TOUCH”),
new SelectItem(“M8800 Pixon”, “M8800 Pixon”),
new SelectItem(“Jet S8003”, “Jet S8003”),
new SelectItem(“Jet U900 Soul”, “U900 Soul”),
new SelectItem(“DJ M7603”, “DJ M7603”),
new SelectItem(“U800 Soul B”, “U800 Soul B”),
new SelectItem(“Beat M3510”, “Beat M3510”),
new SelectItem(“D780”, “D780”),
new SelectItem(“E251”, “E251”),
};
private SelectItem[] sony=new SelectItem[]{
new SelectItem(“Xperia X1″,”Xperia X1”),
new SelectItem(“C905”, “C905”),
new SelectItem(“W995”, “W995”),
new SelectItem(“W980i”, “W980i”),
new SelectItem(“K850i”, “K850i”),
new SelectItem(“C902”, “C902”),
new SelectItem(“W705”, “W705”)
};
private SelectItem[] blackberry=new SelectItem[]{
new SelectItem(“Bold 9000″,”Bold 9000”),
new SelectItem(“8820”, “8820”),
new SelectItem(“8830”, “8830”),
new SelectItem(“8800”, “8800”),
new SelectItem(“Curve 8900”, “Curve 8900”),
new SelectItem(“Curve 8310”, “Curve 8310”),
new SelectItem(“Pearl 8110”, “Pearl 8110”),
new SelectItem(“Pearl Flip 8220”, “Pearl Flip 8220″)
};
private SelectItem model[]=nokia;
private String company_name=”company_name”;
private String model_no;
public JsfBean() {

}

public SelectItem[] getCompany() {
return company;
}

public void setCompany(SelectItem[] company) {
this.company = company;
}

public String getCompany_name() {
return company_name;
}

public void setCompany_name(String company_name) {
this.company_name = company_name;
}

public String getModel_no() {
return model_no;
}

public void setModel_no(String model_no) {
this.model_no = model_no;
}

public SelectItem[] getNokia() {
return nokia;
}

public void setNokia(SelectItem[] nokia) {
this.nokia = nokia;
}

public SelectItem[] getSamsung() {
return samsung;
}

public void setSamsung(SelectItem[] samsung) {
this.samsung = samsung;
}

public SelectItem[] getModel() {
//
// this.model = nokia;
return model;
}

public void setModel(AjaxBehaviorEvent evt) {
if(company_name.equalsIgnoreCase(“nokia”))
this.model =nokia;
else if(company_name.equalsIgnoreCase(“samsung”))
this.model =samsung;
else if(company_name.equalsIgnoreCase(“sony ericson”))
this.model =sony;
else if(company_name.equalsIgnoreCase(“black berry”))
this.model =blackberry;
}

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: