Home > Zend_Form > Using Dojo Widget with Zend_Form

Using Dojo Widget with Zend_Form

intro
This article shows usage of Dojo widgets(dijit) with Zend_Form. Using dijit, it is possible to input date with calendar etc.
You can see the screens from the demonstration site.

1.Create Controller
Create the file application/constorllers/DojoController.php with the following content.

<?php
require_once 'Zend/Controller/Action.php';
require_once 'Zend/Form.php';
require_once 'Zend/Locale.php';
 
class DojoController extends Zend_Controller_Action
{
    public function getForm()
    {
        $form = new Zend_Form();
        $form->setName('calendarForm')
             ->setAction($this->_request->getBaseUrl() . '/dojo/index')
             ->setMethod('post');
 
        $decorators = array(
            'ViewHelper',
            array('HtmlTag', array('tag' => 'dt', 'class' => 'submit'))
        );
 
        $options = array(1=>'red', 'green', 'blue');
 
        $element = $form->createElement('select', 'color');
        $element->setLabel('Color')
                ->setAttrib('dojoType', array('dijit.form.FilteringSelect'))
                ->setRequired(true)
                ->setMultiOptions($options)
                ->addValidator('inArray', false, array(array_keys($options)));
        $form->addElement($element);
 
        $element = $form->createElement('multiCheckbox', 'color2');
        $element->setLabel('Color2')
                ->setAttrib('dojoType', array('dijit.form.CheckBox'))
                ->setRequired(true)
                ->setMultiOptions($options)
                ->addValidator('inArray', false, array(array_keys($options)));
        $form->addElement($element);
 
        $element = $form->createElement('text', 'calendar');
        $element->setLabel('Date')
                ->setAttrib('dojoType', array('dijit.form.DateTextBox'))
                ->setAttrib('constraints', "{datePattern:'yyyy-MM-dd'}")
                ->setRequired(true)
                ->addFilter('stringTrim')
                ->addValidator('date');
        $form->addElement($element);
 
        $element = $form->createElement('text', 'time');
        $element->setLabel('Time')
                ->setAttrib('dojoType', array('dijit.form.TimeTextBox'))
                ->setAttrib('constraints', "{timePattern:'HH:mm:ss'}")
                ->setRequired(true)
                ->addFilter('stringTrim')
                ->addValidator('regex', false,
                        array('/^T([0|1]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$/'));
        $form->addElement($element);
 
        $element = $form->createElement('text', 'number');
        $element->setLabel('Number')
                ->setAttrib('dojoType', array('dijit.form.NumberTextBox'))
                ->setAttrib('editOptions', "{pattern:'#.##'}")
                ->setRequired(true)
                ->addFilter('stringTrim')
                ->addValidator('float');
        $form->addElement($element);
 
        $element = $form->createElement('text', 'currency');
        $element->setLabel('Currency')
                ->setAttrib('dojoType', array('dijit.form.CurrencyTextBox'))
                ->setAttrib('currency', "USD")
                ->setRequired(true)
                ->addFilter('stringTrim')
                ->addValidator('float');
        $form->addElement($element);
 
        $element = $form->createElement('text', 'numberSpinner');
        $element->setValue('10')
                ->setLabel('Number')
                ->setAttrib('dojoType', array('dijit.form.NumberSpinner'))
                ->setRequired(true)
                ->addFilter('stringTrim')
                ->addValidator('digits');
        $form->addElement($element);
 
        $submit = $form->createElement('submit', 'submit');
        $submit->setLabel('Send')
               ->setDecorators($decorators);
        $form->addElement($submit);
 
        return $form;
    }
 
    public function indexAction()
    {
        $form = $this->getForm();
        if ($this->getRequest()->isPost())
        {
            if ($form->isValid($_POST))
            {
                $values = $form->getValues();
                $this->view->values = $values;
            }
        }
        $this->view->form = $form;
    }
}
2.Create View
Create the file application/views/scripts/dojo/index.phtml with the following content.

 
<h1><?= $this->translate('Dojo Widget Samples '); ?></h1>
 
<?php if($this->values) : ?>
<h3><?= $this->translate('You just submitted the following values'); ?>:</h3>
<dl>
  <?php foreach ($this->values as $key => $value) <img src='http://www.oplabo.com/wp-includes/images/smilies/icon_confused.gif' alt=':?' class='wp-smiley' /> >
<dt><?=$this->escape($key); ?></dt>
 
<?php if (is_array($value)) : ?>
<dd><?= $this->escape(implode(',', $value)); ?></dd>
 
<?php else : ?>
<dd><?= $this->escape($value); ?></dd>
 
<?php endif; ?>
  <?php endforeach; ?>
</dl>
 
<?php else : ?>
    <?= $this->form; ?>
<?php endif; ?>
<style type="text/css">
@import "<?= $this->baseUrl ?>/js/dijit/themes/tundra/tundra.css";
</style>
 
<script type="text/javascript">
var djConfig = {
    isDebug:true, parseOnLoad:true
};
</script>
<script type="text/javascript" 
    src="<?= $this->baseUrl . '/js/dojo/dojo.js'?>"></script>
<script type="text/javascript">
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dijit.form.NumberSpinner");
</script>

And speficy the style class of body tag.

<body class="tundra">

3.Check
Access the web server and check the dojo widgets.
History
Date Content
2008/4/30 Published

Comments:5

Nicolas 08-04-30 (Wed) 11:49

hi, what about showing some examples using YUI (there is no example on the net) as it’s becoming a major javascript framework.

Best regards,

Nicolas

zemiak 08-06-25 (Wed) 15:43

Hello. Where in the code can I define the body class?

oplabo 08-06-26 (Thu) 14:18

Hello.
If you use layout file, you can write the body class in it.
Otherwise you can write directly the body class in dojo/index.phtml.
About using layout file, please see Programmer’s Reference guide(20.Zend_Layout) or Simple Layout using Zend_Layout.

Thank you.

Max 09-08-19 (Wed) 4:55

You should render your form before the viewscript then all you need to do is a:
if ($this->dojo()->isEnabled()){
echo $this->dojo();
}

And you skip the part with the dojo.require() etc. I would also stress the importance of giving the form a unique name to allow programmatic initialization (as correctly provided in the tutorial).

oplabo 09-08-26 (Wed) 23:14

Thank you for your good advice, and latest information.

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.oplabo.com/article/38/trackback
Listed below are links to weblogs that reference
Using Dojo Widget with Zend_Form from Open Programming Laboratory

Home > Zend_Form > Using Dojo Widget with Zend_Form

Japanese
Search
Feeds

Return to page top