![]() | ![]() | ![]() | ![]() | ![]() |
The ListBoxView is a TransformationBeanTM that generates the appropriate HTML 4.0 and JavaScript for creating a ListBoxView. The ListBoxView is a menu that supports single or multiple selections. The ListBoxView can be used to render text, images, or both together.
Here are the steps for creating a simple ListBoxView:
This sample shows how to create and render a JSP ListBoxView. The Full Code tab contains the full code for the default ListBoxView, and also for 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.
This example contains the following customizations:
A default ListBoxView looks like the following:
To change the styles, you perform these tasks.
<style>
.myStyle {background: green; color: highlighttext;
font-family: MS Shell Dlg; font-style: normal; font-size:10pt;}
</style>
|
<sas:StyleMapKey key="listboxview_outer_div_xp" style="width:200px;"/>
<sas:StyleMapKey key="listboxview_row_highlight" classid="myStyle"/>
|
The resulting ListBoxView tag should look like this:
<sas:ListBoxView id="lb1" model="model">
<sas:StyleMapKey key="listboxview_outer_div_xp" style="width:200px;"/>
<sas:StyleMapKey key="listboxview_row_highlight" classid="myStyle"/>
</sas:ListBoxView>
|
Your new ListBoxView will look like the following when you select an item in the list:
You might want to change the way the ListBoxView looks by customizing the renderer. This will enable you to do things such as add more elements to the ListBoxView.
The following steps will show you how to create your own renderer for the ListBoxView that adds an information image to the right of the text and adds an action to show information when the user clicks on that image.
//Function used to render the nodes
function my_Node_nodeRender(_destinationObj)
{
var node = this;
//The table element that makes up the nodes
var nodeTableObj = document.createElement("TABLE");
nodeTableObj.border = 0;
nodeTableObj.height = "100%";
nodeTableObj.width = "100%";
nodeTableObj.cellSpacing = 0;
nodeTableObj.cellPadding = 0;
//Table body
var nodeTbodyObj = document.createElement("TBODY");
var nodeTrowObj = document.createElement("TR");
nodeTrowObj.id = "nodeTable";
//First table column - holds the push button
var nodeTcellObj1 = document.createElement("TD");
nodeTcellObj1.align = "left";
//Second table column - holds the image
var nodeTcellObj2 = document.createElement("TD");
nodeTcellObj2.align = "left";
//third table column - holds the new informaton image
var nodeTcellObj3 = document.createElement("TD");
nodeTcellObj3.align = "right";
//Set the object this node is rendered in
destObj = document.getElementById(_destinationObj);
this.renderParent = destObj;
//create the image cell
if (this.image != "")
{
var nodeImg = document.createElement("IMG"); //Image element
nodeImg.id = "nodeIcon"+this.id;
nodeImg.name = "nodeIcon"+this.id;
nodeImg.src = this.getImageSrc(this.image);
nodeImg.className = this.getStyle("imageStyleClass");
nodeImg.alt = this.altText;
nodeImg.border = 0;
if(nodeImg.height == 0 || nodeImg.height == null)
this.height = 20;
if(nodeImg.height > this.height)
this.height = nodeImg.height;
this.width = this.width + nodeImg.width;
this.imgObj = nodeImg;
nodeTcellObj1.appendChild(nodeImg);
}
else
{
if (this.text != ""){
this.image = "blank.gif";
var nodeImg = document.createElement("IMG");
nodeImg.name = "nodeIcon"+this.id;
nodeImg.src = this.getImageSrc(this.image);
nodeImg.className = this.getStyle("imageStyleClass");
nodeImg.alt = this.altText;
nodeImg.border = 0;
this.imgObj = nodeImg;
nodeTcellObj1.appendChild(nodeImg);
}
}
//create the text cell
if (this.text != "")
{
var nodeSpanObj = document.createElement("SPAN"); //To hold the text
nodeSpanObj.id = "nodeSpan"+this.id;
nodeSpanObj.className = this.getStyle("textStyleClass");
var theText = document.createTextNode(this.text);
var numCapLtrs = this.text.match(sas_Node_alphabetPat);
if (numCapLtrs == null)
{
var numSmallLtrs = this.text.length;
this.width = this.width + (numSmallLtrs * 7);
}
else
{
var numSmallLtrs = this.text.length - numCapLtrs.length;
this.width = this.width + (numCapLtrs.length * 9) + (numSmallLtrs * 7);
}
if(this.height < 17)
this.height = 17;
nodeSpanObj.title = this.text;
nodeSpanObj.appendChild(theText);
nodeSpanObj.onmousedown = function(event){return false;};
nodeSpanObj.onclick = function(event){return false;};
this.textObj = nodeSpanObj;
nodeTcellObj2.noWrap = "true";
nodeTcellObj2.appendChild(nodeSpanObj);
}
//create the new information cell
var nodePushButton = document.createElement("IMG"); //pushButton element
nodePushButton.src = "images/Info.gif";
nodePushButton.height = 10;
nodePushButton.id = "nodePushButton" + this.id;
nodePushButton.className = this.getStyle("imageStyleClass");
var infoText = this.text;
nodePushButton.onclick = function (event){showInformation(infoText);};
nodeTcellObj3.appendChild(nodePushButton);
//append all cells to the row and the row to the table
nodeTrowObj.appendChild(nodeTcellObj1);
nodeTrowObj.appendChild(nodeTcellObj2);
nodeTrowObj.appendChild(nodeTcellObj3);
nodeTbodyObj.appendChild(nodeTrowObj);
nodeTableObj.appendChild(nodeTbodyObj);
return nodeTableObj;
}
//Function to show information
function showInformation(infoText)
{
alert("The color " + infoText);
}
|
<script language="JavaScript" src="myJSFile.js"></script>
|
node1.setRenderNodeFunctionName("my_Node_nodeRender");
|
You will get a ListBoxView that looks like this:

