This page outlines the main functions within core classes involved in proper JavaScript/YUI setup within the system.
1) configureYuiJSComponents:
2) yuiJSComponentLoader:
3) configureYuiCSSComponents:
4) yuiCSSComponentLoader:
5) mosShowFoot:
Now you are asking... How are they used?
MiaCMS will load up the base YUILoader by default (http://developer.yahoo.com/yui/yuiloader/). It also loads a few other base components such as Animation, Dom, etc. As a 3rd party developer you don't really need to mess with or understand YUI. It is used by the core, but developers are free to use whatever JavaScript framework they are most comfortable with. We recommend YUI, but do not require its usage. All YUI code is namespaced under the YAHOO global variable and all MiaCMS code is namespaced under YAHOO.miacms and thus will not interfere with your custom JavaScript and/or other frameworks you introduce.
If you decide to utilize YUI in an extension it is really easy to setup the components you desire.
The basics steps are:
1) Identify the required CSS and JavaScript components you need
2) Run them through the configuration function so that dependencies and path can be calculated
3) Pass the data returned from the configuration function to the loader functions.
To start with we need load up some YUI CSS and JavaScript files.
yuiJSComponentLoader() will automatically call addCustomFootTag() and queue up each component to be output when mosShowFoot() is called in your templates index.php file. While not required we do highly recommend that you also queue up any of your own JavaScript code this way as well. This will help optimize code performance and minimize HTML validation issues. Some additional information on this is outlined below.
Wrap any custom/inline JavaScript you have in a PHP Heredoc (ex)
Production version of MiaCMS are shipped with all the CSS & JavaScript compressed. Each file is run through the YUI Compressor (http://developer.yahoo.com/yui/compressor/). This works great for the external files, but what about inline scripts like the example given above? MiaCMS 4.9+ now bundles jsmin-php (http://code.google.com/p/jsmin-php/) which is used to minify inline scripts at runtime. The end result is that all JavaScript in the system is minified for optimal performance. As long as your code is added into the mosShowFoot queue with addCustomFootTag() you get runtime minification for free. You can use addCustomFootTag() and opt out of minification by passing false as the 2nd parameter. Since debugging minified code is no fun for anyone when you turn debug on in the systems global configuration the unminified version of YUI components are included and any custom inline JavaScript setup with addCustomFootTag() will bypass jsmin-php.
While we are discussing JavaScript performance it is also worth noting that all YUI files are loaded from the local server by default, but can be loaded via the Yahoo! hosting service on request (http://developer.yahoo.com/yui/articles/hosting/). Yahoo! hosting is optimized for fast response times, good cache hit rates, and the use of gzip compression during HTTP transport. This is optional since the site owner must understand and agree to Yahoo! terms of service agreement. This option can be found on the YUI tab within you global configuration.
1) configureYuiJSComponents:
/**
* Used to dynamically configure the requested YUI JavaScript components
*
* @param $component_list:
* name = yui component name
* minify = serve minified version of JS file (default setting comes from mosConfig_yui_loader, but came be overridden here since some files don't offer minification )
* status = standard is default, but other components may still be in a beta status and thus are named differently
* extended-name = some components have an extra part their default component name (ex) container_core
*
* Example:
* $yui_components = array(
* array(name='yahoo-dom-event', 'minify'=>'N', 'status'=>'standard'),
* array(name='element', 'minify'=>'Y', 'status'=>'beta'),
* array(name='container', 'minify'=>'Y', 'status'=>'standard', 'extended-name'=>'_core'),
* );
*/
* Used to dynamically configure the requested YUI JavaScript components
*
* @param $component_list:
* name = yui component name
* minify = serve minified version of JS file (default setting comes from mosConfig_yui_loader, but came be overridden here since some files don't offer minification )
* status = standard is default, but other components may still be in a beta status and thus are named differently
* extended-name = some components have an extra part their default component name (ex) container_core
*
* Example:
* $yui_components = array(
* array(name='yahoo-dom-event', 'minify'=>'N', 'status'=>'standard'),
* array(name='element', 'minify'=>'Y', 'status'=>'beta'),
* array(name='container', 'minify'=>'Y', 'status'=>'standard', 'extended-name'=>'_core'),
* );
*/
2) yuiJSComponentLoader:
/*
* Used to load YUI JavaScript Components configured with configureYuiJSComponents
* @param $jsFiles Array of urls built with configureYuiJSComponents
* @param bool Add JavaScript to foot immediately or return as string
*/
* Used to load YUI JavaScript Components configured with configureYuiJSComponents
* @param $jsFiles Array of urls built with configureYuiJSComponents
* @param bool Add JavaScript to foot immediately or return as string
*/
3) configureYuiCSSComponents:
/**
* Used to dynamically configure the requested YUI CSS components.
* @param $component_list Array of YUI CSS component names (ex) array('sam_default', 'tabview');
*/
* Used to dynamically configure the requested YUI CSS components.
* @param $component_list Array of YUI CSS component names (ex) array('sam_default', 'tabview');
*/
4) yuiCSSComponentLoader:
/*
* Used to load YUI CSS Components configured with configureYuiCSSComponents
* @param $cssFiles Array of urls built with configureYuiCSSComponents
* @param bool Add CSS to head immediately or return as string
*/
* Used to load YUI CSS Components configured with configureYuiCSSComponents
* @param $cssFiles Array of urls built with configureYuiCSSComponents
* @param bool Add CSS to head immediately or return as string
*/
5) mosShowFoot:
/**
* Render foot tags (similar to mosShowHead)
* This is most useful for outputting JavaScript just before the closing body tag
* for performance reasons. See http://developer.yahoo.com/performance/rules.html#js_bottom.
*
* Usage: Must be added just before the closing </body> tag of all template (front and backend) index.php files.
*/
* Render foot tags (similar to mosShowHead)
* This is most useful for outputting JavaScript just before the closing body tag
* for performance reasons. See http://developer.yahoo.com/performance/rules.html#js_bottom.
*
* Usage: Must be added just before the closing </body> tag of all template (front and backend) index.php files.
*/
Now you are asking... How are they used?
MiaCMS will load up the base YUILoader by default (http://developer.yahoo.com/yui/yuiloader/). It also loads a few other base components such as Animation, Dom, etc. As a 3rd party developer you don't really need to mess with or understand YUI. It is used by the core, but developers are free to use whatever JavaScript framework they are most comfortable with. We recommend YUI, but do not require its usage. All YUI code is namespaced under the YAHOO global variable and all MiaCMS code is namespaced under YAHOO.miacms and thus will not interfere with your custom JavaScript and/or other frameworks you introduce.
If you decide to utilize YUI in an extension it is really easy to setup the components you desire.
The basics steps are:
1) Identify the required CSS and JavaScript components you need
2) Run them through the configuration function so that dependencies and path can be calculated
3) Pass the data returned from the configuration function to the loader functions.
To start with we need load up some YUI CSS and JavaScript files.
$yui_css_components = array('sam_default');
$yui_css_includes = mamboCore::configureYuiCSSComponents($yui_css_components);
echo mamboCore::yuiCSSComponentLoader($yui_css_includes, true);
$yui_js_components = array(
array('name'=>'yahoo-dom-event', 'minify'=>'N', 'status'=>'standard'),
array('name'=>'element', 'minify'=>'Y', 'status'=>'standard'),
array('name'=>'container', 'minify'=>'Y', 'status'=>'standard', 'extended_name'=>'_core'),
array('name'=>'menu', 'minify'=>'Y', 'status'=>'standard'),
array('name'=>'button', 'minify'=>'Y', 'status'=>'standard'),
array('name'=>'editor', 'minify'=>'Y', 'status'=>'standard')
);
$yui_js_includes = mamboCore::configureYuiJSComponents($yui_js_components);
mamboCore::yuiJSComponentLoader($yui_js_includes);
$yui_css_includes = mamboCore::configureYuiCSSComponents($yui_css_components);
echo mamboCore::yuiCSSComponentLoader($yui_css_includes, true);
$yui_js_components = array(
array('name'=>'yahoo-dom-event', 'minify'=>'N', 'status'=>'standard'),
array('name'=>'element', 'minify'=>'Y', 'status'=>'standard'),
array('name'=>'container', 'minify'=>'Y', 'status'=>'standard', 'extended_name'=>'_core'),
array('name'=>'menu', 'minify'=>'Y', 'status'=>'standard'),
array('name'=>'button', 'minify'=>'Y', 'status'=>'standard'),
array('name'=>'editor', 'minify'=>'Y', 'status'=>'standard')
);
$yui_js_includes = mamboCore::configureYuiJSComponents($yui_js_components);
mamboCore::yuiJSComponentLoader($yui_js_includes);
yuiJSComponentLoader() will automatically call addCustomFootTag() and queue up each component to be output when mosShowFoot() is called in your templates index.php file. While not required we do highly recommend that you also queue up any of your own JavaScript code this way as well. This will help optimize code performance and minimize HTML validation issues. Some additional information on this is outlined below.
Wrap any custom/inline JavaScript you have in a PHP Heredoc (ex)
//Define any heredoc vars
$var1 = 'foo';
//Build the custom JavaScript block
$inlineJsTag = <<<JSTAG
<script type="text/javascript">
YAHOO.util.Event.on(window, 'load', function() {
//YOUR CODE HERE
alert("$foo");
});
</script>
JSTAG;
//Get an instance of mainframe and queue these new JavaScript blocks up to be added just before the closing </body> tag.
$mainframe =& mosMainFrame::getInstance();
$mainframe->addCustomFootTag($inlineJsTag);
//If you require some external script files you can go ahead and queue them up as well like so
$externalJsTag = sprintf('<script type="text/javascript" src="%s"></script>', $mosConfig_live_site."/path/to/your.js");
$mainframe-> addCustomFootTag($externalJsTag);
$var1 = 'foo';
//Build the custom JavaScript block
$inlineJsTag = <<<JSTAG
<script type="text/javascript">
YAHOO.util.Event.on(window, 'load', function() {
//YOUR CODE HERE
alert("$foo");
});
</script>
JSTAG;
//Get an instance of mainframe and queue these new JavaScript blocks up to be added just before the closing </body> tag.
$mainframe =& mosMainFrame::getInstance();
$mainframe->addCustomFootTag($inlineJsTag);
//If you require some external script files you can go ahead and queue them up as well like so
$externalJsTag = sprintf('<script type="text/javascript" src="%s"></script>', $mosConfig_live_site."/path/to/your.js");
$mainframe-> addCustomFootTag($externalJsTag);
Production version of MiaCMS are shipped with all the CSS & JavaScript compressed. Each file is run through the YUI Compressor (http://developer.yahoo.com/yui/compressor/). This works great for the external files, but what about inline scripts like the example given above? MiaCMS 4.9+ now bundles jsmin-php (http://code.google.com/p/jsmin-php/) which is used to minify inline scripts at runtime. The end result is that all JavaScript in the system is minified for optimal performance. As long as your code is added into the mosShowFoot queue with addCustomFootTag() you get runtime minification for free. You can use addCustomFootTag() and opt out of minification by passing false as the 2nd parameter. Since debugging minified code is no fun for anyone when you turn debug on in the systems global configuration the unminified version of YUI components are included and any custom inline JavaScript setup with addCustomFootTag() will bypass jsmin-php.
While we are discussing JavaScript performance it is also worth noting that all YUI files are loaded from the local server by default, but can be loaded via the Yahoo! hosting service on request (http://developer.yahoo.com/yui/articles/hosting/). Yahoo! hosting is optimized for fast response times, good cache hit rates, and the use of gzip compression during HTTP transport. This is optional since the site owner must understand and agree to Yahoo! terms of service agreement. This option can be found on the YUI tab within you global configuration.
