【译】GWT入门：设计应用

【译自：https://developers.google.com/web-toolkit/doc/latest/tutorial/design?hl=zh-CN】

 

致此，我们已经完成了所有的准备工作。

 

这一节，我们需要审视一下功能需求和用户界面。

 

一、检查功能需求

 

我们希望StockWatcher应用能完成：

• 可能添加股票 （提供简单的判断一个输入是否合法或已经存在）
• 显示一个股票的相关信息：代码、价格、变动
• 可以删除一个已经存在股票
• 自动刷新股票价格
• 显示上次刷新后变化率：变动值和比例
• 显示最后刷新时间

二、确认需要的UI 元素

 

 

了解了功能需求以后，我们就需要确定有哪些UI元素是必需的：

• 一个用来显示股票列表的表格
• 两个按钮：一个用来添加；一个用来删除
• 一个输入股票代码的文本框
• 一个显示最后更新时间的标签

设计团队还建议增加：

• 一个Logo
• 一个标题
• 用于标示涨跌的不同颜色：红色和绿色

三、静态元素

GWT没有规定你如何布局你的HTML页面：你可以占据整个浏览器窗口，也可以嵌入在一个存在的页面里。

 

StockWatcher应用即包含了动态的，也包含了静态的元素。像google logo和标题"StockWatcher"就是静态的元素。所有其他的元素都是动态添加的。