Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Wednesday, February 22, 2017

How to Embed JavaScript in Java

Java 8 came with a JavaScript engine called Nashorn. This makes it easy to call some JavaScript code from Java. In this example, I'm going to show how to pass some Java object into JavaScript and vice-versa as well as calling creating a Java object from JavaScript.
import javax.script.Bindings;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.SimpleBindings;
import java.util.Map;

public class JsExample {
    public static class JavaClass {
        public String greet() {
            return "Hello from Java";
        }
    }

    public static void main(String[] args) throws Exception {
        final String script =
            "var File = Java.type(\"java.io.File\");" +
            "print(new File(\".\").exists());" +
            "var map = {\"msg\": \"Hello from JS\"};" +
            "print(javaClass.greet());" +
            "map;";

        ScriptEngineManager manager = new ScriptEngineManager();
        ScriptEngine engine = manager.getEngineByName("nashorn");

        Bindings bindings = new SimpleBindings();
        bindings.put("javaClass", new JavaClass());

        Map<String, String> retVal = (Map<String, String>) engine.eval(script, bindings);
        System.out.println(retVal.get("msg"));
    }
}
Output:
true
Hello from Java
Hello from JS

Wednesday, September 15, 2010

jqGrid TreeGrid with JSON

The example below shows how to use TreeGrid using jqGrid with JSON.

index.html
<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>jqGrid Example Page</title> 
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> 
    <link type="text/css" href="css/ui.jqgrid.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> 
    <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script> 
    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> 
    <script type="text/javascript">     
      $(function() { 
          $("#treegrid").jqGrid({ 
              url: 'tree.json', 
              datatype: 'json', 
              mtype: 'GET', 
              colNames: ["ID", "Description", "Total"], 
              colModel: [{ 
                  name: 'id', 
                  index: 'id', 
                  width: 1, 
                  hidden: true, 
                  key: true 
              }, { 
                  name: 'desc', 
                  index: 'desc', 
                  hidden: false, 
                  sortable: true 
              }, { 
                  name: 'num', 
                  index: 'num', 
                  hidden: false, 
                  sortable: true 
              }], 
              treeGridModel: 'adjacency', 
              height: 'auto', 
              width: '500', 
              pager: "#ptreegrid", 
              treeGrid: true, 
              ExpandColumn: 'desc', 
              ExpandColClick: true, 
              caption: "Tree Grid Example" 
          }) 
      }); 
    </script> 
    <style type="text/css"> 
        body { 
          font: 62.5% "Trebuchet MS", sans-serif; 
          margin: 50px; 
        } 
    </style> 
  </head> 
  <body> 
    <h1>jqGrid Example</h1> 
    <h2>Tree Grid</h2> 
    <table id="treegrid"></table> 
    <div id="ptreegrid"></div> 
  </body> 
</html>

tree.json
{ 
    "page": 1, 
    "total": 1, 
    "records": 2, 
    "rows": [ 
       {"id": 1, "cell": ["1", "Super Item", "300", 0, null, false, false]}, 
           {"id": 2, "cell": ["2", "Item 1", "100", 1, 1, false, false]}, 
           {"id": 3, "cell": ["3", "Sub Item 1", "50", 2, 2, true, true]}, 
           {"id": 4, "cell": ["4", "Sub Item 2", "25", 2, 2, false, false]}, 
           {"id": 5, "cell": ["5", "Sub-sub Item 1", "25", 3, 4, true, true]}, 
           {"id": 6, "cell": ["6", "Sub Item 3", "25", 2, 2, true, true]}, 
           {"id": 7, "cell": ["7", "Item 2", "200", 1, 1, false, false]}, 
           {"id": 8, "cell": ["8", "Sub Item 1", "100", 2, 7, false, false]}, 
           {"id": 9, "cell": ["9", "Sub-sub Item 1", "50", 3, 8, true, true]}, 
           {"id": 10, "cell": ["10", "Sub-sub Item 2", "50", 3, 8, true, true]}, 
       {"id": 11, "cell": ["11", "Sub Item 2", "100", 2, 7, true, true]} 
    ] 
}