6月 02
08.フォームの見た目を変える
ということで無事 members の会員登録部分が動くようになりました。
ブラウザから、
http://localhost/~bob/cake/index.php/members
を開いて、いろいろ登録したりしてみます。
すぐに気づくことですが、デフォルトのテンプレートの見た目が気に入らないです。
会員の一覧画面はともかく、 /members/add の登録画面とか、 /members/view/1 の詳細画面とか。
見た目の整形は最後にまとめてやっても構わない訳ですが、なんだかこのまま作業するのも気が重い。
ここでちょっといじりたい、というのが人情でしょう。
とりあえず、アクション add の場合で言うと、今自動生成されたテンプレートはこうなっています。
<fieldset>
<legend><?php __('Add Member');?></legend>
<?php
echo $form->input('email');
echo $form->input('password');
echo $form->input('type_id');
echo $form->input('birthday');
echo $form->input('img1');
echo $form->input('img2');
echo $form->input('Favorite');
?>
</fieldset>
fieldset とか legend が気に入らないですね。
ということで、本家サイトのドキュメントにあるとおり、デフォルトのテンプレートをコピーして、編集します。
cd Sites/cake/cake/console/libs/templates/ cp -r views /Users/bob/Sites/cake/app/vendors/shells/templates/views
上記 views の中にある form.ctp を開いて、
<fieldset>
<legend><?php echo "<?php __('".Inflector::humanize($action)." {$singularHumanName}');?>";?></legend>
<?php
echo "\t<?php\n";
foreach ($fields as $field) {
if ($action == 'add' && $field == $primaryKey) {
continue;
} elseif (!in_array($field, array('created', 'modified', 'updated'))) {
echo "\t\techo \$form->input('{$field}');\n";
}
}
if (!empty($associations['hasAndBelongsToMany'])) {
foreach ($associations['hasAndBelongsToMany'] as $assocName => $assocData) {
echo "\t\techo \$form->input('{$assocName}');\n";
}
}
echo "\t?>\n";
?>
</fieldset>
こうなっているところを、
<h2><?php echo "<?php __('".Inflector::humanize($action)." {$singularHumanName}');?>";?></h2>
<?php
echo "\t<?php\n";
foreach ($fields as $field) {
if ($action == 'add' && $field == $primaryKey) {
continue;
} elseif (!in_array($field, array('created', 'modified', 'updated'))) {
echo "\t\techo \$form->input('{$field}');\n";
}
}
if (!empty($associations['hasAndBelongsToMany'])) {
foreach ($associations['hasAndBelongsToMany'] as $assocName => $assocData) {
echo "\t\techo \$form->input('{$assocName}');\n";
}
}
echo "\t?>\n";
?>
こうします。 h2 に変えたってだけです。
再度 cake bake でビューを作り直します。
出力されるテンプレートは以下のようになります。
<h2><?php __('Add Member');?></h2>
<?php
echo $form->input('email');
echo $form->input('password');
echo $form->input('type_id');
echo $form->input('birthday');
echo $form->input('img1');
echo $form->input('img2');
echo $form->input('Favorite');
?>
あとは view.ctp の dt dd タグになってる部分を tr td のテーブルタグに変えたりとか、まあ、その辺は人それぞれ趣味なので。
特に view.ctp はデフォルトだと、以下のようなソースをはき出すので、
<dl><?php $i = 0; $class = ' class="altrow"';?>
<dt<?php if ($i % 2 == 0) echo $class;?>><?php __('Id'); ?></dt>
<dd<?php if ($i++ % 2 == 0) echo $class;?>>
<?php echo $member['Member']['id']; ?>
</dd>
こりゃー一体なんでしょう。一行おきにスタイルを変えてるんですよね。これを後からちまちま削除するのは果てしなくだるいので、大元をいじっておいた方がよいと思います。
いろんな議論があるとは思いますが、やっぱり管理画面の表示はテーブルで整形した方が見やすいですよね。
と言う訳で私は view.ctp は以下のようにしてみました。
<div class="<?php echo $pluralVar;?> view">
<h2><?php echo "<?php __('{$singularHumanName}');?>";?></h2>
<table>
<?php
foreach ($fields as $field) {
$isKey = false;
if (!empty($associations['belongsTo'])) {
foreach ($associations['belongsTo'] as $alias => $details) {
if ($field === $details['foreignKey']) {
$isKey = true;
echo "\t\t<tr>\n\t\t\t<th><?php __('".Inflector::humanize(Inflector::underscore($alias))."'); ?></th>\n";
echo "\t\t\t<td>\n\t\t\t\t<?php echo \$html->link(\${$singularVar}['{$alias}']['{$details['displayField']}'], array('controller'=> '{$details['controller']}', 'action'=>'view', \${$singularVar}['{$alias}']['{$details['primaryKey']}'])); ?>\n\t\t\t \n\t\t\t</td>\n\t\t</tr>\n";
break;
}
}
}
if ($isKey !== true) {
echo "\t\t<tr>\n\t\t\t<th><?php __('".Inflector::humanize($field)."'); ?></th>\n";
echo "\t\t\t<td>\n\t\t\t\t<?php echo \${$singularVar}['{$modelClass}']['{$field}']; ?>\n\t\t\t \n\t\t\t</td>\n\t\t</tr>\n";
}
}
?>
</table>
</div>