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
Tech Chorus by Sudheera Satyanarayana is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 India License.
Based on a work at techchorus.net.
Permissions beyond the scope of this license may be available at http://techchorus.net/contact.
seting the value to DateTextBox
Hi , Thank you for the wonderful post. I have integrated the element very easily, But I have a problem while setting the default value to the element.
We normally use
$formElement->setValue('value'); to set the value of that particular element, but when I do the same thing for dojo DateTextBox then nothing happens. I cant set the value to the element. Please post how to set the value to DateTextBox.
Thank You very much
While setting the value to a
While setting the value to a Zend_Dojo_Form_Element_DateTextBox make sure it is in the correct format. The default is yyyy-mm-dd.
Sudheer
Binary Vibes
Great, if it worked....
This is a great tutorial, however it doesnt work. As it is, it barfs on the 'echo $this->dojo();' call that is embedded in the section of layout.phtml. The error stack:
Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'Dojo' was not found in the registry,...'
...
[internal function]: Zend_View_Abstract->__call('dojo',Array)
/myapp_app/layouts/layout.phtml(5): Zend_View->dojo() ...
Set the view to your view renderer
It appears your application is not using the $view object which you are Dojo enabling.
Try this in your bootstrap and let us know what happens:
<?php$view = new Zend_View();
Zend_Dojo::enableView($view);
$viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
$viewRenderer->setView($view);
?>
Sudheer
Binary Vibes
Updated
The code in the article has been updated to set the $view object to the view renderer.
Sudheer
Binary Vibes
Help!
It doesn't work for me! I'm a noob on Zf can u help me.. I got this on my Bootstrap but it doesn't work...
function _initViewHelpers() { // Initialize view $view = new Zend_View(); $view->doctype('XHTML1_STRICT'); $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8'); $view->headTitle()->SetSeparator(' - '); $view->headTitle('DSinf'); Zend_Dojo::enableView($view); $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer'); $viewRenderer->setView($view); return $view; }It lunch a Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name 'Dojo' was not found in the registry. when I put on my layout echo $this->dojo();
thx
Many, many thanks
Many, many thanks
DOJO Date picker
Hi
I am using the same,
I am getting digiit.css error : " Expected declartion but found "#some id" "
and also this is not working in IE , im getting JS error :" dojo is undefined "
Can you help me ??
Thanks
Haja
What if I am not using a form
Hi Sudeer,
Do you have the equivalent example for someone who is not using a form?
What if I want a view with bordercontainer. I am trying to get one to work and I'm not really successful so far. I have the equivalent of your example with a form, works A ok but when it comes to using a view directly, no such luck do you have any advice?
This is the content of my index.phtml:
<?php $this->dojo()->enable() ->setDjConfigOption('parseOnLoad',true) ->requireModule('dijit.form.DateTextBox') ->requireModule('dijit.layout.BorderContainer'); $this->borderContainer()->captureStart('masterLayout', array( 'design' => 'headline', 'persist' => true), array('style' => 'width: 100%; height: 100%;') ); $this->contentPane()->captureStart('titlePane', array('region' => 'top')); // Start title pane capture ?> <h1>My Custom CMS</h1> <?php $this->contentPane()->captureEnd('titlePane'); $this->borderContainer()->captureEnd('masterLayout'); ?> <code>abt this page info
hey it is really very good and very usefull too!!
cheers
The tundra class on body it's
The tundra class on body it's a thing I always forgot... Good post. Zend_Dojo is wonderful.
You're welcome, Giorgio.
You're welcome, Giorgio.
Zend_Dojo is indeed a cool component.
Sudheer
Binary Vibes
Post new comment