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.
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:
- onStartDrag: Verweist auf eine Funktion, die von der EGL-Laufzeit einmal am Anfang einer
Drag-Operation aufgerufen wird. Die Funktion besitzt Merkmale, die im folgenden Stellvertreterabschnitt
gezeigt werden:
Delegate StartDragFunction(widget Widget in, x int in, y int in) returns (Boolean)Die Funktion empfängt einen Verweis auf das Widget und empfängt die absoluten Werte für die X- und Y-Koordinate des Mauszeigers. Die Funktion gibt einen booleschen Wert zurück, der angibt, ob die Drap-Operation fortgesetzt werden soll.
- onDrag: Verweist auf eine Funktion, die von der EGL-Laufzeit wiederholt aufgerufen wird,
während die Drap-Operation fortgesetzt wird, das heißt, jedes Mal, wenn der Browser ein Mausbewegungsereignis
registriert. Die Funktion besitzt Merkmale, die im folgenden Stellvertreterabschnitt
gezeigt werden:
Delegate DragFunction(widget Widget in, dropTarget Widget in, x int in, y int in)Die Funktion empfängt Referenzen auf das Widget, das gezogen wird, und auf das Widget (sofern zutreffend), über das der Mauszeiger bewegt wird. Wenn der Mauszeiger über kein Widget bewegt wird, ist das zweite Argument 'null'. Die Funktion empfängt außerdem die absoluten X- und Y-Koordinaten des Mauszeigers und sie hat keinen Rückgabewert. Die Funktion selbst sollte die Position des Widgets (oder einer anderen Grafik) als Antwort auf das Mausbewegungsereignis aktualisieren.
- onDropOnTarget: Verweist auf eine Funktion, die von der EGL-Laufzeit einmal aufgerufen wird,
wenn der Benutzer die Maustaste loslässt, um die Drag-and-drop-Operation zu beenden. Die Funktion besitzt Merkmale, die im folgenden Stellvertreterabschnitt
gezeigt werden:
Delegate DropOnTargetFunction(widget Widget in, dropTarget Widget in, x int in, y int in)Die Funktion empfängt Referenzen auf das Widget, das übergeben wird, und auf das Widget (sofern zutreffend), das sich unter dem Mauszeiger befindet. Wenn sich kein Widget unter dem Mauszeiger befindet, ist das zweite Argument 'null'. Die Funktion empfängt außerdem die absoluten X- und Y-Koordinaten des Mauszeigers und sie hat keinen Rückgabewert.
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
- Führen Sie den Code wie gezeigt aus.
- 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'.