GWTとBootstrapの併用でレスポンシブWebデザイン

ＧＷＴ Bootstrap3

概要

GWTとBootstrap3でレスポンシブWebデザインをするときのサンプルと注意事項

GWTBootstrapなるオープンソースもあるけど日本語資料が少ないので今回は使用しない。
GWT-Bootstrap

メリット

javaコードに画面のレイアウト情報が入ってこないので、ビジネスロジックがすっきりする。
（画面レイアウトのためにFlexTableなどを使用する必要がない。）
レイアウト情報はhtmlファイルに集中するので再編集しやすい。
日本語資料の多いBootstrapで画面レイアウトを行うことができる。

サンプル

GWTとBootstrap3を通常通り使用する。
HTMLは普通にBootstrapを使用するときと同じ。
GWTモジュールではidに対応するdiv要素を探して、クリックハンドラを追加。

Main.html


<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery読み込み -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>

<!-- gwtアプリ読み込み -->
<script type="text/javascript" language="javascript"
	src="main/Main.nocache.js"></script>

<!-- 中略 -->

<div class="container">
  <div class="col-md-1 btn btn-default">
    <div id="btnPanel1">
    <img src="/img/1.png">
    <div>ボタン１</div>
    </div>
  </div>
  <div class="col-md-1 btn btn-default">
    <div id="btnPanel2">
    <img src="/img/2.png">
    <div>ボタン２</div>
    </div>
  </div>
</div>

Main.java

public void onModuleLoad() {

        {
            RootPanel.get("btnPanel1").addDomHandler(
                new ClickHandler() {
                    public void onClick(ClickEvent event) {
                        fireBtn1Event();
                    }
                },
                ClickEvent.getType());
        }
}

注意事項

  1. HTMLの記述は、先にbootstrap関連を読み込み、次にGWT関連を読み込む

以下のエラーが出るとき

Uncaught TypeError: Cannot read property 'appendChild' of null

javascript - How do I solve this "Cannot read property 'appendChild' of null" error? - Stack Overflow