Rich-UI - Drag-and-drop-Unterstützung

Sie können Code so schreiben, dass ein Benutzer ein Widget von einer Position ziehen und an einer anderen Position übergeben kann (Drag-and-drop). Im weiteren Sinne kann Ihr Code auf die folgenden Benutzerereignisse antworten: ein einzelnes Ereignis bei Drücken einer Maustaste ('onMouseDown'), wenn der Benutzer die Position beibehält, nachfolgende Mausbewegungsereignisse ('onMouseMove') sowie ein einzelnes Ereignis bei Loslassen einer Maustaste ('onMouseUp'). Sie können alle Laufzeittasks, die durch das Drag-and-drop dargestellt werden, ausführen. Rich-UI definiert das Verhalten nicht.

Sie schreiben den Drag-and-drop-Code, indem Sie drei Eigenschaften in einer Widgetdeklaration angeben und Funktionen schreiben, auf die in den entsprechenden Eigenschaftswerten verwiesen wird. Das folgende Beispiel zeigt die Deklaration einer Schaltfläche:
b1 Button { 
   text = "Button 1", position="absolute",	x=10, y=10,
   onStartDrag = start, onDrag = drag, onDropOnTarget = drop};

Die folgenden drei Eigenschaften machen die Drag-and-drop-Funktionalität möglich:

Das folgende Beispiel können Sie in Ihren Arbeitsbereich einfügen:
import com.ibm.egl.rui.widgets.TextField;

handler MyHandler type RUIHandler{initialUI =[myTextField]}
   myTextField TextField{text = 
                   "What a drag!", position = "absolute", x = 110, y = 210, width = 120, 
                   onStartDrag = start, onDrag = drag, onDropOnTarget = drop};
   dx, dy int;

   function start(myWidget Widget in, x int in, y int in) returns(boolean)
      dx = x - myWidget.x;
      dy = y - myWidget.y;
      return(true);
   end

   function drag(myWidget Widget in, drop Widget in, x int in, y int in)
      myWidget.x = x - dx;
      myWidget.y = y - dy;
   end

   function drop(widget Widget in, drop Widget in, x int in, y int in)
   end
end  
Die Funktion start berechnet die Differenz zwischen der Position des Mauszeigers und der linken oberen Ecke des Widgets. Der Effekt der Verwendung dieser Berechnung besteht darin, dass der Mauszeiger während der gesamten Operation an derselben Stelle auf dem Widget angezeigt wird. Um den Effekt zu sehen, führen Sie den Code zweimal aus, indem Sie jedes Mal auf die rechte untere Ecke des Widgets klicken, um die Drag-and-drop-Operation zu starten:
  1. Führen Sie den Code wie gezeigt aus.
  2. Führen Sie den Code aus, nachdem Sie die Anweisungen in der Funktion drag durch die folgenden Zuordnungen ersetzt haben:
       myWidget.x = x;
       myWidget.y = y;

Weitere Beispiele finden Sie im Abschnitt Rich-UI-Widget 'Shadow'.


Feedback