Add A Cool Zend Dojo Date Picker Form Element Without Writing A Single Line Of JavaScript
Submitted by Sudheer on Sun, 09/21/2008 - 16:44.
The above code creates a new form object and a text element. In the next step we create the date picker with similar methods.
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.
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);
?>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.
<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://lampcomputing.com/add-cool-date-picker-2-lines-javascript
Bookmark/Search this post with:
works fine, but only on one action
Hi,
I´m learning in ZF ... I have app with some controllers etc ... I followed your instructions and it goes fine - but only in one action, where I have form with dojo form element. At any other pages in my app wrotes mi this error:
Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name Dojo was not found in the registry.'I tried to comment lines in my layout.phtml
echo $this->dojo(); echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');and than works all pages fine, but dojo on the page with form didnt work ...
Can anyone help me please?
PS: sorry for my bad english:)
Hi iki. Try to remove the
Hi iki.
Try to remove the following code from your bootstrap file:
Zend_Dojo::enableView($view);Modify your IndexController:
class IndexController extends Zend_Controller_Action
{
public function init()
{
...
Zend_Dojo::enableView($this->view);
}
Be careful! It's NOT $view!!! It's $this->view!!!
re:
still same error ... I tried to add condition to my layout.phtml
if($this->dojo()->isEnabled()){echo $this->dojo();
echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');}
but it´s like allways enabled, so it´s useless
Comment edited
HTML tags won't work within code block on this site!
With warm regards,
Sudheer
Re: works fine, but only on one action
I suspect your Dojo bootstrap setup.
When you added the code Zend_Dojo::enableView($view); to your view, did the $view object exist prior to this? Also which version of ZF are you using?
With warm regards,
Sudheer
re: re:
wow, I dont expect such a quick responce, thx. ZF version is 1.6.1, bootstrap code:
<?php
error_reporting(E_ALL|E_STRICT);
//turn off error_reporting(0);
ini_set('display_errors', 1);
date_default_timezone_set('Europe/London');
// directory setup and class loading
set_include_path('.' . PATH_SEPARATOR . './library/'
. PATH_SEPARATOR . './application/models'
. PATH_SEPARATOR . get_include_path());
include "Zend/Loader.php";
Zend_Loader::registerAutoload();
// setup controller
$frontController = Zend_Controller_Front::getInstance();
$frontController->throwExceptions(true);
$frontController->setControllerDirectory('./application/controllers');
$frontController->setBaseUrl('/new');
// používaný layout
Zend_Layout::startMvc(array('layoutPath'=>'./application/layouts'));
// action helper inicializace adresá?e
Zend_Controller_Action_HelperBroker::addPath('./application/controllers/helpers', 'My');
// inicializace dojo toolkitu
$view = new Zend_View();
Zend_Dojo::enableView($view);
// run!
$frontController->dispatch();
Great Article
Fantastic article. Explains in simple terms how to get Dojo going with ZF. Other examples have a tendency to over-complicate what is such a simple proceedure.
Well done!
Colin
Thanks for the comment
Hey Colin,
Thanks for the comment.
With warm regards,
Sudheer
This article translated into french
To french readers:
Je tiens à remercier Sudheer qui m'a autorisé à traduire son excellent article. Vous pourrez en trouver la traduction française sur le blog d'itanea
To English readers :
I want to thank Sudheer who gave me permission to translate into french his excellent article. You can find the French translation on Itanea blog. I hope this can help someone.
Bests Regards,
Elkolonel
Thanks for the translation,
Thanks for the translation, Fred.
With warm regards,
Sudheer
Post new comment