פלאש פלקס ואבגיל

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical“>

    <mx:Script>

        <![CDATA[

            

            private function helloWorld():void

            {

                trace(“More is less”);

            }

            

        ]]>

    </mx:Script>

</mx:Application>

אמה מה ? צריך משהו שיפעיל את הקוד לא ? ובכן יש לנו מספר דרכים להתחיל את העניין – הדרך הישירה ביותר היא להוסיף לתוך טאג ה application את המאפיין creationComplete שמשמעותו “תפעיל את הפונקציה הזו כשאתה מסיים לבנות את עצמך”. סיום בניה עצמית אומר במילים אחרות, שהפונקציה תפעל כאשר כל הילדים של אותה קומפוננטה (במקרה שלנו האפליקציה עצמה היא הקומפוננטה( מוכנים והתווספו.
הטאג הראשי יראה עכשיו כך:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”helloWorld()”>

יפה – עכשיו הקוד שלנו פועל.

עכשיו נראה איך דרך קוד אנחנו ניגשים אל קומפוננטות אחרות שנמצאות בתוך אותה קומפוננטה (שוב – במקרה שלנו – האפליקציה).
בפלאש – אם נרצה לפנות לאיזה MC נצטרך לקרוא לו בשם – instanceName או להחזיק רפרנס אליו. בפלקס זה אותו דבר רק שבמקום instance יש לנו id ורפרנס זה בדיוק כמו רפרנס רגיל. אם נרצה לפנות על ידי תכנות אל כפתור למשל נרשום בקוד את שם ה id של הכפתור – ופשוט נמשיך עם ה dot syntax הרגיל. משהו כזה:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”helloWorld()”>

    <mx:Script>

        <![CDATA[

            

            private function helloWorld():void

            {

                trace(“More is less”);

                myButton.label = “click me”;

                myButton.width = 120;

            }

            

        ]]>

    </mx:Script>

    <mx:Button id=”myButton” />

</mx:Application>

רצינו להצמיד לכפתור איבנט קליק ? אין בעיה. כשם שמצמידים לאובייקט בAS3 איבנט מסוג mouseEvent נעשה כאן אותו דבר:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”helloWorld()”>

    <mx:Script>

        <![CDATA[

         private function helloWorld():void

        {

            trace(“More is less”);

            myButton.label = “click me”;

            myButton.width = 120;

            myButton.addEventListener(MouseEvent.CLICK,onMyButtonClick);

        }

        private function onMyButtonClick(evt:MouseEvent):void

        {

            trace(“myButton was clicked”);

        }

            

        ]]>

    </mx:Script>

    <mx:Button id=”myButton” />

</mx:Application>

מה קורה כאשר נרצה משהו מהכיוון השני ? לצורך ההדגמה הוספתי כפתור נוסף אליו הצמדתי אירוע click. כתיבה כזו נקראת inline כי כותבים אותה ממש בתוך שורת הקומפוננטה. שימו לב שניתן מתוך הclick לפנות אל פונקציה שנמצאת בקוד בלי בעיה. במקרה כזה אפשר גם לוותר על שליחת האיבנט אל הפונקציה והאפליקציה לא תזרוק לנו Error על כך. תפסנו את פלקס במצב רוח סלחני…

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”helloWorld()”>

    <mx:Script>

        <![CDATA[

                   private function helloWorld():void

            {

                trace(“More is less”);

                myButton.label = “click me”;

                myButton.width = 120;

                myButton.addEventListener(MouseEvent.CLICK,onMyButtonClick);

            }

            private function onMyButtonClick(evt:MouseEvent):void

            {

                trace(“myButton was clicked”);

            }

           

            {

                trace(“my other button was clicked”);

            }

            

        ]]>

    </mx:Script>

    <mx:Button id=”myButton” />

    <mx:Button id=”myOtherButton” label=”other Button” click=”onOtherButtonClick()” />

</mx:Application>

מה עוד ? הנה דוגמה לאיך קומפוננטה מסויימת בכתיבת inline משפיעה ישירות על קומפוננטה אחרת מאותו ה scope.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”helloWorld()”>

    <mx:Script>

        <![CDATA[

            {

                trace(“More is less”);

                myButton.label = “click me”;

                myButton.width = 120;

                myButton.addEventListener(MouseEvent.CLICK,onMyButtonClick);

            }

            private function onMyButtonClick(evt:MouseEvent):void

            {

                trace(“myButton was clicked”);

            }

            private function onOtherButtonClick():void

            {

                trace(“my other button was clicked”);

            }

            

        ]]>

    </mx:Script>

    <mx:Button id=”myButton” />

    <mx:Button id=”myOtherButton” label=”other Button” click=”onOtherButtonClick()” />

    <mx:Label id=”myLabel” />

    <mx:Button id=”mylastButton” label=”other Button” click=”myLabel.text = ‘Cool’” />

</mx:Application>

זהו להיום. בפעם הבאה – יצירת קומפוננטות ע”י קוד ולא ע”י MXML.