Gwt-ext experience Journey, Part 4: Experience dragging and communication

Introduction: Gwt-ext is a powerful Web development control library based on Google Web Toolkit (GWT) and ExtJs. It is ideal for fast development of rich Internet applications in the pure Java language. This series of articles will detail the basic structure and features of Gwt-ext, and demonstrate the implementation of the technology through code examples. This article is the last part of the series that will experience the drag-and-drop effect of two commonly used drag-and-drop methods and some empirical summaries. In the introduction to communications, this article will also provide a detailed description of both synchronous and asynchronous communications.

Drag

It is simple to implement drag-and-drop function in Gwt-ext. Gwt-ext provides a drag-and-drop class in the COM.GWTEXT.CLIENT.DD package. Figure 1 shows the relationship of these classes.

Figure 1. Diagram of the class associated with the drag in the COM.GWTEXT.CLIENT.DD package

Where DragDrop is a base class that defines the interfaces and basic operations of elements that can be dragged, such as StartDrag, Ondrag, OnDragOver, and Ondragout events. and inherits from this class the subclass, the function mainly divides into two kinds. One is to allow the object to be dragged, one to make the drag object can be placed in the droptarget.

First, describe some classes that can help the object be dragged.

DD class

The user can make the object can be dragged by calling the DD constructor. This drag causes the object to move with the mouse moving.

DD DD = new DD (Component Component);//Parameter Component is the object being dragged

Ddproxy class

The Ddproxy class inherits from the DD class. When you use this class to construct a dragged object, the bounding rectangle of the object moves as the mouse moves. When the mouse is released, the object is dropped back to where the mouse stopped.

DD DD = new Ddproxy (Component Component);//Parameter Component is the object being dragged

Here, give an example of dragging a Panel. First, define a Panel,

Panel draggable = new Panel();
draggable.setTitle("Draggable");
draggable.setBorder(true);

This Panel is then used as a parameter to construct a DD class,

DD DD = new DD (draggable);

This way, the Panel can be dragged.

Figure 2. Panel where the object moves with the mouse