ezjscore: eZ Publish JavaScript and Ajax framework

Using JavaScript libraries

As mentioned earlier, the Yahoo! User Interface and jQuery JavaScript libraries can be delivered either by content delivery networks (CDNs) or locally (the ezjscore extension bundles both libraries for 'offline' usage). YUI offline files are placed under design/standard/lib/yui/ while jQuery offline files are placed in the design/standard/javascript/ directory.

Most of the examples below are taken from the ezjscore_demo extension. The code used in the YUI and jQuery examples is included in the demo extension in three templates. These can be used in your development install by placing the following in the desired view template (be sure to customize the file name based on the library you'd like to test):

{include uri='design:ezjscore_jquery_demo.tpl'}

The ezjscore_demo extension is downloadable here <http://projects.ez.no/ezjscore/downloads/archive> or in SVN here <http://svn.projects.ez.no/ezjscore/trunk/packages/ezjscore_extension/documents/example/>.

The examples show a basic Ajax scenario where the server returns a string that is passed to it, and the client-side shows the result from the server.

YUI

The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and Ajax.
At the time this article was written, two major versions – YUI 2.x and YUI 3.x – are actively developed and supported. ezjscore comes with 2.7.0 and 3.0.0 in case you don't want to use the Yahoo! CDN.

YUI 2.x

YUI 2 is a JavaScript and CSS library with more than 30 unique components, including low-level DOM utilities and high-level user-interface widgets. ezjscore provides easy access to the YUI Loader utility, which is a client-side JavaScript component that enables you to load specific YUI components and their dependencies into your page via a script. Let's take a look at an example.

First, we need to load the YUI Loader utility. In order to do so, put the following piece of code in an eZ Publish template:

{* On demand require some custom css *} 
{ezcss_require( 'ezjscdemo.css' )}  

{* 
 Some simple html where we want to load 
 some content from server 
*} 
<div id="hello-world-id" class="my-custom-css-class">    
  Waiting for ezjscore ajax call... (See FAQ if you get script error and / or nothing happens! hint: permissions ) 
</div>  

{* On demand require YUI 2.x loader file *} 
{ezscript_require( 'ezjsc::yui2' )}

ezscript_require() will load the YUI Loader utility, which provides access to a variable called YUILoader. You can use YUILoader for loading your custom JavaScript and CSS files as well as YUI 2.x components.

This example (taken from the ezjscore_demo extension) shows how to use YUILoader to load custom JavaScript and CSS files as well as some YUI 2 components such as "dom" and "connection":

<script type="text/javascript"> 
<!-- {literal} 
  // This function is executed when all YUI 2.x components are available 
  YUILoader.onSuccess = function()  
  {  
  {/literal}     
    // A ezjscore server call   
    var serverCall = "{'/ezjscore/call/ezjscdemo::search'|ezurl( 'no' )}"; 
  {literal}     
    // POST parameters send along with XHR request     
    var data = "arg1=hi!";   
    YAHOO.util.Connect.asyncRequest( "POST", serverCall,  
          {success: function (o)          
                    {  
                      if ( o.responseText !== undefined ) 
                      {
                        YAHOO.util.Dom.get("hello-world-id").innerHTML = o.responseText;             
                      }
                    }
          }, 
          data ); 
  }
  /* 
    NOTE: Custom scripts which are depending on the YUI 2.x 
    components should be loaded via YUILoader       
    to avoid issues with dependency loading. 
    Scripts which does not require the YUI 2.x components 
    should be loaded via ez[script|css]_require       
    template operator which also takes care about packing (minifying). 
    YUILoader.addModule({     
        name: 'customscript',     
        type: 'js',   
        fullpath: 'full/path/to/customscript.js' 
        // Can be used with ezdesign() 
                       }); 
  */ 

  // Load DOM and Connection components 
  YUILoader.require(["dom","connection"]);  

  // Insert YUI 2.x components on page 
  YUILoader.insert(); 
  {/literal} 

//--> 
</script>

Code that depends on the successful loading of all necessary components can be implemented in the YUILoader.onSuccess function.
The YUI Loader utility is well-described in the official YUI 2 documentation. [http://developer.yahoo.com/yui/yuiloader/]