Add A Cool Zend Dojo Date Picker Form Element Without Writing A Single Line Of JavaScript

Zend Framework users know that Dojo toolkit is integrated to 1.6+ release. In the previous post I demonstrated how to add a cool Dojo date picker widget to your text input form element by manually typing the JavaScript code. In this post let us discover how to create a cool date picker form element with Zend_Dojo. As the title says you don't have to write a single line of JavaScript. Zend_Dojo does all the work for you.

Prerequisite: you are familiar with Zend_Form, Zend_Controller and Zend_Layout.

Bootstrap: Zend Framework comes with many Dojo specific view helpers. You have to instruct the view object to find Dojo view helpers.

Grab the view object and add the following line in your bootstrap file.

<?php
// Create new view object if not already instantiated  
//$view = new Zend_View();

Zend_Dojo::enableView($view);
$viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
$viewRenderer->setView($view);

?>

This sets up the Dojo environment and uses AOL CDN by default. This is a one time configuration for your application. You can make use of dojo view helper methods available to specify whether to use a CDN or a local path to a Dojo install, paths to custom Dojo modules, dojo.require statements, dijit stylesheet themes to use and to create dojo.addOnLoad() events.

Creating the form:

<?php
        $form = new Zend_Form;

        $name = $form->createElement('text', 'name')
                        ->setLabel('Your full name')
                        ->setRequired(true);
        
?>

The above code creates a new form object and a text element. In the next step we create the date picker with similar methods.

Let us call our date picker element 'birthday'. We make use of the DateTextBox Dojo widget in this example.

<?php     
                                                                                              
        $birthday = new Zend_Dojo_Form_Element_DateTextBox('birthday');
        $birthday->setLabel('Birthday');

?>

The above two lines create the DateText box form element and sets the label 'Birthday' to it. This generates the following roughly equivalent output when you print the form.

<!-- indicative output -->
<input type="text" name="date"  dojoType="dijit.form.DateTextBox" />

Create a submit element and add the elements to the form.

<?php
        $submit = $form->createElement('submit', 'submit');

        $form->addElements(array($name, $birthday, $submit));

?>

We are done with creating the form. I have posted the complete controller code below which has a function to create the form.

<?php
class IndexController extends Zend_Controller_Action
{
    public function indexAction()
    {
        // Call the getForm function
        $form = $this->getForm();

        if ($this->_request->isPost()) {

            if ($form->isValid($_POST)) {
                // Process data
                // Pass the name and birthday values to the view so that
                // You can display them in the view
                $this->view->name = $this->_getParam('name');
                $this->view->birthday = $this->_getParam('birthday');
            } else {
               //If form validation fails populate and display the form again
               $form->populate($_POST);

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

        } else {
           //If the request is not post display the form
           $this->view->form = $form;
        } 
    }


    // Function to create the form
    public function getForm() 
    { 
        $form = new Zend_Form;

        $name = $form->createElement('text', 'name')
                        ->setLabel('Your full name')
                        ->setRequired(true);
                                                                                                            
        $birthday = new Zend_Dojo_Form_Element_DateTextBox('birthday');
        $birthday->setLabel('Birthday');

        $submit = $form->createElement('submit', 'submit');

        $form->addElements(array($name, $birthday, $submit));
        // We already discussed that the above code does
        return $form;
    }

}
?>

When the form is submitted we can access the name and birthday values via the usual $this->_getParam() method. In our controller we pass the name and birthday values to the view so that we can print them in our view.

Add the following code to your view file to display the name and birthday values supplied by the user.

<?php 
    echo "Your name is " . $this->name . "<br>";
    echo "Your birthday is " . $this->birthday . "<br>";
    echo $this->form ;
?>

In your layout script, you have to add the stylesheet modules and print the dojo object. In this example we use tundra stylesheet.

<?php
<title>
<?php echo $this->escape($this->pageTitle); echo " - Binary Vibes BizSense"; ?></title>
        <?php echo $this->dojo();
             echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');

       ?>
</title>
?>

Remember to set the body class to tundra.

<body class="tundra">
 
 <div id="content">
            <?php  echo $this->layout()->content ?>
 </div>

I have published the complete layout example script below for your reference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Binary Vibes BizSense</title>
        <?php echo $this->dojo();
             echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');
         ?>
</head>
<body class="tundra">
  <div id="content">
            <?php  echo $this->layout()->content ?>
        </div>
</body>
</html>

That is all there is to it to use Dojo form widgets in your Zend Framework powered application.

Reference:
Zend_Dojo - http://framework.zend.com/manual/en/zend.dojo.html
Dojotoolkit - http://dojotoolkit.org/
Plain HTML and JavaScript DateTextBox usage example - http://techchorus.net/add-cool-date-picker-2-lines-javascript