Symfoware

Symfowareについての考察blog

Google Web Toolkit 2.1 チュートリアル3 ユーザーインターフェースの作成

Google Web Toolkit 2.1のEclipseプラグインをインストールし、
チュートリアルを試しているところです。
Google Web Toolkit 2.1のEclipseプラグインをインストールする
Google Web Toolkit 2.1 チュートリアル1 GWTプロジェクトの作成
Google Web Toolkit 2.1 チュートリアル2 アプリケーションの設計


引き続き、チュートリアルを試します。

Step 3: Build the User Interface
こちらを参考に進めていきます。

※今回の章はちょっと長めです。



1. Selecting GWT widgets to implement the UI elements



前の章で、必要なUI部品を割り出しました。


・株価データを保持する表。
・株式銘柄追加と、株式銘柄削除の2つのボタン。
・株式銘柄コードを入力するテキストボックス。
・最終更新日時を表示するラベル。




株価データを保持する表は、「Stock Data Table」
銘柄の追加や削除を行うボタンは、「Buttons」
株式銘柄コードを入力するテキストボックスは、「Input Box」
最終更新日時を表示するラベルは、「Label」
で実装することにします。

ちなみに、「Input Box」にはこんな種類がある模様。

「TextBox」:一行入力テキストボックス
「PassWordTextBox」:入力した文字にマスクがかかるテキストボックス
「TextArea」:複数行入力テキストボックス
「SuggestBox」:入力候補を表示するテキストボックス


また、このようなUI部品(widget)は自分で作成できるようです。
Developer's Guide - Creating Custom Widgets






2. Selecting GWT panels to lay out the UI elements



画面への部品配置を行うため、パネルの選択を行います。

StockWatcherUIpanel4.png



濃いグレーの部分が「Horizontal Panel」
配置した部品を水平(横並び)に配置します。
ここに「銘柄の入力テキスト」と、「追加ボタン」を配置します。


薄いグレーの部分が「Vertical Panel」
配置した部品を垂直(たて並び)に配置します。

ここに
「銘柄表示テーブル」
「銘柄入力テキストとボタンが乗ったHorizontal Panel」
「最終更新日表示ラベル」
を配置します。


これらのパネルの親になるのが「Root Panel」になります。
いきなりプログラムの話になりますが、RootPanelの取得方法には2種類あるようで、
引数ありだと、HTMLのbodyタグ全て。


// 引数なし。HTMLのbodyタグ内丸ごと
RootPanel.get()




引数を指定すこともできます。
引数は、divとかのidで指定した名称をとるようで、範囲はdiv内となります。


// divのidに指定した名称。取得はdiv内
RootPanel.get("stockList")




JavaのSwingや、Flexで画面を作った経験があるひとなら、
理解が早いんじゃないでしょうか?






3. Embedding the application in the host page



StockWatcher.htmlを変更します。
ちなみに、Eclipseのパッケージ・エクスプローラー上での位置はここ。

04_001_20101103160157.png


やったことは
・タイトルを「StockWatcher」に変更
・「stockList」というidのdivを追加
・既存の画面表示部分を削除
というところでしょうか。



<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="StockWatcher.css">
    
    <!-- タイトルを「StockWatcher」へ変更 -->
    <!-- <title>Web Application Starter Project</title> -->
    <title>StockWatcher</title>
    <script type="text/javascript" language="javascript" src="stockwatcher/stockwatcher.nocache.js"></script>
  </head>

  <body>
    
    <!-- 以下二行を追加。二行目のdivをRootPanelにする予定 -->
    <h1>StockWatcher</h1>
    <div id="stockList"></div>
    
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <!-- これ以降は削除 -->
    <!--
    <h1>Web Application Starter Project</h1>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
      </tr>
    </table>
    -->
    
  </body>
</html>





・・・これで伝わるでしょうか?

04_002_20101103160156.png






4. Implementing widgets and panels



いよいよプログラムの修正に入ります。
修正するソースは「StockWatcher.java」

Eclipseのパッケージ・エクスプローラー上ではここ。

04_003_20101103160156.png


元々記載されているファイルの内容は潔く消して、
パネルやテーブルオブジェクトを宣言した以下のソースを貼り付けます。


package com.google.gwt.sample.stockwatcher.client;

