GWT - GWT Designer开发Ajax应用 (03)

前篇：http://blog.csdn.net/pathuang68/archive/2009/04/25/4117352.aspx

 

目标：利用GWT和GWT Designer创建一个股票查看器。

注意：如果看不到完整的图片，可以鼠标右键->“图片另存为”的方法，存到本地看即可。 

1. 新建一个GWT Java Project

 

图1

 

图2

点击Next按钮，如下图将项目名称设定为“StockWatcher”：

 

图3

点击Next按钮。如下图，选择Create GWT Module复选框，并指定Module Name为StockWatcher，Package Name为com.pnft.ajax：

 

图4

点击Finish按钮，

 

图5

上图是GWT Designer自动为我们产生的一些代码，点击左下角Design tab并双击上边的Tab -  StockWatcher.java以放大，

 

图6

删除Click me!按钮，以删除自动产生boilerplate code，

 

图7

点击Source tab，可以看到现在StockWatcher.java的代码变成了：

 

图8

到此，项目建立完成。

2. UI设计

我们希望最终的参考界面如下图所示：

 

图9

现在我们来设计图形界面：

a. 在rootPanel中放置一个VerticalPanel

 

图10

 

图11

将刚才添加的VerticalPanel放置到rootPanel的左上角，并拖动其Anchor使之放大到合适的大小，并将其variable属性改为mainPanel，如下图所示：

 

图12

b. 如下图所示，在mainPanel中增加一个FlexTable，并将其variables户型改为stocksFlexTable：

 

图13

c. 如下图所示，在mainPanel中，stocksFlexTable之下，增加一个HorizontalPanel，并使其variable属性为“addPanel”

 

图14

d. 在addPanel中增加两个widget，如下图所示：

   - 一个文本框，使其variable属性为“newSymbolTextBox”；

   - 一个按钮，使其variable属性为“addButton”，其Text属性为“Add”

 

图15

e. 在addPanel下面增加一个Label，修改其属性，使其variable属性为“lastUpdatedLabel”：

 

图16

f. Convert local to field。选中最上层的mainPanel，然后点击Covert local to field按钮：

 

图17

对于其他widget如FlexTable，TextBox，Button以及Label均使用同样方法进行Convert local to field。

 

下图就是我们前面所做的工作的代码结果：

 

图18

g. 将文本框newSymbolTextBox的focus属性设定为true，这样当进入到该页面是，文本框newSymbolTextBox将自动获得输入焦点。

3. 代码设计

   - a. 切换到Source，并找到下面高亮的语句。

 

图19

插入代码，使其如下：

 

图20

到目前为止，我们前面所做的工作结果类似：

 

图21

b. 给按钮增加onClick事件处理函数：

 

图22

自动生成代码如下：

        addButton.addClickListener(new ClickListener()

        {

            public void onClick(final Widget sender)

            {

            }

        });

在onClick函数中增加如下一行，使之如下(注意addStock()目前还不存在)：

        addButton.addClickListener(new ClickListener()

        {

            public void onClick(final Widget sender)

            {

                addStock();

            }

        });

 

c. 给文本框增加一个keyDown处理函数：

 

图23

自动生成的代码如下：

        newSymbolTextBox.addKeyboardListener(new KeyboardListenerAdapter()

        {

            public void onKeyDown(final Widget sender, final char keyCode, final int modifiers)

            {

            }

        });

在onKeyDown函数中增加如下一行，使之如下(注意addStock()目前还不存在)：

        newSymbolTextBox.addKeyboardListener(new KeyboardListenerAdapter()

        {

            public void onKeyDown(final Widget sender, final char keyCode, final int modifiers)

            {

                addStock();

            }

        });

 

d. 增加addStock方法：

 

图24

选择Create method ‘addStock()’ in type ‘StockWatcher’（注意，此处所谓type即为class之别称），修改addStock的的代码如下：

    protected void addStock()

    {

        final String symbol = newSymbolTextBox.getText().toUpperCase().trim();

        newSymbolTextBox.setFocus(true);

        // validation

        // symbol must be between 1 and 10 chars that are numbers, letters, or dots

        // the matches method takes a parameter of regular expression like the following code

        if(!symbol.matches("^[0-9a-zA-Z//.]{1,10}$"))

        {

            Window.alert("'" + symbol + "' is not a valid symbol.");

            newSymbolTextBox.selectAll();

            return;

        }

        newSymbolTextBox.setText("");

        // here we need to add the stock to the list...

       

    }

 

e. 修改onKeyDown代码如下，判断是否有回车键按下，如果是，则调用addStock方法：

    public void onKeyDown(final Widget sender, final char keyCode, final int modifiers)

    {

        if(keyCode == KEY_ENTER)

        {

            addStock();

        }

    }

 

f. 增加一个ArrayList如下：

 

图25

 

