OWASP O2 Platform Blog

Creating a jQuery DataTable using serialized JSON object

Using the same technique used in the JsTree example, here is a DataTable dynamically populated from a serialized JSON object

//based on example from http://www.datatables.net/release-datatables/examples/data_sources/js_array.html
//var topPanel = panel.clear().add_Panel(); 
var topPanel = "Poc - jQuery jsDataTable".popupWindow(900,400);

var jsDataTable =  new JsDataTable();

jsDataTable    .add_Row("Trident", "Internet Explorer 4.0", "Win 95+", 4, "X")
               .add_Row("Trident", "Internet Explorer 4.0", "Win 95+", 4, "X")
            .add_Row("Trident", "Internet Explorer 5.0", "Win 95+", 5, "C")
            .add_Row("Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A")
            .add_Row("Trident", "Internet Explorer 6.0", "Win 98+", 6, "A")
            .add_Row("Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A")
            .add_Row("Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A")
            .add_Row("Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A")
            .add_Row("Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A")
            .add_Row("Webkit", "Safari 1.2", "OSX.3", 125.5, "A")
            .add_Row("Webkit", "Safari 1.3", "OSX.3", 312.8, "A")
            .add_Row("Webkit", "Safari 2.0", "OSX.4+", 419.3, "A")
            .add_Row("Webkit", "Safari 3.0", "OSX.4+", 522.1, "A");

jsDataTable.add_Columns("Engine", "Browser", "Platform");
jsDataTable.add_Column("Version", "center");
jsDataTable.add_Column("Grade", "center");
//adding without using extension methods
/*jsDataTable.aaData.Add(new List<string> { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Engine"  });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Browser"  });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Platform"  });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Version" , sClass = "center" });
jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = "Grade" , sClass = "center" }); */

//return "{0}".info(jsDataTable.jsonString());

 
var ie = topPanel.add_IE();                 

ie.showMessage("loading dataTable js and css");

var jQuery = new IE_JQuery(ie);    
var cssFile = @"dataTable_demo.css".local();
var styleHtml =  "<style type=\"text/css\"> {0} </style>".format(cssFile.fileContents().fixCRLF().remove("".line()).replace("'", "\""));

var injectCSS = "$('body').append($('"  + styleHtml + "' ))";
ie.invokeEval(injectCSS);

//ie.invokeEval("<a href="http://static.jstree.com/v.1.0pre/jquery.jstree.js%22.uri().getHtml">http://static.jstree.com/v.1.0pre/jquery.jstree.js".uri().getHtml</a>());  // use to get jstree from jstree.com website
ie.invokeEval("jquery.dataTables.min.js".local().fileContents());
jQuery.element("div").html("creating local table");

ie.invokeEval("$('body').append($('<div id=\"testDataTable\"/>')); $('#testDataTable').html('test DataTable will go here');");
ie.invokeEval("$('#testDataTable').html( '<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"display\" id=\"example\"></table>' );");
//ie.invokeEval("%('#example').html('aaaaaaaaa')");
/*var dataToBuildTable =  "                        { " +    
                        "                                'aaData': [" +
                        "                                                [ 'Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X' ], " +
                        "                                                [ 'Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C' ], " +
                        "                                                [ 'Gecko', 'Firefox 3', 'Win 2k+ / OSX.3+', 1.9, 'A' ], " +
                        "                                                [ 'Webkit', 'Safari 1.2', 'OSX.3', 125.5, 'A' ]          " +
   
                        "                                          ]," +         
                        "                                'aoColumns': [" +
                        "                                                { 'sTitle': 'Engine' }, " +
                        "                                                { 'sTitle': 'Browser' }, " +
                        "                                                { 'sTitle': 'Platform' }, " +
                        "                                                { 'sTitle': 'Version', 'sClass': 'center' }, " +
                        "                                                { 'sTitle': 'Grade', 'sClass': 'center' } " +
                        "                                               ]" +
                        "                        }      ";     */
                
var dataToBuildTable = jsDataTable.jsonString();
ie.invokeEval(" $('#example').dataTable( " + dataToBuildTable +" );"  );

