Saturday, October 25, 2008

IBM JSF and Ajax - RAD 7 - dropdown h:selectOneMenu example

Purpose:
This example demonstrates populating cascaded dropdown / chain of dropdown / cascading dropdown using JSF and IBM AJAX.

Tools I have used for development:
  • Rational Application Developer V7 RAD 7.0.0.7
  • JSF Extended Components in RAD 7
  • JSP
Details:
Here is how my sample works.
  1. User enters a date in a text box --> then user does onBlur --> AJAX call-1
  2. This will cause dropdown-1 to populate --> then user does onChange --> AJAX call-2
  3. This will cause dropdown-2 to populate.
ScreenShots:
Example works for input value=10/10/2008

1)
2)
3)
4)
5)

JSP Code:

http://docs.google.com/fileview?id=F.976f1a5d-333c-47d0-8164-60084886832a

Backing Beans
/**
*
*/
package com.santha.perian.pagecode;

import java.util.ArrayList;

import javax.faces.component.html.HtmlForm;
import javax.faces.component.html.HtmlInputText;
import javax.faces.component.html.HtmlOutputText;
import javax.faces.component.html.HtmlPanelGroup;
import javax.faces.component.html.HtmlSelectOneMenu;
import javax.faces.model.SelectItem;

import com.ibm.faces.component.html.HtmlAjaxRefreshRequest;
import com.ibm.faces.component.html.HtmlScriptCollector;

/**
* @author sperian
*
*/
public class DropCascade extends PageCodeBase {

//User defined variables *********************************************************************************
private ArrayList lobs;
private ArrayList states;

//Auto generated variables ********************************************************************************
protected HtmlScriptCollector scriptCollector1;
protected HtmlForm form1;
protected HtmlInputText text1;
protected HtmlPanelGroup group1;
protected HtmlSelectOneMenu menu1;
protected HtmlAjaxRefreshRequest ajaxRefreshRequest1;
protected HtmlPanelGroup group2;
protected HtmlSelectOneMenu menu2;
protected HtmlAjaxRefreshRequest ajaxRefreshRequest2;
protected HtmlOutputText drop2;
protected HtmlOutputText drop1;

//User defined methods **********************************************************************************
/**
* This methods gets a collection of LOBs and populates the dropdown
*/
public ArrayList getLobs() {
lobs = new ArrayList(3);
lobs.add(new SelectItem("-1", "--select product--"));

states = null;
if(states != null && states.size() > 0){
states = new ArrayList(6);
states.add(new SelectItem("-1", "--select state--"));
}


String effDate = (String)getRequestParam("text1"); //Parameter that comes with AJAX call
if(effDate != null && effDate.trim().equals("10/10/2008")){
lobs.add(new SelectItem("1", "Commercial Auto")); //Value, Label
lobs.add(new SelectItem("2", "General Liability")); //Value, Label
lobs.add(new SelectItem("3", "Inland Marine")); //Value, Label
}
return lobs;
}

/**
* This methods gets a collection of states and populates the dropdown
*/
public ArrayList getStates() {
states = new ArrayList(6);
states.add(new SelectItem("-1", "--select state--"));

String effDate = (String)getRequestParam("menu1"); //Parameter that comes with AJAX call
if(effDate != null && !effDate.equals("-1")){
states.add(new SelectItem("NY", "NY"));//Value, Label
states.add(new SelectItem("IA", "IA"));//Value, Label
states.add(new SelectItem("MN", "MN"));//Value, Label
states.add(new SelectItem("NJ", "NJ"));//Value, Label
states.add(new SelectItem("TX", "TX"));//Value, Label
states.add(new SelectItem("CA", "CA"));//Value, Label
}else{

}
return states;
}

//Auto generated methods ********************************************************************************
protected HtmlScriptCollector getScriptCollector1() {
if (scriptCollector1 == null) {
scriptCollector1 = (HtmlScriptCollector) findComponentInRoot("scriptCollector1");
}
return scriptCollector1;
}

protected HtmlForm getForm1() {
if (form1 == null) {
form1 = (HtmlForm) findComponentInRoot("form1");
}
return form1;
}

protected HtmlInputText getText1() {
if (text1 == null) {
text1 = (HtmlInputText) findComponentInRoot("text1");
}
return text1;
}

protected HtmlPanelGroup getGroup1() {
if (group1 == null) {
group1 = (HtmlPanelGroup) findComponentInRoot("group1");
}
return group1;
}

protected HtmlSelectOneMenu getMenu1() {
if (menu1 == null) {
menu1 = (HtmlSelectOneMenu) findComponentInRoot("menu1");
}
return menu1;
}

protected HtmlAjaxRefreshRequest getAjaxRefreshRequest1() {
if (ajaxRefreshRequest1 == null) {
ajaxRefreshRequest1 = (HtmlAjaxRefreshRequest) findComponentInRoot("ajaxRefreshRequest1");
}
return ajaxRefreshRequest1;
}

protected HtmlPanelGroup getGroup2() {
if (group2 == null) {
group2 = (HtmlPanelGroup) findComponentInRoot("group2");
}
return group2;
}

protected HtmlSelectOneMenu getMenu2() {
if (menu2 == null) {
menu2 = (HtmlSelectOneMenu) findComponentInRoot("menu2");
}
return menu2;
}

protected HtmlAjaxRefreshRequest getAjaxRefreshRequest2() {
if (ajaxRefreshRequest2 == null) {
ajaxRefreshRequest2 = (HtmlAjaxRefreshRequest) findComponentInRoot("ajaxRefreshRequest2");
}
return ajaxRefreshRequest2;
}

protected HtmlOutputText getDrop2() {
if (drop2 == null) {
drop2 = (HtmlOutputText) findComponentInRoot("drop2");
}
return drop2;
}

protected HtmlOutputText getDrop1() {
if (drop1 == null) {
drop1 = (HtmlOutputText) findComponentInRoot("drop1");
}
return drop1;
}

}

Faces-config.xml

managed-bean-name = pc_DropCascade
managed-bean-class = com.bts.pstar.pagecode.DropCascade
managed-bean-scope = request


Thanks,
Santha Perian