Flex - Gestione degli eventi
Flex utilizza il concetto di evento per passare i dati da un oggetto a un altro a seconda dello stato o dell'interazione dell'utente all'interno dell'applicazione.
ActionScript ha un generico Eventclasse che definisce gran parte delle funzionalità necessarie per lavorare con gli eventi. Ogni volta che si verifica un evento all'interno di un'applicazione Flex, vengono creati tre tipi di oggetti dalla gerarchia della classe Event.
Event ha le seguenti tre proprietà chiave
| Suor n | Proprietà e descrizione |
|---|---|
| 1 | Type Il typeafferma che tipo di evento è appena accaduto. Questo può essere clic, inizializzazione, passaggio del mouse, modifica, ecc. I valori effettivi saranno rappresentati da costanti come MouseEvent.CLICK. |
| 2 | Target Il target la proprietà di Event è un riferimento oggetto al componente che ha generato l'evento.Se fai clic su un pulsante con un ID di clickMeButton, il target di quell'evento clic sarà clickMeButton |
| 3 | CurrentTarget Il currentTargetproprietà varia la gerarchia del contenitore. Si occupa principalmente del flusso degli eventi. |
Fasi del flusso di eventi
Un evento passa attraverso tre fasi alla ricerca di gestori di eventi.
| Suor n | Fase e descrizione |
|---|---|
| 1 | Capture Nella fase di cattura, il programma inizierà a cercare gestori di eventi dal genitore esterno (o superiore) a quello più interno. La fase di cattura si ferma al genitore dell'oggetto che ha attivato l'evento. |
| 2 | Target Nella fase di destinazione, il componente che ha attivato l'evento viene controllato per un gestore di eventi. |
| 3 | Bubble La fase Bubble è inversa della fase di cattura, lavorando a ritroso attraverso la struttura, dal genitore del componente di destinazione in su. |
Considera il seguente codice dell'applicazione:
<?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>Quando l'utente fa clic sul pulsante, fa clic anche sul pannello e sull'applicazione.
L'evento passa attraverso tre fasi alla ricerca di assegnazioni di gestori di eventi.
Seguiamo i passaggi seguenti per testare la consegna di eventi in un'applicazione Flex:
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file mxml modificato 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>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
