:: Forum >> Version 1 >>

Struts and active widgets

Hi
Has anyone successfully integrated the active widgets with the struts based development ?. I am noticing that with the Active widgets stuff, lots of javascript code needs to be included in the jsp page which makes the page difficult to maintain and I am not sure if struts based tags can be included in the grid control. Also this code needs to be customized for each table depeneding on where you want links or hidden fields etc ?.

I like what the active widgets does but looks like it is more suited for standalone jsps or non tag applications and where the tables are few.

Any suggestions appreciated ??

James
Monday, January 31, 2005
maybe you may need to create a tag that builds the JS array.
the tag may take the collection of DTOs from the request and then build the JS array base on the tags.
a
Nando
Wednesday, April 20, 2005
how can i client side validation using struts
<html:error>
esrinivas
Wednesday, September 27, 2006
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>



Paul
Thursday, September 28, 2006



This topic is archived.

Back to support forum

Forum search