JavaEnterprise JavaJSP: Creating Dynamic Tables

JSP: Creating Dynamic Tables

by Jose Annunziato and Stephanie Fesler Kaminaris

Generating dynamic content in Web applications is important when the

content must reflect the most current and available data and

personalized information. One of the main advantages of JavaServer Pages

is the ability to generate dynamic content.

Many Web sites depend on the ability to generate tables dynamically,

which consists of controlling the TR and TD tags

within a TABLE. The online stock portfolio mentioned earlier is

a good example where dynamic tables are useful.

The following example shows how to generate five rows without having

to code each one of them:


<TABLE>
<% for(int row=1; row <= 5; row++) { %>
    <TR>
    </TR>
<% } %>
</TABLE>

Ten columns can be added for each row by nesting another for loop

within the TR tag as follows:


<TABLE>
<% for(int row=1; row <= 5; row++) { %>
    <TR>
<%      for(int col=1; col<=10;

col++) { %>
        <TD>

(<%=col%>, <%=row%>)
        </TD>
        <% } %>
    </TR>
<% } %>
</TABLE>

Each cell contains its row and column numbers as the tuple

(col, row).

The following listing shows how tables can be generated dynamically.

The JSP provides two INPUT fields to define the width and

height of the dynamic table. When the user submits the form, the JSP

processes the request and generates the table on-the-fly. Each cell of

the table has a unique background color and text based on the row and

column of the cell.

Listing 1: dynamicTable.jsp

 1:
<HTML><HEAD><TITLE>A Colorful and Dynamic
Table</TITLE></HEAD>
 2: <BODY>
 3: <CENTER>
 4: <H1>Colorful and

Dynamic
Table</H1>
 5: <FORM METHOD=POST

ACTION=dynamicTable.jsp>
 
6: Table Width 

(<16)
= <INPUT TYPE=TEXT NAME=WIDTH 

VALUE=15
SIZE=2>,
 
7: Table Height (<16) = <INPUT TYPE=TEXT NAME=HEIGHT

VALUE=5 
SIZE=2>,
 8: <INPUT TYPE=SUBMIT
VALUE="Do it !">
 9: </FORM>
10: <HR>
11: <%  String w =
request.getParameter("WIDTH");
12:    

String h =
request.getParameter("HEIGHT");
13:     if(w

== null)
w = "5";
14:     if(h

== null)
h = "15";
15:     int

width 
= Integer.parseInt(w);
16:     int

height =
Integer.parseInt(h);
17:    

if(width>15) 
width  = 15;
18:    

if(width<0)  
width  = 0;
19:    

if(height>15)
height = 15;
20:    

if(height<0) 
height = 0;
21:    

String[]
colorArray  = {

"00",
"11", "22", "33",
22:           &

nbsp;           &

nbsp;    
"44", "55", "66",

"77",
23:           &

nbsp;           &

nbsp;    
"88", "99", "AA",

"BB",
24:           &

nbsp;           &

nbsp;    
"CC", "DD", "EE",

"FF" 
};  %>
25: <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
26: <%  for(int y=0;
y<=height; y++){   

%>
27:        
<TR>
28: <%     

for(int
x=0; x<=width; x++){
29:           &

nbsp;
String bgColor = "AA" + colorArray[y] +

colorArray[x];   
%>
30:           &

nbsp;
<TD BGCOLOR=<%=bgColor%>>
31:           &

nbsp;
(<%=x%>, <%=y%>)
32:           &

nbsp;
</TD>
33: <%     

}           &

nbsp;          
%>
34:        
</TR>
35: <%  }           &

nbsp;           &

nbsp;  
%>
36: </TABLE>
37: <HR>
38: </CENTER>
39: </BODY></HTML>

Lines 5 through 9 declare a FORM to set the width and height

of the table. They have been limited to less than 16 since these values

are then used to choose a hexadecimal-based color system. The input

fields declare a default table size of 5 rows of 15 columns each. The

values of the fields are then accessed from the request object

in lines 11 and 12. If they are not null, the value is used to

set the values of variables width and height.

Lines 17 through 20 make sure the values are within 0 and 15. Line 21

declares a colorArray based on hexadecimal values from 00 to

FF. Line 25 declares the table. The for loop in line 26

declares a height number of rows. For each row, the

for loop in line 28 declares a width number of

columns. Each cell is declared with a unique background color. The

background color, bgColor, is created in line 29 and the cell’s

color is defined in line 30. The cell contains the string (x,

y) where x is the current column and y is the

row.

Figure 1 shows the output of dynamicTable.jsp with a width

and height of 15.

Figure 1
dynamicTable.jsp produces a dynamically colorful table.

Summary

There are many ways to use JSPs to generate dynamic content. This

article showed you how to generate dynamic tables.

About the Authors:


Jose Annunziato received his Master’s and Doctor of

Science degrees in computer science from the University of

Massachusetts. Lowell. Dr. Annunziato works for BEA Systems where he

develops courseware products such as WebLogic Server, WebLogic Commerce

Server, and WebLogic Enterprise.


Stephanie Fesler Kaminaris has written hundreds of

pages of course materials on Web development, such as HTML, JavaScript,

Active Server Pages, VBScript, and CGI programming. She has also written

course materials for BEA’s WebLogic Server courses, such as WebLogic as

a Web Server, Java Server Pages, Servlets, and Web Applications.




This article is based on techniques presented in Sams Teach Yourself JavaServer Pages in 24 Hours

(0672320231) — a book by Jose Annunziato and Stephanie

Fesler Kaminaris, with Sams Publishing.


&copy Copyright Sams
Publishing
, All Rights Reserved




 

Latest Posts

Related Stories