Version 2
Created by dschlenk on Feb 21, 2013 10:12 AM. Last modified by dschlenk on Feb 21, 2013 12:10 PM.

    GateIn 3.5 finalized a new javascript module system based on RequireJS/AMD as outlined in the official documentation. This article shows you how to use Google Chart Tools, jQuery and jQuery UI using this new system.

     

    jQuery & jQuery UI

    GateIn comes with a jQuery module built in. All you need to do to use it is add the appropriate XML configuration in gatein-resources.xml. This is outlined in the official documentation so I won't cover it here. The official documentation also shows you how to use jQuery plugins with this built in module or a specific version of jQuery provided by your application. What it doesn't cover is how to use jQuery UI widgets, effects and themes with the jQuery module.

     

    Module Definition

    Since jQuery by default binds to the window and doesn't return a value like actual AMD modules do, we have to use a custom adapter to get it to work:

     

    {code:xml}
    <module>
         <name>jquery-ui-datepicker</name>
         <script>
              <adapter>
                  (function(){
                    <include>/js/jquery-ui-1.10.1.custom.min.js</include>
                    return jQuery.noConflict(true);
                  })();
              </adapter>
         </script>
         <depends>
              <module>jquery</module>
              <as>jQuery</as>
         </depends>
     </module>{code}

     

    In this example I'm using the in-built jQuery module. The file jquery-ui-1.10.1.custom.min.js was obtained by using the custom download builder. It lets you pick which components of the package you'd like to include along with a theme.

    Portlet Dependency

    Using this module then is pretty much like any other - list it as a dependency in your portlet configuration:

     

    {code:xml}
    <portlet>
         <name>JQueryUIPortlet</name>
         <module>
              <script>
                   <path>/js/jqueryuiportlet.js</path>
              </script>
              <depends>
                   <module>jquery</module>
                   <as>$</as>
              </depends>
              <depends>
                   <module>jquery-ui-datepicker</module>
                   <as>ui</as>
              </depends>
         </module>
    </portlet>{code}

     

    Note that unlike the documentation for third party jQuery plugins, we're using the alias '$' for jQuery. This could be skipped as that is the default, but I included it here to point it out. The alias for the UI module needs to match what you list as the name of the dependency in your portlet's module, which we'll see next.

    Portlet Module Script

    I wrote my module in standard AMD form, so using the native GateIn syntax is an exercise left to the reader.

     

    {code}
    define(["$", "ui"], function($) {
         $(document).ready(function(){
              $('#startDate').datepicker({defaultDate: "-1m", dateFormat: 'mm-dd-yy'});
         });
    });{code}

     

    In this simple example I just initialize a DOM container to a jQuery UI datepicker. Note that the dependency list includes '$' and 'ui', which is the two aliases listed in my portlet module's dependency configuration, but the function definition only includes the jQuery '$' object. That's because jQuery UI just augments the standard jQuery object with additional functionality.

    Including the jQuery UI Theme

    The last piece of the puzzle is adding in the css that provides the UI elements the look and feel you selected during the custom dowload. Simply copy the theme folder to your application and add a reference to it in the doHeaders method of your portlet class:

     

    {code}
    public void doHeaders(RenderRequest req, RenderResponse resp){
         Element uiCss = resp.createElement("link");
         uiCss.setAttribute("id", "datepicker-css");
         uiCss.setAttribute("type", "text/css");
         uiCss.setAttribute("rel", "stylesheet");
         uiCss.setAttribute("href", req.getContextPath() + "/css/smoothness/jquery-ui-1.10.1.custom.min.css");
         resp.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, css2);
    }{code}
     

    Note that unlike the javascript portion, you'll be limited to using this one jquery UI theme per portal page since adding elements in doHeaders adds them at the page level. jQuery UI does provide an option to specify a CSS Scope to get around that limitation but I haven't attempted to use it yet.

     

    Adding Google Chart Tools

    Google Chart Tools provides easy to use charts primarily rendered in JavaScript/SVG using a standard data format, DataTable. There's also a Java library available to make serializing Java objects to DataTables easier.

     

    Since Google has it's own JavaScript loader, using it with GateIn took a little time to figure out. Luckily since GateIn's module system is based on RequireJS I was able to take advantage of an existing plugin that required only a minor change to make it work in GateIn.

     

    Let's add Google Chart Tools to our jQuery UI portlet.

    1. Download/clone/fork my modified plugin and copy async.js, propertyParser.js and goog.js to your application.
    2. Add module definitions for the new modules to gatein-resources.xml:
      {code:xml}
      <module>
        <name>async</name>
        <script>
          <path>/js/async.js</path>
        </script>
      </module>
      <module>
        <name>propertyParser</name>
        <script>
          <path>/js/propertyParser.js</path>
        </script>
      </module>
      <module>
        <name>goog</name>
        <script>
          <path>/js/goog.js</path>
        </script>
        <depends>
          <module>async</module>
          <as>async</as>
        </depends>
        <depends>
          <module>propertyParser</module>
          <as>propertyParser</as>
        </depends>
       </module>{code}
    3. Add a dependency to your portlet's configuration. Note that you'll need to decide which components you want to load and then adjust your <resource> definition appropriately.
      {code:xml}
      <portlet>
           <name>JQueryUIPortlet</name>
           <module>
                <script>
                     <path>/js/jqueryuiportlet.js</path>
                </script>
                <depends>
                     <module>goog</module>
                     <as>goog</as>
                     <resource>visualization,1,packages:[corechart,table]</resource>
                </depends>
                <depends>
                     <module>jquery</module>
                     <as>$</as>
                </depends>
                <depends>
                     <module>jquery-ui-datepicker</module>
                     <as>ui</as>
                </depends>
           </module>
      </portlet>{code}
    4. Finally, in your portlet's module, add the goog dependency and you can start using the google components right away!
      {code}
      define(["goog","$", "ui"], function(goog, $) {
                $(document).ready(function(){
                    $('#startDate').datepicker({defaultDate: "-1m", dateFormat: 'mm-dd-yy'});
                    var data = new google.visualization.DataTable();
                    // Declare columns
                    data.addColumn('string', 'Employee Name');
                    data.addColumn('DateTime', 'Hire Date');
                    // Add data.
                    data.addRows([
                      ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], 
                      ['Bob', new Date(2007,5,1)],
                      ['Alice', new Date(2006,7,16)],
                      ['Frank', new Date(2007,11,28)],
                      ['Floyd', new Date(2005,3,13)],
                      ['Fritz', new Date(2011,6,1)]
                    ]);
                    table = new google.visualization.Table(document.getElementById('tableDiv'));
                    table.draw(data, {showRowNumber: false});
                });
      });
      {code}
       

    Also note that you can use the same tools to add other google jsapi libraries.