Akky AKIMOTO – ページ 208

[AA-Camp] 開発会最終日(8日目)レポート

第6回AA-Camp(エーエーキャンプ)も、いよいよ最終日。

最終的に、参加者数は20名となりました。延べで数えると44人。

参加してくださったみなさん、ありがとうございました。とても面白かったので、またぜひ7回目もやりたいと思います。こんな長期間するチャンスはなかなかないとは思いますけど、月一、二日ぐらいは。

今日はこじんまりと3名。

shin
i-ogi
akky

前のAA-Campに参加したことがある荻原さんが来てくれました。荻原さんは、iPod touchの使いやすさを改善するためのiPod touchでフォーム入力補完をするbookmarkletを作るbookmarkletというのを作成されてました。iPod touchを使ってる人は要チェックや!

僕は今日もこまごましたものを試したり、ブログに書いたり、個人プロジェクトの仕様を詰めたり。

昼はラーメン屋で定食。夜はスパゲッティでした。

[関連]

AA-Camp #6のまとめ – ♪LIND LIND♪

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の提供してくれているファイルを使うか、ローカルにコピーしたファイルを使うかとかで変わってくるでしょう。