![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Developers often use a tabular format to present information; however, to use the traditional grid layout, you must have enough horizontal space to display all columns simultaneously. The only alternative is to provide a scrollable interface in which you can view only a portion of a column or columns at any given time. This isn't exactly user friendly. Not only does it remove elements from context, but you must scroll sideways while remembering what horizontal you are traversing as well as the other elements in that horizontal.
This article explains a way to display many more columns at one time. With all data available in one screen, the user can make connections immediately without the need to frantically scroll back and forth as he struggles to remember the column values in previous screens.
The graphical user interface you'll use consists of a fully visible column, which shows the column header as well as a scrollable list of row elements in that column. To the left and right of this column are the other column headers in the table; you'll display these vertically so the table consumes less horizontal space than in a traditional two-dimensional grid. Note the comparison of this approach and the traditional grid in Figure 1.
Figure 1. Consolidating a table into a smaller horizontal space
By selecting the row elements in the visible column, the values for that row in the other columns appear; likewise, by selecting the adjacent vertical tabs, the currently visible column becomes a tab while the selected tab becomes the visible column. In this format, the only dimension restriction is the width of the tabs and that of the one visible column.
You can implement this structure in any number of graphical formats. I provide a JavaScript interface as an example. First, draw the current state of the table (depending on which column is visible) by dynamically replacing the current contents of a div tag with the appropriate form of the interface; this will consist of div tags for all the columns, with the visible column containing an actual HTML table. Set style attributes to make the tabs' text vertical and create an alternating color scheme. The tabs respond to mouseover events, redrawing the table based on the cursor's location, as illustrated by Figures 2 through 5.
Figure 2. Column "c" mouseover
Figure 3. Column "b" mouseover
Figure 4. Mouseover of row with elements 4, 9, 14, 19, 24
Figure 5. Mouseover of row with elements 5, 10, 15, 20, 25
The code in Listing 1, for the example table above, redraws the page completely when it first loads and whenever a mouseover event occurs.
Listing 1. Source code for sample table
<HTML>
<BODY>
<script>
var columnNames = new Array();
var columnSelected = new Array();
var columnChecked = new Array();
var selectedIndex = -1;
var results = new Array();columnNames[0] = 'a';columnSelected[0]
= true;columnNames[1] = 'b';columnSelected[1] = false;columnNames[2]
= 'c';columnSelected[2] = false;columnNames[3] = 'd';columnSelected[3]
= false;columnNames[4] = 'e';columnSelected[4] = false;results[0]
= new Array();results[0][0] = '1';results[0][1] = '2';results[0][2]
= '3';results[0][3] = '4';results[0][4] = '5';results[1]
= new Array();results[1][0] = '6';results[1][1] = '7';results[1][2]
= '8';results[1][3] = '9';results[1][4] = '10';results[2]
= new Array();results[2][0] = '11';results[2][1] = '12';results[2][2]
= '13';results[2][3] = '14';results[2][4] = '15';results[2][5]
= '16';results[2][6] = '17';results[2][7] = '18';results[2][8]
= '19';results[2][9] = '20';results[2][10] = '21';results[2][11]
= '22';results[2][12] = '23';results[2][13] = '24';results[2][14]
= '25';results[2][15] = '26';results[2][16] = '27';results[2][17]
= '28';results[2][18] = '29';results[2][19] = '30';results[2][20]
= '31';results[2][21] = '32';results[2][22] = '33';results[2][23]
= '34';results[3] = new Array();results[3][0] = '16';results[3][1]
= '17';results[3][2] = '18';results[3][3] = '19';results[3][4]
= '20';results[4] = new Array();results[4][0] = '21';results[4][1]
= '22';results[4][2] = '23';results[4][3] = '24';results[4][4] = '25';
function drawTable() {
var destination = document.getElementById("contents");
var divContents = "";
distance=0;
for (i = 0; i < columnNames.length; i++) {
if (columnSelected[i]) {
divContents += '<div style="position:absolute;left:' + distance
+ 'px;top:0px;height:20px;width:300px;overflow-y:none;'
+ '"><table border=1 style="width:100%">'
+ '<tr>'
+ '<td onmouseover="changeRow(-1);" '
+ 'style="font-weight:bold;font-size:larger;'
+ 'background-color:#BBCEDB;">' + columnNames[i]
+ '</td></tr></table></div>'
+ '<div style="position:absolute;left:' + distance
+ 'px;top:20px;height:323px;width:300px;overflow-y:scroll;'
+ '"><table border=1 style="width:100%">';
for (j = 0; j < results[i].length; j++) {
divContents += '<tr>'
+ '<td style="font-size=larger;'
+ (selectedIndex == j ? 'background-color:cyan;'
+ 'font-weight:bold' : '')
+ '" onmouseover="changeRow(' + j + ')">'
+ results[i][j] + '</td></tr>';
}
divContents += '</table></div>';
distance += 300;
} else {
divContents += '<div style="position:absolute;left:' + distance
+ 'px;top:0px;height:350px;width:30px;background-color:'
+ (i % 2 == 0 ? '#BBCEDB;' : '#eeeeee;')
+ 'writing-mode:tb-rl;text-align:center;'
+ 'text-decoration:underline;font-weight:bold;'
+ 'font-size:larger;"'
+ ' onmouseover="changeColumn(' + i + ')">'
+ (selectedIndex == -1 || selectedIndex >= results[i].length
? (columnNames[i].length > 30
? columnNames[i].substring(0, 30) + '...' : columnNames[i])
: (results[i][selectedIndex].length > 30
? results[i][selectedIndex].substring(0, 30)
+ '...' : results[i][selectedIndex]))
+ '</div>';
distance += 30;
}
}
destination.innerHTML = divContents;
}
function changeColumn(index) {
for (i = 0; i < columnSelected.length; i++) {
columnSelected[i] = false;
}
columnSelected[index] = true;
drawTable();
}
function changeRow(index) {
selectedIndex = index;
drawTable();
}
</script>
<div id="contents"> </div>
<script>
drawTable();
</script>
</BODY>
</HTML>
|
Since you want to rapidly change the table contents without worrying about the implementation details, you can provide a tag that generates a consolidated table given only the data values. To this end, you can use a tag library that specifies a custom CTable tag, as shown in Listing 2.
Listing 2. Tag library for consolidated tables
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib
PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN"
"http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
<tlibversion>1.0</tlibversion>
<jspversion>1.1</jspversion>
<shortname>CTable</shortname>
<tag>
<name>Table</name>
<tagclass>com.ibm.consolidatedTable.ConsolidatedTableTag</tagclass>
<bodycontent>JSP</bodycontent>
<info>
Consolidated table.
</info>
<attribute>
<name>columns</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>content</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
</taglib>
|
This library must call a Java class, shown in Listing 3, to generate the appropriate JavaScript code for the specified values.
With the tag library in place, you can generate the sample table using only the code in Listing 4.
Listing 4. HTML document using the tag library
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/WEB-INF/classes/tld/consolidatedTable.tld" prefix="CTable" %>
<HTML>
<BODY>
<CTable:Table columns="a,b,c,d,e" content="1,2,3,4,5;6,7,8,9,10;11,12,13,14,15,
16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34;16,17,18,19,20;21,
22,23,24,25;"/>
</BODY>
</HTML>
|
With the implementation I've just described, you can display a consolidated table in any JavaScript-enabled browser. By applying these concepts to other programming languages, you can make similar interfaces available for other GUI frameworks, such as Swing and Standard Widget Toolkit (SWT). And by employing this technology on devices with minimal screen dimensions or to a table with a large number of fields, you greatly enhance an application's ease-of-use.
- Check out JavaScript Central. It houses all documentation and references pertaining to JavaScript programming.
- Read this useful, early article on using JavaScript to interact with DHTML (developerWorks, April 2001).
- Look at this more recent article on using JavaScript to interact with the alternative, standards-compliant Document Object Model (developerWorks, July 2002).
- Visit the W3C's specification for HTML tables.
- This article on adding additional functionality to tables with DHTML is also a good companion piece to this article (developerWorks, May 2001).
- Get to know these myriad resources on JSP technology.
- Benefit from this guide to using JSP tag libraries (developerWorks, December 2001).
- Find articles about every aspect of building for the World Wide Web in the developerWorks Web Architecture zone.
- Browse for books on these and other technical topics.
Table of contents
Local resources
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
