Symfoware

Symfowareについての考察blog

Google Web Toolkit 2.1 チュートリアル5 クライアントでの処理実行

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 アプリケーションの設計
Google Web Toolkit 2.1 チュートリアル3 ユーザーインターフェースの作成
Google Web Toolkit 2.1 チュートリアル4 クライアントのイベント制御

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

Step 5: Code Functionality on the Client
こちらを参考に進めていきます。




1. Adding and removing stocks from the stock table



テーブルへの行の追加・削除処理を作成します。

作成手順はこんな感じで。

1.追加する行のデータを作成する。
2.テーブルに行を追加する。
3.テーブルに追加した行に、削除ボタンを乗せる。
4.デバッグ用のサーバーで動かして確認。



【1. Create a data structure】

テーブルに表示している行の情報を保持するため、
ArrayListの変数を宣言します。

ちなみに、ArrayListを使うには、以下のimportが必要です。

import java.util.ArrayList;




ソースの抜粋はこんな感じになるはずです。


//=== ArrayListを使いたいのでimportを追加 ===
import java.util.ArrayList;

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();
    
    // テーブルに表示しているデータ保存用の変数
    private ArrayList<String> stocks = new ArrayList<String>();







【2. Add rows to the flex table】

前回作成した、テーブルに行を追加する「addStockメソッド」に
処理を記載します。

記載する処理は2つ。

1.証券コードの重複チェック処理
2.テーブルへの行追加処理


addStockメソッド部分のソースの抜粋はこんな感じになるはずです。


    // 株式銘柄の追加処理
    private void addStock() {
        // テキストボックスから入力された文字列を取得
        final String symbol = newSymbolTextBox.getText().toUpperCase().trim();
        newSymbolTextBox.setFocus(true);

        // 証券コードは、1文字以上10文字以下
        // 使える文字は数字・アルファベット・ドット(.)のみ
        if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {
            // 入力された文字が証券コードではない場合は、エラーメッセージ表示
            Window.alert("'" + symbol + "' は不正な証券コードです。");
            newSymbolTextBox.selectAll();
            return;
        }

        newSymbolTextBox.setText("");
        
        // === ここ以降、今回追加した処理 === //
        // 1.証券コードの重複チェック処理
        // 追加予定の証券コードが既にリストに含まれていたら、追加処理を実行しない。
        if (stocks.contains(symbol)) {
            return;
        }
        // 2.テーブルへの行追加処理
        // 現在のテーブルの行数を取得
        int row = stocksFlexTable.getRowCount();
        
        // ArrayListに追加した証券コードを退避
        stocks.add(symbol);
        
        // テーブルへ行の追加実行
        stocksFlexTable.setText(row, 0, symbol);
        
        // TODO 追加した行に削除ボタンを配置
        // TODO 証券の金額を取得
    }








【3. Add a button to remove stocks from the stock list】

テーブルに追加した行に削除ボタンを追加します。
addStockメソッド内でテーブルに行を追加した後の処理に記載します。


addStock部分を抜粋です。
削除ボタンを生成し、削除の動作を定義。
テーブルへの追加を行っています。


    // 株式銘柄の追加処理
    private void addStock() {
        // テキストボックスから入力された文字列を取得
        final String symbol = newSymbolTextBox.getText().toUpperCase().trim();
        newSymbolTextBox.setFocus(true);

        // 証券コードは、1文字以上10文字以下
        // 使える文字は数字・アルファベット・ドット(.)のみ
        if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {
            // 入力された文字が証券コードではない場合は、エラーメッセージ表示
            Window.alert("'" + symbol + "' は不正な証券コードです。");
            newSymbolTextBox.selectAll();
            return;
        }

        newSymbolTextBox.setText("");
        
        // 証券コードの重複チェック処理
        // 追加予定の証券コードが既にリストに含まれていたら、追加処理を実行しない。
        if (stocks.contains(symbol)) {
            return;
        }
        // ーブルへの行追加処理
        // 現在のテーブルの行数を取得
        int row = stocksFlexTable.getRowCount();
        // ArrayListに追加した証券コードを退避
        stocks.add(symbol);
        // テーブルへ行の追加実行
        stocksFlexTable.setText(row, 0, symbol);
        
        
        // === ここ以降、今回追加した処理 === //
        // 追加した行に削除ボタンを配置
        Button removeStockButton = new Button("x");
        
        // 削除ボタンが押されたときのイベントを定義
        removeStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                // 削除する行のインデックスを取得
                int removedIndex = stocks.indexOf(symbol);
                // ArrayListから削除
                stocks.remove(removedIndex);
                // テーブルからも削除
                stocksFlexTable.removeRow(removedIndex + 1);
            }
        });
        
        // 削除ボタンをテーブルに追加
        stocksFlexTable.setWidget(row, 3, removeStockButton);
        
        // TODO 証券の金額を取得
    }








