Flex - Ereignisbehandlung
Flex verwendet das Ereigniskonzept, um Daten von einem Objekt an ein anderes zu übergeben, abhängig vom Status oder der Benutzerinteraktion innerhalb der Anwendung.
ActionScript hat eine generische EventKlasse, die einen Großteil der Funktionen definiert, die für die Arbeit mit Ereignissen erforderlich sind. Jedes Mal, wenn ein Ereignis in einer Flex-Anwendung auftritt, werden drei Arten von Objekten aus der Ereignisklassenhierarchie erstellt.
Ereignis hat die folgenden drei Schlüsseleigenschaften
| Sr.Nr. | Objektbeschreibung |
|---|---|
| 1 | Type Das typegibt an, welche Art von Ereignis gerade passiert ist. Dies kann Klicken, Initialisieren, Mouseover, Ändern usw. sein. Die tatsächlichen Werte werden durch Konstanten wie MouseEvent.CLICK dargestellt. |
| 2 | Target Das target Die Eigenschaft von Event ist eine Objektreferenz auf die Komponente, die das Ereignis generiert hat. Wenn Sie auf eine Schaltfläche mit der ID clickMeButton klicken, ist das Ziel dieses Klickereignisses clickMeButton |
| 3 | CurrentTarget Das currentTargetEigenschaft variiert Containerhierarchie. Es befasst sich hauptsächlich mit dem Ablauf von Ereignissen. |
Ereignisflussphasen
Ein Ereignis durchläuft drei Phasen und sucht nach Ereignishandlern.
| Sr.Nr. | Phase & Beschreibung |
|---|---|
| 1 | Capture In der Erfassungsphase sucht das Programm nach Ereignishandlern vom äußeren (oder oberen) bis zum innersten übergeordneten Element. Die Erfassungsphase endet am übergeordneten Objekt des Objekts, das das Ereignis ausgelöst hat. |
| 2 | Target In der Zielphase wird die Komponente, die das Ereignis ausgelöst hat, auf einen Ereignishandler überprüft. |
| 3 | Bubble Die Blasenphase ist umgekehrt zur Erfassungsphase und arbeitet sich vom übergeordneten Element der Zielkomponente bis zur Struktur zurück. |
Betrachten Sie den folgenden Anwendungscode -
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500" >
<s:Panel>
<s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
</s:Panel>
</s:Application>Wenn der Benutzer auf die Schaltfläche klickt, hat er auch auf das Bedienfeld und die Anwendung geklickt.
Die Veranstaltung durchläuft drei Phasen und sucht nach Zuordnungen für Event-Handler.
Führen Sie die folgenden Schritte aus, um die Ereignisübergabe in einer Flex-Anwendung zu testen.
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten mxml-Datei src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function reportEvent(event:MouseEvent):void {
var target:String = event.target.id;
var currentTarget:String = event.target.id;
var eventPhase: String;
if(event.target is Button) {
var button:Button = event.target as Button;
target = button.label + " Button";
} else if(event.target is HGroup) {
var hGroup:HGroup = event.target as HGroup;
target = hGroup.id + " HGroup";
} else if(event.target is Panel) {
var panel:Panel = event.target as Panel;
target = panel.id + " Panel";
}
if(event.currentTarget is Button) {
var button1:Button = event.currentTarget as Button;
currentTarget = button1.label + " Button";
} else if(event.currentTarget is HGroup) {
var hGroup1:HGroup = event.currentTarget as HGroup;
currentTarget = hGroup1.id + " HGroup";
} else if(event.currentTarget is Panel) {
var panel1:Panel = event.currentTarget as Panel;
currentTarget = panel1.id + " Panel";
}
var eventPhaseInt:uint = event.eventPhase;
if(eventPhaseInt == EventPhase.AT_TARGET) {
eventPhase = "Target";
} else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
eventPhase = "Bubbling";
} else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Event Handling Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Main Parent"
click = "reportEvent(event)" width = "500"
height = "100" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:HGroup id = "mainHGroup" click = "reportEvent(event)">
<s:Button label = "Click Me" click = "reportEvent(event)" />
</s:HGroup>
</s:Panel>
<s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
<mx:Text id = "reports" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
