Pages

Monday, January 21, 2008

Struts and Jmaki yahoo.dataTable/dojo.table using doAjax

Sample how to populate the yahoo/dojo table with doAjax using Struts+Jmaki.

Requirement:
so let start ...

1. Create an sample view page lets name as view.jsp

-------------------------------------------------------------------------
<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>

<script type="text/javascript">

function reloadGrid(){
jmaki.doAjax({ url : "updaterow.do?refresh=true",
method : 'POST',
callback: function(_req) {
var rows = eval('(' + _req.responseText + ')');
jmaki.publish("/yahoo/dataTable/clear", { });
jmaki.log(_req.responseText);
jmaki.log("Rows: " + rows);
jmaki.getWidget('table1').addRows({value : rows});
}
});
}

</script>


<a:widget name="yahoo.dataTable" id="table1" service="/view.do">
</a:widget>
-------------------------------------------------------------------------

2. We will create an jsp page that will return JSon script, thus this will used to feed to the table widgets. We will name it as data.jsp

-------------------------------------------------------------------------
<%@ page import="java.util.List,java.util.Iterator, java.util.ArrayList, bean.data" %>

{scrollable:true},
{
columns :[
{'label' : 'Field1.', 'id' : 'field1', width : 125},
{'label' : 'Field2.', 'id' : 'field2', width : 125},
{'label' : 'Field3.', 'id' : 'field3', width : 125},
{'label' : 'Field4.', 'id' : 'field4', width : 125},
{'label' : 'Field5.', 'id' : 'field5', width : 125},
{'label' : 'Field6.', 'id' : 'field6', width : 125},
{'label' : 'Field7.', 'id' : 'field7', width : 125}
],

rows : [

<% ArrayList results = (ArrayList) request.getAttribute("data"); if (results != null) { Iterator it = results.iterator(); bean.data prevlist = null; while (it.hasNext()) { prevlist = (bean.data) it.next(); %>
{'field1' : '<%=prevlist.getField1()%>',
'field2' : '<%=prevlist.getField1%>',
'field3' : '<%=prevlist.getField1%>',
'field4' : '<%=prevlist.getField1%>',
'field5' : '<%=prevlist.getField1%>',
'field6' : '<%= fw.utils.getField1 %>',
'field7' : '<%=prevlist.getField1 %>'
}
<% if (it.hasNext()) { out.println(","); } %>
<% } }%>
]
}

-------------------------------------------------------------------------

3. Map your data.jsp to your struts-config.xml.
sample below

-------------------------------------------------------------------------
<action input="/view.jsp"
path="/view"
scope="request"
type="com.sample.ViewAction">
<forward name="success" path="/data.jsp"/>
</action>
-------------------------------------------------------------------------

4. Make a jsp files that will poplulate the row of the grid upon calling the doAjax,
lets name it as row.jsp, this should return as JSon script that will feed to the table
widgets. And map the jsp page to the struts-config.xml.

-------------------------------------------------------------------------
<%@ page import="java.util.List,java.util.Iterator, java.util.ArrayList, bean.data" %>

[
<%
ArrayList results = (ArrayList) request.getAttribute("data");

if (results != null) {
Iterator it = results.iterator();
bean.data prevlist = null;
while (it.hasNext()) {
prevlist = (bean.data) it.next();
%>
{
{'field1' : '<%=prevlist.getField1()%>',
'field2' : '<%=prevlist.getField1%>',
'field3' : '<%=prevlist.getField1%>',
'field4' : '<%=prevlist.getField1%>',
'field5' : '<%=prevlist.getField1%>',
'field6' : '<%= fw.utils.getField1 %>',
'field7' : '<%=prevlist.getField1 %>'
}
<% if (it.hasNext()) { out.println(","); } %>
<% } }%>
]

-------------------------------------------------------------------------

Jmaki has this feature that you can trace the JSon script that goes out and return.
Good tools to help you debug the your script. Turn it on, see glue.js,
Also if you are using mozilla it has an nice plugin for Javascript debugging Firebug. You can download it from this link
https://addons.mozilla.org/en-US/firefox/addon/1843

-------------------------------------------------------------------------

jmaki.debug = true
// uncomment to show publish/subscribe messages
jmaki.debugGlue = true

3 comments:

  1. How can this be changed to bypass struts? Is it easy to do?

    I would like to call a servlet only..thanks

    Peter

    ReplyDelete
  2. Hi
    Nice Article..Can i get the source code of it? Pls mail to brijoy@gmail.com

    ReplyDelete
  3. Hi..can i get this source code?pls mail ti mydelat@yahoo.com

    ReplyDelete