<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Dojo Cake

Published on
10,015 Points
4,015 Views
Last Modified:
Approved
Community Pick
***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

0
Comment
Author:LordZardeck
0 Comments

Featured Post

Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

Join & Write a Comment

Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month