This site has been archived. To learn more about our current products Ibexa Content, Ibexa Experience, Ibexa Commerce head over to the Ibexa Developer Portal

eZ Community » Learn » eZ Publish » ezjscore: eZ Publish JavaScript and...

ezjscore: eZ Publish JavaScript and Ajax framework

Wednesday 23 December 2009 7:45:21 pm

  • Currently 4 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Modules and views

ezjscore/call

This is the view handling Ajax requests for the server function calls. You can use it indirectly as explained in the examples for YUI 3.0 and jQuery or directly using the URL:
ezjscore/call/<customClass>::<customFunction>[::<argument1>[::<argument2>....]]

Example:
With ezjscore installed, operational, and with correct permissions, you can always test http://<root>/ezjscore/call/ezjsc::time

ezjscore/run

This view is purely to be able to use other eZ Publish views more easily from Ajax calls. If an error occurs, it will give an error response in the requested format (JSON, XML, or HTML), and not execute the full eZ Publish error page (which can be quite slow for Ajax use). In addition, it is easy to set up rewrite rules to make it use index_ajax.php for faster execution. The basic syntax is:
ezjscore/run/<system url>

Example:
http://<root>/ezjscore/run/content/view/full/2

 

Using the ezjscore framework

For the admin, ezwebin 1.4, and ezflow 1.1 designs and higher, the page_head_style.tpl and page_head_script.tpl templates make use of the ezcss_load() and ezscript_load() template operators. These calls are required to make on-demand loading with ezcss_require() and/or ezscript_require() work.

For example, see: extension/ezjscore/design/ezwebin/templates/page_head_style.tpl

If you are using the standard or plain designs, older versions of ezwebin and ezflow, or need to merge your custom changes to these two templates, read on.

Scripts

First, take a look at the ezscript_load() description above. As stated, ezscript_load() loads all files that have been passed to ezscript_require() earlier in the request and optionally prepends file(s) you pass to it. A good example of a change you would make to your existing code is to change your template code that uses [JavaScriptSettings] JavaScriptList from something resembling:

{foreach ezini( 'JavaScriptSettings', 
                'JavaScriptList', 
                'design.ini' ) as $script}
  <script language="javascript" type="text/javascript" 
          src={concat( 'javascript/', $script )|ezdesign}>
  </script>
{/foreach}

to:

{ezscript_load( ezini( 'JavaScriptSettings', 
                       'JavaScriptList', 
                       'design.ini' ) )}

If you don't use JavaScriptList, then just add a simple {ezscript_load()} call somewhere in the <head> section of your pagelayout.

CSS

First, take a look at the ezcss_load() description above. As stated, ezcss_load() loads all files that have been passed to ezcss_require() earlier in the request and optionally prepends file(s) you pass to it. With CSS, the example is a bit bigger, but it follows the same pattern by changing:

<style type="text/css">
  @import url({"stylesheets/core.css"|ezdesign(no)}); 
  @import url({"stylesheets/debug.css"|ezdesign(no)});
  @import url({"stylesheets/pagelayout.css"|ezdesign(no)});
  @import url({"stylesheets/content.css"|ezdesign(no)});
  @import url({"stylesheets/websitetoolbar.css"|ezdesign(no)});
  {foreach ezini( 'StylesheetSettings', 
                  'CSSFileList', 
                  'design.ini' ) as $css_file}
    @import url({concat( 'stylesheets/', $css_file )|ezdesign});
  {/foreach}
  @import url({ezini('StylesheetSettings',
                     'ClassesCSS',
                     'design.ini')|ezroot(no)});
  @import url({ezini('StylesheetSettings',
                     'SiteCSS',
                     'design.ini')|ezroot(no)});
</style>

to:

{ezcss_load( array( 'core.css', 
                    'debug.css',
                    'pagelayout.css',
                    'content.css', 
                    'websitetoolbar.css',
                    ezini( 'StylesheetSettings', 
                           'CSSFileList', 
                           'design.ini' ) ))}  
{* 
   These are not loaded by ezcss_load 
   since they might exist in ~<user path> 
*} 
<style type="text/css">   
  @import url({ezini('StylesheetSettings',
                    'ClassesCSS',
                    'design.ini')|ezroot(no)}); 
  @import url({ezini('StylesheetSettings',
                     'SiteCSS',
                     'design.ini')|ezroot(no)}); 
</style>

If you don't use CSSFileList, then just remove that last line in the ezcss_load() call.

Printable

Printer Friendly version of the full article on one page with plain styles

Author(s)

Proudly Developed with from