Sei sulla pagina 1di 3

Invoking RESTFUL Service or Servlet using DOJO and JSON

Following are the major requirement to cover under POC


Invoking servlets and RESTful services using DOJO
Consuming the JSON response from servlet to render data in tabular format using
DOJO DataGrid
Follow approach needs to be followed.
1. Invoke JS method on page load
2. Prepare request parameters for servlet/RESTful service
3. Use JSOn object to render DOJO datagrid
Following is the code snippet of java script and servlet.
Java script Code to invoke the servlet
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
dojo.require("dojo.parser");
dojo.require("dojo.io.script");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(renderTable);
function renderTable(){
dojo.io.script.get({
url: "http://localhost:90/HelloWorld/rest/helloworld?callback=renderData",
contentType: "application/json",
content: { "statusTypes": strArray},
load: function(data) {
console.log(data);
},
error: function(response, ioArgs) {
alert('error');
}
});
}
</script>
Java Script code to render data grid
<script>
function renderData(data) {
data = data.orderList;
var items = dojo.map(data, function(data) {
return {orderID : data.orderID, orderStatus :
data.orderStatus, orderedTime : data.orderedTime};

});
store2 = new dojo.data.ItemFileReadStore({data:{ items: items}});
// set the layout structure:
var layoutEg = [{
field: 'orderID',
name: 'Order Id',
width: '100px',
},
{
field: 'orderStatus',
name: 'order Status',
width: '100px',
},
{
field: 'orderedTime',
name: 'ordered Time',
width: '200px',
}];
// create a new grid:
var grid2 = new dojox.grid.DataGrid({
id:'grid2',
store: store2,
structure: layoutEg,
autoHeight: true,
//plugins : {dnd: true, nestedSorting: true}
}, document.createElement('div'));
dojo.byId("gridContainer2").appendChild(grid2.domNode);
grid2.startup();
}
</script>
Preparing JSON response in servlet
JSONArray orderArray = new JSONArray();
JSONObject object1=new JSONObject();
object1.put("orderID", "order1");
object1.put("orderStatus", "Pending");
object1.put("orderedTime", "09/08/2011");
orderArray.add(object1);
JSONObject object2=new JSONObject();
object2.put("orderID", "order2");
object2.put("orderStatus", "Acknowledged");
object2.put("orderedTime", "09/08/2011");

orderArray.add(object2);
JSONObject object3=new JSONObject();
object3.put("orderID", "order3");
object3.put("orderStatus", "Open");
object3.put("orderedTime", "09/09/2011");
orderArray.add(object3);
JSONObject object=new JSONObject();
object.put("order", orderArray);
Refer to embedded code:
Points to note:
The sample code uses DOJO 1.4.3 provided OOTB in Portal7.
DOJO data grid works with IBM Portal default theme, but for DOJO
Enhanced DataGrid IBM PageBuilder theme is required.

Potrebbero piacerti anche