symfonyのフォームでYahoo UIの綺麗なボタンを使う

状況

フォームのボタンをブラウザのデフォルトじゃなく、もうちょっと良いデザインにしたい
Yahoo UIのボタンは、CSSでキレイにデザインされている。CSSや画像ファイルもyahoo.comのを使えるのでサーバにもやさしい
symfonyで作ったフォームからYUI buttonを使いたい

symfonyでのフォームのsubmitについては、link_to()、button_to()、submit_image_tag()の3つがFormHelperに用意されています。

submit_tag() は、ブラウザデフォルトのボタンを書くのでフォームでそのまま動く
button_to() type=”button”は作れるけど、formの値を送るには自分でjavascript書く必要あり
submit_image_tag() 画像用意すればキレイなsubmit用のボタンが使える

YUI buttonは、type=”button”を使うことを前提にしているのですが、type=”button”でformのサブミットをさせる(ボタンを押したらフォームの各値がリクエストに含まれる)ようにするためには、ボタンが所属するフォームを駆動するようなJavascriptが必要となります。

以上から、次のようにすることで、symfony+YUIでのCSSデザインボタンを作ることができました。

HTMLのほうは、2番目のパラメータにtypeを渡すことで、submit_tag()にもtype=”body”を上書きで指定することができます。

<?php echo submit_tag('実行する', array('type' => 'button', 'id' => 'compareButton')); ?>

YUI buttonのJavascriptでの定義のところでは、この「フォームを駆動するボタン」という設定ができるので、これを指定します。

<script type="text/javascript">
var oButton = new YAHOO.widget.Button(
  "compareButton",
  { 
    checked: false,
    type: "submit"
  }
);
</script>

type: “submit”がそれにあたります。

あとは、YUI buttonに必要な定義をします。

なんらかのスタイルをあてる。YUIで提供されているスキンか、自分で改造したスキンを指定することも可能

<body class="yui-skin-sam">

symfonyのconfig/view.ymlでは、関係のあるYUIのCSS/JSを読ませるようにします。

  stylesheets:    [main, http://yui.yahooapis.com/2.4.1/build/grids/grids-min.css, http://yui.yahooapis.com/2.4.1/build/button/assets/skins/sam/button.css]

  javascripts:    [http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js, http://yui.yahooapis.com/2.4.1/build/element/element-beta-min.js, http://yui.yahooapis.com/2.4.1/build/button/button.js]

このへんは、YUIのバージョン変わったり、圧縮版を使うかとか、yahoo.comの提供してくれているファイルを使うか、ローカルにコピーしたファイルを使うかとかで変わってくるでしょう。