Zend_Form Decorators使用实例

Zend Framework官方实例ZendFrameworkQuickstart里面关于继承Zend_Form的使用

一、代码如下：

// Set the method for the display form to POST

$this->setMethod('post');

// Add an email element

$this->addElement('text', 'email', array(

'label' => 'Your email address:',

'required' => true,

'filters' => array('StringTrim'),

'validators' => array(

'EmailAddress',

)

));

// Add the comment element

$this->addElement('textarea', 'comment', array(

'label' => 'Please Comment:',

'required' => true,

'validators' => array(

array('validator' => 'StringLength', 'options' => array(0, 20))

)

));

// Add a captcha

$this->addElement('captcha', 'captcha', array(

'label' => 'Please enter the 5 letters displayed below:',

'required' => true,

'captcha' => array(

'captcha' => 'Figlet',

'wordLen' => 5,

'timeout' => 300

)

));

// Add the submit button

$this->addElement('submit', 'submit', array(

'ignore' => true,

'label' => 'Sign Guestbook',

));

// And finally add some CSRF protection

$this->addElement('hash', 'csrf', array(

'ignore' => true,

));

二、其生成的前端代码如下：



三、问题来了，现在我需要像下面这样的表单代码，该怎么做呢？



四、我们可以像如下设置：

$form = new Zend_Form;

$form->removeDecorator('htmlTag');

$form->setAction('/index/login')
->setMethod('post')
->setAttrib('id', 'login_form');

$username = $form->createElement('text', 'username');

$username->addValidator('alnum')
->setRequired(TRUE)
->setLabel('Username')
->setAttrib('class', 'login_input');

// anonymous function that will generate your image tag
$makeImg = function($content, $element, array $options) {
return '<img src="/images/' . $options['img'] . '" class="' . $options['class'] . ' " alt=""/> ';
};

$username->setDecorators(array(
'ViewHelper',
'Errors',
array('Label', array('class' => 'login_label')),
array('Callback',
array(
'callback' => $makeImg,
'img' => 'user_icon.png',
'class' => 'login_icon',
'placement' => 'PREPEND'
)
),
array('HtmlTag', array('tag' => null, 'class' => 'input_row')),
));

$form->addElement($username);

$submit = $form->createElement('submit', 'login', array(
'label' => 'Login',
'class' => 'login_submit'
)
);

$submit->setDecorators(array(
'ViewHelper',
'Errors',
array('HtmlTag', array('tag' => null, 'class' => 'input_row')),
));

$form->addElement($submit);

五、假如我想有如下效果：



设置如下：

$firstname = new Zend_Form_Element_Text('FirstName');
$firstname->setLabel('FirstName')
->setRequired(true)
->addFilter('StripTags')
->addFilter('StringTrim')
->addErrorMessage('Error in First Name')
->addValidator('NotEmpty');

$firstname->setDecorators(array(
'ViewHelper',
'Description',
'Errors',
array('HtmlTag', array('tag' => 'div', 'class' => 'fieldItemValue')),
array(array('labelDivOpen' => 'HtmlTag'),
array('tag' => 'div',
'placement' => 'prepend',
'closeOnly' => true)),
'Label',
array(array('labelDivClose' => 'HtmlTag'),
array('tag' => 'div',
'class' => 'fieldItemLabel',
'placement' => 'prepend',
'openOnly' => true)),
array(array('fieldDiv' => 'HtmlTag'),
array('tag' => 'div', 'class' => 'field50Pct')),
array(array('divClear' => 'HtmlTag') ,
array('tag' => 'div' ,
'class' => 'clear',
'placement' => 'append'))
));

六、我们可以使用viewScript来实现

Form Element:

$this->addElement('file', 'upload_file', array(
'disableLoadDefaultDecorators' => true,
'decorators' => array('File', array('ViewScript', array(
'viewScript' => '_form/file.phtml',
'placement' => false,
))),
'label' => 'Upload',
'required' => false,
'filters' => array(),
'validators' => array(array('Count', false, 1),),
));

自定义View Script:

_form/file.phtml如下

<?php
$class .= 'field ' . strtolower(end(explode('_',$this->element->getType())));
if ($this->element->isRequired()) {
$class .= ' required';
}
if ($this->element->hasErrors()) {
$class .= ' errors';
}
?>
<div class="<?php echo $class; ?>" id="field_<?php echo $this->element->getId(); ?>">
<?php if (0 < strlen($this->element->getLabel())): ?>
<?php echo $this->formLabel($this->element->getFullyQualifiedName(), $this->element->getLabel());?>
<?php endif; ?>
<span class="value"><?php echo $this->content; ?></span>
<?php if ($this->element->hasErrors()): ?>
<?php echo $this->formErrors($this->element->getMessages()); ?>
<?php endif; ?>
<?php if (0 < strlen($this->element->getDescription())): ?>
<p class="hint"><?php echo $this->element->getDescription(); ?></p>
<?php endif; ?>
</div>

例如，举个再简单的例子，若view Script,

_form/file.phtml

为如下内容：

<label for="<?php echo $this->element->getName(); ?>" class="element <?php if ($this->element->hasErrors()): ?> error<?php endif; ?>" id="label_<?php echo $this->element->getName(); ?>">
<span><?php echo $this->element->getLabel(); ?></span>
<?php echo $this->content; ?>
<?php if ($this->element->hasErrors()): ?>
<span class="error">
<?php echo $this->formErrors($this->element->getMessages()); ?>
</span>
<?php endif; ?>
</label>

则渲染的内容为：

<label for="photo" class="element" id="label_photo">
<span>Photo</span>
<input type="hidden" name="MAX_FILE_SIZE" value="6291456" id="MAX_FILE_SIZE">
<input type="file" name="photo" id="photo">
</label>

七、也可以使用配置文件去实现，如下

myform.ini

method = "post"

elements.title.type = "text"
elements.title.options.label = "Title"
elements.title.options.attribs.size = 40
elements.title.options.required = true

elements.image.type = "file"
elements.image.options.label = "Image"
elements.image.options.validators.isimage.validator = "IsImage"

elements.submit.type = "submit"
elements.submit.options.label = "Save"

TestController

<?php
class Admin_TestController extends Zend_Controller_Action
{
public function testAction ()
{
$config = new Zend_Config_Ini(MY_SECRET_PATH . 'myform.ini');
$f = new Zend_Form($config);

if ($this->_request->isPost()){
$data = $this->_request->getPost();

$imageElement = $f->getElement('image');
$imageElement->receive();

//$imageElement->getValue();
if ($f->isValid($data)){
//save data
$this->_redirect('/admin');
}
}

$this->view->form = $f;
}
}
?>

八、对于radio标签的修饰

$this->addElement('radio', 'prop_type', array(

'decorators' => array(

'ViewHelper',

array(array('AddTheLi' => 'HtmlTag'), array('tag' => 'li')),

array(array('AddTheUl' => 'HtmlTag'), array('tag' => 'ul')),

'Errors',

array('Description', array('tag' => 'p', 'class' => 'description')),

array('Label', array('tag' => 'div')),

array('HtmlTag', array('tag' => 'div')),

),

'disableLoadDefaultDecorators' => true,

'label' => '属性值类型：',

'separator' => '</li><li>',

'attribs' => array(

'options' => array(

'foo' => 'Option 1',

'bar' => 'Option 2',

'baz' => 'Option 3'

),

),

));