//O2File:JsDataTable.cs

return "done";

//O2File:IE_JQuery.cs
//O2Ref:WatiN.Core.1x.dll
//O2Ref:Microsoft.mshtml.dll

Here is the code of the JsDataTable class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Windows.Forms;
using O2.Kernel.ExtensionMethods;
using O2.DotNetWrappers.ExtensionMethods;

//O2Ref:System.Web.Extensions.dll

namespace O2.XRules.Database.APIs
{
    public class JsDataTable
    {
        public List<List<object>> aaData;
        public List<JsDataColumn> aoColumns;       
       
        public JsDataTable()
        {
             aaData = new List<List<object>>() ;
             aoColumns = new List<JsDataColumn>();
        }
       
        public class JsDataColumn
        {
            public string sTitle {get; set; }
            public string sClass {get; set; }
        }
    }
   
   
    public static class JsDataTable_ExtensionMethods
    {
        public static string jsonString(this object _object)
        {
            return new JavaScriptSerializer().Serialize(_object);
        }
       
        public static JsDataTable add_Row(this JsDataTable jsDataTable, params object[] cells)
        {
            return jsDataTable.add_Row(cells.toList());
        }
       
        public static JsDataTable add_Row(this JsDataTable jsDataTable, List<object> cells)
        {
            jsDataTable.aaData.Add(cells);
            return jsDataTable;
        }
               
        public static JsDataTable add_Column(this JsDataTable jsDataTable, string title)
        {
            return jsDataTable.add_Column(title, null);
        }
       
        public static JsDataTable add_Column(this JsDataTable jsDataTable, string title, string _class)
        {
            jsDataTable.aoColumns.add(new JsDataTable.JsDataColumn { sTitle = title, sClass = _class });
            return jsDataTable;
        }
       
        public static JsDataTable add_Columns(this JsDataTable jsDataTable, params string[] titles)
        {
            foreach(var title in titles)
                jsDataTable.add_Column(title);
            return jsDataTable;
        }
    }
}

June 21, 2011 Posted by | IE Automation, jQuery, WatiN | Leave a comment

Creating a jQuery jsTree using serialized JSON object

Based on the code samples from http://mohyuddin.blogspot.com/2009/05/binding-jstree-programmatically-with.html this O2 Platform script shows how to create a jsTree (jQuery plugin) using as a data source a serialized JSON object (this is perfect for use on a web service)

//var topPanel = panel.clear().add_Panel(); 
var topPanel = "Poc - jQuery jsTree".popupWindow(600,200);
 
var ie = topPanel.add_IE();                </pre>
&nbsp;

ie.showMessage("loading jstree js");

var jQuery = new IE_JQuery(ie);  

var cssFile = @"jquery.jstree.style.css".local();
var styleHtml =  "<style type=\"text/css\"> {0} </style>".format(cssFile.fileContents().remove("".line()));
var injectCSS = "$('body').append($('"  + styleHtml + "' ))";
ie.invokeEval(injectCSS);

//ie.invokeEval("<a href="http://static.jstree.com/v.1.0pre/jquery.jstree.js%22.uri().getHtml">http://static.jstree.com/v.1.0pre/jquery.jstree.js".uri().getHtml</a>());  // use to get jstree from jstree.com website
ie.invokeEval("jquery.jstree.js".local().fileContents());
jQuery.element("div").html("creating local tree");
ie.invokeEval("$('body').append($('<div id=\"testJsTree\"/>')); $('#testJsTree').html('test JsTree will go here');");

var jsTree = new JsTree();
jsTree.add_Node("node 1");
jsTree.add_Node("node 2") 
      .add_Node("child 1")
      .add_Nodes("sub child 1", "sub child 2");
jsTree.add_Nodes("node 3", "node 4");
 
ie.invokeEval("treeData = " + jsTree.jsonString());                                  // this creates a string for the serialized jsTree object
//ie.invokeEval("treeData = { 'data' : ['firstnode' ,'2ndNode', '3rdNode' ]  }");    // this creates a tree it manually
ie.invokeEval("jQuery('#testJsTree').jstree({ 'json_data' : treeData ,  'plugins' : [  'themes', 'json_data' , 'dnd']} );");

