פיתוח תוכנה – אבי צוראל – Kenso

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

היות ואפליקציות פלקס מכילות לוגיקה שקשורה ל-view, לוגיקה שקשורה ל-services וכן הלאה, אני תמיד בעד לשמור דברים מסודרים ונקיים, כחלק מהעקרונות של clean code. לכן, אני מאוד אוהב שקבצי ה-mxml שלי מכילים אך ורק קוד mxml ללא קוד actionscript כלל וכלל.

איך אני עושה את זה?

אני עושה שימוש במשהו שאני קורא לו ViewHelper. אין להתבלבל אגב עם המימוש של Cairngorm ל-ViewHelper מכיוון שזה לא אותו הדבר, אני עושה שימוש ב-custom class רק כדי לשמור על קוד מאורגן ונקי.

את השיטה הזו אפשר לממש ללא קשר לפריימוורק mvc שאתם עושים בו שימוש (אני אגב משתמש ב-RobotLegs).

מה השימוש לViewHelper?

השימוש הוא בעצם לשמור את כול קוד הActionScript מחוץ לקבצי הmxml שלנו. כמו כן, ליצור משהו גנרי שאנחנו יכולים להשתמש בו דרך כול האפליקציה ושתהיה שפה משותפת. כך למשל, אפשר שהViewHelper יכיל אוסף של ולידציות שאפשר להוסיף לView, כמו כן הוא יכיל Event Listeners שקשורים לאותו View וכו'.

אוקיי, אז איך נראית אפליקציה לדוגמא?

כך נראה מבנה הקבצים שלנו בתוך Flash Builder 4

ניתן לראות שיש לנו את האקליקציה המרכזית, יש לנו View component יש לנו את ה helper של ה view component הזה ויש לנו את הקלאס BaseViewHelper שמכיל את כול השדות והפקודות שכול ViewHelper יורש מהן.

אז בואו נראה איך נראה הקוד של BaseViewHelper

אגב, מדובר בגרסא מופשטת של הקלאס, באפליקציות שלי בד"כ הקלאס הזה כולל עוד מספר דברים כמו למשל ולידציות addFieldToValidation וכו'.

package com.kensodev.core
{
	import mx.core.UIComponent;

	public class BaseViewHelper
	{
		private var _view:UIComponent;

		public function BaseViewHelper()
		{

		}

		public function init():void
		{

		}

		public function set view(v:UIComponent):void
		{
			_view = v;
		}

		public function get view():UIComponent
		{
			return _view;
		}
	}
}

אז כמו שאפשר לראות יש לנו כאן referance לview שיכול להיות כול uiComponent וזה בערך הכול, אפשר להרחיב את הhelper לכול צורך שאתם רואים, למשל להצמיד לכול View מודל מסוים או dataProvider שצריך להיות bindable ועוד.

עכשיו, איך נראה ViewHelper שיורש מה base class שלנו?
כך

package com.kensodev.views.helpers
{
	import com.kensodev.core.BaseViewHelper;
	import com.kensodev.views.MyViewComponent;

	public class MyViewComponentHelper extends BaseViewHelper
	{
		public function MyViewComponentHelper()
		{
			super();
		}

		public function get myView():MyViewComponent
		{
			return MyViewComponent(this.view);
		}

		public override function init():void
		{
			//TODO Auto-generated method stub
			super.init();
		}

		public function myButton_clickHandler(event:MouseEvent):void
		{
			// TODO Auto-generated method stub
		}
	}
}

כמו שאפשר לראות גם כאן אני מבצע override לחלק מהפונקציות שקיימות בBase, הוספתי פונקציה שנקראת myView שמחזירה לי את ה view של הhelper אבל הפעם עם קאסטינג לview האמיתי, כך אני יכול לגשת לכול קומפוננטה על הview מתוך הhelper ישירות, זה מאוד יעיל ומרכז קוד בצורה טובה מאוד.

עכשיו לחלק האחרון, כך נראה הView שלנו

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
		   width="400"
		   height="300"
		   creationComplete="helper.init()"
		   xmlns:helper="com.kensodev.views.helpers.*">

	<mx:Script>
		<![CDATA[

		]]>
	</mx:Script>

	<helper:MyViewComponentHelper view="{this}" id="helper" />

	<mx:Button id="myButton" click="helper.myButton_clickHandler(event)"

</mx:Canvas>

כמו שאפשר לראות, אנחנו כוללים את הhelper בתוך הview מה שגורם לו להיות "מופעל", כמו כן ניתן לראות שבקליק על הכפתור אני מפעיל פונקציה בתוך הhelper במקום לכתוב את הפונקציה ישירות על אותו הקובץ

דרך אגב, יש מוסכמה על השמות, כך שבעצם קל מאוד למצוא את הקבצים האלה במערכת
אם יש לכם view שנקרא myViewComponent אז הhelper שלו יקרא myViewComponentHelper והמודל שלו יקרא myViewComponentModel והקומנד יקרא myViewComponentCommand וכן הלאה.

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

קוד המקור של האפליקציה נמצא בgit, תרגישו חופשי להוריד ולראות איך זה בנוי.
http://github.com/KensoDev/view-helper-example

שלום לכולם,

אחרי הפסקה ארוכה יחסית אני חוזר עם עוד סקרינקאסט.

הפעם, אחרי מעבר למק אני מדבר על פלקס – Flex ועל ריילס – Ruby On Rails, ואיך הם משתלבות ביחד בצורה טבעית מאוד (לפחות לי).

תיהנו!

בהקלטת הסקרינקאסט הזה אני גם מכריז על קטגוריה חדשה בבלוג שלי: Ruby on Rails

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

השילוב (הטבעי) בין ריילס לפלקס from Avi Tzurel on Vimeo.

שלום לכולם,

כמו שאתם בטח כבר יודעים עולם ה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

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

Show me the m….xml

אוקיי…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סיכום

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

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

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

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

שיהיה בכיף

עדכון (18 מאי) העליתי את הוידאו לVimeo שיהיה יותר נוח לצפות בו.

ScreenCast [Hebrew] Getting microphone data and displaying graphics from Avi Tzurel on Vimeo.

אפשר להוריד את הסרטון בMp4 איכותי יותר מכאן

קוד? כמובן! מכאן