【4. Test Add/Remove Stock Functionality】

ここまでで、

1.テーブルへのデータ追加
2.証券コードの重複チェック
3.テーブルから行の削除

これらの処理は動くはずです。

デバッグ用のサーバーを起動して、ブラウザで確認してみると・・・

06_001_20101103195259.png


証券コードが重複している場合、メッセージが表示されず
テキストがクリアされるだけというのが若干寂しいですが、
狙い通りの動作になっています。






2. Refreshing the Price and Change fields



さて、ここまでで大まかな動作の実装は行えました。

これから実装するのは

1.監視間隔を指定できるタイマーを作成し、自動的に価格と変動情報を更新する。
2.「StockPrice」という株価データを保持するクラスを作成する。
3.ランダムな価格データを生成する「refreshWatchList」メソッドを作成する。
4.テーブルのデータ更新時に価格と変動値を読み込むようにする。

というような処理です。




【1. Automatically refresh stock data】

ここでやること。


1.データの自動更新を行うために、onModuleLoadメソッドでタイマーを生成
2.タイマーは「Timer」オブジェクトを使用するので、importを追加
3.更新間隔を指定するための「REFRESH_INTERVAL」という変数を作成
4.addStockメソッドの最後に価格情報を更新する処理を追記
5.価格情報を更新する「refreshWatchList」というメソッドを作成





ソースコードの全体像はこんな感じになるはずです。
※がんばってみましたが、変更箇所がわかりにくいかも。


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;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyPressEvent;
import com.google.gwt.event.dom.client.KeyPressHandler;
import com.google.gwt.user.client.Window;
import java.util.ArrayList;

//============= 追加処理2 ============= //
// 2.タイマーは「Timer」オブジェクトを使用するので、importを追加
import com.google.gwt.user.client.Timer;
//============= 追加処理2 ============= //

public class StockWatcher implements EntryPoint {
    
    //============= 追加処理3 ============= //
    // 3.更新間隔を指定するための「REFRESH_INTERVAL」という変数を作成
    private static final int REFRESH_INTERVAL = 5000; // ms
    //============= 追加処理3 ============= //
    
    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();
    // テーブルに表示しているデータ保存用の変数
    private ArrayList<String> stocks = new ArrayList<String>();
    
