A quick tip on using the Dojo implementation in Zend Framework.
Yesterday I was trying to put a borderContainer on my application. Following the code samples in the manual I had it set up pretty fast in my View, but since all pages should utilize this it seemed normal to me that I would integrate this in my Zend_Layout instead of each View separately.
Thus I moved all the code to my Zend_Layout and tada … no more Dojo, it just stopped working. The code below is the (simplified) code of my Zend_Layout at that time.
< ?php
$this->headTitle()->setSeparator(' :: ');
$this->headTitle()->append('Skyrocket Admin');
echo $this->doctype() ?>
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
< ?= $this->headTitle() ?>
< ?= $this->headLink() ?>
< ?= $this->headStyle() ?>
< ?= $this->headScript() ?>
< ? $this->dojo()->setLocalPath('/admin/scripts/dojo/dojo.js')
->addStyleSheetModule('dijit.themes.tundra');?>
< ?= $this->dojo() ?>
</head>
<body class="tundra">
< ?
// Load the Dojo helpers
$this->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
// The page layout is a borderContainer, the views
// get rendered in the Center pane
$this->borderContainer()->captureStart('masterLayout',
array('design' => 'headline'),
array('style' => 'width: 100%; height: 100%'));
$this->contentPane()->captureStart('leftPane',
array('region' => 'left', 'splitter' => true),
array('style' => 'width: 200px'));
?>
<ul id="navigation" style="margin: 0">
<li><a href="/admin/pages">Pages</a></li>
<li><a href="/admin/auth/logout">Logout</a></li>
</ul>
< ?
echo $this->contentPane()->captureEnd('leftPane');
$this->contentPane()->captureStart('contentPane',
array('region' => 'center'));
echo $this->layout()->content;
echo $this->contentPane()->captureEnd('contentPane');
echo $this->borderContainer()->captureEnd('masterLayout');
?>
</body>
</html>
Back then it was almost 2AM so I didn’t feel like going after the solution. I dropped a post on Zfforums.com and went to sleep. Today on the other hand I felt like digging through the classes that are responsible for creating the dijits and it didn’t took too long to realize what was wrong.
The problem lies in the order of execution, the Zend_Dojo_View_Helper_Dojo class is responsible for outputting the javascript code that converts your basic html elements into Dijits. But in the code sample above I was outputting the dojo() helper before I was actually creating Dijits. Thus the HTML elements got created but the javascript code to convert them into Dijits is never outputted.
The solution is to simply move all your dijit creation code to the top of the page or to move the output of the dojo helper to the bottom. My advice is using the first option, simply because if you output it at the bottom you get to see the un dijitized html for a brief moment which is not nice.
Here is the working code for the borderContainer Layout in a Zend_Layout
< ?php
$this->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
$this->dojo()->setLocalPath('/admin/scripts/dojo/dojo.js')
->addStyleSheetModule('dijit.themes.tundra');
$this->borderContainer()->captureStart('masterLayout',
array('design' => 'headline'),
array('style' => 'width: 100%; height: 100%'));
$this->contentPane()->captureStart('leftPane',
array('region' => 'left', 'splitter' => true),
array('style' => 'width: 200px'));
if (Zend_Auth::getInstance()->hasIdentity()):?>
<ul id="navigation" style="margin: 0">
<li><a href="/admin/pages">Pages</a></li>
<li><a href="/admin/auth/logout">Logout</a></li>
</ul>
< ?
endif;
echo $this->contentPane()->captureEnd('leftPane');
$this->contentPane()->captureStart('contentPane',
array('region' => 'center'),
array());
echo $this->layout()->content;
echo $this->contentPane()->captureEnd('contentPane');
$data = $this->borderContainer()->captureEnd('masterLayout');
$this->headLink()->appendStylesheet($this->autover('/admin/css/style.css'));
$this->headTitle()->setSeparator(' :: ');
$this->headTitle()->append('Skyrocket Admin');
echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
< ?= $this->headTitle() ?>
< ?= $this->headLink() ?>
< ?= $this->headStyle() ?>
< ?= $this->headScript() ?>
< ?= $this->dojo() ?>
</head>
<body class="tundra">
< ?= $data ?>
</body>
</html>
I hope this helps at least some of you out, and if there are any questions or remarks i’d be glad to hear them!
