Dojo Cake

***UPDATE***
All tutorials and reference material is now being offically moved to the project's wiki page. You can find the wiki via our google project page, or directly from here.

After a lot of work, and some searching to make sure this hadn't already been done, I created some basic helpers for CakePHP to provide support for the Dojo javascript library. Now, I admit, I haven't even scratched the surface of what can be done. This is a work in progress. And at the moment I'm waiting for a reply from CakeForge to get this project up on the forge so others can help. But for now, I'll have to host it on my own. For now, you can find the project on my site, http://code.google.com/p/dojocake/. If you have any questions, you can email me at dojocake@blackfireweb.com, or comment here. I would prefer it if you comment here.

I have broken up the helpers to make it easier to work with. We'll start with the main helper, Dojo.

The Dojo helper class is the core of all the helpers. This class provides helpers to load required css files, javascript files, and inserts dojo.require statements as you use parts of dojo. Lets start with an example.

The first thing we need to do is allow the dojo helper to be used. Add 'Dojo' to the array of helpers in the app_controller.php file. Next, we need to set up our layout. In our default layout, we need to add this snippet at the top of the page:

<?php
                         $dojo->link("dojo");
                         $dojo->css("dojo");
                         $dojo->theme("Soria");
                      ?>

Open in new window

What does this do? Well, $dojo->link() is a function to add <script> tags that link javascript files to your page. By placing "dojo" as the argument, it adds the default tag, <script src"{webroot}/js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> to the _jFiles array. We'll talk about this a little bit later on.
$dojo->css() acts similar to $dojo->link in the fact that it adds the css link to the _styleSheets array. Why use this instead of $html->css()? Well, $dojo->css does a little more than simply build the link tags. When you type in the name of the css file, without the ".css" extension on the end, it will look for that file within the resources folder of the specified project. If no project is specified, it defaults to dojo. If you specify the ".css" extension, you must specify the folder reletive to the project folder.
$dojo->theme() is works like $dojo->css, except simplyfying the css required for the theme specified. The great thing about this function is the ease of changing themes. Just change "Soria" to "Tundra", and your all set!

Now that we've prepared our layout, we must apply the settings. Insert this snippet in your header:

<?php
                         echo $dojo->getCss();
                         echo $dojo->getJFiles();
                         echo $dojo->getReq();
                      ?>

Open in new window

Most of the code should be pretty self-explanitory, so I will just go over $dojo->getReq(). This function gathers all the stored dojo.require() calls. It then places these within script tags. It is very that you call this after you call $dojo->getJFiles(). The reason is, dojo.require() requires the dojo.js file to be linked and loaded before it will work. How do you add a dojo.require() call? Easy. $dojo->req($name). I.E.:

$dojo->req("dijit.layout.ContainerPane");

Open in new window

Now there is one last thing to get our CakePHP application ready to work. We must apply the theme to the page:

<body class="Soria">

Open in new window

**UPDATE**
As of version 0.0.11, you no longer have to add the class attribute to the body tag. DojoCake now does this automatically!

There we go. Now we are ready to use dojo in our CakePHP application! The finished layout:

<?php
                         $dojo->link("dojo");
                         $dojo->css("dojo");
                         $dojo->theme("Soria");
                      ?>
                      <html>
                         <head>
                            <title>Dojo Cake</title>
                            <?php
                               echo $dojo->getCss();
                               echo $dojo->getJFiles();
                               echo $dojo->getReq();
                            ?>
                         </head>
                         <body class="Soria">
                            <?php echo $content_for_layout;?>
                         </body>
                      </html>

Open in new window

Next we'll look at how to create an ajax content updater to your application!
Now to the fun part. Be sure you followed the tutorial above, or the following will not work. You will also need to add 'DojoAjax' and 'Form' helpers to your app_controller.php file.

Creating ajax forms is extremly easy. Start with a basic form:

<?php
                         echo $form->create("", array('id'=>'ajaxForm', 'url'=>'/dojo/demo'));
                         echo $form->button("Get Content");
                         echo $form->end();
                      ?>

Open in new window

It is important that you leave the arguments blank in the $form->end() function. You also need a div tag to hold the response:

<div id="ajaxResponse"></div>

Open in new window

Now to ajaxify it! Change the $form->button() to:

<?php
                         echo $form->button("Get Content", array('onclick'=>$dojoAjax->Updater("ajaxForm", "ajaxResponse")));
                      ?>

Open in new window

The $dojoAjax->Updater() function sumbits a post request to the form's url, and places the content inside the div that holds the response. It takes only 2 arguments, $formId and $divId.

That's it!! With that little bit of code, you have created a ajax content updater! Soon I will be adding tutorials for the widgets. Keep Watching!

For you lazy people, here's the final code:

<?php
                         echo $form->create("", array('id'=>'ajaxForm', 'url'=>'/dojo/demo'));
                         echo $form->button("Get Content", array('onclick'=>$dojoAjax->Updater("ajaxForm", "ajaxResponse")));
                         echo $form->end();
                      ?>

Open in new window

Comments (0)