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

3 comments:

Unknown said...

Clicking on the link to Google Docs generates the message "Sorry, the page (or document) you have requested does not exist." Maybe the document isn't public or it's not ODT format? (Well, it's obviously not ODT format...)

Don Andrews

swazi_team_2006 said...

Yes could another link be provided to the jsp page

Unknown said...

This example and very interesting but also I have had the same problem the link it doesn't find the code for jsp.