私は同じ問題を抱えています。
状況
CSS と symfony のウィジェット生成の間の分離は、インテグレーターにとって大きな学習曲線であり、インテグレーターを開発者からより独立させる方法が必要であると考えるようになりました。
クライアントは常にカスタム スタイルのフォームを望んでいますが、カスタムの手作りの !DRY コードが完成しました。私が言いたいのは、グラフィック デザイナーは入力テキストとラベルだけでフォームをデザインするのではなく、すべての創造的な方法を見つけ出し、私たちの現実は、デザインと同じように見えるようにフレームワークで機能させることです。
そのため、sfWidgetFormSchemaFormatter を使用することを考えましたが、フォーム コントローラーはすべて異なり、ビューからスタイリングを注入できるようにしたかったのです...なぜなら、それはアプリケーションの問題ではなく統合の問題だからです。それ自体。
ソリューション パス
チーム リーダーと私は解決策にたどり着きました。主にパーシャルを使用し、それらをループします。フォーム ビューは次のようになります。
ビュー内の呼び出しによって、どのコントローラーがどのクラス名を取得できるかを伝えたいため、私たちのソリューションは完璧ではありません。<ただし、クライアントはまだIE8を使用しているため、CSS の input[type=text] を使用するよりも優れています。しかし、少なくとも、
そこで、フィールド ID を異なる動作を持つ可能性のある className にマッピングしない理由を考えました (ラベル + 入力 (および必要に応じてもちろん +ヘルパー + エラー) とは異なります)。
私たちがしていることは、これらの特別なコントローラー (例: ラベル + 選択 + 選択 + 選択 + ヘルパー + エラー) に制御スタイルを注入することです。このウィジェットに idsome_field_idがあり、それが親に必要であるとしましょう<li>。
次のようにできます。
$node_classes_map => array('some_field_id'=>'date-selector')
だから...今度はいくつかのコードの時間です：
まず、「リスト」widgetFormatter を使用する必要があります。
<?php
// lib/form/SomeForm.php
class SomeForm extends BaseSomeForm
{
public function configure()
{
$this->widgetSchema->setFormFormatterName('list');
}
}
または、qais answerを使用して、すべてのフォームをリストとして持つこともできます (ついに!!今まで知りませんでした)。
景色：
<?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
)
);
formParentは次のようになります。
<?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>
各フォーム要素は、カスタム要素またはlistFormDefaultNodeによってレンダリングされます。
そこから、主流のラベル + 入力 + ヘルパー + エラーから、ラベル + 選択 + 選択 + 選択 + ヘルパー + エラーのようなより複雑なものまで、コントローラーを異なる方法でレンダリングする別のパーシャルを考え出すことができます。
これは私のデフォルトのフォームです *ノード
<?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>
<? }
最後に、これが私の CSS からのスタートです。
これはプロジェクト CSS の一部であり、これは私がSnippiesで開発している概念の一部を使用していることに注意してください。そこにアクセスして、CSS をどのように構成しているかについてのアイデアをさらに入手してください。
/* ****** Misc ****** */
/**
* General form views settings
**/
form ol, form ul {
list-style-type: none;
padding: 0;
margin: 0;
}
form input.text, form select {
display: block;
border: 0;
padding: 4px;
line-height: 12px;
font-size: 15px;
}
form select {
background-color: #e3e8eb;
color: #506775;
margin: 0;
}
form label {
color: #345569;
display: block;
font-weight: bold;
margin-bottom: 5px;
}
form input.text {
color: #345569;
border: none;
background-color: #e3e8eb;
color: #738996;
border: 0px solid #c3c987;
padding: 4px;
line-height: 12px;
width: 100%;
}
form fieldset {
padding: 0;
margin: 0;
border: none;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #98a7af;
padding: 10px 0;
}
form li {
margin-bottom: 10px;
}
form li .helpers {
color: #98a7af;
}
/**
* /General form views settings
**/
/**
* General error messages
**/
.alertify {
padding: 0.8em;
margin-bottom: 1em;
border: 2px solid #ddd;
}
.alertify strong, .alertify p {
padding: 0 0 10px 0;
display: block;
}
.alertify ul {
margin: 0;
padding: 0 0 0 15px;
}
.alertify ul li {
padding: 0 0 5px 0;
}
.error, .alert {
background: #fbe3e4;
color: #8a1f11;
border-color: #fbc2c4;
}
/**
* /General error messages
**/
/* ****** /Misc ****** */
/* ****** Specialization ****** */
/**
* Form labels on the left
*/
form.labels-on-left fieldset {
padding: 0;
margin: 0;
padding-bottom: 10px;
margin-bottom: 10px;
}
form.labels-on-left li {
clear: both;
overflow: hidden;
}
form.labels-on-left li input.text, form.labels-on-left li select {
border: 0;
padding: 4px;
line-height: 12px;
}
form.labels-on-left li input.text {
width: 815px !important;
float: left;
padding: 6px;
color: #506775;
}
form.labels-on-left li select {
background-color: #e3e8eb;
color: #506775;
height: 26px;
width: 400px;
margin: 0;
float: left;
}
form.labels-on-left li .beside {
float: left;
}
form.labels-on-left li .beside a {
font-weight: bold;
padding: 5px 20px;
font-size: 14px;
display: block;
}
form.labels-on-left li label {
color: #345569;
width: 80px;
font-size: 120%;
text-align: right;
font-weight: bold;
float: left;
display: block;
padding: 5px 10px 0 0;
}
form.labels-on-left li .error span, form.labels-on-left li .helpers span {
padding: 5px;
display: block;
}
form.labels-on-left li .helpers {
width: 100%;
}
/**
* /Form labels on the left
*/
/* ****** /Specialization ****** */