反正也沒人來尋求 free support，就只好倒貼了
我不是很喜歡寫這種 step-by-step
不過有時候不寫這種文章人家還以為...
======== 以上純碎念，與原 po 無關 ========
※ 引述《BignoZe (BignoZe)》之銘言：
: ※ 引述《PsMonkey (痞子軍團團長)》之銘言：
: : 喔對，我是看 gwtbootstrap，不是看 gwtbootstrap3
: : pom 檔肉眼看起來...
: : 阿等等，明明有這個
: : http://gwtbootstrap.github.io/gwt-bootstrap/dependencies.html
: : 如果我沒有解讀錯，除非你要「開發 / 測試」gwt-bootstrap
: : 不然... 沒什麼相依性可言
: : 「看起來」你直接把 source code 倒進 project 裡頭也能動
: 我嘗試以下列步驟使用gwt-bootstrap
: 1. Add the GWT-bootstrap jar to your project build path
: 2. In the gwt.xml config file add a reference to the gwt-bootstrap library.
: <inherits name ="com.github.gwtbootstrap.Bootstrap"/>
: 3. add the following namespace to the <ui:UiBinder>
: xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
: 設定完之後在uiBinder輸入
: <b:heading size="2">Hello World</b:heading>
我昨天只掙扎著要不要用版規辦你 [喂喂]
有些細節倒是忘記注意
那個 heading 為什麼是小寫開頭阿阿阿阿 [指]
: 結果會出現莫名的錯誤
: 因此我推測應該不能直接把source code倒進專案中
首先，你的 jar 檔哪來的我不知道
不過 jar 檔裡頭萬一沒包 source code
那 GWT 肯定讓你炸光不讓你 compile
再者「source code 倒進專案當中」
不是你說的這種吧......
anyway，空虛硬幹完全沒技術層次的操作步驟
連 git 都不用，科科
（以下假設用 GPE 的標準 GWT project）
1. 去 https://github.com/gwtbootstrap/gwt-bootstrap
按右下角的 download ZIP
會得到一個 gwt-bootstrap-master.zip
2. 新增一個 Google / Web Application Project
假設 project 名稱是 GB、package 名稱為 test
3. 將 gwt-bootstrap-master.zip 當中
/src/main/java
底下的 com 目錄丟到你的 project
/src
理論上 Eclipse 不會找到什麼 error
4. 將 GB.gwt.xml 加入
<inherits name ="com.github.gwtbootstrap.Bootstrap"/>
4. test.GB 這個 class 改成
package test.client;
import com.github.gwtbootstrap.client.ui.Heading;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
public class GB implements EntryPoint {
@Override
public void onModuleLoad() {
RootPanel.get().add(new Heading(1, "Heading1 by new instance"));
RootPanel.get().add(new MyWidget());
}
}
5. 補個 MyWidget.java
package test.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class MyWidget extends Composite {
private static MyWidgetUiBinder uiBinder =
GWT.create(MyWidgetUiBinder.class);
interface MyWidgetUiBinder extends UiBinder<Widget, MyWidget> {}
public MyWidget() {
initWidget(uiBinder.createAndBindUi(this));
}
}
還有 MyWidget.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:gwtbootstrap="urn:import:com.github.gwtbootstrap.client.ui">
<ui:style>
</ui:style>
<g:HTMLPanel>
<gwtbootstrap:Heading size="2">Heading 2</gwtbootstrap:Heading>
</g:HTMLPanel>
</ui:UiBinder>
6. 開 develop mode，看結果 [下略]
因為沒什麼技術含量，所以懶得丟 github
: : 個人觀點來說 UI 美化，到最後都是惡夢
: : 你用野生的 bootstrap 還是跟 GWT 合體的 gwt-bootstrap
: 請問有野生的bootstrap例子可以觀摩嗎
: 對於這個做法沒什麼頭緒
: 我找了一陣子看到的方法是:先將元件的css移除再加上bootstrap的css
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
阿這不就是 Gwt-Bootstrap 在做的事情
你列的討論串也這樣講了
> you will made a class that extend the original component and
> use this new class everywhere, which is basically what GWT-Bootstrap do.
: 這是原討論串
: http://ppt.cc/voSQ
======== 以下純粹插花外提閒聊 ========
UI 方面我不是什麼專家
我只能簡單說一下我那其實也沒很多的經驗中
弄 UI 會遇到什麼問題
以我的分類，UI 大概就會切成三塊
1. 操作功能
2. 樣式
3. layout
第一點在 browser + GWT 的架構下不太需要擔心
除了 DnD（的功能）沒有直接內建之外，基本款大致都有
至少你要把 native browser event 包進來，不會是問題
當然需要一點 JSNI / GWT UI 架構的知識
後面兩樣跟「美化」會有些關係
我的「樣式」就侷限在顏色、字體大小、邊框...
這基本上也沒啥問題，或著說，有問題也是 CSS 技術的問題
然後就馬上自己打槍自己 ＝＝"
這在 GWT 當中還蠻多哏的
因為 GWT 可以卡 style 的機會很多
從 host page、gwt.xml 指定 theme 或是 stylesheet
程式碼當中還有 UiBinder / CssResource 等等可以亂搞
不說別的，光到底是 setStyleName() 還是 addStyleName() 就很費思量
尤其萬一你是要作 widget 給別人用的時候
最麻煩的應該還是 3
光是誰會依內容撐開、誰撐開誰、誰跟誰排在一起的時候要怎麼決定順序
別人我不知道，至少把我搞的很死 Orz
如果又希望 layout 是可以跟著視窗 / 螢幕大小調整
（算初期的 responsive design，還不用刪減內容無訪）
那就會是惡夢中的惡夢
這會牽扯到 resize 觸發之後，各個計算時間點的問題
然後再搭配考量如何在 GWT 中實做... 喔耶... \囧/
組合爆炸，我放棄....... [逃]
所以光是拿掉 CSS、掛上 bootstrap 的 CSS
這最多只是讓你的畫面看起來像 bootstrap 做出來的東西
（是好事嗎？ XD）
實際上... 尤其如果你是作 application 導向的東西
bootstrap 夠用嗎？ 我是抱持懷疑的態度啦...
說穿了，UI 就是把玩 CSS / DOM，然後搭配一些 JS
你 or 那個 stackoverflow 說的沒啥太大問題
但我會說，這只是打開了惡夢的第一頁
阿們