gwt 兑现界面模式之 "Extras on Demand"

gwt 实现界面模式之 "Extras on Demand"

GWT 是一个强大的工具, 一旦定义好html结构和css之后,使用gwt提供的组件模型,可以将任意结构的html+css封装成为组件,并在java 语言中以组件的方式操作.GWT 1.6 增加了新的事件系统(原有的事件api可能会在将来删除), 更使得在dom或者现有的组件之上扩展开发相当容易.下面将以一个例子说明如何使用新的事件模型扩展现有组件.

(使用最新的 gwt 1.6.4 )

?

目标:

如上, 在google 财经中有一个最近查询的股票列表,当鼠标在上面移动时,仅有当前行的操作(删除)出现,这有点类似界面模式中的"Extras on Demand". 我们的目标就是要在gwt 中实现类似的特性..

解决方案

相比较自己完全从html结构开始做起,如果能够在一个现有的组件之上进行开发,会减轻不少工作量,gwt 中提供了很多灵活,强大的组件.FlexTable 就是其中之一.FlextTable 很适合数据量不大的少量表格数据显示.也适合作为灵活的布局容器,如果需要显示大量数据,可以考虑 gwt incubator 中的 PagingScrollTable.

实现以上特性的关键是要能捕获鼠标移动事件(MouserMoveEvent), 并处理. FlexTable 支持ClickEvent, 并且可以使用 getCellForEvent 方法获得事件发生时的单元格对象,进而获得所在行. 当并不支持MouseMoveEvent. 所以首先我们需要从FlexTable 继承,并增加MouseMoveEvent 的事件支持.

完整的代码如下:
java module file:
?css:
.main{    margin-left:5em;    margin-right:5em;}#mouse_move{    margin-top:1em;}.delControl{    padding:1px 5px;    border:1px solid #aaaaaa;    cursor:pointer;}.testTable{    cursor:default;}.testTable .current{    background-color:#eeeeee;}.testTable .title{    background-color:#E5ECF9;}.testTable .data{    height:30px;}.testTable .name{    width:100px;}.testTable .price{    width:80px;}.testTable .updown{    width:150px;}
?
?
?
?
?
?
?
?
    1 楼    edokeh    2009-05-25              gwt官方博客里面最近有篇文章讲到自定义控件的最佳实践，它不建议继承gwt自带的UI类，而建议用聚合的方式来做    2 楼    duker    2009-05-29              哦, 给个链接,看看..