Login

06-26-2010, 08:31 AM

[eluser]liri[/eluser]
Hey guys,

Some background
'Been playing a bit with ExtJS data grid.
For the proof of concept phase I have all the javascript code in the view and what I'd like is to create a helper for building the grid since it relies on some pieces of information such as:

1. remote url for data source (retrieved via ajax)
2. the column names passed from the remote data source (json or xml)
3. the column's friendly name for title

Design suggestion
To utilize code re-use and the rest of the OOD enchilada I want to put the wrap the use of the javascript inside a library/helper. So the class would be called from the controller with all the information it needs, build the javascript code and return it as a string which can then be passed to the view. Something like:

Code:
$getGridJs = $dataGridClass->getGrid();

$data['jsgrid'] = $getGridJs

$this->load->view('..', $data);

I'd appreciate to get your opinion for a better design of this.
For example, I'm not sure if that idea works well with caching or maybe it has other culprits
I didn't think of.

Thanks.

06-26-2010, 04:58 PM

[eluser]webtigers[/eluser]
Have you looked at YUI's datatable? I'm using it in CI and it works great. Plus, you can load all the YUI JS files from within the controller. Way cool. Let me know if you'd like the code. Smile

06-26-2010, 05:16 PM

[eluser]liri[/eluser]
[quote author="WebTigers" date="1277611101"]Have you looked at YUI's datatable? I'm using it in CI and it works great. Plus, you can load all the YUI JS files from within the controller. Way cool. Let me know if you'd like the code. Smile

[/quote]

Is that Yahoo's UI library? not sure I want to go with that but I'd appreciate if you could post the code, maybe it could give me some ideas.

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!

06-28-2010, 02:14 AM

[eluser]liri[/eluser]
Nice.

I was under the impression though that this will also provide a php wrapper to actually utilize some of the classes of the YUI library, like to show a grid or something.

Do you have an example of that or is it just a wrapper for the base framework resources to be loaded?

Regards,

06-28-2010, 03:23 AM

[eluser]webtigers[/eluser]
Not sure if this will answer your question ...

There are really only two ways for PHP to get data to a JS datatable (datagrid), 1) outputting the data directly to the page and then reading it from the DOM (messy, but I've seen this done) and 2) via AJAX (preferred and much cleaner).

JS datatables are typically built 100% dynamically within the DOM so finding a "wrapper" for PHP to output a datatable really doesn't exist because there isn't a "table", per se, at runtime for PHP to actually build.

This is the best example of JS making an AJAX call to populate a datatable using YUI.

http://developer.yahoo.com/yui/examples/...rjson.html

Hope this is helpful.

06-28-2010, 03:34 AM

[eluser]liri[/eluser]
I think I confused you :-)
I am referring to something else completely - http://flexigrid.eyeviewdesign.com/index...id/example

As you can see, I'm not talking about how to get the data itself to the data grid (via ajax json, xml, etc) but rather I'm talking about a php wrapper to configure/setup the data grid which as seen in this example, it mostly requires a setup of the grid information (columns titles, the actual column names which are returned in json/xml, etc).

Regards,
Liran.

06-28-2010, 03:37 AM

[eluser]liri[/eluser]
I can actually make use of your link to explain my point - in the link you posted, do you see the JavaScript code snippet of setting up the grid? (columnDefs, etc...) - that's what I'm talking about - if there is a php wrapper to pass it some array config options and it will return that javascript code snippet to include in the view.

Regards,
Liran.

06-29-2010, 02:58 AM

[eluser]webtigers[/eluser]
PHP provides json_encode() and json_decode() functions in PHP5.2+. You could output your columnDefs (or whatever other data you need) to a hidden input control or even the innerHTML of a hidden div and then pull that data into the DOM via a safe JSON parser. This is ugly, but it works.

The best way to do this, however, would be to include your column defs or other data as part of an ajax routine. I've used this sort of thing on applications in the past where the data I was retrieving had variable columns. you just need to setup your definitions to accept whatever the server tosses at you and format the known columns as you see fit.

BTW, I like the look of this grid component's pagination bar. Gonna have to borrow the styling for my own. Nice and clean. Wink

08-03-2010, 12:54 PM

[eluser]Unknown[/eluser]
[quote author="liri" date="1277735857"] ... if there is a php wrapper to pass it some array config options and it will return that javascript code snippet to include in the view.[/quote]

Here is the PHP wrapper for YUI: CIwY CodeIgniter wrapper for YUI (just started project)

CIwY User Guide

Enjoy!
etabeta

[edit]
The project has changed name and (a little) aim.
The new name is "[url="http://blasty.sourceforge.net/"]PHP Blasty[/url]" (PHP Blast YUI), the aim now is to simplify the YUI integration in wahtever PHP webapp not only in CodeIgniter.
<a href="http://blasty.sourceforge.net/">http://blasty.sourceforge.net/</a>
[/edit]