2012年5月21日月曜日

GWT-Bootstrapの組み込み方

jarをダウンロードして使う方法と、GithubからPullして使う方法がある。
(開発者のKeisukeさんコメントありがとうございます)

■GWT-Bootstrapのjarダウンロード
https://github.com/gwtbootstrap/gwt-bootstrap/downloads
から、gwt-bootstrap-2.x.x.x-SNAPSHOT-sources.jar
をダウンロードして、プロジェクトのビルドパスに入れる。

または、Gitからソースを取得する↓

■TortoiseGitのインストール
http://code.google.com/p/tortoisegit/downloads/list
※Gitはバージョン管理ツール。TortoiseGitを右クリックメニューに追加して使用

■GWT-Bootstrapのダウンロード(GitでClone)
任意のフォルダ(eclipseのworkspaceがよい)で右クリックしてGit Clone
Urlに、https://github.com/gwtbootstrap/gwt-bootstrap.git を入力してOKクリック

※頻繁に更新されているので、随時最新をゲットする(右クリック→TortoiseGit→Pull)

■Eclipseにインポート
作成されたgwt-bootstrapフォルダをEclipseのプロジェクトとして設定
テストクラスでコンパイルエラーが出るので該当javaファイルを消す

■GWT-Bootstrapを使用したい方のプロジェクトの設定
Eclipseで使用側のプロジェクトのプロパティを開いて「Javaのビルド・パス」→「プロジェクト」→GWT-Bootstrap追加→OK

----------------------------------------------------------------------
以下、GWTへの組み込み方法

■xxxx.gwt.xml
以下を追加
<inherits name='com.github.gwtbootstrap.Bootstrap' />
<set-property name="bootstrap.responsiveDesign" value="true"/><!-- レスポンシブデザイン有効化 -->

■xxx.ui.xml
uiタグにgwtbootstrap(xmlns:b....)を追加
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">

<b:Button ui:field="button" icon="HEART" type="INFO">Testbutton</b:Button>
のようにしてボタンを作成。(GWT標準のButtonクラスとは違う)

その他、http://gwtbootstrap.github.com/やsrc/demo/以下にあるui.xmlを参考にしてウィジェットを使用する。

3 件のコメント:

  1. gwt-bootstrapの開発者の一人です。
    紹介有り難うございます。
    今は多分downloadにもjarファイルがおいてあるので、そっちからのほうがいいかもです~
    downloadのjarもソースに更新があれば3時間に1回は必ず更新されるので~

    返信削除
    返信
    1. コメントありがとうございます!
      なるほど、了解です。追記します。

      今うちの会社で実プロジェクトで使用させていただいてます!
      現状ではソースも見させてもらっているので、
      しばらくはPullさせていただきます~。

      削除
  2. お仕事で使っていただいているんですね!相当嬉しいです!
    何かあったらissueにぶち込むか僕の方に直接いって下さい~

    返信削除