When you click on the information image next to the "Red" item in the ListBoxView, you will get a window that looks like this:

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.
Tip: For help with building a Web application project and testing a Web application, see SAS Note 32218.
<%@ 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:ListBoxView id="lb1" model="model">
</sas:ListBoxView>
</body>
</html>
|
<%@ 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">
<style>
.myStyle {
background: green;
color: highlighttext;
font-family: MS Shell Dlg;
font-style: normal;
font-size:10pt;}
</style>
</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:ListBoxView id="lb1" model="model">
<sas:StyleMapKey key="listboxview_outer_div_xp" style="width:200px;"/>
<sas:StyleMapKey key="listboxview_row_highlight" classid="myStyle"/>
</sas:ListBoxView>
</body>
</html>
|
<%@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">
<script language="JavaScript" src="myJSFile.js"></script>
</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");
node1.setRenderNodeFunctionName("my_Node_nodeRender");
JavaScriptNode node2 =
new JavaScriptNode();
node2.setText("Blue");
node2.setValue("b");
node2.setImage("folderOpen.gif");
node2.setRenderNodeFunctionName("my_Node_nodeRender");
JavaScriptNode node3 =
new JavaScriptNode();
node3.setText("Green");
node3.setValue("g");
node3.setImage("folderOpen.gif");
node3.setRenderNodeFunctionName("my_Node_nodeRender");
JavaScriptNode node4 =
new JavaScriptNode();
node4.setText("Aqua");
node4.setValue("a");
node4.setImage("folderOpen.gif");
node4.setRenderNodeFunctionName("my_Node_nodeRender");
JavaScriptNode node5 =
new JavaScriptNode();
node5.setText("Purple");
node5.setValue("p");
node5.setImage("folderOpen.gif");
node5.setRenderNodeFunctionName("my_Node_nodeRender");
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:ListBoxView id="lb1" model="model"/>
</body>
</html>
|
This code must be created in a file called myJSFile.js, that resides in the same directory as the jsp code above.
//Function used to render the nodes
function my_Node_nodeRender(_destinationObj)
{
var node = this;
//The table element that makes up the nodes
var nodeTableObj = document.createElement("TABLE");
nodeTableObj.border = 0;
nodeTableObj.height = "100%";
nodeTableObj.width = "100%";
nodeTableObj.cellSpacing = 0;
nodeTableObj.cellPadding = 0;
//Table body
var nodeTbodyObj = document.createElement("TBODY");
var nodeTrowObj = document.createElement("TR");
nodeTrowObj.id = "nodeTable";
//First table column - holds the push button
var nodeTcellObj1 = document.createElement("TD");
nodeTcellObj1.align = "left";
//Second table column - holds the image
var nodeTcellObj2 = document.createElement("TD");
nodeTcellObj2.align = "left";
//third table column - holds the new informaton image
var nodeTcellObj3 = document.createElement("TD");
nodeTcellObj3.align = "right";
//Set the object this node is rendered in
destObj = document.getElementById(_destinationObj);
this.renderParent = destObj;
//create the image cell
if (this.image != "")
{
var nodeImg = document.createElement("IMG"); //Image element
nodeImg.id = "nodeIcon"+this.id;
nodeImg.name = "nodeIcon"+this.id;
nodeImg.src = this.getImageSrc(this.image);
nodeImg.className = this.getStyle("imageStyleClass");
nodeImg.alt = this.altText;
nodeImg.border = 0;
if(nodeImg.height == 0 || nodeImg.height == null)
this.height = 20;
if(nodeImg.height > this.height)
this.height = nodeImg.height;
this.width = this.width + nodeImg.width;
this.imgObj = nodeImg;
nodeTcellObj1.appendChild(nodeImg);
}
else
{
if (this.text != ""){
this.image = "blank.gif";
var nodeImg = document.createElement("IMG");
nodeImg.name = "nodeIcon"+this.id;
nodeImg.src = this.getImageSrc(this.image);
nodeImg.className = this.getStyle("imageStyleClass");
nodeImg.alt = this.altText;
nodeImg.border = 0;
this.imgObj = nodeImg;
nodeTcellObj1.appendChild(nodeImg);
}
}
//create the text cell
if (this.text != "")
{
var nodeSpanObj = document.createElement("SPAN"); //To hold the text
nodeSpanObj.id = "nodeSpan"+this.id;
nodeSpanObj.className = this.getStyle("textStyleClass");
var theText = document.createTextNode(this.text);
var numCapLtrs = this.text.match(sas_Node_alphabetPat);
if (numCapLtrs == null)
{
var numSmallLtrs = this.text.length;
this.width = this.width + (numSmallLtrs * 7);
}
else
{
var numSmallLtrs = this.text.length - numCapLtrs.length;
this.width = this.width + (numCapLtrs.length * 9) + (numSmallLtrs * 7);
}
if(this.height < 17)
this.height = 17;
nodeSpanObj.title = this.text;
nodeSpanObj.appendChild(theText);
nodeSpanObj.onmousedown = function(event){return false;};
nodeSpanObj.onclick = function(event){return false;};
this.textObj = nodeSpanObj;
nodeTcellObj2.noWrap = "true";
nodeTcellObj2.appendChild(nodeSpanObj);
}
//create the new information cell
var nodePushButton = document.createElement("IMG"); //pushButton element
nodePushButton.src = "images/Info.gif";
nodePushButton.height = 10;
nodePushButton.id = "nodePushButton" + this.id;
nodePushButton.className = this.getStyle("imageStyleClass");
var infoText = this.text;
nodePushButton.onclick = function (event){showInformation(infoText);};
nodeTcellObj3.appendChild(nodePushButton);
//append all cells to the row and the row to the table
nodeTrowObj.appendChild(nodeTcellObj1);
nodeTrowObj.appendChild(nodeTcellObj2);
nodeTrowObj.appendChild(nodeTcellObj3);
nodeTbodyObj.appendChild(nodeTrowObj);
nodeTableObj.appendChild(nodeTbodyObj);
return nodeTableObj;
}
//Function to show information
function showInformation(infoText)
{
alert("The color " + infoText);
}
|
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.