public class StockWatcher implements EntryPoint {

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

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // TODO Create table for stock data.
        // TODO Assemble Add Stock panel.
        // TODO Assemble Main panel.
        // TODO Associate the Main panel with the HTML host page.
        // TODO Move cursor focus to the input box.

    }

}






ソースを貼り付けた後は、必要なimportがないためエラーになると思います。
エディタの左側に表示される黄色いアイコンをクリックすると
候補が表示されますので、EntryPointを選択します。
すると、自動的にimportが追加されるかと思います。

普段、EclipseでJavaの開発を行っている人にはおなじみの処理かと。

04_004_20101103160156.png


この作業を繰り返し行い、

EntryPoint
VerticalPanel
FlexTable
HorizontalPanel
TextBox
Button
Label


の解決を行っていきます。
※Labelなど、複数候補が表示されますが、
「com.google.gwt.user.client.ui」に含まれるものを選択します。


importの構成が終わった後は、このようなソース時の状態に
なっているかと思います。
・・・まあ、いきなりこのコードを貼ったほうが早いんですけどね。


package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class StockWatcher implements EntryPoint {

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

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // TODO Create table for stock data.
        // TODO Assemble Add Stock panel.
        // TODO Assemble Main panel.
        // TODO Associate the Main panel with the HTML host page.
        // TODO Move cursor focus to the input box.

    }
}








2. Create a table for stock data



FlexTableの先頭行に、列名を追加します。
追加は、setTextを使用します。


FlexTable#setText(row, column, text);




0行目の0列から3列まで、タイトル行を設定したソースがこちら。


package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class StockWatcher implements EntryPoint {

    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("追加");
    private Label lastUpdatedLabel = new Label();

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // ===今回追加するコードはここから===
        // テーブルの作成
        stocksFlexTable.setText(0, 0, "銘柄");
        stocksFlexTable.setText(0, 1, "価格");
        stocksFlexTable.setText(0, 2, "変動");
        stocksFlexTable.setText(0, 3, "削除");
        // ===今回追加するコードはここまで===
        
        
        // TODO Assemble Add Stock panel.
        // TODO Assemble Main panel.
        // TODO Associate the Main panel with the HTML host page.
        // TODO Move cursor focus to the input box.

    }
}








3. Lay out the widgets



テーブルの作成を終えたので、パネルに部品を配置していきます。

横に部品が並ぶ「HorizontalPanel」のaddPanelに、
・銘柄入力テキスト「newSymbolTextBox」
・追加ボタン「addStockButton」
を追加します。

縦に部品が並ぶ「VerticalPanel」のmainPanelに、
・銘柄表示テーブル「stocksFlexTable」
・上記で作成したパネル「addPanel」
・最終更新日表示ラベル「lastUpdatedLabel」
を追加します。

この処理を追加したソースがこちら。



package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class StockWatcher implements EntryPoint {

    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("追加");
    private Label lastUpdatedLabel = new Label();

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // テーブルの作成
        stocksFlexTable.setText(0, 0, "銘柄");
        stocksFlexTable.setText(0, 1, "価格");
        stocksFlexTable.setText(0, 2, "変動");
        stocksFlexTable.setText(0, 3, "削除");
        
        // ===今回追加するコードはここから===
        // 部品が横に並ぶパネルに、銘柄入力テキストとボタンを追加
        addPanel.add(newSymbolTextBox);
        addPanel.add(addStockButton);
        
        // 部品が縦に並ぶパネルに、テーブルと上記パネル、最終更新日ラベルを追加
        mainPanel.add(stocksFlexTable);
        mainPanel.add(addPanel);
        mainPanel.add(lastUpdatedLabel);
        // ===今回追加するコードはここまで===
        
        // TODO Associate the Main panel with the HTML host page.
        // TODO Move cursor focus to the input box.

    }
}








4. Associate the Main panel with the Root panel



パネルに部品を追加し終えました。
元となるルートパネルに、これまでで作成したパネルを設定します。

ルートパネルに設定するのは、StockWatcher.htmlに記載した
idが「stockList」のdiv領域です。

ルートパネルを取得するために、「RootPanel」というクラスを
使用しますが、importがないという警告が出ると思います。


import com.google.gwt.user.client.ui.RootPanel;


このimportを追加すると解決するはずです。


ここまでで、ソースは以下のようになっているはずです。


