- 2008-04-30 (水) 7:00
- Zend_Form
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; } }
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) <img src='http://www.oplabo.jp/wp-includes/images/smilies/icon_confused.gif' alt=':?' class='wp-smiley' /> > <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>
また以下のようにbodyタグのスタイルクラスを指定します。
<body class="tundra">
3.確認
Webサーバにアクセスし、各ウィジェットの動作を確認してください。
履歴
日付 | 内容 |
---|---|
2008/4/30 | 公開 |
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://www.oplabo.jp/article/38/trackback
- Listed below are links to weblogs that reference
- Zend_FormでのDojoウィジェットの使用 from Open Programming Laboratory