了解 ZEND 中的网格布局



我对在zend中设计表单有点困惑。 我知道我的表单类中有字段,外观应该在视图中完成。

在几乎是纯html的索引视图中,我没有问题,但是在显示我的表单的添加和编辑视图中,我在更改外观时遇到了问题。

我有一个如下所示的视图脚本:

<?php
$title = 'AVB ändern';        
$this->headTitle($title);
?>
<h1><?= $this->escapeHtml($title) ?></h1>
<?php
$id= $form->get('id');
$id->setAttribute('class', 'form-control');
$id->setAttribute('placeholder', 'id');
$avbname= $form->get('avbname');
$avbname->setAttribute('class', 'form-control');
$avbname->setAttribute('placeholder', 'avbname');
$vbedingungen= $form->get('vbedingungen');
$vbedingungen->setAttribute('class', 'form-control');
$vbedingungen->setAttribute('placeholder', 'vbedingungen');
$versichererid= $form->get('versichererid');
$versichererid->setAttribute('class', 'form-control');
$versichererid->setAttribute('placeholder', 'versichererid');
$aktiv= $form->get('aktiv');
$aktiv->setAttribute('class', 'form-control');
$aktiv->setAttribute('placeholder', 'aktiv');
$submit = $form->get('submit');
$submit->setAttribute('class', 'btn btn-primary');

$form->prepare();
echo $this->form()->openTag($form);
?>
<div class="form-group">
<?= $this->formElement($id) ?>
<?= $this->formElementErrors()->render($id, ['class' => 'help-block']) ?>
</div>
<div class="form-group">
<?= $this->formLabel($avbname) ?>
<?= $this->formElement($avbname) ?>
<?= $this->formElementErrors()->render($avbname, ['class' => 'help-block']) ?>
</div>
<div class="form-group">
<?= $this->formLabel($vbedingungen) ?>
<?= $this->formElement($vbedingungen) ?>
<?= $this->formElementErrors()->render($vbedingungen, ['class' => 'help-block']) ?>
</div>
<div class="form-group">
<?= $this->formLabel($versichererid) ?>
<?= $this->formElement($versichererid) ?>
<?= $this->formElementErrors()->render($versichererid, ['class' => 'help-block']) ?>
</div>
<div class="form-group">
<?= $this->formLabel($aktiv) ?>
<?= $this->formElement($aktiv) ?>
<?= $this->formElementErrors()->render($aktiv, s['class' => 'help-block']) ?>
</div>
<?php
echo $this->formSubmit($submit);
echo $this->formHidden($form->get('id'));      
$form->setAttribute('action', $this->url('typavb', ['action' => 'edit']));    
echo $this->form()->closeTag();

当然,它显示一个字段在另一个字段之下。 如何连续显示两个字段(带标签)? 我真的很感激一个示例或一个好的教程的提示,它展示了如何使用这个 zend3 概念正确做到这一点。

它是否是在视图中执行此操作的正确位置,或者在这种情况下我是否需要新的 layout.phtml?

要单独打印元素的一部分,ZF 中预定义了几个函数。您可以在ZendFormConfigProvider->getViewHelperConfig()中找到所有这些,请参阅Github上的此处。

在您的情况下,您已经在使用formLabelformElementformElementErrors.

如果您有类似货币的东西,这些对于单独使用非常方便,您希望用户填写金额并选择货币,但只使用单个标签,例如:

$this->formLabel($form->get('amount'));
$this->formElement($form->get('amount'));
$this->formElementErrors($form->get('amount'));
$this->formElement($form->get('currency'));
$this->formElementErrors($form->get('currency'));

整个"表单行"由以下部分组成:

  • 标签(可选)
  • 元素
  • 元素错误(如果在服务器端验证后出现)

因此,在本例中,您需要整个"金额"位,您可以将上述内容缩短为:

$this->formRow($form->get('amount'));             // prints all elements for the row
$this->formElement($form->get('currency'));
$this->formElementErrors($form->get('currency'));

如果你仔细观察"zendframework/zend-form"的链接ConfigProvider,你可能会注意到还有一个form的ViewHelper。这可用于一次性打印整个表单,如下所示:

文件: add-foo.phtml

<?= $this->form($form) ?>

仅此而已。它打印整个表单。当然,它使用 ZF 定义的 ViewHelpers,因此也应用了该布局和类。

如果您愿意,可以采用该配置并在您自己的项目中覆盖它。

例如,您的问题代码显示您在每行周围添加<div class="form-group"></div>。大概是用于引导 4。要神奇地做到这一点,所以你不需要这样做:

<div class="form-group">
<?= $this->formRow($form->get('foo')) ?>
</div>

我们可以调整formRowViewHelper。只需按照以下步骤操作:

  1. 在您自己的项目中创建一个FormRow.php,例如module/Foo/src/View/Helper/FormRow.phtml
  2. 确保从 ZF 的 FormRow 扩展它,并在原始 (ZF)render函数中复制,如下所示:
use ZendFormViewHelperFormRow as ZendFormRow;
class FormRow extends ZendFormRow
{
public function render(ElementInterface $element, $labelPosition = null)
{
// its content
}
}
  1. 我们想添加一个包装器(form-group类div),所以在类中定义它,如下所示:
class FormRow extends ZendFormRow
{
protected $inputRow = '<div class="form-group">%s</div>';
// the other stuff
}
  1. render函数的底部,你会发现以下代码(在else之前):
if ($this->renderErrors) {
$markup .= $elementErrors;
}

放在上面之后:

$markup = sprintf(
$this->inputRow,
$markup,
);
  1. 注册新的 ViewHelper,使用与 ZF 相同的别名以覆盖这些值:
'view_helpers'    => [
'aliases'    => [
'formrow'             => FormRow::class,
'form_row'            => FormRow::class,
'formRow'             => FormRow::class,
'FormRow'             => FormRow::class,
],
'factories'  => [
FormRow::class           => InvokableFactory::class,
],
],

做。

现在,当您执行$this->form($form)时,来自ZendFramework的FormElementViewHelper将在其工厂->get('formRow')时收到您的自定义formRowViewHelper,因为配置被覆盖到您自己的配置中。因此,所有行现在将自动具有周围的div。


比你要求的多一点,但玩得开心;)我现在要停止逃避工作了 O:)

最新更新