在symfony中为所有表单小部件添加类

时间:2010-05-27 15:45:05

标签: symfony1 symfony-forms

我正在尝试找到一种更好的方法来分配类来形成symfony中的元素。目前,我似乎无法手动分配每一个。即:

$this->widgetSchema['title']->setAttribute("class","fieldInput");
$this->widgetSchema['tag_line']->setAttribute("class","fieldInput");
$this->widgetSchema['description']->setAttribute("class","fieldInput");
// etc

我尝试过的事情没有成功

1)循环遍历$ this-> widgetSchema,将其视为数组并将属性设置为每个键

2)$ this-> widgetSchema-> setAttribute()但这仅将类应用于生成的标签,而不是表单元素

必须有一种方法可以击中所有字段而无需专门指导它们吗?

有人能指出我正确的方向吗?

6 个答案:

答案 0 :(得分:9)

有一种方法:

在lib / widget中创建一个sfWidgetFormSchemaFormatter,其中包含例如(symfonians的代码):

class sfWidgetFormSchemaFormatterDiv extends sfWidgetFormSchemaFormatter
{
  protected
    $rowFormat       = "<div class=\"form-row%is_error%\">\n  %label%\n  %error%\n   %hel<div class='myfieldclass'%field%</div>\n p%\n%hidden_fields%</div>\n",
    $errorRowFormat  = "%errors%\n",
    $helpFormat      = '<div class="form-help">%help%</div>',
    $decoratorFormat = "\n  %content%";

  public function formatRow($label, $field, $errors = array(), $help = '', $hiddenFields = null)
  {
    return strtr(parent::formatRow($label, $field, $errors, $help, $hiddenFields), array(
      '%is_error%'    => (count($errors) > 0) ? ' field_error' : '',
      //'%is_required%' => $field,
    ));
  }
}

然后,在您的表单中,执行:

$oDecorator = new sfWidgetFormSchemaFormatterDiv($this->getWidgetSchema());
$this->getWidgetSchema()->addFormFormatter('div', $oDecorator);
$this->getWidgetSchema()->setFormFormatterName('div');

然后,您可以使用选择器.myfieldclass input或任何您想要的样式设置元素样式,这是更改表单结构/外观的好方法。

答案 1 :(得分:7)

从表单类中:

foreach ($this->getWidgetSchema()->getFields() as $field)
{
  $field->setAttribute('class', 'custom-class');
}

如果您有许多需要它的表单类,您也可以从自定义sfWidgetFormSchemaFormatter类的构造函数中调用该代码:

public function __construct(sfWidgetFormSchema $widgetSchema)
{
    parent::__construct($widgetSchema);

    foreach ($this->getWidgetSchema()->getFields() as $field)
    {
        $field->setAttribute('class', 'custom-class');
    }
}

答案 2 :(得分:2)

我遇到了同样的问题。

<强>场合 我们开始认为CSS和symfony的小部件生成之间的分离对于集成商来说是一个很大的学习曲线,我们认为必须有一种方法让集成商更加独立于开发人员。

客户总是希望拥有自定义样式表单...然而,自定义手工制作!DRY代码已完成。我的意思是,平面设计师不设计只有输入文本和标签的表单,他们找到所有创造性的方式,我们的现实是使它在框架中工作,看起来与他们设计的一样。

这就是为什么我们想到使用sfWidgetFormSchemaFormatter,但是表单控制器都是不同的,我们希望能够从视图中注入样式...因为它是集成问题,而不是应用程序问题。本身。

解决方案路径 我的团队领导和我找到了解决方案。主要使用部分和循环遍历它们。表单视图可能如下所示。

我们的解决方案并不完美,因为我们想在视图中调用哪个控制器可以获取哪些类名。但它比使用CSS的输入[type = text]更好,因为我们的客户端仍然使用< IE8。但至少,

所以我们想到为什么不用可能具有不同行为的className映射字段id(不同于label + input(当然还有+ helper + error,如果需要的话))。

我们做的是为那些特殊控制器注入控件样式(例如:label + select + select + select + helper + error)让我们说这个Widget有id some_field_id,我们需要它给父{ {1}}。

我们可以这样做:

<li>

所以...现在是时候了解一些代码:

首先,我们需要使用'list'widgetFormatter:

$node_classes_map => array('some_field_id'=>'date-selector')

或者,您可以使用qais answer将所有表单作为列表(最后!!我之前不知道)。

