GWT-BootstrapのHello World

GWTって？

• google web toolkit
• http://www.gwtproject.org/

Bootstrapって？

• twitter bootstrap
• http://getbootstrap.com/

これを統合したフレームワークが開発され中

• https://github.com/gwtbootstrap/gwt-bootstrap

なのでHello worldしました。

GWT

http://www.gwtproject.org/download.html
からダウンロードしてパスを通しましょう。

GWTプロジェクト作成

IDEの力に頼るのが楽ですが、大体以下のようなディレクトリ構成になっています。

{$appRoot}/
  {$appName}.gwt.xml
  client/
    {appName}.java
  server/

またweb.xmlなども適宜設定が必要なので、面倒な人はぜひIDEを使いましょう。

GWT-bootstrap

<dependency>
    <groupId>com.github.gwtbootstrap</groupId>
    <artifactId>gwt-bootstrap</artifactId>
    <version>2.2.1.0</version>
</dependency>

maven使っている人はpom.xmlに上記を追加しましょう。
使ってない人はjarにパス通したりしましょう。

これで前準備は終わりです。

gwt.xmlを編集

{$appName}.gwt.xmlに、gwt-bootstrap用クラスを追加します。

<inherits name="com.github.gwtbootstrap.Bootstrap"/>

テスト用クラスとxmlを追加

Test.java

public class Test extends Composite{

    interface TestUiBinder extends UiBinder<Widget, Composite> {}
    private static TestUiBinder uiBinder = GWT.create(TestUiBinder.class);

    public Test(){
        initWidget(uiBinder.createAndBindUi(this));
    }
}

Test.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:gwt='urn:import:com.google.gwt.user.client.ui'
             xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
    <gwt:HTMLPanel>
        <div>
            <b:Heading size="1">Hello</b:Heading>
        </div>
    </gwt:HTMLPanel>
</ui:UiBinder>

これらを同じパッケージに置きます。
デフォルトであれば、上記構成のclientパッケージです。
よしなに配置しましょう。

EntryPointから呼び出す

EntryPointに指定されたクラス(デフォルトであれば{$appName}.java)のonModuleLoad()から呼び出してみましょう。

    public void onModuleLoad() {
        RootPanel.get().add(new Test());
    }

これで終わりです。
動かしてみましょう。

どこかで見たような文字が表示されたら成功です。