פיתוח תוכנה – אבי צוראל – 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

שלום לכולם, כמו שאתם בטח יודעים אני מתכנת פלקס ופלאש כבר שנים מספר (בערך 4-5 שנים), בשלוש השנים האחרונות אני אפילו עושה את זה בחלק נכבד מאוד מהזמן שלי כפרילאנסר יועץ ומפתח תוכנה.

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

לאחרונה, יצאו לאדובי תוכנות חדשות וטובות כמו Flash Builder 4, photoshop CS5, Flash CS5 ועוד.

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

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

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

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

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

מבחינתי, זו גישה מעולה, כן, יש שיקראו לה crack dealer method כלומר, קח, תנסה, תתמכר, תשלם כשיהיה לך, אבל זה מתאים לי ואני חושב שיש גם חברות נוספות שקונות תוכנות כחלק מbizSpark שזה מועיל להם מאוד.

עכשיו, כאשר אני רכשתי את החבילה הזו, התוכנה ששלטה היא Visual Studio 2008, אחרי מספר חודשים יצאה 2010 וממש הצטערתי כי רציתי אותה מאוד, סתם כקוריוז פניתי לאחד הנציגים שלהם בטוויטר (זה שגייס אותי) ושאלתי אותו אם יש סיכוי שזה יהיה בתוך החבילה (זה היה יומיים אחרי ההשקה).

מה שהוא ענה לי הדהים אותי, הוא אמר לי להכנס עם השם משתמש והסיסמה שלי, התוכנה כבר מחכה לי שם מיום ההשקה!!!

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

מה יש לאדובי להגיד על זה?

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

אם מישהו יפנה אותי לבלוג של מרצה באוניברסיטה שכותב בעברית ובאנגלית בכמות שאני כותב על פלקס יקבל פרס!

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

רגע רגע אבי, זה סתם פוסט עצבני עד עכשיו, מה הם יכולים ללמוד?

אוקיי אוקיי, אני ארגע, הנה מה שהם יכולים ללמוד

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

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

רגע, אין כזה!

למה?

לא יודע!

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

זה לא שוחד, זה הכרה במאמץ

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

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

עוד דבר, אני אמשיך לכתוב ולהשתמש במוצרים של אדובי, כי אני מאמין שהטכנולוגיה ( Flex, Air ) היא טכנולוגיה מעולה, אבל אני גם חושב שעם Adobe והנציגות שלהם בישראל QuickSoft צריכים ללמוד שיעור חשוב בהתייחסות לקהילה.

כך למשל צריכים להיות יותר כנסים, יותר ימי עיון ויותר התייחסות לאנשים.

בחו"ל יש מספר כנסית בכול שנה כמו 360 flex ו flash in the city, יש את max שהוא של adobe  ויש עוד כנסים מקומיים, בארץ אין כאלה כמעט.

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

אשמח לתגובות ולדיון

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

זהו קישור לפוסט המקורי – Flash Media Server Statistics Using Sawmill

שלום לכולם,

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

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

תיהנו!

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

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

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

שלום לכולם,

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

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

כאשר ניגשים לבצע אתר שצריך להזרים וידאו למשתמשים צריכים לענות ראשית על כמה שאלות מרכזיות.

1. האם אנחנו באמת רוצים Streaming או שמספיק לנו Progressive. רגע רגע, מה זה אומר בעצם?
2. האם יש לנו שרתים ייעודיים או שאנחנו צריכים לקבל את השירות הזה כחלק מService מאחד מנותני השירותים למחשוב ענן.

סטרימינג אמיתי או פרוגרסיב?

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

מה ההבדל?

סטרימינג – Streaming המידע שזורם ללקוח הוא זה שהוא רואה עכשיו ויראה בכמה שניות הקרובות, אם הלקוח לחץ על Play בוידיאו ואז לחץ על Pause המידע יפסיק לזרום אליו.
אני חושב שזהו ההסבר הפשטני ביותר שאני יכול לתת לאופציה הזו.

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

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