观点:

<?php
// lib/form/SomeForm.php
class SomeForm extends BaseSomeForm
{
   public function configure()
   {
       $this->widgetSchema->setFormFormatterName('list');
   }
}

formParent 如下所示:

<?php
// apps/appName/modules/moduleName/templates/someviewSuccess.php
$node_classes_map = array(
  'some_field_id'=>'date-selector'
   // .date-selector would have many select side by side. 
   // (no CSS for that in this example)
);
include_partial('global/patterns/formParent',
    array(
        'form'=>$form,
        'form_classes'=>'labels-on-left',
        'node_classes_map' => $node_classes_map
    )
);

每个表单元素都由自定义元素或 listFormDefaultNode 呈现。

从那里,你可以想出一个不同的局部来渲染一个控制器,不同于主流标签+输入+助手+错误更复杂的东西,比如label + select + select + select + helper + erros。

这是我的默认表单* 节点

<?php
// apps/appName/templates/_patterns/formParent.php
$form_classes_attr = (isset($form_classes))?' class="'.$form_classes.'"':'';
$form_list_node_partial = 'global/patterns/listFormDefaultNode';
$model_name_lowercase = strtolower($form->getModelName());
$node_classes_map = (isset($node_classes_map))?$node_classes_map:array();
?>
<?php use_stylesheets_for_form($form) ?>
<?php use_javascripts_for_form($form); ?>
<form action="<?php 
    echo url_for($model_name_lowercase.'/'.($form->getObject()->isNew() ? 'create' : 'update').(!$form->getObject()->isNew() ? '?id='.$form->getObject()->getId() : ''))
?>"<?php echo $form_classes_attr;
?> method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" '?>>
<h2><?php echo __(($form->getObject()->isNew()?'new.':'edit.').$model_name_lowercase.'.form.title'); ?></h2>
<fieldset>
    <ol>
<?php
    foreach($form as $item){
        $node_classes = (isset($node_classes_map[$item->renderId()]))?$node_classes_map[$item->renderId()]:'';
        include_partial($form_list_node_partial,
            array(
                'item'=>$item,
                'node_classes' => $node_classes
            )
        );
    }
?>
    <ol>
</fieldset>
<?php echo $form->renderHiddenFields() ?>
<?php echo $form->renderGlobalErrors() ?>
<?php echo (!$form->getObject()->isNew())? '<input type="hidden" name="sf_method" value="put" />':''; ?>
</form>

最后,这是我的CSS开始:

请注意,这是项目CSS的一部分,它使用我正在使用Snippies开发的部分概念。去那里了解我如何构建我的CSS。

<?php
// apps/appName/templates/_patterns/listFormDefaultNode.php
/**
 * Manual: http://www.symfony-project.org/forms/1_4/en/A-Widgets
 */
if(!$item->isHidden()){ ?>
<li class="<?php echo $item->renderId().((is_string($node_classes))?' '.$node_classes:''); ?>">
  <?php echo $item->renderLabel(); ?>
  <?php echo $item; ?>
  <?php echo (!!$item->renderHelp())?'<span class="helpers">'.$item->renderHelp().'</span>':''; // I did not find any hasHelper(), so switching to bool ?>
  <?php echo ($item->hasError())?'<span class="alertify error">'.$item->renderError().'</span>':''; ?>
</li>
<? }

答案 3 :(得分:0)

这是旧的但是对于任何试图找到它的人来说,只需进入/ lib / filter / doctrine /中的xxxxxFormFilter.php并执行此操作:

$this->getWidget('inputname')->setAttribute('class_name','class_name/id_name');

通过这种方式,您可以单独指定和控制所有内容。

答案 4 :(得分:0)

根据您扩展的基本表单,您可以在configure方法中添加以下内容:

public function configure()
{
    foreach ($this->widgetSchema->getFields() as $field) {
        $field->setAttribute('class','my-custom-class');
    }
    parent::configure();
}

我在BaseFormDoctrine中做了我的。您可以使用相同的方法添加/覆盖字段中的任何属性,甚至可以根据字段类型添加自定义规则。

答案 5 :(得分:-1)

将类应用于父元素,而不是单个元素:

<强> TEMPLATE:

<form class="my-form" action="" method="">
 // put widgets here
</form>

<强> CSS:

.my-form select {}
.my-form input[type=text] {}
.my-form textarea {}
.my-form input[type=submit] {}
etc...