criminy · December 16, 2011 04:04
diff --git a/GetTimeResource.java b/GetTimeResource.java
 @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
 <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(); /* Generate the initial content once */                                                           
                                                                                                       
            /* 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
 /** 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); }  });
    });
 }
	@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));
	}

	}
	<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(); /* Generate the initial content once */

	/* 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>
	/** 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); } });
	});
	}