Progressive – Progressive עדיין יאפשר את הצפייה בוידיאו אך הסרטון או קטע המוזיקה יורדים אל הלקוח (בו זמנית) ואז מתנגנים.
למשל, אם נלחץ על Play נתחיל בתהליך של זרימת מידע ללקוח ושמירה של הקובץ אצלו בTemporary Internet files, גם אם הלקוח ילחץ על Pause הוא ימשיך את תהליך השמירה ללא תלות בשום פעולה אחרת שלו.

דוגמא טובה לכך אנחנו יכולים לראות בYouTube שמשתמשים בProgressive על מנת להזרים את הסרטונים ללקוח, הסרטונים נשמרים בצורה זו או אחרת על המחשב המקומי.

יתרונות וחסרונות

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

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

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

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

היתרון המובהק הוא השימוש רק במה שצריכים ולא במה שלא

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

יכול להיות שהשרת שלך יהיה יעודי לWEB אבל כול הסרטונים יזרמו מEC של אמזון לדוגמא.

טכנולוגיות

גם בסטרימיג וגם בפרוגרסיב יש לנו את האפשרות לבחור.

Flash

במידה ונבחר בטכנולוגיה זו נצטרך לבצע המרה של כול הסרטונים שלנו לFLV, סרטונים של WMV או Avi לא יוכלו להיות מנוגנים על ידי Flash Player.
ניתן למצוא היום ממירים בתשלום או חינמיים.

אחד מהממירים הטובים ביותר שקיימים בשוק הוא FFMpeg שמכילה Command Line עשיר באפשרויות שאיתו ניתן לבצע Tweaking להמרה, איכות, גודל, Frame Rate ועוד.
FFMpeg אינו לשימוש מסחרי, במידה ורוצים לעשות בו שימוש מסחרי צריכים לבצע Open Source לכול מה שנוגע בחלק הזה.

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

במידה ונבחר בסטרימינג יש לנו את Adobe Flash Media Server.
תוכנה מעולה זו יכולה לשבת על שרת יעודי שלכם ולבצע Stream של וידאו, אודיו, מידע,לנהל משתמשים, Chat's ועוד ועוד.
התכנות לשרת הזה אינו אינטואיטיבי וידרוש בד"כ מתכנת מיומן עם יכולת למידה גבוהה ביותר.

לסטרימינג של פלאש אפשר למצוא גם את תוכנת קוד פתוח Red5

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

Avi, WMV ושאר ירקות

במידה ולא נרצה את המרת הוידאו, נוכל להשתמש בWindows Media Player, החיסרון המובהק הוא התאימות לדפדפנים. משתמשי פיירפוקס וספארי לא יוכלו לראות את הסרטונים שלכם (לפיירפוקס יש תוסף מיוחד).

אפשר גם לבצע Streaming על ידי מימוש פרוטוקול MMS ושימוש בWindows media streaming שבא כחלק Windows 2003.

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

שלום לכולם,

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

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

שלום לכולם,

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

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

בד"כ, אני מגיע לחברות בעקבות המלצה מחברה שאיתה אני עובד, או שראו את תיק העבודות שלי (בקרוב גרסת 2009), כך שכשאני מגיע לשם, אני לא צריך להוכיח את עצמי.

בשבוע שעבר, היה לי מקרה אחר, ונדרשתי למבחן בAs3, זה היה מוזר אבל כמובן שלא סירבתי ועשיתי את המבחן

עברתי! חחח

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

המבחן היה מורכב משלוש שאלות:

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

שאלה שנייה
ישנו מערך של מספרים, שמורכב מהספרות 0 ו1 בלבד.
כתוב פונקציה שתחזיר מערך מסודר קודם 0 ואח"כ 1, מבלי להשתמש בפונקציה Sort

שאלה שלישית
ישנו קובץ XML שמכיל את הפרמטרים הבאים
X – מיקום הX של האלמנט
Y – מיקום Y של האלמנט
FromS – שנייה שבה צריך להתחיל
ToS – שנייה שבה צריך להפסיק
Url – מיקום הקובץ

כתוב פונקציה, שמופעלת בכול שניה, שאמורה לקחת את הקובץ SWF מתוך הXML ולהציג אותו על אובייקט וידאו

בהצלחה, אשמח לשמוע תגובות