Zend Dojo Decorators
I’ve been having some trouble getting zend decorators to change the way a form layout displays on the page, by default zend likes to display it’s forms like this
<form>
<dl>
<dt>Label</dt><dd><input type=…></dd>
<dt>Label</dt><dd><input type=…></dd>
<dt>Label</dt><dd><input type=…></dd>
</dl>
</form>
and I wished them to be more div-y.
Unfortunately due to the complex ways of them creating horizontal sliders this wasn’t usual, so I decided to settle for a table, tr and tds, because of the strange way we’re doing the form (we start with the form hidden and reveal each question as the previous one passes validation (zend’s validators for the appearence and some custom ones before revealing the next question, stored in a hidden field)) this was actually quite tricky, especially when we had questions that didn’t need answering, so they needed to pass validation before they were even focused on so that the next field would be revealed until the time that a required question was met. It would have been a lot easier to have all the voluntary questions in one block at the end or beginning but the order of the questions was important.
So in the way of the decorators we have
$decoratorsOpen = array(
‘DijitElement’,
‘Errors’,
array(array(‘data’ => ‘HtmlTag’), array(‘tag’ => ‘td’)),
array(‘Label’, array(‘tag’ => ‘td’)),
array(array(‘row’ => ‘HtmlTag’), array(‘tag’ => ‘tr’, ‘openOnly’=>’true’, ‘class’ => ‘hiddenToReveal’, ’style’ => ‘display:none;padding:auto;’, ‘id’ => $IDName.’TR’)),
);
Fairly easy, we ignore DijitElements (because they tend to be a bit complex for our generic decorator) and errors, we find the elements regarde as data and chuck em in a td, same with the labels, we then suround the group in a tr, but with ‘openOnly’=>’true’ this means the tr only gets open and we can tack some more elements into the same tr. Set the trs class, some styling and the id of the tr, this is what gets used to identify the element to be revealed.
And then we add in a hidden element that contains the validation regex and close the tags with a similar decorator except with ‘closeOnly’=>’true’.
After all that we define some js to check the current element (onfocus, onkeyup etc) and validate and then get all the elements of class hiddenToReveal, loop through till they find the element whos predecessor is the one we just validated and reveal it to the world! (dojo.fx.wipeIn ftw)
One of the noticable things about dojo is their lovely tooltips, unfortunately they don’t always work with each element, for example datetextbox extends validationtextbox, validationtextbox has a promptmessage method for doing the tooltip, datetextbox can use this method without Eclipse or PHP complaing, but it just doesn’t display the tooltip, so we have genrerate them seperatly and add them ignoring promptmessage.
This might break mvc but I’m not sure:
In the view
foreach( $this->TooltipArray as $elementId => $tt){
echo $this->tooltip(
$elementId.”TT”,
null,
array(‘connectId’ => $elementId, ‘label’ => $tt ));}
And all we do is pass it an array of ['elementId']=’tooltip’, the tooltip itself has an id elementIdTT, the tooltip is connected to elementId and the tooltip has the value \o/
Now I get the fun of doing serverside validation and playing with dojo.xhr to submit the data. 