GWT - GWT Designer开发Ajax应用 (03)
来源:互联网 发布:2016年开淘宝店怎么样 编辑:程序博客网 时间:2024/04/29 02:18
前篇: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
- GWT - GWT Designer开发Ajax应用 (03)
- GWT - GWT Designer开发Ajax应用 (01)
- GWT - GWT Designer开发Ajax应用 (02)
- GWT - GWT Designer开发Ajax应用 (04)
- GWT - GWT Designer开发Ajax应用 (06) - 常用控件使用
- GWT - GWT Designer开发Ajax应用 (06) - 常用控件使用
- GWT - GWT Designer开发Ajax应用 (05) 利用RPC传递对象
- GWT - GWT Designer开发Ajax应用 (05) 利用RPC传递对象
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- 利用GWT开发高性能Ajax应用
- GWT 开发AJAX
- GWT开发AJAX。。。。
- 使用GWT开发AJAX应用程序
- 使用GWT开发AJAX应用程序
- 在窗体级别处理键盘消息
- 好好加油
- 看看IBM的内存数据库的精准营销
- ASP.NET 中找不到类定义的问题
- 线程【一】基础知识
- GWT - GWT Designer开发Ajax应用 (03)
- 传智播客 Spring学习 ,注解和AOP
- 深入剖析MFC中Windows消息处理机制
- 二叉树三种遍历的非递归算法
- 一步一步学Struts(二)
- 约瑟夫环
- XML学习之 schema
- Oracle Instant Client 配置方法
- 急需一篇数学建模论文的范文