Im vorigen Teil wurden wir in den allgemeinen Prozess des Einbindens von Programmlogik in eine Anwendung mit Scripting und Event Handling eingeführt. In diesem Teil werden wir Event Handling genauer betrachten.
Damit sie uns etwas nutzt, muss eine Anwendung fähig sein, auf Geschehenisse (Events) die während der Laufzeit auftreten reagieren können, wie die Bewegung der Maus, der Initialisierung eines Szenarios oder gar des Abschließens einer Animation.
Einige der Events auf die eine Boxely Anwendung reagieren kann sind:
Animation events - Events die sich auf Animationen beziehen, wie "play", "stop", "firstFrame", "frame", "lastFrame", "pause", und "cancel". (Animationen werden in Kapitel 8: Animationen benutzen näher erklärt.)
DOM events - Events die sich auf die Objekte in einer Anwendung beziehen, wie "constructed", "initialized", "activated", "deactivated", "focus", und "blur".
Drag events - Events die sich auf die drag-and-drop Operation beziehen, wie "dragDrop", "dragMove", "dragOut", "dragOver", und "dragStart". (Die drag-and-drop Operation wird in Kapitel 5: Drag-and-Drop näher erklärt.)
Keyboard events - Events die sich auf die Tastendruck (key-press) Operation beziehen, wie "keyDown", "keyPress", "keyUp".
Mouse events - Events die sich auf Mausoperationen beziehen, wie "click", "mouseDown", "mouseMove", "mouseOut", "mouseOver", "doubleClick", und so weiter.
Mutation events - Events die sich auf die Mutation (oder Modifikation) von Objekten in einer Anwendung beziehen, wie "attributeSet".
Als Entwickler ist es unsere Aufgabe, eine Anwendung zu programmieren, die auf Events wartet und aus sie reagiert, durch die Verwendung einer (oder beider) der folgenden Methoden:
Event Handling mit Behaviors und Reactions.
Event Handling mit dem on Namespace.
Um ein Gadget zu programmieren, das auf Events wartet und auf sie reagiert, können die behavior und reaction Elemente verwendet werden. Das reaction Element wartet auf einen Event. Wenn der Event auftritt wird die zugewiesene Aktion ausgeführt. Das behavior Element stellt einen Container für reaction Elemente bereit, die für das Gadget definiert sind.
Schauen wir uns ein Beispiel an. Wir nehmen an, wir möchten ein Gadget programmieren, das eine bestimmte Funktion aufruft, wenn der Benutzer seine Maus ueber dem Gadget platziert, und eine andere Funktion, wenn auf des Gadget geklickt wird. Um das zu verwirklichen, würden wir ein Behavior Element mit zwei enthaltenen Reaction Elementen zur Gadget Definition hinzufügen, wie unten fett hervorgehoben:
<gadget id="myGadget" language="jscript" code="4a_eventHandling.js" >
<parts>
<box:text id="myPart" value="Change Gadget Fill" />
</parts>
<behavior>
<reaction event="mouseOver" action="gadget:changeFill();" />
<reaction event="click" action="gadget:oneNewWindow();" />
</behavior>
</gadget>
In diesem Beispiel werden Funktionen aufgerufen, wenn ein Event auf irgendeinem Teil des Gadgets stattfindet, wie in den Bildern unten gezeigt:
Nach dem Laden wird das Gadget in seinem Anfangsstadium angezeigt. Wenn die Maus über irgendeinen Teil des Gadgets platziert wird, wird die changeFill Funktion aufgerufen.
Der folgende Code demonstriert das Programmieren einer Box in einem Gadget, um auf Events zu reagieren:
<gadget id="myGadget" language="jscript"
code="../../content/appendix/4a_eventHandling.js" >
<parts>
<box:text id="myPart" value="Change Gadget Fill" >
<box:reaction event="mouseOver" action="gadget:changeFill();" />
<box:reaction event="click" action="gadget:oneNewWindow();" />
</box:text>
</parts>
</gadget>
In diesem Beispiel wird eine Funktion aufgerufen, wenn ein Ereignis in der myPart Box auftritt. Wenn der Benutzer mit irgendeinem Teil des Gadgets interagiert, das außerhalb der myPart Box ist, geschieht nichts.
Tabelle 4.3. Das Gadget ändert seine Füllfarbe, wenn sich die Maus über der "change gadget fill" Box befindet
 |
 |
Nach dem Laden wird das Gadget in seinem Anfangsstadium angezeigt. Wenn die Maus über dem Gadget platziert wird, aber nicht über der Box darin, geschieht nichts. Wenn die Maus über die Box im Gadget platziert wird, wird die changeFill Funktion aufgerufen.
Als Alternative zur Verwendung von behaviors und reactions zur Erstellung von Event Handlern, kann der on Namespace verwendet werden:
Deklaieren des on Namespace im XML Code.
Hinzufügen des on:eventName Attributs zur Box die auf ein Ereignis reagieren soll.
Den on Namespace deklaieren:
Bevor der on Namespace in Anwendungen verwendet werden kann, muss er deklaiert werden. Falls beabsichtigt ist, on Namespace Attribute auf window UI Elemente anzuwenden, muss der on Namespace im window Start-Tag deklaiert werden, wie unten fett formatiert.
<window xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
xmlns:on="http://www.aol.com/boxely/reaction.xsd"
title="My Application" ... >
</window>
Falls beabsichtigt ist, on Namespace Attribute auf Objekte anzuwenden, die sich in einer library befinden (und der on Namespace nicht übergeordnet festgelegt wurde), muss er im library Start-Tag deklaiert werden, wie hier gezeigt:
<window xmlns="http://www.aol.com/boxely/box.xsd"
title="My Application" ... >
<library xmlns="http://www.aol.com/boxely/resource.xsd"
xmlns:box="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
xmlns:on="http://www.aol.com/boxely/reaction.xsd" >
...
</library>
</window>
Das on:eventName Attribut zu einer Box hinzufügen:
Sobald der on Namespace deklaiert ist, kann das on:eventName Attribut verwendet werden, um eine Box zu programmieren, die auf ein Ereignis reagiert. Das on:eventName Attribut ist durch folgende Syntax festgelegt:
on:eventName="someFunction();"
In dieser Syntax ist "eventName" der Name eines Boxely Events auf das die Box reagieren soll, und "someFunction" ist der Name einer JavaScript Funktion die dem Gadget verfügbar ist.
Ein Beispiel folgt:
<gadget id="myGadget" script="someJavaScript.js" >
<parts>
<box:box on:mouseOver="gadget:changeFill()"
on:click="gadget:openNewWindow();" >
<box:text id="myPart" value="Change Gadget Fill" />
</box:box>
</parts>
</gadget>
Im obigen Code wird die changeFill Funktion aufgerufen, wenn der Benutzer seine Maus über der Box platziert. Wenn der Benutzer auf die Box klickt, wird die openNewWindow Funktion aufgerufen.