g. 修改addStock方法，使之如下：

    protected void addStock()

    {

        final String symbol = newSymbolTextBox.getText().toUpperCase().trim();

        newSymbolTextBox.setFocus(true);

        // validation

        // symbol must be between 1 and 10 chars that are numbers, letters, or dots

        // matches method takes a parameter of regular expression like the following code

        if(!symbol.matches("^[0-9a-zA-Z//.]{1,10}$"))

        {

            Window.alert("'" + symbol + "' is not a valid symbol.");

            newSymbolTextBox.selectAll();

            return;

        }

        newSymbolTextBox.setText("");

        // here we need to add the stock to the list...

        if(stocks.contains(symbol)) return;

       

        // add the stock to the list

        int row = stocksFlexTable.getRowCount();

        stocks.add(symbol);

        stocksFlexTable.setText(row, 0, symbol);

       

        // add button to remove this stock from the list

        Button removeStock = new Button("x");

        removeStock.addClickListener(new ClickListener()

        {

            public void onClick(Widget sender)

            {

                int removedIndex = stocks.indexOf(symbol);

                stocks.remove(removedIndex);

                stocksFlexTable.removeRow(removedIndex + 1);

            }

        });

        stocksFlexTable.setWidget(row, 3, removeStock);

    }

注意：

// here we need to add the stock to the list...后面的代码是新加的。

 

h. 阶段性结果：

 

图26

i. 增加一个计时器，用来模拟股票价格在一天中的变化。为此，我们必须

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

  在类StockWatcher最开始处增加以下代码，用来确定多长时间间隔可进行一次刷新：

    private static final int REFRESH_INTERVAL = 5000;

 

并在onModuleLoad()方法的最后处，增加以下代码：

    Timer refreshTimer = new Timer()

    {

        public void run()       // 注意：以内部类的形式出现

        {

            refreshWatchList(); // 注意：此时refreshWatchList方法尚不存在

        }

    };

    refreshTimer.scheduleRepeating(REFRESH_INTERVAL);

 

j. 增加refreshWatchList方法，和增加addStock方法的过程类似。

 

k. 新增一个类StockPrice

 

图27

 

图28

点击Finish按钮。

 

修改类StockPrice的代码，使之如下：

package com.pnft.ajax.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 symbol;

    }

 

    public void setSymbol(String symbol) {

        this.symbol = symbol;

    }

   

    public double getChangePercent()

    {

        return 100.0 * this.change / this.price;

    }

 

    public double getPrice() {

        return price;

    }

 

    public void setPrice(double price) {

        this.price = price;

    }

 

    public double getChange() {

        return change;

    }

 

    public void setChange(double change) {

        this.change = change;

    }

}

 

l. 回到StockWatcher源代码，修改在步骤j中增加的方法refreshWatchList，并引入相关的包，使得方法refreshWatchList的代码如下：

    protected void refreshWatchList()

    {

        final double MAX_PRICE = 100.0;

        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((String)stocks.get(i), price, change);

        }

        updateTable(prices);    // 注意此时updateTable方法尚不存在

    }

m. 增加updateTable方法，过程与步骤d(增加addStock方法)类似。修改updateTable方法的代码，使之如下：

    private void updateTable(StockPrice[] prices)

    {

       for(int i = 0; i < prices.length; i++)

       {

           updateTable(prices[i]);

       }

      

       // change the last update timestamp

       lastUpdatedLabel.setText("Last update : " + DateTimeFormat.

getMediumDateFormat().format(new Date()));

    }

   

    private void updateTable(StockPrice price)

    {

        // make sure the stock is still in our watch list

        if (!stocks.contains(price.getSymbol()))

        {

            return;

        }

 

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

 

        // apply nice formatting to price and change

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

 

        // update the watch list with the new values

        stocksFlexTable.setText(row, 1, priceText);

        stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText + "%)");

    }

 

n. 如以下图形所表明的步骤，增加Google的logo

 

图29

 

图30

点击Next按钮，

 

图31

点击Finish按钮。图片已经被import进来：

图32

回到StockWatcher.java的Design状态，在FlexTable之上，增加一个Image widget，然后将该Image widget的URL属性设置为图片所在的位置。

 

图33

 

图34

指定Image的URL属性为googlecode.png，得到：

 

图35

o. 在图片下面增加一个Label，使其Text属性为“Stock Watcher”，并做相应的微调，得到结果如下：

 

图36

p. 试运行

 

图37

q. 增加一些颜色

 

图38

r. 部署

 

图39

 

图40

选择Tomcat6的路径，点击OK按钮。

 

图41

部署成功。在Tomcat6/webapps目录下多出了一个StockWatcher.war文件：

 

图42

s. 启动Tomcat6

t. 最后结果：

 

图43

 

 

后篇： http://blog.csdn.net/pathuang68/archive/2009/04/27/4130429.aspx