    /**
     * 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);
        
        // 追加ボタンにイベントリスナーを設定
        addStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                addStock();
            }
        });
        
        // 銘柄入力テキストにイベントリスナーを設定
        newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {
            public void onKeyPress(KeyPressEvent event) {
                // 入力されたキーが「Enter」だったら、追加処理を実行する
                if (event.getCharCode() == KeyCodes.KEY_ENTER) {
                    addStock();
                }
            }
        });
        
        // ============= 追加処理1 ============= //
        // 1.データの自動更新を行うために、onModuleLoadメソッドでタイマーを生成
        Timer refreshTimer = new Timer() {
            @Override
            public void run() {
                refreshWatchList();
            }
        };
        refreshTimer.scheduleRepeating(REFRESH_INTERVAL);
        // ============= 追加処理1 ============= //
    }
    
    // 株式銘柄の追加処理
    private void addStock() {
        // テキストボックスから入力された文字列を取得
        final String symbol = newSymbolTextBox.getText().toUpperCase().trim();
        newSymbolTextBox.setFocus(true);

        // 証券コードは、1文字以上10文字以下
        // 使える文字は数字・アルファベット・ドット(.)のみ
        if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {
            // 入力された文字が証券コードではない場合は、エラーメッセージ表示
            Window.alert("'" + symbol + "' は不正な証券コードです。");
            newSymbolTextBox.selectAll();
            return;
        }

        newSymbolTextBox.setText("");
        
        // 証券コードの重複チェック処理
        // 追加予定の証券コードが既にリストに含まれていたら、追加処理を実行しない。
        if (stocks.contains(symbol)) {
            return;
        }
        // テーブルへの行追加処理
        // 現在のテーブルの行数を取得
        int row = stocksFlexTable.getRowCount();
        // ArrayListに追加した証券コードを退避
        stocks.add(symbol);
        // テーブルへ行の追加実行
        stocksFlexTable.setText(row, 0, symbol);
        
        // 追加した行に削除ボタンを配置
        Button removeStockButton = new Button("x");
        // 削除ボタンが押されたときのイベントを定義
        removeStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                // 削除する行のインデックスを取得
                int removedIndex = stocks.indexOf(symbol);
                // ArrayListから削除
                stocks.remove(removedIndex);
                // テーブルからも削除
                stocksFlexTable.removeRow(removedIndex + 1);
            }
        });
        
        // 削除ボタンをテーブルに追加
        stocksFlexTable.setWidget(row, 3, removeStockButton);
        
        //============= 追加処理4 ============= //
        // 4.addStockメソッドの最後に価格情報を更新する処理を追記
        // 証券の金額を取得
        refreshWatchList();
        //============= 追加処理4 ============= //
    }
    
    //============= 追加処理5 ============= //
    // 5.価格情報を更新する「refreshWatchList」というメソッドを作成
    // 価格情報の更新を行う
    private void refreshWatchList() {
        // TODO 価格情報の更新処理
    }
    //============= 追加処理5 ============= //
}







【2. Encapsulate stock price data】

株式銘柄の価格情報を保持する「StockPrice」クラスを作成します。

Eclipseのメニューにある[ファイル]-[新規]-[クラス]を選択。

06_002_20101103195258.png


ソースフォルダは「StockWatcher/src」
パッケージは「com.google.gwt.sample.stockwatcher.client」
名前は「StockPrice」
を入力します。

入力したら、完了ボタンを押下。

06_003_20101103195258.png


StockPriceクラスが作成されました。

06_004_20101103195258.png



StockPriceクラスを以下の内容に変更します。


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

public class StockPrice {

    private String symbol;
    private double price;
    private double change;

    public StockPrice() {
    }

    public StockPrice(String symbol, double price, double change) {
        this.symbol = symbol;
        this.price = price;
        this.change = change;
    }

    public String getSymbol() {
        return this.symbol;
    }

    public double getPrice() {
        return this.price;
    }

    public double getChange() {
        return this.change;
    }

    public double getChangePercent() {
        return 10.0 * this.change / this.price;
    }

    public void setSymbol(String symbol) {
        this.symbol = symbol;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public void setChange(double change) {
        this.change = change;
    }
}







【3. Generate the stock data】

StockPriceという株式銘柄コードや価格を保持するクラスを作成しました。
ここにランダムな価格を設定するためのメソッド「refreshWatchList」の
実装を行います。

※メソッド自体は、ここまででもう「StockWatcher」クラスに作成済みです。


StockWatcherクラスのrefreshWatchListメソッド実装部分は以下のとおり。
テーブルを更新するメソッド「updateTable」を追加しています。

また、Randomを使用するため事前に

import com.google.gwt.user.client.Random;


というimport宣言を追加しておく必要があります。




    // 価格情報の更新を行う
    private void refreshWatchList() {
        // 価格情報の更新処理
        final double MAX_PRICE = 100.0; // $100.00
        final double MAX_PRICE_CHANGE = 0.02; // +/- 2%

        StockPrice[] prices = new StockPrice[stocks.size()];
        for (int i = 0; i < stocks.size(); i++) {
            double price = Random.nextDouble() * MAX_PRICE;
            double change = price * MAX_PRICE_CHANGE
                    * (Random.nextDouble() * 2.0 - 1.0);

            prices[i] = new StockPrice(stocks.get(i), price, change);
        }

        updateTable(prices);
        
    }
    
    private void updateTable(StockPrice[] prices) {
        // TODO テーブルの更新処理
    }







【4. Populate the Price and Change fields】

テーブルの表示を更新する「updateTable」メソッドの実装を行います。

この処理で、数値のフォーマットを行って表示を行うための
「NumberFormat」クラスを使用しています。

事前に

import com.google.gwt.i18n.client.NumberFormat;


のimportを追加しておきます。


変更した箇所の抜粋は以下のとおり。


    private void updateTable(StockPrice[] prices) {
        // テーブルの更新処理
        for (int i = 0; i < prices.length; i++) {
            updateTable(prices[i]);
        }
    }
    
    private void updateTable(StockPrice price) {
        // ArrayListに指定された株式銘柄コードが存在しない場合は処理中断
        if (!stocks.contains(price.getSymbol())) {
            return;
        }

        int row = stocks.indexOf(price.getSymbol()) + 1;

        // 価格表示用のフォーマット
        String priceText = NumberFormat.getFormat("#,##0.00").format(
                price.getPrice());
        // 変動率表示用のフォーマット
        NumberFormat changeFormat = NumberFormat
                .getFormat("+#,##0.00;-#,##0.00");
        
        // 価格・変動率をフォーマットした文字列を取得
        String changeText = changeFormat.format(price.getChange());
        String changePercentText = changeFormat
                .format(price.getChangePercent());

        // 価格・変動率のテーブル表示を更新
        stocksFlexTable.setText(row, 1, priceText);
        stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText
                + "%)");
    }








【3. Adding the timestamp】

最後に、最終更新時間の表示処理を追加します。

「DateTimeFormat」と「Date」を使用するので、以下のimportを追加。


import com.google.gwt.i18n.client.DateTimeFormat;
import java.util.Date;




最終更新日時の表示処理は、updateTableの最後に記載しました。


    private void updateTable(StockPrice[] prices) {
        // テーブルの更新処理
        for (int i = 0; i < prices.length; i++) {
            updateTable(prices[i]);
        }
        
        DateTimeFormat timeFormat = DateTimeFormat.getFormat("yyyy年MM月dd日 HH:mm:ss");
        
        // 最終更新時間を表示
        lastUpdatedLabel.setText("最終更新時間 : "
            + timeFormat.format(new Date(), TimeZone.createTimeZone(-60 * 9)));
    }








この章の最後に



最終的なソースコードの全体図です。
※StockPrice.javaは変更ありません。


StockWatcher.java


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;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyPressEvent;
import com.google.gwt.event.dom.client.KeyPressHandler;
import com.google.gwt.user.client.Window;
import java.util.ArrayList;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Random;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.TimeZone;

import java.util.Date;

public class StockWatcher implements EntryPoint {
    
    // 更新間隔を指定
    private static final int REFRESH_INTERVAL = 5000; // ms
    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();
    // テーブルに表示しているデータ保存用の変数
    private ArrayList<String> stocks = new ArrayList<String>();
    
    /**
     * 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);
        
        // 追加ボタンにイベントリスナーを設定
        addStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                addStock();
            }
        });
        
        // 銘柄入力テキストにイベントリスナーを設定
        newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {
            public void onKeyPress(KeyPressEvent event) {
                // 入力されたキーが「Enter」だったら、追加処理を実行する
                if (event.getCharCode() == KeyCodes.KEY_ENTER) {
                    addStock();
                }
            }
        });
        
        // データの自動更新を行うために、onModuleLoadメソッドでタイマーを生成
        Timer refreshTimer = new Timer() {
            @Override
            public void run() {
                refreshWatchList();
            }
        };
        refreshTimer.scheduleRepeating(REFRESH_INTERVAL);
    }
    
    // 株式銘柄の追加処理
    private void addStock() {
        // テキストボックスから入力された文字列を取得
        final String symbol = newSymbolTextBox.getText().toUpperCase().trim();
        newSymbolTextBox.setFocus(true);

        // 証券コードは、1文字以上10文字以下
        // 使える文字は数字・アルファベット・ドット(.)のみ
        if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {
            // 入力された文字が証券コードではない場合は、エラーメッセージ表示
            Window.alert("'" + symbol + "' は不正な証券コードです。");
            newSymbolTextBox.selectAll();
            return;
        }

        newSymbolTextBox.setText("");
        
        // 証券コードの重複チェック処理
        // 追加予定の証券コードが既にリストに含まれていたら、追加処理を実行しない。
        if (stocks.contains(symbol)) {
            return;
        }
        // テーブルへの行追加処理
        // 現在のテーブルの行数を取得
        int row = stocksFlexTable.getRowCount();
        // ArrayListに追加した証券コードを退避
        stocks.add(symbol);
        // テーブルへ行の追加実行
        stocksFlexTable.setText(row, 0, symbol);
        
        // 追加した行に削除ボタンを配置
        Button removeStockButton = new Button("x");
        // 削除ボタンが押されたときのイベントを定義
        removeStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                // 削除する行のインデックスを取得
                int removedIndex = stocks.indexOf(symbol);
                // ArrayListから削除
                stocks.remove(removedIndex);
                // テーブルからも削除
                stocksFlexTable.removeRow(removedIndex + 1);
            }
        });
        
        // 削除ボタンをテーブルに追加
        stocksFlexTable.setWidget(row, 3, removeStockButton);
        
        // 証券の金額を取得
        refreshWatchList();
    }
    
    // 価格情報の更新を行う
    private void refreshWatchList() {
        // 価格情報の更新処理
        final double MAX_PRICE = 100.0; // $100.00
        final double MAX_PRICE_CHANGE = 0.02; // +/- 2%

        StockPrice[] prices = new StockPrice[stocks.size()];
        for (int i = 0; i < stocks.size(); i++) {
            double price = Random.nextDouble() * MAX_PRICE;
            double change = price * MAX_PRICE_CHANGE
                    * (Random.nextDouble() * 2.0 - 1.0);

            prices[i] = new StockPrice(stocks.get(i), price, change);
        }

        updateTable(prices);
        
    }
    
    private void updateTable(StockPrice[] prices) {
        // テーブルの更新処理
        for (int i = 0; i < prices.length; i++) {
            updateTable(prices[i]);
        }
        
        DateTimeFormat timeFormat = DateTimeFormat.getFormat("yyyy年MM月dd日 HH:mm:ss");
        
        // 最終更新時間を表示
        lastUpdatedLabel.setText("最終更新時間 : "
            + timeFormat.format(new Date(), TimeZone.createTimeZone(-60 * 9)));
    }
    
    private void updateTable(StockPrice price) {
        // ArrayListに指定された株式銘柄コードが存在しない場合は処理中断
        if (!stocks.contains(price.getSymbol())) {
            return;
        }

        int row = stocks.indexOf(price.getSymbol()) + 1;

        // 価格表示用のフォーマット
        String priceText = NumberFormat.getFormat("#,##0.00").format(
                price.getPrice());
        // 変動率表示用のフォーマット
        NumberFormat changeFormat = NumberFormat
                .getFormat("+#,##0.00;-#,##0.00");
        
        // 価格・変動率をフォーマットした文字列を取得
        String changeText = changeFormat.format(price.getChange());
        String changePercentText = changeFormat
                .format(price.getChangePercent());

        // 価格・変動率のテーブル表示を更新
        stocksFlexTable.setText(row, 1, priceText);
        stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText
                + "%)");
    }
}





銘柄を追加すると、価格と変動値が表示されます。
また、5秒間隔で更新が自動的に行われることが確認できるかと思います。

06_005_20101103195258.png



JavaScriptを全く書かずにここまで出来るとは・・・





関連記事



Google Web Toolkit 2.1 チュートリアル6 GWTアプリケーションのデバッグ
Google Web Toolkit に関する記事の一覧









関連記事

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

  1. 2010/11/03(水) 19:54:25|
  2. Google Web Toolkit
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Eclipse プラグインの削除方法 | ホーム | Google Web Toolkit 2.1 チュートリアル4 クライアントのイベント制御>>

コメント

コメントの投稿


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

トラックバック

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