GWTBootstrapプログラミング

GWTBootStrapとは

BootstrapとはTwitter社が公開しているウェブUI周りのライブラリです。スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用したJavaScriptのフレームワークです。そしてGWTBootstrapとは、BootstrapをGWTでも利用できるようにしたライブラリです。下記は本家サイトへのリンクです。

正確に言うと、BootstrapをGWTでも使えるようにしているライブラリは

    • gwtbootstrap3
    • GWT-Bootstrap

の2つが存在しています。後者は昔からあるのですが、Bootstrapの旧バージョンへの対応に留まっているようです（2016.4.8現在）。どちらがいいかは断言はできませんが、StackOverFlowなどの情報を見るとBootstrap3に対応している前者のほうがいいかなというのが今のところの結論です。

jarファイルの入手方法

本家サイトには最新のjarファイルが置いてないので、下記のURLからjarファイルを入手し、EclipseでのProjectのライブラリにExternal Jarとして追加してください。下記からは最新バージョンを入手して下さい。

  • MavenRepository
    • 補足： 関連するライブラリとして、gwtbootstrap3-extras があります。extrasとして実装されている場合は、extrasのjarもダウンロードして下さい（上位階層から辿って下さい）。

初期設定

gwt.xmlファイルの記述方法

<inherits name="org.gwtbootstrap3.GwtBootstrap3"/>

uibinderのヘッダ

xmlns:b="urn:import:org.gwtbootstrap3.client.ui"

使い方

基本的にGWTに準拠しています。UiBinderも同様に使えるところが最大の利点です。しかし、GWTBootstrapに関する情報は少ないという欠点があります。どのような特徴があるかは、GWTBootstrapではなくBootstrapでネットを検索しましょう。そうすることで、Bootstrapの特徴やメリットがわかるかと思います。つまり、

  • Bootstrapでどういうことができるのかを知る
  • GWTだとどう書いたらいいのかを試行錯誤する（基本はGWTの流儀に従います）

という感じです。使われている用語はほぼ同じですから、基本的に同様な使い方（ただしプログラムの書き方は違う）をすればいいと考えてください。

なお、GWTBootstrap3のマニュアルには、Uibinderの記述例も書かれているのでそれも参考にして下さい。

注意事項

GWTのデフォルトのButtonとGWTBootstrapのButtonはクラス名がいずれも同じです。しかし、機能は当然異なりますから、importするパッケージには注意して下さい。例えば

    • import com.google.gwt.user.client.ui.Button; → import org.gwtbootstrap3.client.ui.Button;

というような注意が必要です。

デバッグのコツ

エラーが出た場合はとにかくログを見ること。例えば

<b:PanelFooter>aaa</b:PanelFooter>

というコードを書いた時に

  • [ERROR] Unexpected text in element: "aaa": <b:PanelFooter>

というメッセージが出た場合、何をすればいいか？これは、文字列を子要素にしてはダメ（直接してはダメ）ということです。解決策としては、例えば以下の様な感じになります。

<b:PanelFooter><g:Label>aaa</g:Label></b:PanelFooter>

ラベルにaaaという文字列を挟みこむことで対応します。UiBInderではこういったケースが多いので、エラーはよく見て下さい。