Tuesday, June 30, 2009

Zend Framework and Dojo: configuration

Latest version of Zend framework- ZF 1.6.0 ship dojo toolkit. You can find it in ZendFramework-1.6.0/external/ directory when you download ZF.

Recently I come across a problem using third party “calendar”- Java script Calendar, and as Zend has now done collaboration with Dojo, so people using zend will definitely start using Dojo for java scripts and all other functionality Dojo is providing. And that’s why I decided to study and use Dojo and implement it in my application instead of fixing the issue in the third party calendar.

Although Zend has done excellent job and has made things quite easy for those who wish to use dojo in their applications, however novice and those with little experience may find it a bit difficult to configure Zend for Dojo.

It this post I will tell you how to configure Zend for working with Dojo.

The first and most important thing is to copy “external/dojo” into your js directory under www/public folder.

After you copy the dojo folder add the following code in your bootstrap.
    $view = new Zend_View();

$view->addHelperPath(’Zend/Dojo/View/Helper/’, ‘Zend_Dojo_View_Helper’);

$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();

$viewRenderer->setView($view);

Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);


Ignore the first line $view= new Zend_View() if you have already instantiated view object in your bootstrap file.

That’s it. You have now added path to Dojo view helpers. You can now access dojo view helpers in your template-phtml file as you access other helper files and their functionality.

You job has not done yet.

Next you would need to add path to dojo.js file and other module of the dojo toolkit.

So open your layout file and put following code.
    if($this->dojo()->isEnabled()) {

$this->dojo()->setDjConfigOption(’usePlainJson’,true)

->addStylesheetModule(’dijit.themes.tundra’)

->setLocalPath(”http://localhost/z/js/dojo/dojo/dojo.js”);

echo $this->dojo();

}


As you can see we are adding path to js and stylesheet files so put the above code in <head> tag of your layout file.

The only thing you need to do is to enable dojo in your template file.

Let suppose you have controller “IndexController”. So in the views/scripts/index/index.phtml file put the following code.
    $this->dojo()->enable()

->requireModule(”dijit.form.DateTextBox”);


I would like to explain the last line ->requireModule(’dijit.form.DateTextBox’). This line tells php to load DateTextBox. DateTextBox render textbox that display calendar when someone click on the field.

Your configuration is now completed. Now create your form as follows.
class MyForm extends Zend_Dojo_Form

{

public function init()

{
$this->setMethod('post');

$this->setName('myform');

$this->addElement(
'DateTextBox',
'foo',
array(

'label' => 'Date:',
'required' => true,
'invalidMessage' => 'Invalid date specified.',
'formatLength' => 'long',
)

);

}

}

In your controller, write
    $form= new MyForm();

$this->view->form=$form;


In your view template
 echo $this->form;


The last thing I’d mention is, In your layout file replace “body” tag with
body class=”tundra”

3 comments:

Anonymous said...

external/dojo means the dojo in the library/zend ???
thnz in advance

Anonymous said...

Great Post!! thanks i see a lot of blogs and this is the most clear and ussefull.
Only have a dubt , in my controller i'dont found the way to instanciate my form without write include_once 'forms/myfor.php' it OK.

Thanks a lot again

---------
Jasca

Anonymous said...

I am trying a demo project (Studio 7) with "Full featured Zend Framework and Dojo project" selected.

How do I configure dojo? I'm assuming it's different than what you have discribed.

Post a Comment