Flex - Olay İşleme

Flex, duruma veya uygulama içindeki kullanıcı etkileşimine bağlı olarak verileri bir nesneden diğerine geçirmek için olay kavramını kullanır.

ActionScript'in genel bir EventOlaylarla çalışmak için gereken işlevselliğin çoğunu tanımlayan sınıf. Bir Flex uygulamasında bir olay her gerçekleştiğinde, Event sınıfı hiyerarşisinden üç tür nesne oluşturulur.

Etkinlik aşağıdaki üç temel özelliğe sahiptir

Sr.No	Özellik ve Açıklama
1	Type typene tür bir olay yaşandığını belirtir. Bu tıklama, başlatma, fareyle üzerine gelme, değiştirme vb. Olabilir. Gerçek değerler MouseEvent.CLICK gibi sabitler ile temsil edilecektir.
2	Target target Event özelliği, olayı oluşturan bileşene bir nesne başvurusudur. clickMeButton kimliğine sahip bir Button öğesini tıklarsanız, bu click olayının hedefi clickMeButton olacaktır.
3	CurrentTarget currentTargetözellik, kapsayıcı hiyerarşisini değiştirir. Esas olarak olayların akışıyla ilgilenir.

Olay Akış Aşamaları

Bir olay, olay işleyicilerini arayan üç aşamadan geçer.

Sr.No	Aşama ve Açıklama
1	Capture Yakalama aşamasında, program dışarıdan (veya en üstteki) ebeveynden en içteki olana kadar olay işleyicileri aramaya başlayacaktır. Yakalama aşaması, olayı tetikleyen nesnenin üst kısmında durur.
2	Target Hedef aşamada, olayı tetikleyen bileşen bir olay işleyicisi için kontrol edilir.
3	Bubble Kabarcık aşaması yakalama aşamasının tersidir ve hedef bileşenin üst öğesinden başlayarak yapı boyunca geri çalışır.

Aşağıdaki uygulama kodunu düşünün -

<?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>

Kullanıcı Düğmeye tıkladığında, Panel ve Uygulamaya da tıklamış olur.

Olay, olay işleyici atamalarını arayan üç aşamadan geçer.

Bir Flex uygulamasında olay işlemeyi test etmek için aşağıdaki adımları izleyelim -

Adım	Açıklama
1	Flex - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint.client paketinin altında HelloWorld adıyla bir proje oluşturun .
2	HelloWorld.mxml'yi aşağıda açıklandığı gibi değiştirin . Geri kalan dosyaları değiştirmeden tutun.
3	İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın.

Aşağıda, değiştirilmiş mxml dosyasının içeriği verilmiştir 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>

Yapılan tüm değişikliklere hazır olduğunuzda, Flex - Create Application bölümünde yaptığımız gibi uygulamayı normal modda derleyip çalıştırmamıza izin verin . Başvurunuzla ilgili her şey yolundaysa, şu sonucu verecektir: [ Çevrimiçi deneyin ]