I actually have a struts application web based reporting application that actually uses active widgets to display the report data.
I basically separated most of the JavaScript code that is generic into their stand-alone files, and included them in the page headers.
For the grid code, I simply inserted it into a div area and the only JavaScript code that I maintain there has mostly to do with setting up the Grid and Configuring the Grid.
E.g. I create a file called myfunctions.js and include it in the header section as follows. If I have a bunch of functions that I need to call anyhwere in the page they can be included this way.
e.g i can have a js function called getGridHeightByDataSize(dsize)
that takes a datasize and sets my grid height. defined in this file.
i will then call the function later when setting the style on the object within the jsp page.
<script language="javascript" src="<html:rewrite page="/js/table.js" />"> </script>
Then in my main body section i have my Grid work. I have included the code below with some elements removed but a few comments added in.
The is a jsp page where i use javascript active widgets functions to create and configure my grid and i use java/jsp and html to populate the grid data record object, the Mydata object.
<!---------------- cmtsList.jsp --------------------------------->
<%@ page import="cdv.cdvrr.Beans.CDVrrAdvSearchDTO"%>
<%@ page import="java.util.Vector"%>
<%@ page import="cdv.cdvrr.Beans.CDVrrCmtsListResult"%>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<style>
#myGrid { width: auto; overflow: auto;background: #e0daa7;}
/********************************************************************
Columns
********************************************************************/
#myGrid .aw-grid-column {border-right: 1px dotted #ccc;}
#myGrid .aw-column-0 {width: 350px; text-align: left;border-right: 1px dotted #ccc;}
#myGrid .aw-column-1 {width: 150px;text-align: right;border-right: 1px dotted #ccc;}
#myGrid .aw-column-2 {width: 200px;text-align: right;border-right: 1px dotted #ccc;}
/* #myGrid .active-grid-column {border-right: 1px solid threedlightshadow;} */
/* #myGrid .active-grid-row {border-bottom: 1px solid threedlightshadow;} */
/********************************************************************
Rows
********************************************************************/
/*#myGrid .active-grid-row {border-bottom: 1px solid threedlightshadow;} old way of setting border */
#myGrid .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc}
/* #myGrid .aw-row-1 {color: blue} */
/* Alternate row colors */
#myGrid .aw-alternate-even {background: #e0daa7;}
#myGrid .aw-alternate-odd {background: #e0daa7;}
#myGrid .aw-alternate-even .aw-column-1 {background: e0daa7;}
#myGrid .aw-alternate-odd .aw-column-1 {background: e0daa7;}
/* Selected rows */
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
/********************************************************************
Cells
********************************************************************/
/* Selected cells */
#myGrid .aw-grid-row .aw-cells-selected {background: #FFFFFF;}
/********************************************************************
Headers
********************************************************************/
#myGrid .aw-grid-headers {color: blue}
/* #myGrid .aw-grid-headers .aw-column-1 {font-weight: bold} */
/* Highlight on mouseover, mousedown */
#myGrid .aw-mouseover-header {color: red;}
#myGrid .aw-mousedown-header {color: yellow;}
#myGrid .aw-header-1 {background: #def}
</style>
<!-- grid data -->
<div id="applicationHeader">
<table width="100%" border="0" vspace="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80%">
<%
CDVrrAdvSearchDTO advSearchDTO = new CDVrrAdvSearchDTO();
Vector vCmtsListRecords = new Vector();
advSearchDTO = (CDVrrAdvSearchDTO) session.getAttribute("advSearchDTO");
vCmtsListRecords = (Vector) session.getAttribute("advSearchDataResult");
String strCurrentDate = cdv.cdvrr.CDVrrUtility.getCurrentDate("MMMMM dd, yyyy");
%>
<table width="100%" border="0">
<%
String strSearch = "";
String strDisplayType = "";
String strAdvSearchType = "";
if(! (advSearchDTO == null))
{
if((advSearchDTO.getStrAdvSearchType()).equals("Division"))
{
//a whole bunch of java/jsp code here
}
%>
<tr> <td width="22%"><span class=cdvnormal><%=strAdvSearchType%></span></td><td width="3%"><span class=cdvnormal>:</span></td><td width="*"> <span class=cdvnormal><%=strSearch%></span> </td></tr>
<tr><td width="22%"><span class=cdvnormal>Display Type</span></td><td width="3%"><span class=cdvnormal>:</span></td><td width="*"> <span class=cdvnormal><%=strDisplayType%></span></td></tr>
</table>
</td>
<td align="right" width="20%">
<input type="button" value="Export to Excel" class='exportbutton' onClick="ToExcel_CmtsList('<%=strCurrentDate%>');">
</td>
</tr>
</table>
</div>
<p>
<!-- grid data -->
<script>
//Here I create my data set using java/jsp to set data into myData the record set for teh Grid
var myData = [
<%
StringBuffer sbRecord = new StringBuffer();
int idataRecordSetSize = 0;
int iresultSize = 0;
idataRecordSetSize = vCmtsListRecords.size();
CDVrrCmtsListResult oCmtsListRecord = new CDVrrCmtsListResult();
if(idataRecordSetSize > 0){
for (int i=0;i<idataRecordSetSize;i++){
oCmtsListRecord = (CDVrrCmtsListResult)vCmtsListRecords.get(i);
/* sbRecord.append("\" <a name='"+oCmtsListRecord.getStrCmts()+"' href='/web/cdvrr_left_down.jsp?cmts="+oCmtsListRecord.getStrCmtsWeight()+" - "+oCmtsListRecord.getStrCmts()+"&market="+oCmtsListRecord.getStrMarketWeight()+" - "+oCmtsListRecord.getStrMarket()+"' TARGET='folderFrame'>"+oCmtsListRecord.getStrCmts()+"</a>\","); */
//sbRecord.append("\" <a name='"+oCmtsListRecord.getStrCmts()+"' href='/web/cdvrr_left_down.jsp?cmts="+oCmtsListRecord.getStrCmtsWeight()+" - "+oCmtsListRecord.getStrCmts()+"&market="+oCmtsListRecord.getStrMarketWeight()+" - "+oCmtsListRecord.getStrMarket()+"' onClick='openList(1)'>"+oCmtsListRecord.getStrCmts()+"</a>\",");
//sbRecord.append("\" <a name='"+oCmtsListRecord.getStrCmts()+"' href='/web/Node_list.jsp?cmts="+oCmtsListRecord.getStrCmtsWeight()+" - "+oCmtsListRecord.getStrCmts()+"&market="+oCmtsListRecord.getStrMarketWeight()+" - "+oCmtsListRecord.getStrMarket()+"' onClick='openList(1)'>"+oCmtsListRecord.getStrCmts()+"</a>\",");
//sbRecord.append("\" <a name='"+oCmtsListRecord.getStrCmts()+"' href='/mh/do/QuickSearchNode?QUICK_SEARCH_MODE=NodesOnCmts&cmts="+oCmtsListRecord.getStrCmtsWeight()+" - "+oCmtsListRecord.getStrCmts()+"&market="+oCmtsListRecord.getStrMarketWeight()+" - "+oCmtsListRecord.getStrMarket()+"' TARGET='ReportingFrame'>"+oCmtsListRecord.getStrCmts()+"</a>\",");
sbRecord.append("\" <a name='"+oCmtsListRecord.getStrCmts()+"' href='/mh/do/QuickSearchNode?QUICK_SEARCH_MODE=NodesOnCmts&cmts="+oCmtsListRecord.getStrCmtsWeight()+" - "+oCmtsListRecord.getStrCmts()+"&market="+oCmtsListRecord.getStrMarketWeight()+" - "+oCmtsListRecord.getStrMarket()+"'>"+oCmtsListRecord.getStrCmts()+"</a>\",");
sbRecord.append("\""+oCmtsListRecord.getStrCmtsWeight()+"\",");
sbRecord.append("\""+oCmtsListRecord.getStrMarket()+"\"");
if( i < (idataRecordSetSize - 1))
{
%>[<%=sbRecord.toString()%>],<%
}else{
%>[<%=sbRecord.toString()%>]<%
}
sbRecord.delete(0,sbRecord.length());
}
}
oCmtsListRecord = null;
%>
];
var myColumns = [
"CMTS","WEIGHT","MARKET"
];
// var obj = new AW.UI.Grid;
var obj = new AW.Grid.Extended;
obj.setId("myGrid"); // necessary for CSS rules
//obj.setVirtualMode(false); // disable virtual mode
obj.setCellText(myData); // 2-dimensional js array
obj.setCellEditable(true); // enable editing
obj.setHeaderCount(1);
obj.setHeaderText(myColumns); // js array (see top of this page)
obj.setColumnCount(3);
obj.setRowCount(<%=idataRecordSetSize%>);
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
//set the height of the grid dynamically
obj.setStyle('height', getGridHeightByDataSize(<%=idataRecordSetSize%>);
// write grid html to the page
document.write(obj);
</script>
<script language="JavaScript" type="text/javascript">
document.write("<input type=button name='loadMessage' class='pageLoading' value='Please wait while the page is loading'>");
</script>