Zend Framework and Dojo
Posted by Faheem Abbas on October 27, 2008
“Sorry this blog is deprecated”
“Read this article here .” http://zendgeek.blogspot.com/2009/06/zend-framework-and-dojo-configuration.html
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.
Ignore the first line $view= new Zend_View() if you have already instantiated view object in your bootstrap file.
<body class=”tundra”>. Thats it you will now have a page like the following
David Tay said
Thanks, this was extremely helpful.
Mike said
Well done for this tutorial. I have searched for a longtime before I read it. Thanks a lot !!
Thang said
Why I do exactly what you said in this entry but my DateTextbox does not work?
I used ZF 1.7 and have some ajax function using DOJO in my app.
Thanks
Form with Dojo - Zend Framework Forum said
[...] with Dojo Hey all, I’ve followed this tutorial but after completing exactly what they said, I can not make it work. Does anyone have the same [...]
Faheem Abbas said
Dear Thang,
I have tested this example and then written article, you can see the comments of two other developers. they may have tested it too.
Please tell me what error you encounterd.
frq said
hey,
got some problems with that too. Probably i’m doing something wrong, but i’m getting exception at:
$this->addElement(…) in MyForm.php
From what i’ve seen in the debugger, the function is trying to find ‘DateTextBox.php’ somewhere in my ZF’s library/zend/form/ directory. Why is it looking for .php file in the first place? And why there, and not in dojo directory tree?
I can’t get why the location of DateTextBox is set after and not before running addElement() – in the View (index.phtml), function requireModule. Maybe that code should be placed elsewhere?
Maybe that all sounds lame but i’m total beginner with Zend, started today:) thanks in advance if you can help me though,
Greetings
PS. why do you post code as images?
Faheem Abbas said
Yes when you use dojo in Zend, Zend will look for dojo view helpers when rendering form. It will look dojo helper in the library/Zend/Dojo directory. so this directory must be present in your library/zend folder. if not then you probably using old version of Zend. so get the latest version of the Zend.
If the directory is there, your directory structure may be different from the one i have and you may not be configuring your bootstrap and your layout files correctly.
It is also important to set valid path to your dojo.js and your css file.
goto your dojo.js file, open it and place alert(‘dojo’); at the top. if browser alert the message it means your dojo.js file is successfully added otherwise not.
If you still find bugs please post your code in the bootstrap file, your directory structure and code in the layout file and view template file, so that i give you more explanation.
Thang said
Thanks Faheem Abbas for your quick reply both here and in ZFforum (and sorry for any bad feeling if you faced by my question).
Actually I don’t have any output error. When I use Firebug, I see some JS error:
http://localhost/math/public/js/dojo/dijit/form/nls/en/validate.js 404
http://localhost/math/public/js/dojo/dijit/form/nls/en-us/validate.js 404
http://localhost/math/public/js/dojo/dijit/form/templates/ValidationTextBox.html 404
Firebug needs to POST to the server to get this information for url:
http://localhost/math/public/js/dojo/dijit/form/templates/ValidationTextBox.html
This second POST can interfere with some sites. If you want to send the POST again, open a new tab in Firefox, use URL ‘about:config’, set boolean value ‘extensions.firebug.allowDoublePost’ to true
This value is reset every time you restart Firefox This problem will disappear when https://bugzilla.mozilla.org/show_bug.cgi?id=430155 is shipped.
I use this tutorial by adding to my existing code, not build this example alone.
Thanks for your help
Faheem Abbas said
No bad feeling at all. I am here to help you and other developers.
Anyhow I will feel good if your problem has solved.
Thanx
Magnums said
I’m newbie for ZF. I followed this tutorial but not sucessed.
i saw the DateTextBox on broswer. but java scripts form dojo not working.
There is no calendar like tutorial appear. Why?
I’d also notice, May this line typo:
echo $form;
it’s should be:
echo $this->$form
Thank in advance.
Faheem Abbas said
Yeah. echo $form is typo. thanks for correction.
If you have any javascript error, it means
1. you don’t have latest version of ZF. should be > 1.6.
2. your local path to dojo.js is not correctly defined.
Please tell me your error and let me check what is causing the bug.
Magnums said
Hi,
I’m sure to made the following of tutorial. but dojo still seem not work. it’s only have text box without calendar.
I used “ZendFramework-1.7.3PL1″ and my web root is “/home/demo1/htdocs”
then copy “ZendFramework-1.7.3PL1/externals/dojo” to “htdocs/js/” which have structure as below:
root [ /home/demo1/htdocs ]# ls -l js/dojo/
total 3
drwxrwxr-x 14 apache apache 376 2009-01-21 20:43 demos
drwxrwxr-x 12 apache apache 960 2009-01-21 21:01 dijit
drwxrwxr-x 13 apache apache 1064 2009-01-21 21:01 dojo
drwxrwxr-x 48 apache apache 1824 2009-01-21 20:32 dojox
drwxrwxr-x 6 apache apache 184 2009-01-21 21:01 util
root [ /home/demo1/htdocs ]#
So i decided to posting our files as the following:
==========================================================================
.htaccess
==========================================================================
RewriteEngine on
RewriteRule !\.(js|ico|txt|gif|jpg|png|css)$ index.php
==========================================================================
bootstrap:
==========================================================================
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);
//Zend_Dojo::enableView($view);
//$view->dojo()->setDjConfigOption(‘usePlainJson’, true)
// ->addStylesheetModule(‘dijit.themes.tundra’)
// ->addStylesheet(‘/js/dojo/dojox/grid/_grid/tundraGrid.css’)
// ->setLocalPath(‘/js/dojo/dojo/dojo.js’)
// ->enable();
// load configuration
$config = new Zend_Config_Ini(‘../application/config.ini’, ‘general’);
$registry = Zend_Registry::getInstance();
$registry->set(‘config’, $config);
// setup database
$db = Zend_Db::factory($config->db);
Zend_Db_Table::setDefaultAdapter($db);
Zend_Registry::set(‘db’, $db);
//get the front contorller instance
$front = Zend_Controller_front::getInstance();
$front->throwExceptions(true);
$front->setControllerDirectory(‘../application/controllers’);
//Go Go Go
$front->dispatch();
?>
==========================================================================
models/MyForm.php
==========================================================================
setname(‘upload’) ;
$this->setAttrib(‘enctype’, ‘multipart/form-data’);
$this->addElement(
‘DateTextBox’,
‘foo’,
array(
‘label’ => ‘Date: ‘,
‘required’ => true,
‘invalidMessage’=> ‘Invalid date specified’,
‘formatLength’ => ‘long’,
)
);
}
}
?>
==========================================================================
controllers/IndexController.php
==========================================================================
view->form=$form;
}//index
}//main
?>
==========================================================================
index.phtml
==========================================================================
dojo()->isEnabled()) {
$this->dojo()->setLocalPath(‘js/dojo/dojo/dojo.js’)
->addStyleSheetModule(‘dijit.themes.tundra’);
echo $this->dojo();
}
?>
dojo()->enable()
->setDjconfigOption(‘paeseonLoad’, true)
->requireModule(‘dijit.from.DateTextBox’);
?>
form ; ?>
=======================================================================
Sorry for long posting text.
Thank you in advance.
Magnums
Faheem Abbas said
Dear Magnums,
At first glance all code seems to me correct, however you should consider two things.
1. open js/dojo/dojo.js and write
alert(‘dojo loaded’);
at the start of the file.
if browser alert the message, it means you are successfully loading dojo.js file.
if not, please set your local path to dojo.js file correctly, so that it alert the above message.
2. change your .htacess file to
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.php
And better read me article
http://zendguru.wordpress.com/2008/11/17/zend-framework-and-dojo-javascript-error/
Magnums said
hi,
After change .htaccess and put alert to dojo.js then i put code below between . Now my browser showed the “dojo loaded” windows alert. but text box still not show calendar. Why?
===============
dojo()->enable()
->setDjconfigOption(‘paeseonLoad’, true)
->requireModule(‘dijit.from.DateTextBox’);
$this->dojo()->setLocalPath(‘/js/dojo/dojo/dojo.js’)
->addStyleSheetModule(‘dijit.themes.tundra’);
echo $this->dojo();
?>
form ; ?>
============
Thank you in advance.
Marian said
Hi all,
I had exactly the same problem like Magnums, that means: text box still not show calendar.Im using ZendFramework-1.7.2. Everythink I have checked a lot of times.
===============
Thank you for your answer.
Magnums said
Hi,
Wow, It’s work now!!!.
There are changing in two places.
Bootstrap:
$layout = Zend_Layout::startMvc();
$layout->getView()->addHelperPath(‘Zend/Dojo/View/Helper/’, ‘Zend_Dojo_View_Helper’);
.htacces:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ – [NC,L]
RewriteRule ^.*$ index.php [NC,L]
Recommended link:
http://www.roetgers.org/2008/08/20/my-very-first-steps-with-zend_dojo/
Enjoy
Step by step for setting up dojo for use with forms? - Zend Framework Forum said
[...] Ah – this helped: Zend Framework and Dojo Zend Framework [...]
kaushik said
Hi
I get javascript error;
my script successfully inclue js/dojo/dojo.js file.
also alert display with wirte in dojo.js file.
Could not load ‘dijit.form.DateTexBox’;last tried’../dijit/form/DateTexBox.js
http://localhost/zend/public/js/dojo/_base/_loader/loader.js
can help me?
Faheem Abbas said
Read this tutorial. hopefully this will help you out.
http://zendguru.wordpress.com/2008/11/17/zend-framework-and-dojo-javascript-error/
kaushik said
i,
Thanks for Reply.
I cahange in .htaccess file still error come.
javascript error:
Could not load ‘dijit.form.DateTexBox’;last tried’../dijit/form/DateTexBox.js
http://localhost/zend/public/js/dojo/_base/_loader/loader.js
Below is my project structure and code
can you please help me where its wrong.
//—————————————//
index.php
//—————————————//
set(‘config’, $config);
// setup database
$db = Zend_Db::factory($config->db);
Zend_Db_Table::setDefaultAdapter($db);
// setup controller
$frontController = Zend_Controller_Front::getInstance();
$frontController->throwExceptions(true);
$frontController->setControllerDirectory(‘../application/controllers’);
Zend_Layout::startMvc(array(‘layoutPath’=>’../application/layouts’));
//—Dojo——-//
$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);
//– End Dojo ———-//
// run!
$frontController->dispatch();
//—————————————//
JobsController.php
//—————————————//
view->form=$form;
}
}
//—————————————//
MyForm.php
//—————————————//
addElementPrefixPath(‘App’, ‘/library/App’);
parent:: _construct( $options );
$this->SetName(‘upload’);
$this->setAttrib(‘enctype’, ‘multipart/form-data’);
$this->addElement( ‘DateTexBox’, ‘foo’,
array(
‘label’ => ‘Date:’,
‘required’ => true,
‘invalidMessage’ => ‘Invalid Date specified’,
‘formatLength’ => ‘long’,
)
);
}
}
//—————————————//
layout.phtml
//—————————————//
dojo()->isEnabled() )
{
$this->dojo()->setLocalPath( $this->baseUrl().’/js/dojo/dojo/dojo.js’ )
->addStyleSheetModule(‘dijit.themes.tundra’);
echo $this->dojo();
}
?>
escape($this->title); ?>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”baseUrl();?>/css/site.css” />
<link rel=”stylesheet” type=”text/css” href=”baseUrl();?>/css/style.css” />
escape($this->title); ?>
layout()->content; ?>
//—————————————//
index.phtml ( view/scripts/jobs/ )
/—————————————//
dojo()->enable()
->setDjConfigOption(‘parseOnLoad’,true)
->requireModule(‘dijit.form.DateTexBox’);
?>
form ;
?>
//——————————- //
.htaccess
//——————————–//
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.php
Faheem Abbas said
Dear,
I have already written in my comments above that you need to make sure your js files successfully loaded.
you can check this by adding in “alert” in your required files. if alert successfully executed it means that browser is loading files successfully.
If not, it means you have problems in setting your path to those files.
I therefore suggest you to set an absolute path like
“http”//localhost/zend/dojo/dojo.js”.
Kaushik,
You have used different directory structure than me. so it will difficult for me to make the same directory structure as yours. So it will be better to make zip of your directory structure and send that to me.
I will be able to help you then.
You can upload that zip on rapid share or 4shared.com, or any other place and can tell me url once the zip is uploaded.
Keep in mind that don’t include “Zend” and “dojo” directory etc, because that will take extra time in downloading.
Marin said
Hi,
Thanks for your very simple and clear tutorial. Unfortunately it doesn’t work for me. Dojo is loading successfully (I have put an alert at the beginning of dojo.js and it popup as expected).
I’m getting the following error message at the point I’m inserting the form :
Notice: Undefined variable: form in /home/www/6a2aea778e8c25ca266df80cfda61798/web/mbr/application/views/scripts/index/index.phtml on line 34
Here are my files :
[.htaccess]
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ – [NC,L]
RewriteRule ^.*$ index.php [NC,L]
[index.php]
set(‘config’, $config);
// Mise en place de la BDD
$db = Zend_Db::factory($config->db);
Zend_Db_Table::setDefaultAdapter($db);
// Mise en place du contrôleur
$frontController = Zend_Controller_Front::getInstance();
$frontController->throwExceptions(true);
$frontController->setControllerDirectory(‘./application/controllers’);
Zend_Layout::startMvc(array(‘layoutPath’=>’./application/layouts’));
// Mise en place du helper Dojo
$view = Zend_Layout::getMvcInstance()->getView();
$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);
// run!
$frontController->dispatch();
[IndexController.php]
…
function indexAction()
{
$this->view->title = “Mes albums”;
$album = new Albums();
$this->view->albums = $album->fetchAll();
$form = new MyForm();
$this->view->form = $form;
}
…
[index.phtml]
…
$form;
?>
…
Could you please try to help me?!
Thanks a lot and best regards,
Marin
Faheem Abbas said
[index.phtml]
…
$form; // please replace this
?>
with
[index.phtml]
…
echo $this->form;
?>
It will definitely work.
Actually it was not your fault, I was missing “$this” in my example. I have fixed the code in my article now.
Marin said
You saved my life
Thanks a lot!
Jim said
Is anyone else having issues with putting anything inside the layout.phtml for using dojo controls there? I am trying to use the bordercontainers and content panes, with no luck. Getting error about class/id already registered.
Faheem Abbas said
Jim,
you might be giving same name/id to more than one elements.
Jim said
Thanks, I checked that. I think it has something to do with the way Zend puts the viewscripts into the layout. The reason I say this is that if I take any dojo elements out of the layout.phtml file, all viewscripts work fine.
If I put them in the layout.phtml file, I can only open pages (viewscripts) that do NOT have dojo in them.
I’ve tested this with some pretty simple stuff.
Here is my example:
Layout uses dojo border containers and content pages, declaratively. Right in the layout.phtml, not through startCapture/endCapture stuff.
The viewscript has nothing in it other than a form, which is a Zend_Dojo_Form, has 3 elements on the form (user/password/remember me). The main page doesn’t have any elements aside from border container, content, tabcontainer and accordian.
I have been banging my head over this for about 2 days. Nothing.
I am about to revert my layout.html back to jquery.layout, but I would really like to get this working in Zend / Dojo as a standard platform.
Thomas Lang said
Hi, thanks a lot for the good tutorial, it helped me a lot !
dipanwita said
Hi,
Your tutorial is good.
I wanna implement Zend-Dojo form.My form elements are shown but validation is not working.Please help.
Is it possible for you to help me the step by step.
Please help me.
Thanks in advance.
JR said
Hi,
is there a specific reason you posted pictures of the code and not the code itself. Just trying to understand the logic behind that.
Thanks,
JR