criminy · December 16, 2011 04:04 · Dec 16, 2011 · Dec 16, 2011
diff --git a/sample.html b/sample.html
@@ -15,7 +15,7 @@
 
             /* Build an ajax region */                                                                 
             content = $.ajaxRegion('#content', template,'/time.json');                                 
-            content();                                                                                 
+            content(); /* Generate the initial content once */                                                           
 
             /* Attach a remote method invocation to a button, refresh region 'content' when            
              * the method completes.                                                                   

diff --git a/GetTimeResource.java b/GetTimeResource.java
@@ -0,0 +1,13 @@
+@Path("/time.json")
+public class GetTimeResource
+{
+    @GET
+    @Produces("application/json")
+    public String currentTimeAsJson() {
+        DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
+        //get current date time with Date()
+        Date date = new Date();
+        return String.format("{\"timeKey\":\"%s\"}",dateFormat.format(date));
+    }
+
+}
diff --git a/sample.html b/sample.html
@@ -0,0 +1,33 @@
+<html>
+<head>
+    <script src="jquery-1.4.2.min.js" type="text/javascript"><!-- xx --></script>
+    <script src="underscore-min.js" type="text/javascript"><!-- xx --></script>
+    <script src="ui.js" type="text/javascript"><!-- xx --></script>
+
+    <script type="text/html" id="template">                                                            
+        The current time is {{ timeKey }}                                                              
+     </script>                                                                                         
+
+    <script type="text/javascript">                                                                    
+        $(function() {                                                                                 
+            /* Compile the template */                                                                 
+            template = $.compile("template");                                                          
+
+            /* Build an ajax region */                                                                 
+            content = $.ajaxRegion('#content', template,'/time.json');                                 
+            content();                                                                                 
+
+            /* Attach a remote method invocation to a button, refresh region 'content' when            
+             * the method completes.                                                                   
+             */                                                                                        
+            $.rmi("#button1","action1",content,{'A':'B'});                                             
+        });                                                                                            
+    </script>                                                                                          
+
+</head>                                                                                                
+<body>                                                                                                 
+    <div id="content"></div>                                                                           
+    <input type="button" id="button1" value="Get Current Time"/>                                       
+
+</body>                                                                                                
+</html>  
diff --git a/ui.js b/ui.js
@@ -0,0 +1,61 @@
+/** THIS IS NO WAY TO PACKAGE A JAVASCRIPT/JQUERY Extension. I know that. Too lazy to closure it properly right now */
+
+$(function() {
+    _.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
+});
+
+/**
+ * Compiles a given template, by id, and returns the template as a callable
+ */
+$.compile = function( template ) {
+    return _.template($("#" + template).html())
+}
+
+/**
+ * Marks a region as being supported by a Jquery template
+ * which gets its data populated from an AJAX 'GET' endpoint.
+ *
+ * @argument selector the CSS selector of the destination element(s)
+ * @argument template the compiled template ID.
+ * @argument URL the AJAX URL to use.
+ * @returns a function() that, when called, renders the template using the AJAX data.
+ */
+$.ajaxRegion = function(selector, template, URL  ){
+    return function() {
+        $.ajax({url: URL,success:function(data) {
+               $(selector).html(template(data));
+            }
+        });
+    };
+}
+
+/**
+ * Marks a region as being supported by a Jquery template, returning
+ * a one-argument function which renders the template using the given data.
+ *
+ * @argument selector the CSS selector of the destination element.
+ * @argument template The compiled template ID.
+ * @returns a function(data) which, when called with 'data', renders the template to the page.
+ */
+$.region = function(selector, template) {
+    return function(data) {
+        $(selector).html(template(data));
+    }
+}
+
+/**
+ * Creates an RMI method invocation using JSON against the specified HTML element using
+ * the javascript 'onclick' method.
+ * 
+ * @argument selector The CSS selector to apply the RMI method 'click' action to.
+ * @argument action The ID of the server-side action to apply.
+ * @argument fn The no-argument function to call once the method has finished.
+ * @argument data The data (or callback to a function which returns the data) of the RMI.
+ */
+$.rmi = function(selector,action,fn,data) {
+    $(selector).live("click",function() {
+        $.ajax({dataType: 'json',contentType:"application/json",type:'POST',url:"action/" + action,data:data,success:function(retData) {
+            fn();
+        },error:function(err1,err2) { alert(err2); }  });
+    });
+}
No results found