jQuery.element("div").html("tree created");

return "ok";
//O2File:JsTreeNode.cs
//O2File:IE_JQuery.cs
//O2Ref:WatiN.Core.1x.dll
//O2Ref:Microsoft.mshtml.dll

Here is the code of the JsTree class (in the JsTreeNode.cs file):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
//O2Ref:System.Web.Extensions.dll

namespace O2.XRules.Database.APIs
{
    public class JsTree
    {
        public List<JsTreeNode> data;
       
        public JsTree()
        {
            data = new List<JsTreeNode>();
        }
    }
   
    public class JsTreeNode
    {
        public Attributes attributes { get; set; }      
        public Data data  { get; set; }          
        public string state { get; set; }              
        public List<JsTreeNode> children { get; set; }          
       
        public JsTreeNode()
        {
            children = new  List<JsTreeNode>();
            data = new Data();
            attributes = new Attributes();
        }   
        public  JsTreeNode(string title) : this()
        {
            data.title = title;
        }
       
    }
    public class Attributes
    {
        public string id { get; set; }  
        public string rel { get; set; }          
        public string mdata { get; set; }      
    }
   
    public class Data
    {
        public string title { get; set; }      
        public string icon { get; set; }      
    }
   
    public static class JsTree_ExtensionMethods
    {
        public static string jsonString(this object _object)
        {
            return new JavaScriptSerializer().Serialize(_object);
        }
       
        public static JsTreeNode add_Node(this JsTree jsTree, string title)
        {
            var newJsTreeNode = new JsTreeNode(title);
            jsTree.data.Add(newJsTreeNode);
            return newJsTreeNode;
        }
       
        public static List<JsTreeNode> add_Nodes(this JsTree jsTree, params string[] titles)
        {
            var newJsTreeNodes = new List<JsTreeNode>();
            foreach(var title in titles)
                newJsTreeNodes.Add(jsTree.add_Node(title));
            return newJsTreeNodes;
        }
       
        public static JsTreeNode add_Node(this JsTreeNode jsTreeNode, string title)
        {
            var newJsTreeNode = new JsTreeNode(title);
            jsTreeNode.children.Add(newJsTreeNode);
            return newJsTreeNode;
        }
       
        public static List<JsTreeNode> add_Nodes(this JsTreeNode jsTreeNode, params string[] titles)
        {
            var newJsTreeNodes = new List<JsTreeNode>();
            foreach(var title in titles)
                newJsTreeNodes.Add(jsTreeNode.add_Node(title));
            return newJsTreeNodes;
        }
    }
}

Based on the original code sample, here is a working version of its test script:


List<JsTreeNode> nodesList = new List<JsTreeNode>();
for (int i = 1; i < 10; i++)
{
    JsTreeNode node = new JsTreeNode();
    node.attributes = new Attributes();
    node.attributes.id = "rootnod" + i;
    node.attributes.rel = "root" + i;
    node.data = new Data();
    node.data.title = "Root node:" + i;
    node.state = "close";

    node.children = new List<JsTreeNode>();

    for (int j = 1; j < 4; j++)
    {
        JsTreeNode cnode = new JsTreeNode();
        cnode.attributes = new Attributes();
        cnode.attributes.id = "childnod1" + j;
        node.attributes.rel = "folder";
        cnode.data = new Data();
        cnode.data.title = "child node: " + j;
        cnode.attributes.mdata = "{draggable : true,max_children : 1,max_depth : 1 }";
        node.children.Add(cnode);

    }
    node.attributes.mdata = "{draggable : false,max_children : 1, max_depth :1}";
    nodesList.Add(node);
}
var jsTree = new JsTree();
jsTree.data= nodesList; 
var jsonData = new JavaScriptSerializer().Serialize(jsTree);       

return jsonData;   

June 21, 2011 Posted by | IE Automation, jQuery, WatiN | 3 Comments