Login

06-27-2010, 06:37 PM

[eluser]webtigers[/eluser]
First, install the YUI build files into a publicly accessible folder on your site. I typically use:

Code:
(docroot)/js/yui/(folders)

Second, unpack the YUI config files into a /yui dir within your /library folder (files attached), such as:

Code:
/application/library/yui/lib/meta/(php and js config files)

Third, I created a yui_helper.php class using the YUI loader code (file attached). I usually autoload the helper since I use YUI2 extensively on every page. The helper will want to reference the /application/library/yui/lib/meta/ directory, so if you change this, alter the helper's path to these files.

Code:
$autoload['helper'] = array('yui');

Now that these files are installed you're ready to pull them into CI. In your base or concrete controller constructor, add the following:

Code:
public $yui;

public __construct()

{

    // Set YUI Loader

    $this->yui = new Yui('2.8.0');  // assumes you're using this version

    $this->yui->combine = false;    // combine files if you like, or not

    $this->yui->base = '/js/yui/';  // tell the helper where your YUI modules live

}

Now to instantiate any YUI module within your views, simple load the module within the concrete controller.

Code:
// load YUI components from within the controller

someview()

{

$this->yui->load(

    'reset-fonts',

    'ut ilities',

    'container',

    'json'

    'cookie'

    // or whatever YUI modules you like

);

...

}

// set the YUI scripts to appear on the page when you load a view's vars

$this->data->yui = $this->yui->tags();  //assumes you're loading $this->data into a view

Now, within your view, just echo out the $yui var in the head tag:

Code:
...

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;link rel="icon" href="/favicon.ico" type="image/x-icon" /&gt;

&lt;title&gt;&lt;?php echo $page_title; ?&gt;&lt;/title&gt;

&lt;!-- Load all YUI Base CSS and JS first --&gt;

&lt;?php echo $yui; ?&gt;

...

&lt;/head&gt;

...

ALL DONE!

Now, this might seem like a lot to get setup out of the gate, but once this is installed, it's literally a SNAP to include and declude your YUI modules on a page with literally a couple of words of code.

Also, what I like about the PHP loader is that it's FAST, much faster than the JS loader which can bog-down the loading of a page if you have quite a few modules being loaded.

What's also nice about YUI is that it's a true full-stack framework, unlike libraries like jQuery or Prototype.

I've written a couple of articles about YUI on my ProBlog at:

http://webtigers.net/javascript/enterprise-javascript/
http://webtigers.net/articles/yui-getelementsby/

CHEERS!