GWT-Ext_體验之旅,第_4_部分_体验拖拽和通信.docxVIP

GWT-Ext 体验之旅，第 4 部分: 体验拖拽和通信 拖拽 在 GWT-EXT 中实现拖拽功能比较简单。GWT-EXT 在 com.gwtext.client.dd 包中提供了与拖拽相关的类。图 1 展示了这些类的关系。 图 1. com.gwtext.client.dd 包中与拖拽相关的类的关系图 其 中，DragDrop 是一个基类，它定义了一些可以被拖拽的元素的接口和基本操作，如 startDrag, onDrag, onDragOver 和 onDragOut 等 Drag 事件。而继承自这个类的子类，功能上主要分为两类。一个是可以使得对象被拖动；一个是使得拖动对象可以被放置在 DropTarget 中。 首先，介绍一些能够帮助对象被拖动的类。 DD 类 用户可以通过调用 DD 的构造函数来使得对象能够被拖动。这种拖动使得对象会跟随鼠标的移动而移动。 DD dd = new DD(Component component);// 参数 component 是被拖动的对象 DDProxy 类 DDProxy 类继承自 DD 类。使用这个类来构造被拖动的对象时，该对象的边框会跟随鼠标的移动而移动。而等到鼠标释放时，该对象会被重新放置到鼠标停止的位置。 DD dd = new DDProxy(Component component);// 参数 component 是被拖动的对象 这里，举一个拖动 Panel 的例子。首先，定义一个 Panel, Panel draggable = new Panel(); draggable.setTitle(Draggable); draggable.setBorder(true); 然后，将这个 Panel 作为参数来构造一个 DD 类 , DD dd = new DD(draggable); 这样，这个 Panel 就可以被拖动了。 图 2. 对象随鼠标移动的 Panel 若将 draggable 这个 Panel 作为参数来构造 DDProxy 类， DD dd = new DDProxy(draggable); 则会出现这样的效果， 图 3. 边框随鼠标移动的 Panel 被移动的是 draggable Panel 的边框。 接下来，介绍一些被拖动对象可以被放置在其他对象中的功能类。这些类主要是 DDTarget 和 DragTarget，其中 DragTarget 继承自 DDTarget 。 DDTarget 类 将元素作为参数传递到 DDTarget 中，那么这个元素就可以是一个 Drop Target 。具体在应用中，我们一般使用 DragTarget 来完成这样的操作。 首先，用户需要将元素作为一个参数传递到 DragTarget 类的构造函数中。除此之外，还要定义一个 DropTargetConfig 类来配置 Drag Drop Group 的名字。这里，需要注意的有两点：第一， 只有 Drag 元素和 DropTarget 元素具有同样 DragDropGroup 名字的，Drag 元素才能够被拖放到正确的 DropTarget 元素中去。方法如下 : 1. 构造 DropTargetConfig 类 DropTargetConfig cfg = new DropTargetConfig(); 2. 指定 Drag Drop Group 名字 cfg.setdDdGroup(java.lang.String ddGroup);// 参数 ddGroup 指 drag drop group 的名字。 3. 调用 DropTarget 的构造函数来将拖拽元素和 DropTargetConfig 作为参数传入进去。 DropTarget tg = new DropTarget(Comopnent component ,DropTargetConfig cfg) 第 二， 在 DragTarget 中，还需要实现 notifyDrop(DragSource source, EventObject e, DragData data) 方法以实现拖动后的效果。其中，source 是指可以被拖动到 DropTarget 上的元素； e 是指当前的事件； data 是指被拖动元素所包含的数据对象。 这里，我们举一个从 Tree 中拖动 TreeNode 元素到 Grid 中的例子来说明上述步骤。 图 4. 从 Tree 中拖动 TreeNode 元素到 Grid 中 首先，定义 TreePanel 和 GridPanel，并定义 Drag Drop Group 的名字。 final TreePanel tree