Zend Dojo Form

31 Oct

As I have already discussed Dojo integration with Zend Framework in my previous post- Zend Framework and Dojo. In this post I going to show you the power of Dojo in zend. You can create a very fancy forms using Zend and Dojo. Just see the following figure.

Dojo Form

Dojo Form

You can see we have created above form with DateTextBox, CheckBox, NumberSpinner and HorizonalSlider. These are looking great and may be quite helpful in your applications.

To create above form in Zend you will need to make some necessary configuration. See my post https://zendguru.wordpress.com/2008/10/27/zend-framework-and-dojo/ for the configuration of Dojo with zend. Once you finish your configuration, add following code to your application

<?php
class DojoForm extends Zend_Dojo_Form
{
public function init()
{

$this->setAction(‘your/action/page/path’);

$this->setMethod(‘post’);
$this->addElement(

‘DateTextBox’,
‘creationdate’,

array(
‘label’          => ‘Date:’,
‘required’       => true,
‘invalidMessage’ => ‘Invalid date specified.’,
‘formatLength’   => ‘long’,

)
);
$this->addElement(

‘ComboBox’,
‘box’,
array(

‘label’ => ‘Gender’,
‘checkedValue’=>’0’,
‘unCheckedValue’=>’1’,
‘checked’ => true,
‘multiOptions’ => array(
‘0’ => ‘Male’,
‘1’ => ‘Female’

)
));
$this->addElement(

‘NumberSpinner’,
‘spinner’,
array(

‘label’ => ‘Age:’,
‘value’ => 2,
‘min’    => -10,
‘max’    => 10,
‘places’ => 2),
array(
)

);
$this->addElement(
‘HorizontalSlider’,
‘horizontal’,

array(
‘label’                     => ‘HorizontalSlider’,
‘value’                     => 5,
‘minimum’                   => -10,
‘maximum’                   => 10,
‘discreteValues’            => 11,
‘intermediateChanges’       => true,
‘showButtons’               => true,
‘topDecorationDijit’        => ‘HorizontalRuleLabels’,
‘topDecorationContainer’    => ‘topContainer’,
‘topDecorationLabels’       => array(

‘ ‘,
‘20%’,
‘40%’,
‘60%’,
‘80%’,
‘ ‘,
),

‘topDecorationParams’      => array(

‘container’ => array(

‘style’ => ‘height:1.2em; font-size=75%;color:gray;’,

),

‘list’ => array(
‘style’ => ‘height:1em; font-size=75%;color:gray;’,
),

),
‘bottomDecorationDijit’     => ‘HorizontalRule’,
‘bottomDecorationContainer’ => ‘bottomContainer’,
‘bottomDecorationLabels’    => array(

‘0%’,
‘50%’,
‘100%’,

),
‘bottomDecorationParams’   => array(

‘list’ => array(
‘style’ => ‘height:1em; font-size=75%;color:gray;’,
),
),

)
);

}
}
?>

First we extend our form from Zend_Dojo_Form instead of simple Zend_Form. We then override init method of Zend_Dojo_Form. In the next few lines we are setting form action and method attributes. These are self explanatory.

The next lines are important, because we are defining and adding dojo form elements. These line are also self explanatory. However to beginner and novice I would suggest reading my article on Zend Forms.

Advertisements

2 Responses to “Zend Dojo Form”

  1. rndm April 29, 2009 at 3:44 pm #

    hi Faheem Abbas
    could you give your source.

  2. Iqbal April 1, 2011 at 12:02 pm #

    Its definitely a nice one for learning the dojo form element in zend but really a painful one for me that i cant make any action for submit button . What will be the solution..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: