Dojo'd Igniter! Dojo Helper Library

[eluser]frankcefalu[/eluser]
Will Be Posting Shortly

Add Dojo Without Ever Hosting Library Files, imported via Google's CDN.

Auto Load Modules Cleanly. Full Module List will be available for use.

Select Which Stylesheet you want to use to skin your dojo interface, all hosted on Google CDN, and keep your application light and clean!

[eluser]frankcefalu[/eluser]
Dojo'd Igniter!

Dojo Helper 1.3 for Dojo 1.4.X !!!

CHANGE DOC
May 25,2010 - Added Sample Module List To Post
May 25,2010 - Fixed a issue in dojo_style. Dojo'd Igniter Now V1.2
June 22,2010 - Added dojo_layout, dojo_tabs

UPCOMING UPDATES

Version 1.4 Coming

Five Functions

dojo_start,dojo_modules,dojo_styles,dojo_tabs,dojo_layout

They should be used in this succession, and inside your views.

DOJO START

Dojo Start calls the dojo framework initially. This helper was designed for version 1.4 of Dojo.

If you want to Change versions please just change it easily via the function.

Code:

dojo_start('1.3');

You can also enable debugging.

Code:

dojo_start('1.3',true);

DOJO MODULES

Code:

dojo_modules($array)

List all modules you want to activate for Dojo, I will try to post a list of modules, but it should be in array format as such.

Code:

$myArray = array("dijit.TitlePane", "dijit.form.Button","dijit.Dialog");

dojo_modules($myArray);

You should call Dojo Modules some time after Dojo Start.

DOJO STYLES

Dojo Styles should be last and has some interesting settings.

Choose from Three styled themes available in Dojo.

Tundra, Nihilo and Soria.

Example.

Code:

dojo_styles('soria');

You can also specify the Version Again Here

Code:

dojo_styles('soria','1.4');

This is essential as there are different versions of dojo, and such same goes with stylesheets.

I also included for your convenience,style sheets for portlet, and sort list.

Also side note, the styles function also draws your body function... this important so let me bold this.

dojo_styles draws the body tag!

Why? Because dojo practice usually involves in adding the theme class directly to the body, if you want this off, do this.

Code:

dojo_styles('soria','1.4',false);

SAMPLE MODULES LIST FOR DOJO_MODULE FUNCTION

dijit.TitlePane
dijit.form.Button
dijit.Dialog
dojo.parser
dijit.layout.BorderContainer
dijit.layout.TabContainer
dijit.layout.AccordionContainer
dijit.layout.ContentPane
dijit.Menu
dijit.MenuItem
dijit.PopupMenuItem
dijit.dijit
dojox.widget.Portlet
dojox.widget.SortList
dijit._Container
dijit._Calendar

If you want more modules, and need any help please let me know!

NEW ADDITIONS

DOJO LAYOUT AND DOJO TABS

This is the biggest upgrade to this helper and will greatly improve your coding, and application, make an entire immersive application without one line of html!




First I will introduce dojo_tabs

Code:

dojo_tabs($tabArray,"ContentPane",false,false)

The Tab Array !

Code:

$tabsArray["tabTitle"] = array("content"=> "Example Content",
                                 "closable" => FALSE);
         $tabsArray["tabTitle2"] = array("content"=> "Example Content",
                                 "closable" => FALSE);

       dojo_tabs($tabArray,"ContentPane");

The Above code produces this.



There are a few extra options on this function.

dojo_tabs($tabArray,"ContentPane",false // Tabs Only? ,false // Region)

Tabs only is incase you want to use this in dojo_layout, and produce multiple tab sets, or even accordian views.


Now Onto Dojo Layout!


DOJO LAYOUT

Dojo Layout is a php array that you produce to create layouts, I will include some sample code, and show you the result of that code, and you can judge how powerful dojo_layout really is.

Code:

<style>
.base {width:100%;height:100%;margin:auto;}
.leading {width:20%;}
.center {width:100%;}
.trailing{width:20%;}
</style>
<?php

// Type // Region

$tabsArray["tabTitle"] = array("content"=> "Example Content",
                                   "id" => "test",
                                   "closable" => FALSE);

$tabsArray["tabTitle2"] = array("content"=> "Example Content",
                                   "id" => "test",
                                   "closable" => FALSE);


$dojodLayout = array("type" => "BorderContainer",
                    "region" => false,
                    "class" => "base",
                    "content" => array(
                                        array("type"=>"TabContainer",
                                        "region"=>"leading",
                                        "class"=>"leading",
                                        "closable"=>"false",
                                        "content" => dojo_tabs($tabsArray,'ContentPane',true)),
                                        
                                        array("type"=>"TabContainer",
                                        "region"=>"center",
                                        "class"=>"center",
                                        "closable"=>"false",
                                        "content" => "test"),
                                        
                                        array("type"=>"TabContainer",
                                        "region"=>"trailing",
                                        "class"=>"trailing",
                                        "closable"=>"false",
                                        "content" => "test")
                                        
                                        
                                        ));
echo dojo_layout($dojodLayout);

Produces this.

http://i49.tinypic.com/xo0ajl.png


Instead of TabContainer you can do AccordionContainer






Enjoy your Dojo’d Code Igniter!

V1.3 ZIP Now Available. Left 1.0 Zip Up, will remove after V1.4 is released

[eluser]loosetops[/eluser]
Great. Just started getting familiar with dojo. Keep up the good work.

[eluser]frankcefalu[/eluser]
Thank You For Your Support!

[eluser]frankcefalu[/eluser]
V1.3 Coming Shortly

[eluser]frankcefalu[/eluser]
V1.3 Live!

[eluser]mariboudhi[/eluser]
Hi. I tried to utilize this helper in my project but I have CSS problem. I used your tab example but I haven't any style in tabs.

Dou you have an idea about it ?

Thanks