tag:blogger.com,1999:blog-71479572536472952922024-03-13T14:13:31.466-07:00IBM JSF AJAX Rational Application DeveloperSantha Perianhttp://www.blogger.com/profile/01349972875480660741noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-7147957253647295292.post-33499505217056445842008-10-25T09:31:00.000-07:002008-11-02T00:37:20.499-07:00IBM JSF and Ajax - RAD 7 - dropdown h:selectOneMenu example<span style="font-size:85%;"><span style="font-weight: bold;font-family:georgia;" >Purpose:</span><br /><span style="font-family:georgia;">This example demonstrates populating cascaded dropdown / chain of dropdown / cascading dropdown using JSF and IBM AJAX.</span><br /><br /><span style="font-weight: bold;font-family:georgia;" >Tools I have used for development:</span><br /></span><ul><li><span style="font-size:85%;"><span style="font-family:georgia;"> Rational Application Developer V7 RAD 7.0.0.7</span></span></li><li><span style="font-size:85%;"><span style="font-family:georgia;">JSF Extended Components in RAD 7<br /></span></span></li><li><span style="font-size:85%;"><span style="font-family:georgia;"> JSP</span></span></li></ul><span style="font-size:85%;"><span style="font-weight: bold;font-family:georgia;" >Details:</span><br /><span style="font-family:georgia;">Here is how my sample works.</span><br /></span><ol><li><span style="font-size:85%;"><span style="font-family:georgia;">User enters a date in a text box --> then user does onBlur --> AJAX call-1<br /></span></span></li><li><span style="font-size:85%;"><span style="font-family:georgia;">This will cause dropdown-1 to populate --> then user does onChange --> AJAX call-2<br /></span></span></li><li><span style="font-size:85%;"><span style="font-family:georgia;">This will cause dropdown-2 to populate. </span></span></li></ol><span style="font-size:85%;"><span style="font-weight: bold;font-family:georgia;" >ScreenShots:<br /></span><span style="font-family:georgia;">Example works for input value=10/10/2008</span><span style="font-weight: bold;font-family:georgia;" ><br /><br />1)<br /></span></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4w0SsBfd3A-6bEzmZs5X-hYA2Lb3sFfQ86i0T5Z8eD32yZ6lCS1iXWMR0D4pOAWFxaKzik2izEQdsMuMN-fJh746qdF3NLpDk1aibjf2B7KMRfYT199cSjir__dUXWz-3p9A-YY9TCc5s/s1600-h/drop1.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 360px; height: 166px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4w0SsBfd3A-6bEzmZs5X-hYA2Lb3sFfQ86i0T5Z8eD32yZ6lCS1iXWMR0D4pOAWFxaKzik2izEQdsMuMN-fJh746qdF3NLpDk1aibjf2B7KMRfYT199cSjir__dUXWz-3p9A-YY9TCc5s/s400/drop1.JPG" alt="" id="BLOGGER_PHOTO_ID_5263448376951984242" border="0" /></a>2)<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja8WGPlKxj6jLuIP-nJzbcWWSbxrH5x-UTH-YPLIo6yfjLRHAhR4pWCZyynz8H6TLMJe4Yryeyz-5utUlxWpA7wPs865Sv-Br74idUjVZSqZdyiILFq_29GQEVzHVeAhOEavY5jwuAUyt2/s1600-h/drop1.2.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 346px; height: 172px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja8WGPlKxj6jLuIP-nJzbcWWSbxrH5x-UTH-YPLIo6yfjLRHAhR4pWCZyynz8H6TLMJe4Yryeyz-5utUlxWpA7wPs865Sv-Br74idUjVZSqZdyiILFq_29GQEVzHVeAhOEavY5jwuAUyt2/s400/drop1.2.JPG" alt="" id="BLOGGER_PHOTO_ID_5263448703737122210" border="0" /></a>3)<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsr1s5g8G3L-HXCT98JkPDqrouy634isKR2SCEk05MI2oCJVd_ybhbjRln55_cjJaacXrzsWXeZADRDB7KAEMdChi__SoroXWyy6kbXpuKYi10WfRijbt0zbCGPM1GqFjradxF9NeMK8nZ/s1600-h/drop2.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 341px; height: 176px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsr1s5g8G3L-HXCT98JkPDqrouy634isKR2SCEk05MI2oCJVd_ybhbjRln55_cjJaacXrzsWXeZADRDB7KAEMdChi__SoroXWyy6kbXpuKYi10WfRijbt0zbCGPM1GqFjradxF9NeMK8nZ/s400/drop2.JPG" alt="" id="BLOGGER_PHOTO_ID_5263448936480405730" border="0" /></a>4)<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDxs0DLJCeYZajANqpsrKQnHP0ODkjo7lwtPXCYjEp61v0j5-jyKIbOj5dOw3FgVNqr_2IEVoZrj9I6CQYvAKh2iWTSQZ2sSHtNyTdZPyHBD_I-jlssJmvtpYUzOFdrVBlRGpYakmT5y3J/s1600-h/drop3.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 333px; height: 176px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDxs0DLJCeYZajANqpsrKQnHP0ODkjo7lwtPXCYjEp61v0j5-jyKIbOj5dOw3FgVNqr_2IEVoZrj9I6CQYvAKh2iWTSQZ2sSHtNyTdZPyHBD_I-jlssJmvtpYUzOFdrVBlRGpYakmT5y3J/s400/drop3.JPG" alt="" id="BLOGGER_PHOTO_ID_5263449051396009810" border="0" /></a>5)<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiu8xEOXJVSG4H71MEIGRU1YJjMriGQs-YiYDk1paf2ZnbMdVy1mobmAsvEAja8pXJsfgrsJSbUWg0Nl_eMWX3iTeQv97iz1n2kWa4F05k7GQJIQYxccZV4FIqrhL2UZ8AGIUMPteLzOkR/s1600-h/drop4.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 355px; height: 294px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiu8xEOXJVSG4H71MEIGRU1YJjMriGQs-YiYDk1paf2ZnbMdVy1mobmAsvEAja8pXJsfgrsJSbUWg0Nl_eMWX3iTeQv97iz1n2kWa4F05k7GQJIQYxccZV4FIqrhL2UZ8AGIUMPteLzOkR/s400/drop4.JPG" alt="" id="BLOGGER_PHOTO_ID_5263449145872816146" border="0" /></a><span style="font-size:85%;"><span style="font-weight: bold;font-family:georgia;" ><br />JSP Code:</span><br /><a href="http://docs.google.com/fileview?id=F.976f1a5d-333c-47d0-8164-60084886832a">http://docs.google.com/fileview?id=F.976f1a5d-333c-47d0-8164-60084886832a</a><br /><br /><span style="font-weight: bold;font-family:georgia;" >Backing Beans</span><br /><span style="font-family:georgia;"></span>/**<br />*<br />*/<br />package com.santha.perian.pagecode;<br /><br />import java.util.ArrayList;<br /><br />import javax.faces.component.html.HtmlForm;<br />import javax.faces.component.html.HtmlInputText;<br />import javax.faces.component.html.HtmlOutputText;<br />import javax.faces.component.html.HtmlPanelGroup;<br />import javax.faces.component.html.HtmlSelectOneMenu;<br />import javax.faces.model.SelectItem;<br /><br />import com.ibm.faces.component.html.HtmlAjaxRefreshRequest;<br />import com.ibm.faces.component.html.HtmlScriptCollector;<br /><br />/**<br />* @author sperian<br />*<br />*/<br />public class DropCascade extends PageCodeBase {<br /><br />//User defined variables *********************************************************************************<br />private ArrayList lobs;<br />private ArrayList states;<br /><br />//Auto generated variables ********************************************************************************<br />protected HtmlScriptCollector scriptCollector1;<br />protected HtmlForm form1;<br />protected HtmlInputText text1;<br />protected HtmlPanelGroup group1;<br />protected HtmlSelectOneMenu menu1;<br />protected HtmlAjaxRefreshRequest ajaxRefreshRequest1;<br />protected HtmlPanelGroup group2;<br />protected HtmlSelectOneMenu menu2;<br />protected HtmlAjaxRefreshRequest ajaxRefreshRequest2;<br />protected HtmlOutputText drop2;<br />protected HtmlOutputText drop1;<br /><br />//User defined methods **********************************************************************************<br />/**<br />* This methods gets a collection of LOBs and populates the dropdown<br />*/<br />public ArrayList getLobs() {<br />lobs = new ArrayList(3);<br />lobs.add(new SelectItem("-1", "--select product--"));<br /><br />states = null;<br />if(states != null && states.size() > 0){<br /> states = new ArrayList(6);<br /> states.add(new SelectItem("-1", "--select state--"));<br />}<br /><br /><br />String effDate = (String)getRequestParam("text1"); //Parameter that comes with AJAX call<br />if(effDate != null && effDate.trim().equals("10/10/2008")){<br /> lobs.add(new SelectItem("1", "Commercial Auto")); //Value, Label<br /> lobs.add(new SelectItem("2", "General Liability")); //Value, Label<br /> lobs.add(new SelectItem("3", "Inland Marine")); //Value, Label<br />}<br />return lobs;<br />}<br /><br />/**<br />* This methods gets a collection of states and populates the dropdown<br />*/<br />public ArrayList getStates() {<br />states = new ArrayList(6);<br />states.add(new SelectItem("-1", "--select state--"));<br /><br />String effDate = (String)getRequestParam("menu1"); //Parameter that comes with AJAX call<br />if(effDate != null && !effDate.equals("-1")){<br /> states.add(new SelectItem("NY", "NY"));//Value, Label<br /> states.add(new SelectItem("IA", "IA"));//Value, Label<br /> states.add(new SelectItem("MN", "MN"));//Value, Label<br /> states.add(new SelectItem("NJ", "NJ"));//Value, Label<br /> states.add(new SelectItem("TX", "TX"));//Value, Label<br /> states.add(new SelectItem("CA", "CA"));//Value, Label<br />}else{<br /><br />}<br />return states;<br />}<br /><br />//Auto generated methods ********************************************************************************<br />protected HtmlScriptCollector getScriptCollector1() {<br />if (scriptCollector1 == null) {<br /> scriptCollector1 = (HtmlScriptCollector) findComponentInRoot("scriptCollector1");<br />}<br />return scriptCollector1;<br />}<br /><br />protected HtmlForm getForm1() {<br />if (form1 == null) {<br /> form1 = (HtmlForm) findComponentInRoot("form1");<br />}<br />return form1;<br />}<br /><br />protected HtmlInputText getText1() {<br />if (text1 == null) {<br /> text1 = (HtmlInputText) findComponentInRoot("text1");<br />}<br />return text1;<br />}<br /><br />protected HtmlPanelGroup getGroup1() {<br />if (group1 == null) {<br /> group1 = (HtmlPanelGroup) findComponentInRoot("group1");<br />}<br />return group1;<br />}<br /><br />protected HtmlSelectOneMenu getMenu1() {<br />if (menu1 == null) {<br /> menu1 = (HtmlSelectOneMenu) findComponentInRoot("menu1");<br />}<br />return menu1;<br />}<br /><br />protected HtmlAjaxRefreshRequest getAjaxRefreshRequest1() {<br />if (ajaxRefreshRequest1 == null) {<br /> ajaxRefreshRequest1 = (HtmlAjaxRefreshRequest) findComponentInRoot("ajaxRefreshRequest1");<br />}<br />return ajaxRefreshRequest1;<br />}<br /><br />protected HtmlPanelGroup getGroup2() {<br />if (group2 == null) {<br /> group2 = (HtmlPanelGroup) findComponentInRoot("group2");<br />}<br />return group2;<br />}<br /><br />protected HtmlSelectOneMenu getMenu2() {<br />if (menu2 == null) {<br /> menu2 = (HtmlSelectOneMenu) findComponentInRoot("menu2");<br />}<br />return menu2;<br />}<br /><br />protected HtmlAjaxRefreshRequest getAjaxRefreshRequest2() {<br />if (ajaxRefreshRequest2 == null) {<br /> ajaxRefreshRequest2 = (HtmlAjaxRefreshRequest) findComponentInRoot("ajaxRefreshRequest2");<br />}<br />return ajaxRefreshRequest2;<br />}<br /><br />protected HtmlOutputText getDrop2() {<br />if (drop2 == null) {<br /> drop2 = (HtmlOutputText) findComponentInRoot("drop2");<br />}<br />return drop2;<br />}<br /><br />protected HtmlOutputText getDrop1() {<br />if (drop1 == null) {<br /> drop1 = (HtmlOutputText) findComponentInRoot("drop1");<br />}<br />return drop1;<br />}<br /><br />}<br /><br /><span style="font-weight: bold;font-family:georgia;" >Faces-config.xml</span><br /><span style="font-family:georgia;"> <managed-bean><br /><managed-bean-name>managed-bean-name = pc_DropCascade</managed-bean-name><br /><managed-bean-class>managed-bean-class = com.bts.pstar.pagecode.DropCascade</managed-bean-class><br /><managed-bean-scope>managed-bean-scope = request</managed-bean-scope><br /></managed-bean></span><span style="font-family:georgia;"></span><br /><br /><span style="font-weight: bold; color: rgb(255, 102, 0);font-family:georgia;" >Thanks,</span><br /><span style="font-family:georgia;"><span style="font-weight: bold; color: rgb(255, 102, 0);">Santha Perian</span><br /></span></span>Santha Perianhttp://www.blogger.com/profile/01349972875480660741noreply@blogger.com3