package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class StockWatcher implements EntryPoint {

    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("追加");
    private Label lastUpdatedLabel = new Label();

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // テーブルの作成
        stocksFlexTable.setText(0, 0, "銘柄");
        stocksFlexTable.setText(0, 1, "価格");
        stocksFlexTable.setText(0, 2, "変動");
        stocksFlexTable.setText(0, 3, "削除");
        
        // 部品が横に並ぶパネルに、銘柄入力テキストとボタンを追加
        addPanel.add(newSymbolTextBox);
        addPanel.add(addStockButton);
        
        // 部品が縦に並ぶパネルに、テーブルと上記パネル、最終更新日ラベルを追加
        mainPanel.add(stocksFlexTable);
        mainPanel.add(addPanel);
        mainPanel.add(lastUpdatedLabel);
        
        // ===今回追加するコードはここから===
        // StockWatcher.htmlのid=stockListのdivを
        // ルートパネルとして取得し、mainPanelを設定する。
        RootPanel.get("stockList").add(mainPanel);
        // ===今回追加するコードはここまで===

        // TODO Move cursor focus to the input box.

    }
}








5. Move cursor focus to the input box



最後に、画面を表示したとき銘柄入力用のテキストボックスに
フォーカスを設定する処理を記載します。

・・・こんな制御まで出来るなんて。



package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class StockWatcher implements EntryPoint {

    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("追加");
    private Label lastUpdatedLabel = new Label();

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // テーブルの作成
        stocksFlexTable.setText(0, 0, "銘柄");
        stocksFlexTable.setText(0, 1, "価格");
        stocksFlexTable.setText(0, 2, "変動");
        stocksFlexTable.setText(0, 3, "削除");
        
        // 部品が横に並ぶパネルに、銘柄入力テキストとボタンを追加
        addPanel.add(newSymbolTextBox);
        addPanel.add(addStockButton);
        
        // 部品が縦に並ぶパネルに、テーブルと上記パネル、最終更新日ラベルを追加
        mainPanel.add(stocksFlexTable);
        mainPanel.add(addPanel);
        mainPanel.add(lastUpdatedLabel);
        
        // StockWatcher.htmlのid=stockListのdivを
        // ルートパネルとして取得し、mainPanelを設定する。
        RootPanel.get("stockList").add(mainPanel);
        
        // ===今回追加するコードはここから===
        // 起動時、銘柄入力のテキストボックスにフォーカスを設定する
        newSymbolTextBox.setFocus(true);
        // ===今回追加するコードはここまで===
    }
}








Summary



最終的なソースは、こんな感じになっているはずです。


package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class StockWatcher implements EntryPoint {

    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("追加");
    private Label lastUpdatedLabel = new Label();

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // テーブルの作成
        stocksFlexTable.setText(0, 0, "銘柄");
        stocksFlexTable.setText(0, 1, "価格");
        stocksFlexTable.setText(0, 2, "変動");
        stocksFlexTable.setText(0, 3, "削除");
        
        // 部品が横に並ぶパネルに、銘柄入力テキストとボタンを追加
        addPanel.add(newSymbolTextBox);
        addPanel.add(addStockButton);
        
        // 部品が縦に並ぶパネルに、テーブルと上記パネル、最終更新日ラベルを追加
        mainPanel.add(stocksFlexTable);
        mainPanel.add(addPanel);
        mainPanel.add(lastUpdatedLabel);
        
        // StockWatcher.htmlのid=stockListのdivを
        // ルートパネルとして取得し、mainPanelを設定する。
        RootPanel.get("stockList").add(mainPanel);
        
        // 起動時、銘柄入力のテキストボックスにフォーカスを設定する
        newSymbolTextBox.setFocus(true);
    }
}








5. Testing the layout



StockWatcher.javaを保存したら、Webサーバーを起動します。
手順は以下と同じです。

Google Web Toolkit 2.1 チュートリアル1 GWTプロジェクトの作成
2. Testing the default project components


ブラウザには、こんな画面が表示されていると思います。

04_005_20101103160155.png





関連記事



Google Web Toolkit 2.1 チュートリアル4 クライアントのイベント制御
Google Web Toolkit に関する記事の一覧










関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/11/03(水) 16:03:41|
  2. Google Web Toolkit
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Google Web Toolkit 2.1 チュートリアル4 クライアントのイベント制御 | ホーム | Google Web Toolkit 2.1 チュートリアル2 アプリケーションの設計>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
https://symfoware.blog.fc2.com/tb.php/632-1638367c
この記事にトラックバックする(FC2ブログユーザー)