Zend FormでのDojoウィジェットの使用

intro

Zend_FormでDojoウィジェット(dijit)を使用します。dijitによりカレンダーによる日付入力などが実現できます。
動作確認はデモサイトよりできます。

1.コントローラの作成

以下のようにapplication/constorllers/DojoController.phpファイルを作成します。

<?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;
    }
}

100

101

102

103

104

105

<?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.ビューの作成

以下のようにapplication/views/scripts/dojo/index.phtmlファイルを作成します。

<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) :?>
  <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>

<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) :?>

<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; ?>

@import "<?= $this->baseUrl ?>/js/dijit/themes/tundra/tundra.css";

</style>

var djConfig = {

isDebug:true, parseOnLoad:true

};

</script>

src="<?= $this->baseUrl . '/js/dojo/dojo.js'?>"></script>

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>

また以下のようにbodyタグのスタイルクラスを指定します。

<body class="tundra">

1	<body class="tundra">

3.確認

Webサーバにアクセスし、各ウィジェットの動作を確認してください。

履歴

日付	内容
2008/4/30	公開

Zend_FormでのDojoウィジェットの使用

コメントを残す