SQLFORM あれこれ ② の続きです。今回は bootstrap を使ったカスタマイズを説明します。
bootstrap の組み込み
twitter bootstrap は、現代風の Web デザインを簡単に作成できるフレームワークだ。web2py では、2.0.1 より標準で組み込まれたようだ。もしそれ以前の web2py を使用している場合、2.0.1 以降にバージョンアップするか、bootstrap モジュールを次のように組み込めば使用可能だ。
- twitter bootstrap のサイトから bootstrap をダウンロードし解凍する。
- 解凍したファイルに含まれている css , img , js の各フォルダを、 web2py アプリケーションの static 下にコピーする（例、web2pyフォルダ/applications/myapp/static）。
- モデル定義（db.pyなど）に、次の記述を追加する。
1 2 3
response.files.append(URL('static','css/bootstrap.min.css')) response.files.append(URL('static','css/bootstrap-responsive.min.css')) response.files.append(URL('static','js/bootstrap.min.js'))
なお web2py では画像ファイルは、通常、 static/images フォルダに設置する。しかし bootstrap の画像ファイルを images フォルダに設置すると、bootstrap の cssファイルなどの変更が必要になってくるため、img フォルダをそのままコピーする。
web2py 2.0.1 以降では Bootstrap が標準で組み込まれているため、設定作業は必要ありません。
注意
過去のバージョンで作成したアプリケーションには、bootstrap のコードが含まれていません。Welcome アプリケーションから必要なファイルやコードをコピーするか、上の手順を実行するなどが必要です。
フォームボタンのカスタマイズ
それでは bootstrap を使ったカスタマイズを示していきたい。bootstrap にはいろいろな機能があるが今回は簡単に、フォームの subumit ボタンを bootstrap を使ったボタンに変更すると共に、キャンセル用ボタンを追加してみる。
まず前回記事の最後に紹介したコードに、次のコードを付け加える（挿入位置は、SQLFORMコンストラクタの前）。
1 2 3 4 5 | submit = BUTTON(I(_class='icon-ok icon-white', _style='margin-right: 5px;'), T('OK'), _type='submit', _class='btn btn-primary') cancel = BUTTON(I(_class='icon-remove', _style='margin-right: 5px;'), T('Cancel'), _type='reset', _class='btn', _style='margin-left:10px') |
ボタンが定義された submit 及び cancel 変数を、次のように SQLFORM コンストラクタの buttons パラメータに渡す（２行目）。
1 2 3 | form = SQLFORM(db.image, record, True, buttons=[submit,cancel], upload=URL(c='default', f='download')) |
これによって入力画面は、次のようにボタンのデザインが変更になる。
| ⇒ |
|
Submit ボタンのデザインを変更し、Cancel ボタンを追加しただけだが、グッと見栄が良くなったのではないだろうか。
Cancel ボタンを押すと入力した内容がリセットされる。しかしそれだけでは面白くないので、ボタンを押したら別の画面に遷移するよう、cancel変数の定義を次のように変更する（３行目）。
1 2 3 4 | cancel = BUTTON(I(_class='icon-remove', _style='margin-right: 5px;'), T('Cancel'), _type='reset', _class='btn', _onclick = 'location.href="%s"' % URL(f='index'), _style='margin-left:10px') |
onclick 属性への定義により、Cancel ボタンを押すと index（関数）画面に遷移する。
今回 Cancel ボタンは BUTTON タグを使用したが、他のページに移動するのであれば A タグ（アンカータグ）を使用しても良い。コード例は次のようになる。
1 2 3 | cancel = A(I(_class='icon-remove', _style='margin-right: 5px;'), T('Cancel'), _type='reset', _class='btn', _href = URL(f='index'), _style='margin-left:10px') |
入力フィールドのカスタマイズ
SQLFORMの入力フィールドに対する、bootstrapを使ったカスタマイズも示してみる。URL入力フィールドの背景に、入力サンプル値を表示するようにする。コードは次のようになる。
form.element(_id='image_url')['_placeholder'] = 'http://www.example.com'
これは SQLFORMコンストラクタで定義した form 変数に対して、フィールドの要素の placeholder 属性値に、サンプル値を設定している。SQLFORMコンストラクタが生成するフィールドのID値は、テーブル名_フィールド名 となる。
サンプルURLは、フィールドに何か値を入力すると表示されなくなる。コードを実行すると、次のような画面イメージとなる。
この他にも bootstrap には、いろいろな機能が含まれています。ぜひ活用して、親しみやすい画面デザインを実現してください。
参考
Twitter Bootstrap
GreenApple-Room - Twitter Bootstrapの使い方
次回 は、SQLFORM.grid の利用について説明します。