25998 - How to Create a Simple JSP TableView with Static Data

Sample 25998: How to Create a Simple JSP TableView with Static Data

Overview

The TableView displays data from different types of tabular data sources and enables users to interact with live data. To illustrate how to use the TableView, this sample uses its own static data model.

Note: For more information about how to connect the TableView to live data, see Sample 25997.

Here are the steps for creating a simple TableView:

Create a TableView.
Create a TableModel.
Set the model on the TableView.
Render the TableView.

The code shown in the Full Code tab will create a TableModel and display a default TableView with that model.

Customizations

This sample contains the following customizations:

Using Renderers to Display Rows with Different Background Colors
Using Renderers to Display Columns with Different Colors and Fonts

Use Renderers to Display Rows with Different Background Colors

Add a <sas:CellRenderer> tag to the example to color every other row with a gray background.

<sas:CellRenderer bgColor="dcdcdc" startRow="1" endRow="-1" repeatRowFactor="2" startColumn="1" endColumn="-1" repeatColumnFactor="1"/>

Use Renderers to Display Columns with Different Colors and Fonts

Add a <sas:CellRenderer> inner tag to change the background color of column 7 to red. Add a <sas:CellContentsLabelRenderer> inner tag to the sample in order to change the text font.

<sas:CellRenderer bgColor="red" startRow="1" endRow="-1" repeatRowFactor="1" startColumn="3" endColumn="3" repeatColumnFactor="1">
    <sas:CellContentsLabelRenderer>
      <sas:StyleInfo style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
       font-size: 12pt; font-weight: bold;"/>
   </sas:CellContentsLabelRenderer>
</sas:CellRenderer>

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 template is required.
Create a new jsp page called tableView.jsp. Replace the contents of the new jsp page with 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 tableView.jsp


<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="javax.swing.table.DefaultTableModel"%>
<%@page import="javax.swing.table.TableModel"%>
<%@page import="com.sas.servlet.tbeans.tableview.html.TableView"%>
<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
</head>
<body>
<sas:TableView id="tableView1"  scope="session" render="false">

<!--Uncomment this section of code to see customizations  -->
<!--Start of customizations-->
	<!--sas:CellRenderer bgColor="dcdcdc" startRow="1" endRow="-1" repeatRowFactor="2" 
	     startColumn="1" endColumn="-1" repeatColumnFactor="1"-->
	  <!--/sas:CellRenderer-->
	  <!--sas:CellRenderer bgColor="red" startRow="1" endRow="-1" repeatRowFactor="1" startColumn="3" 
	    endColumn="3" repeatColumnFactor="1"-->
		<!--sas:CellContentsLabelRenderer-->
			<!--sas:StyleInfo style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
		         font-size: 12pt;
	            	 font-weight: bold;"/-->
		<!--/sas:CellContentsLabelRenderer-->
	<!--/sas:CellRenderer--> 
<!--End of customizations-->
    </sas:TableView>

<%
	TableView tableView = (TableView)session.getAttribute("tableView1");
	String columnNames[] = {"Name", "Age", "Sex", "Hobby"};
	String data1[] = {"Bob", "42", "M", "Sailing"};
	String data2[] = {"Mary", "33", "F", "Gardening"};
	String data3[] = {"Jane", "27", "F", "Shopping"};
	String data4[] = {"Tom", "65", "M", "Reading"};
	String data5[] = {"Dave", "23", "M", "Skiing"};
	Object data[][] = new Object[5][4];
	data[0] = data1;
	data[1] = data2;
	data[2] = data3;
	data[3] = data4;
	data[4] = data5;
	TableModel defaultEmptyTableModel = new DefaultTableModel(data, columnNames);
	tableView.setModel( defaultEmptyTableModel);
	tableView.setVisible(true);
	tableView.write(out);
%>
</body>
</html>