26028 - How to Create a JSP CheckBoxList

Sample 26028: How to Create a JSP CheckBoxList

Overview

The CheckBoxList is a TransformationBean^TM that generates the appropriate HTML 4.0 and JavaScript for creating a component that allows the user to select one or more objects from a list by using checkboxes in place of labels.

Here are the steps for creating a simple CheckBoxList:

Create a ListModel.
Create a CheckBoxList
Set the model on the CheckBoxList.
Render the CheckBoxList.

This sample shows how to create and render a JSP CheckBoxList. The Full Code tab contains the full code for both the default example, and also the customizations below.

The best practice for a JSP Web application is a JSP architecture that uses servlets and .jsp files in order to dynamically deliver content. JSP, Model 2 uses the Model-View-Controller paradigm. For simplicity, this sample does not use the JSP Model 2 approach.

Customizations

This example contains the following customization:

Adding the CheckBoxList to a form

Adding the CheckBoxList to a Form

You will probably want to perform some action when the user submits the items in the CheckBoxList. To implement that, you will need to add your CheckBoxList to a form and write some code that will run when the Submit button is clicked.

To add your CheckBoxList to a form and print out information about the selections when the user clicks the push button to submit the form, follow these steps:

Put your CheckBoxList inside of a form. Set onClick to call the submitSelection method on the CheckBoxList and set the action for the form to call pushButtonSubmit.jsp. The resulting JSP code would look like the following.

<sas:Form id="form1" name="form1" method="get" action="pushButtonSubmit.jsp" > 
     <sas:CheckBoxList id="cbl1" model="model"/>
     <sas:PushButton id="pushButton1" text="PushButton" onClick="cbl1.submitSelection(form1);"/>
</sas:Form>

Create a new file called pushButtonSubmit.jsp in your Web application directory. Paste the following code into your new JSP file.

<html>
   <head>
      <title>Submit PushButton Processing</title>
   </head>
   <body>
<%
   
   java.util.Enumeration params = request.getParameterNames();
   while(params.hasMoreElements())
   {
       String property = (String)params.nextElement();
       out.println("<p>The request attributes are: '" + property + "'</p>");
       String[] cmbObj2 = (String[])request.getParameterValues(property);
       for(int i=0; i < cmbObj2.length; i++)
           out.println("<p>The object was: '" + cmbObj2[i] + "'</p>");
   }

%>
   </body>
</html>

Your CheckBoxList will look like this:

CheckBoxList in form

When you click the push button, you will get a page that looks like this:

Results of submitting CheckBoxList form

Additional Documentation

For a list of samples for common tasks, see SAS Note 32218.
The SAS AppDev Studio Developer's Site contains detailed information that will assist you when developing Web applications with SAS AppDev Studio, including an API reference and the custom tag reference for the sas tagset.

These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.

Instructions

Build a new Web application project in SAS AppDev Studio. No Web application template is necessary
Create new JSP pages using the code below.
Execute the JSP page on the test Tomcat server.

Tip: For help with building a Web application project and testing a Web application, see SAS Note 32218.

Code for the default CheckBoxList


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="javax.swing.DefaultListModel"%>
<%@page import="com.sas.servlet.tbeans.models.JavaScriptNode"%>
<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
    
</head>
<body>

<%
	//create a DefaultListModel
	DefaultListModel model = new DefaultListModel();
	
	//Create the Nodes
	JavaScriptNode node1 = 
		new JavaScriptNode();
	node1.setText("Red");
	node1.setValue("r");
	node1.setImage("folderOpen.gif");
	
	JavaScriptNode node2 = 
		new JavaScriptNode();
	node2.setText("Blue");
	node2.setValue("b");
	node2.setImage("folderOpen.gif");
	
	JavaScriptNode node3 = 
		new JavaScriptNode();
	node3.setText("Green");
	node3.setValue("g");
	node3.setImage("folderOpen.gif");
	
	JavaScriptNode node4 = 
		new JavaScriptNode();
	node4.setText("Aqua");
	node4.setValue("a");
	node4.setImage("folderOpen.gif");
	
	JavaScriptNode node5 = 
		new JavaScriptNode();
	node5.setText("Purple");
	node5.setValue("p");
	node5.setImage("folderOpen.gif"); 
	
	model.addElement(node1);      
	model.addElement(node2);      
	model.addElement(node3);      
	model.addElement(node4); 
	model.addElement(node5);	
	//Set it on the session
	if (session != null){
		session.setAttribute("model", model);
	}
%>

     <sas:CheckBoxList id="cbl1" model="model"/>

</body>
</html>

Code for customization - Adding your CheckBoxList to a form

Note: To use this JSP page, you must also create a file called pushButtonSubmit.jsp with the code listed after this JSP page


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="javax.swing.DefaultListModel"%>
<%@page import="com.sas.servlet.tbeans.models.JavaScriptNode"%>
<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
    
</head>
<body>

<%
	//create a DefaultListModel
	DefaultListModel model = new DefaultListModel();
	
	//Create the Nodes
	JavaScriptNode node1 = 
		new JavaScriptNode();
	node1.setText("Red");
	node1.setValue("r");
	node1.setImage("folderOpen.gif");
	
	JavaScriptNode node2 = 
		new JavaScriptNode();
	node2.setText("Blue");
	node2.setValue("b");
	node2.setImage("folderOpen.gif");
	
	JavaScriptNode node3 = 
		new JavaScriptNode();
	node3.setText("Green");
	node3.setValue("g");
	node3.setImage("folderOpen.gif");
	
	JavaScriptNode node4 = 
		new JavaScriptNode();
	node4.setText("Aqua");
	node4.setValue("a");
	node4.setImage("folderOpen.gif");
	
	JavaScriptNode node5 = 
		new JavaScriptNode();
	node5.setText("Purple");
	node5.setValue("p");
	node5.setImage("folderOpen.gif"); 
	
	model.addElement(node1);      
	model.addElement(node2);      
	model.addElement(node3);      
	model.addElement(node4); 
	model.addElement(node5);	
	//Set it on the session
	if (session != null){
		session.setAttribute("model", model);
	}
%>

<sas:Form id="form1" name="form1" method="get" action="pushButtonSubmit.jsp" > 
     <sas:CheckBoxList id="cbl1" model="model"/>
     <sas:PushButton id="pushButton1" text="PushButton" onClick="cbl1.submitSelection(form1);"/>
</sas:Form>
</body>
</html>

Code for pushButtonSubmit.jsp


<html>
<head>
<title>Submit PushButton Processing</title> 
</head>

<body>

<%   
	java.util.Enumeration params = request.getParameterNames(); 
	while(params.hasMoreElements()) { 
		String property = (String)params.nextElement(); 
		out.println("<p>The request attributes are: '" + property + "'</p>"); 
		String[] cmbObj2 = (String[])request.getParameterValues(property); 
		
		for(int i=0; i < cmbObj2.length; i++) 
			out.println("<p>The object was: '" + cmbObj2[i] + "'</p>"); 
		} 
%> 

</body>
</html>