| Type: | Sample |
| Date Modified: | 2008-08-25 15:27:09 |
| Date Created: | 2006-02-14 10:46:50 |
| Product Family | Product | Host | Product Release | SAS Release | ||
| Starting | Ending | Starting | Ending | |||
| SAS System | SAS AppDev Studio | Microsoft Windows Server 2003 Enterprise Edition | 3.2 | 9.1 TS1M3 SP4 | ||
| Microsoft Windows Server 2003 Datacenter Edition | 3.2 | 9.1 TS1M3 SP4 | ||||
| Microsoft Windows NT Workstation | 3.2 | 9.1 TS1M3 SP4 | ||||
| Microsoft Windows 2000 Professional | 3.2 | 9.1 TS1M3 SP4 | ||||
| Microsoft Windows 2000 Server | 3.2 | 9.1 TS1M3 SP4 | ||||
| Microsoft Windows 2000 Datacenter Server | 3.2 | 9.1 TS1M3 SP4 | ||||
| Microsoft Windows 2000 Advanced Server | 3.2 | 9.1 TS1M3 SP4 | ||||
| Microsoft® Windows® for x64 | 3.2 | 9.1 TS1M3 SP4 | ||||
| Microsoft Windows Server 2003 Standard Edition | 3.2 | 9.1 TS1M3 SP4 | ||||
| Microsoft Windows XP Professional | 3.2 | 9.1 TS1M3 SP4 | ||||
| Windows Vista | 3.2 | 9.1 TS1M3 SP4 | ||||




