היכרות עם Flex – שלום עולם

שלום לכולם,

כמו שאתם בטח כבר יודעים עולם הRIA (אפליקציות אינטרנט עשירות) הוא עולם שמתפתח והמתחרות בו נהיות משוכללות מיום ליום, בכול יום יוצא עדכון לסביבה, עדכון ל-Framework או משהו אחר.

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

בעוד שאני מפתח בעיקר לסביבת מיקרוסופט (C#, Sql Server, .Net) בחרתי דווקא בפלקס כסביבה העיקרית שבה אני מפתח אפליקציות עשירות.

למה דווקא פלקס?

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

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

IDE – הIDE של פלקס (Flex Builder 3) הוא מדהים, יש לו עשרות רבות של Features שיכולים לעזור לנו בפיתוח, Debugging, Remote Debugging פקדים מובנים שמקלים ומריצים את זמן הפיתוח.

עיצוב – מעצבים הם כמו נשים אי אפשר איתם ואי אפשר בלעדיהם (הומור כמובן, לא להיעלב), הסביבה שבה מעצבים לפלקס היא אותה סביבה בדיוק שבה המעצב עובד (99% מהם סביר להניח) שזה בעצם Illustrator, Photoshop או כול תוכנה גרפית אחרת. המתחרה העיקרית של Flex – סילברלייט הוציאה סביבה חדשה (שמבוססת על מוצר של חברה שמייקרוסופט קנתה לפני שנים) ועדיין לא הוטמע מספיק אצל מעצבים.
להערכתי בארץ יש מספר זעום של משתמשים בתוכנה הזו ושל מעצבים שיודעים לעבוד איתה.

תאימות מלאה לפלאש – בישראל פלאש היא טכנולוגיה שאומצה מזמן, היום ופלקס מבוססת על פלאש (התוצר הסופי הוא SWF) אתה יכול לקבל מהמעצב שלך כפתורים שהוא תכנת בפלאש, להדביק אותם לפלקס וכול זה בלי שתצטרך לעשות שום התאמה.
יש אפילו תאימות מלאה לVector ול 9Slice המפורסם (בפוסטים הבאים, מבטיח!)

הפלטפורמות המתחרות בהחלט בדרך, יש להם בהחלט כוונה טובה, אבל אין להן בימים אלה סיכוי מול פלאש, תחשבו כמה אתרים אתם מכירים שמשתמשים בפלאש (שזה אומר מעצבים וגרפיקאים שעשו אותם) לעומת אתרים שנבנו בSilverlight

שרתים – אהההה, תכנות צד שרת גורם לי לחייך בכול פעם.
פלקס לא מוגבלת בטכנולוגיה – המערכת שאתם בונים יכולה לצרוך Service שנכתב בJava ובאותה מידה לצרוך אחד שנכתב בc#.
Socket – כנ”ל, יכול להיות Windows ויכול להיות Apache אין שום בעיה, אתם בפלקס לא צריכים לשנות כלום, הכול נשאר אותו דבר.

תאימות דפדפנים – צריך להרחיב? יש מישהו שאין לו Flash Player בדפדפן?
כן, אני יודע יש AdBlocker של FireFox אבל כמה באמת משתמשים בו? הרי בסופו של יום אפליקצית RIA היא חלק עיקרי בתוך אתר אינטרנט, פרסומת היא חלק משני ולכן אם אתם תפתחו אפליקציה מדהימה, אנשים ירצו לראות אותה.

השתכנעתם? יופי נמשיך…

ההתחלה

כשAdobe הציגה את פלאש MX היא הביאה לעולם לבטים גדולים לעשרות אלפי מתכנתים כמוני.
מתכנתים שרצו לאמץ את הטכנולוגיה אבל שנהיים ירוקים למראה הIDE האיום והנורא של Flash.

מתכנתים שלא רצו להתעסק עם Symbols ובמות וLayers וTimeFrame וקוד שמפוזר בכול מקום וקשה לשלוט עליו.
היו המון תלונות ואי שביעות רצון… Adobe הקשיבו…

בשנת 2004 יצא Flex 1 שהתבסס על שפת ActionScript 2.
לאחר שנתיים בלבד יצא Flex 2 שכבר התבסס על ActionScript 3 המעולה

בשנת 2008 הגיע לאוויר העולם Flex Builder 3 והיום הוא הסביבה הרשמית של Adobe לפיתוח של Flex.

השפה

flex מתכנתים ע”י שפה שמבוססת על Xml שנקראת Mxml.

כול דבר שתכתבו ב-Mxml יתורגם מאחורי הקלעים לAs3 טהורה ומהירה.

יש ל-Flex פקדים מובנים ספציפיים לסביבה שלא ניתן להשתמש בהם בפלאש לדוגמא, פקדים אלה מקילים מאוד על הפיתוח של אפליקציות אינטרנט או Desktop עשירות.

צילומי מסך – IDE

6-23-2009 12-47-52 AM []

6-23-2009 12-48-37 AM []

הסביבה תואמת ל-Windows (אני אישית עבדתי איתה על כול גירסה מאז XP כולל על 7, גם בסביבת 32 וגם ב64 ביט) ולמקינטוש.

Show me the m….xml

אוקיי…

דיברנו על פלקס בכללי, דיברנו על mxml בכללי.
עכשיו קצת לקוד.

האמת שהתכנות ל-Flex מאוד דומה לתכנות של Asp.Net ולתכנות של .Net בכלל.

הפקדים מזכירים את הסביבה, הפקודות והכול.

האפליקציה עצמה (הבסיס) מתבססת על רכיב שנקרא Canvas שהוא משטח העבודה שלנו.
את כול הפקדים שלנו אנחנו ממקמים עליו בשיטות מיקום שונות (לא ניכנס אליהם עכשיו)

אנחנו יכולים לשים מספר Canvas’s בתוך Canvas אחד ללא הגבלה אלא של שטח מסך :-)

