[bookmark] 50 Must-have plugins for extending Twitter Bootstrap

本当に使えるBootstrapプラグインがよくまとまってます。
50 Must-have plugins for extending Twitter Bootstrap

その他便利なプラグインも挙げておきます。

Bootstrap Growl
Alert をGrowlのようにフローティングで表示したいときに便利なプラグイン
WebSite | Github

Datepicker for Bootstrap bootstrap-datepicker.js

Bootstrapで日付フォームでカレンダーを表示したい場合にはこれを使えば間違いないです。
bootstrap-datepicker

input以外のボタンなどに適用する場合は、初期表示時の日付を指定する data-date 属性が必須になります。
例えば、今日の日付をセットする場合は、以下のようなHTMLとJavascriptの組み合わせになります(日付のフォーマットで利用しているのは、jquery-dateFormatです)。
[html gutter=”false”]
<button id="date-change-btn" class="btn small">Change</button>
[/html]
[javascript gutter=”false”]
$(‘#date-change-btn’).data(‘date’, $.format.date(new Date(), ‘yyyy-MM-dd’))
[/javascript]

GWT (Google Web Toolkit) 2.5.0 Hello World

1. ダウンロードサイトからgwtを入手する
https://code.google.com/p/google-web-toolkit/downloads/detail?name=gwt-2.5.0.zip
2. 解凍
[bash]
$ unzip gwt-2.5.1.zip
[/bash]
3. webAppCreatorを使ってプロジェクトを生成
[bash]
$ ./webAppCreator -out ../HelloWorldGWT com.example.HelloWorldGWT
[/bash]
以下のパラメータが必須

  • -out: 出力先ディレクトリ
  • プロジェクト名 “fully-qualified” java的なパッケージ名を指定する必要があります。

4. 開発モードで動作確認
GWTはJavaでコードを記述してJavascriptにコンパイルする開発ツールですが、毎回コンパイルしながら開発しなくても良いように開発用ツールが用意されています。まずは開発ツールを利用して動作を確認します。
[bash]
$ cd ../HelloWorldGWT/
$ ant devmode
[/bash]
開発ツール”GWT Development Mode”が開くので Development Mode タブで [Launch Default Browser]をクリックするか、[Copy Clip Board]をクリックしてURLをコピーしてブラウザのアドレスバーにペーストしてテストサーバーにアクセスできます。

この内容は本家サイトで確認できます。
http://www.gwtproject.org/gettingstarted.html

5. コンパイル
次にJavascriptにコンパイルして動作させてみます。
[bash]
$ ant war
[/bash]
生成された、HelloWorldGWT.warをTomcatやJettyにデプロイします。