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

שיעור שני בפלקס ו AS3 ידבר על יצירת אובייקטים פלקסיים ע”י קוד ולא דרך MXML

למה ? קודם כי אפשר ושנית כי הרבה פעמים אנו נדרשים להוסיף או להוריד אלמנטים טפסיים בזמן ריצה או לייצר סדרה של X מופעים של קומפוננטה מסויימת.

כלל אצבע – הקומפוננטות של פלקס הן בעצם מחלקות של displayObject וככאלה יש להתייחס אליהן. יוצרים אותן ע”י new ואם רוצים להוסיף אותן – יש להשתמש ב addChild בדיוק כמו AS3.

הנה דוגמה ליצירת כפתור בצורה תכנותית, להכנסת label לתוכו ולהצמדת איבנט קליק:

Var btn:Button = new Button();

btn.label = “click”;

addChild(btn);

btn.addEventListener(MouseEvent.CLICK, onButtonClick);

די פשוט. כמובן שיש לדאוג שהקוד הזה יבוצע ע”י הכנסתו את טאג script בתוך פונקציה כלשהי ולדאוג שהיא גם תיקרא.

יפה, מה עוד אפשר לעשות עם הכפתור ? ובכל כל מה שניתן לכתוב ב MXML ניתן למימוש בקוד. אפשר להשפיע על כל property שלו ישירות ע”י כתיבת האובייקטת נקודה ושם ה property. דבר זה פועל גם להשמת ערך חדש, וגם לקריאת הערך הנוכחי. יש לשים לב שproperty מסויימים גם אם לא נכתבו מקבלים ערכי ברירת מחדל מפלקס.

כל איבנט שרוצים להצמיד לאותה קומפוננטה, בהנחה שהאובייקט הזה אכן מייצר את האיבנט הנ”ל ניתן להצמיד ע”י addEventListener בצורה רגילה. יש לשים לב שפונקצית ה handler (הפונקציה שפועלת כתוצאה מהאיבנט) מקבלת את האיבנט ואין להשמיט מהמבנה שלה את הארגומנט האיבנטי.

סטיילינג – כי גם קומפוננטות רוצות להיות כוסיות. פה אנחנו פחות נהנים מיכולת נוחה לעיצוב תכנותי כמו שיש לנו ב MXML אם כי ניתן את הכל לעצב בצורה זהה. ב MXML ההשלמה האוטומטית של פלקס (intellisense), או של כל מערכת טובה לכתיבת MXML (flashDevelop) תיתן לנו את כל הקלאסים הסטייליים הנגישים לנו לאותה קומפוננטה שאנחנו עורכים כעת, ולא תיתן לנו מה שלא זמין. כך למשל ל button לא תינתן האפשרות להקליד לו borderSkin לעומת HBox שכן יקבל. יתרה מזאת – בכתיבה MXMLית ניתן לעבור בקלות לעורך ה design ולעבוד במצב WYSIWYG ויזואלי. בתכנות אנחנו יותר נדפקנו שכן עלינו להכיר את המאפיין הויזואלי שנרצה לקבל, את הערכים שהוא יכול לקבל והכי מבעס – להקליד אותם ידנית. הנה למשל דוגמה להוספת מאפייני style לכפתור שיצרתי זה עתה ע”י setStyle

btn.setStyle(”paddingRight”, 5);

btn.setStyle("icon", bulletAddIcon);

לינק טוב שיכול לעזור לנו להבין איזה מאפיין styleי זמין לכל קומפוננטה – הוא ה styleExplorer של אדובי:

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#

ללא ספק העיצוב הוא קטע שנשאר לא נוח בהיעדר ה intellisense . זו אחת הסיבות שלדעתי לא צריך לזנוח את הכתיבה ה MXMLית כי אנחנו פנאטים של כתיבת קוד. צריך לדעת את האיזון ומתי להשתמש במה ולמה. כמו כל דבר בחיים מלבד סקס J

הדבר האחרון שכדאי לדעת ביצירת קומפוננטות בזמן ריצה הוא binding . בעוד binding הוא משהו מאוד פשוט ב MXML הוא טיפה יותר מורכב כשאנחנו עוברים לקוד, אבל הוא לא בלתי מושג. הנה דוגמה שקושרת label של כפתור אל ערך טקסט של קומפוננטת input.

var myInput:TextInput = new TextInput();

addChild(myInput);

BindingUtils.bindProperty(btn2,“label”,myInput,“text”);

קשירת הערכים מתבצעת ע”י service ששמו bindProperty, והכתיבה לא קצרה כשם שהיתה ב MXML. הארגומנט האחרון שבפונקציה יכול להיות משהו שמייצג שרשרת של אובייקטים ולא רק מאפיין אחד פנימה.

אלו היו מספר כללים בסיסיים איך לבצע בעצם כמעט הכל בפלקס ע”י תכנות ולא ע”י כתיבה טאגית. אני מאמין שבאמצעות הנקודות הללו ניתן לבצע כ 90% (אם לא יותר) של מה שניתן לעשות ב MXML.