フォームの見た目を変える

ということで無事 members の会員登録部分が動くようになりました。すぐに気づくことですが、デフォルトのテンプレートの見た目が気に入らないです。会員の一覧画面はともかく、 /members/add の登録画面とか。見た目の整形は最後にまとめてやっても構わない訳ですが、なんだかこのまま作業するのも気が重い。ここでちょっといじりたい、というのが人情でしょう。とりあえず、アクション add の場合で言うと、今自動生成されたテンプレートはこうなっています。

 <fieldset>
  <legend><?php __('Add Member'); ?></legend>
 <?php
  echo $this->Form->input('email');
  echo $this->Form->input('password');
  echo $this->Form->input('type_id');
  echo $this->Form->input('birthday');
  echo $this->Form->input('img1');
  echo $this->Form->input('img2');
  echo $this->Form->input('Favorite');
 ?>
 </fieldset>

fieldset とか legend が気に入らないですね。ということで、本家サイトのドキュメントにあるとおり、デフォルトのテンプレートをコピーして、編集します。

9.3 Modify default HTML produced by "baked" templates

先に、/app/vendors/shells/templates/ 以下に、自分が作るテンプレート用のディレクトリを作っておきます。ここでは

/app/vendors/shells/templates/mytheme

としました。

そして、

cd Sites/cake/cake/console/templates/default
cp -r views /Users/myname/Sites/cake/app/vendors/shells/templates/mytheme/views

として、デフォルトのテンプレートを自分のところへコピーします。

上記 views の中にある form.ctp を開いて、

 <fieldset>
  <legend><?php printf("<?php __('%s %s'); ?>", Inflector::humanize($action), $singularHumanName); ?></legend>
<?php
  echo "\t<?php\n";
  foreach ($fields as $field) {
   if (strpos($action, 'add') !== false && $field == $primaryKey) {
    continue;
   } elseif (!in_array($field, array('created', 'modified', 'updated'))) {
    echo "\t\techo \$this->Form->input('{$field}');\n";
   }
  }
  if (!empty($associations['hasAndBelongsToMany'])) {
   foreach ($associations['hasAndBelongsToMany'] as $assocName => $assocData) {
    echo "\t\techo \$this->Form->input('{$assocName}');\n";
   }
  }
  echo "\t?>\n";
?>
 </fieldset>

こうなっているところを、

 <h2><?php printf("<?php __('%s %s'); ?>", Inflector::humanize($action), $singularHumanName); ?></h2>
<?php
  echo "\t<?php\n";
  foreach ($fields as $field) {
   if (strpos($action, 'add') !== false && $field == $primaryKey) {
    continue;
   } elseif (!in_array($field, array('created', 'modified', 'updated'))) {
    echo "\t\techo \$this->Form->input('{$field}');\n";
   }
  }
  if (!empty($associations['hasAndBelongsToMany'])) {
   foreach ($associations['hasAndBelongsToMany'] as $assocName => $assocData) {
    echo "\t\techo \$this->Form->input('{$assocName}');\n";
   }
  }
  echo "\t?>\n";
?>

とします。

fieldset と legend を削除して、h2 に変えたってだけです。再度 cake bake でビューを作り直します。

前回同様yes-noで進んでいくと、今度は、以下のようにテンプレートが選べるメニューが出ます。

---------------------------------------------------------------
You have more than one set of templates installed.
Please choose the template set you wish to use:
---------------------------------------------------------------
1. mytheme
2. default
Which bake theme would you like to use? (1/2) 
[1] > 1

自分が作ったテンプレートを選びます。

/app/views/members/add.ctp を確認すると、

 <h2>
  <?php __('Add Member'); ?></h2>
 <?php
  echo $this->Form->input('email');
  echo $this->Form->input('password');
  echo $this->Form->input('type_id');
  echo $this->Form->input('birthday');
  echo $this->Form->input('img1');
  echo $this->Form->input('img2');
  echo $this->Form->input('Favorite');
 ?>

自分用のテンプレートが適用されています。