Help us understand the problem. What is going on with this article?

GWT-BootstrapのHello World

More than 5 years have passed since last update.

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());
    }

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

kobito.1381040624.172459.png

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

knzw_ats
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away