Creating HTML Subfiles
August 16, 2002 Timothy Prickett Morgan
Hey, David:
I am writing a CGI application that displays a list of purchase orders that need approval in a Web browser. I would like to show the purchase orders in a scrollable area without using HTML frames. In addition, when the user clicks on a purchase order, I want to display the detail lines for the purchase order in the same browser window. I would like to keep the purchase order list on the screen so that the next purchase order can be selected. Can this be done?
|
— Mark
The answer is, “it depends”.
If you are able to specify that the user use Internet Explorer 5.0+ then you can specify an overflow style that builds a scrollable area.
If you cannot specify the browser, then frames are your best bet.
Here is an example that shows how the overflow style displays table elements:
Instead of a CGI program, I built this page in a servlet, but the concepts are still the same. With this page, selecting the radio button under the Cur column submits the page and passes the order number of the selected line back to the server. If this were a real application, the server would use that order number to build the detail area of the page. I will walk you through some of those concepts and then give you the source so that you can see how this page was constructed and try this out in your own environment. I simplified this example by embedding the style sheet and Java script in the page. In a production environment, you should store styles and scripts in their own separate files.
The first thing to look at in the source is how I handled headings. The heading and detail areas are separate tables that use <col> elements to specify the width of columns in pixels. The heading table has one extra <col> element that is 17 pixels wide that represents the area over the detail table’s scrollbar. Ideally, you would use relative sizes here and express the column widths as a percentage, but it is difficult to account for the scrollbar area in the heading table. Unless you have a wide variety of display resolutions, specifying pixels is simpler.
The next thing to look at is how the scrollable area is defined. The detail table is surrounded the following div tag:
<div style="overflow: auto;
width: 597px;
height: 100;
padding: 0px;
margin: 0px">
This tag tells the browser (if you are using Internet Explorer) to build a scrollable area. The width attribute should be equal to the width of the table columns with 17 pixels added to account for the scrollbar. The height attribute determines the number of rows shown on a page.
Near the bottom of the source, you will see some Java Script that tells the browser to scroll the element with an ID attribute of ordCurrent into view. In this case it is the <td> element for the row that contains order 44345.
If you save the following source to a file with a .html extension on your PC, you can see how this example works on your PC’s Web browser.
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Positioning Demonstration</title>
<style>
order div.sfl fieldset{
border-style : groove;
border-width : 1pt;
border-color : #e0ddd2;}
div.sfl table {
table-layout: fixed;
font-size: 90%;
border: none;
}
div.sfl td {
font-family: sans-serif;
vertical-align: top;
}
div.sfl th {
border: none;
font-family: sans-serif;
background-color : #e0ddd2;
vertical-align: bottom;
}
div.sfl input {
cursor : ne-resize;
border-style : none;
text-decoration : underline;
}
div.sflDriver th {
border: none;
font-family: sans-serif;
background-color : #99cc66;
}
.sflCurrent td {
color: #333399;
background-color : #ffff99;
}
.sflCurrent input {
color: #333399;
background-color : #ffff99;
}
.sflCurrentBody td {
color: #3366cc;
}
</style>
<script language="JavaScript">
function sf(act) {
orderSfl.action.value = 'upd';
if (act != '' && act != null)
{
orderSfl.action.value = act;
}
orderSfl.submit();
}
</script>
</head>
<body>
<form name="orderSfl" method="POST" action="/subfiledemo.do">
<input type="hidden" name="action" value="upd">
<div class="sfl">
<div style="width: 597px;">
<fieldset><legend>Work with Orders</legend>
<table cellspacing="0" cellpadding="0">
<col width="60" align="left">
<col width="60" align="center">
<col width="200" align="left">
<col width="200" align="left">
<col width="60" align="right">
<col width="17">
<tbody>
<tr>
<th>Cur/Sel</th>
<th>Order</th>
<th>Customer</th>
<th>Purchase Order</th>
<th>Amount</th>
<th width="17"> </th>
</tr>
</tbody>
</table>
<div style="overflow: auto; width: 597px; height: 100; padding:0px; margin:
0px">
<table border="0" cellspacing="0" cellpadding="0" width="580">
<col width="60" align="left">
<col width="60" align="center">
<col width="200" align="left">
<col width="200" align="left">
<col width="60" align="right">
<tbody>
<tr>
<td> <input name="ord_cur" type="radio" value="12345" onClick="sf();">
<input name="ord_sel" type="checkbox" value="12345"></td>
<td>12345</td>
<td>Customer</td>
<td>Attention Bob</td>
<td>22,357.50 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="12346" onClick="sf();">
<input name="ord_sel" type="checkbox" value="12346"></td>
<td>12346</td>
<td>Burton</td>
<td>57248</td>
<td>257.00 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="12348" onClick="sf();">
<input name="ord_sel" type="checkbox" value="12348"></td>
<td>12348</td>
<td>Good Guys</td>
<td>Another Purchase order</td>
<td>567.00 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="5626" onClick="sf();">
<input name="ord_sel" type="checkbox" value="5626"></td>
<td>5626</td>
<td>Grepping Stones Search Specialists</td>
<td>A really really long purchase order</td>
<td>57.00 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="812345" onClick="sf();">
<input name="ord_sel" type="checkbox" value="812345"></td>
<td>812345</td>
<td>Al's BTO</td>
<td>Call Sam</td>
<td>257.25 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="912345" onClick="sf();">
<input name="ord_sel" type="checkbox" value="912345"></td>
<td>912345</td>
<td>The Custom Shop</td>
<td></td>
<td>99.99 </td>
</tr>
<tr class="sflCurrent">
<td id="ordCurrent"> <input name="ord_cur" type="radio" value="44345"
onClick="sf();" checked>
<input name="ord_sel" type="checkbox" value="44345"></td>
<td>44345</td>
<td>Dave's Custom Coding</td>
<td>27852</td>
<td>257.25 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="6345" onClick="sf();">
<input name="ord_sel" type="checkbox" value="6345"></td>
<td>6345</td>
<td>Cowboy Aaron's Saddle Shop</td>
<td>275557</td>
<td>57.87 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="123458" onClick="sf();">
<input name="ord_sel" type="checkbox" value="123458"></td>
<td>123458</td>
<td>Wendy's Diner</td>
<td>2250</td>
<td>573.80 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="2125" onClick="sf();">
<input name="ord_sel" type="checkbox" value="2125"></td>
<td>2125</td>
<td>Big Blue Software</td>
<td></td>
<td>3,357.50 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="102961" onClick="sf();">
<input name="ord_sel" type="checkbox" value="102961"></td>
<td>102961</td>
<td>Cam's Big Air</td>
<td>Call Shauna</td>
<td>157.50 </td>
</tr>
<tr>
<td> <input name="ord_cur" type="radio" value="8454" onClick="sf();">
<input name="ord_sel" type="checkbox" value="8454"></td>
<td>8454</td>
<td>Danielle's Dance Studio</td>
<td>16245</td>
<td>257.50 </td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</div>
</div>
<script language="JavaScript">ordCurrent.scrollIntoView(true);</script>
<br/>
<fieldset><legend>Detail</legend>
Some detail lines related to order 44345 go here!
</fieldset>
</form>
</body>
</html>
— David
Sponsored By COMMON
|
|
REGISTER FOR COMMON IN DENVER, OCT. 13-17 Get the IT training you need by attending COMMON Users Group’s Fall 2002 IT Education Conference & Expo, October 13-17 in Denver. Early Bird registration is $1,150 until September 4. Choose from over 720 sessions and labs covering a wide range of industry topics. Also receive training from J.D. Edwards, MAPICS, and other vendors. Don’t miss out! Go to www.common.org |
