GWT示範網站-步驟三：開始建立使用者介面

約分為幾個步驟：
1. 從GWT的widgets小物件與panels面板裏面選出UI介面需要的元素，當然這就需要平常經驗以及閱讀文件的能力，Google提供的文件內容如下，
 
最後決定使用底下widgets

1. a table 存放 stock data→FlexTable可以提供使用者動態增刪表格內容
2. 兩個新增與刪除按鈕→Button
3. 一個輸入框→TextBox
4. 時間同步顯示→Label
5. 或者自行開發widgets→ Creating Custom Widgets.

需要的panels有隱形的Root panel以及 horizontal panel和 vertical panel
 Root panel為程式元件的動態容器，隱形但卻是必要的，位於任何GWT介面的上層，可以放在body或者任何地方，一個body也可以放置多個Root panel，每一個都有自己的GWT widgets與目的。horizontal panel的目的為放置一個輸入框與按鈕，可以增加股票資訊。至於vertical panel就是要擺進所有的widgets顯示畫面 。

2.在頁面裡嵌入這些程式，因為我們要在網頁上執行，這個範例的html在StockWatcher/war/StockWatcher.html，改變底下幾行

h1股票觀測站

刪除table裡的資料

3.接著就要到GWT JAVA主程式 src/.../../client/StochWatcher.java，
一.放進所有需要的panels與widgets，在
public class StockWatcher裡面，先把private static final兩項刪除加上底下數行

  private VerticalPanel mainPanel = new VerticalPanel();
  private FlexTable stocksFlexTable = new FlexTable();
  private HorizontalPanel addPanel = new HorizontalPanel();
  private TextBox newSymbolTextBox = new TextBox();
  private Button addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label(); 

再把onModuleLoad()裡的東西都刪除，這時eclipse會顯示許多紅燈，因為以上的型態都

沒有確定their types are undefined，利用eclipse的功能，對紅燈項目按左鍵，

選擇import EntryPoint(com.google.gwt.core.client.EntryPoint) ...等等，一個個

同樣步驟，紅燈就會熄了。

二.建立股票資訊表格：先設定欄位名稱為代號、價格、變化率、移除等，加在

onModuleLoad()底下

  // Create table for stock data.
    stocksFlexTable.setText(0, 0, "代號");
    stocksFlexTable.setText(0, 1, "價格");
    stocksFlexTable.setText(0, 2, "變化率");
    stocksFlexTable.setText(0, 3, "移除");

三.我們還需要兩個panels來展示widgets，Add Stock panel一個平行的panel包含textbox

和addbotten 。the Main panel則來放置表格，Add Stock panel, and the timestamp，加在
onModuleLoad()裡面

  // Assemble Add Stock panel.
    addPanel.add(newSymbolTextBox);
    addPanel.add(addStockButton);

    // Assemble Main panel.
    mainPanel.add(stocksFlexTable);
    mainPanel.add(addPanel);
    mainPanel.add(lastUpdatedLabel);
 四.把main panel與Root panel做起關聯，因為要把所有widgets與 panels放進html page裡面

，一定要透過Root panel

// Associate the Main panel with the HTML host page.
    RootPanel.get("stockList").add(mainPanel); 

也要import com.google.gwt.user.client.ui.RootPanel;，利用eclipse按左鍵 

五.最後把游標提醒加在input box，以提醒使用者開始輸入資料。

// Move cursor focus to the input box.
    newSymbolTextBox.setFocus(true); 

最後再run as application來測試。