בואו ונתחיל ביצירת פרויקט חדש.

יצירת פרוייקט מתבצע באמצעות קליק ימני בחלק הלבן של החלונית “Flex Navigator” ובחירה ב New—Flex Project

קיבלנו את הדיאלוג הזה

6-23-2009 12-57-01 AM []

ניתן שם לפרוייקט שלנו, נבחר לו מיקום ופשוט נקליק על Next עד לFinish.
ישנן מספר הגדרות בדרך, אנחנו פשוט נשאיר אותן ריקות בשלב זה או בDefault שלהן, שזה גם בסדר.

עכשיו קיבלנו את האפליקציה שבאה עם כול פרויקט חדש בכחול האופייני של Flex.

פשוט ע”י Drag&Drop נגרור פקד textInput ופקד button לתוך סביבת העבודה שלנו.

6-23-2009 1-03-23 AM []

ע”י החלונית המסומנת באדום ניתן להם מאפיינים.
לפקד הטקסט ניתן ID של txtUserFullName.
לכפתור ניתן ID שנקרא btnSend

בניגוד לפלאש, את הקוד של Flex ניתן לערוך על ידי עריכת טקסט.

ניתן לערוך את כול המאפיינים, כולל X,Y או כול מאפיין אחר העולה על רוחכם ונתמך ע”י פלקס (פלקס מציעה Intellisence מעולה!!!)

להלן דוגמא של איך זה נראה

6-23-2009 1-05-49 AM []

אם אתם באים לכאן עם רקע של as2 החייזרית, החלק הזה יהיה כמו סינית בשבילכם. לכול סביבה אחרת יהיה הגיון במשפטים הבאים :-)

הצורה שבה as3 עובדת היא צורה של אירועים ומאזינים, כלומר ישנו אירוע שאנחנו יודעים שצריך לקרות, אנחנו צריכים לכתוב לו “מאזין” שיתפוס אותו כשהוא קורה ויבצע את הקוד שלנו.

כך למשל, אנו צריכים להאזין לאירוע click על הכפתור באמצעות פונקציה, בואו ונכתוב את הmxml ואת קוד הas הדרוש. כך זה נראה.

6-23-2009 1-19-48 AM []

לא ניכנס יותר מדי לעומק הדברים, יהיו בפוסטים הבאים הסברים להכול, גם באמצעות Screencast וגם באמצעות פוסטים כתובים.

היות והתוצר הסופי שלנו הוא קובץ SWF הוא יכול לרוץ בדפדפן, בואו ונראה את התוצאה הסופית שלנו.

6-23-2009 1-19-38 AM []

סיכום

הפוסט הזה היה טעימה מאוד ראשונית, הוא ממש מתאבן למה שהולך לבוא.
הוא נועד להכיר את הסביבה, להביא אותה לידיעת מי שלא מכיר אותה (ומפסיד).

בפוסטים הבאים ארחיב יותר בנושא, ונתחיל להבין את העולם של Flex, AIR ושל כול הRIA הזה שכולם מדברים עליו כול הזמן.

אתם יכולים להוריד את Flex Builder 3 לגרסת ניסיון של 30 יום מכאן

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

*

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>