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

מתודולוגיה בפיתוח ממשקי משתמש - שיטות בהנדסת תוכנה:

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

לדוגמא מכשיר טלפון סלולארי: כיום טלפונים ניידים כוללים המון תכונות (פיצ'רים) ובעלי יכולות רבות. חוץ מיכולת העברת השמע (שזו אמורה להיות המטרה המרכזית שלו) הוא מצויד ברכיבים כמו מודם סלולארי, מערכת ניווט (GPS), ספר טלפונים, פנקס, מחשבון, מצלמה, נגן מדיה, מקלט רדיו, דפדפן אינטרנט ועוד פיצ'רים רבים. לפני עשור לא היינו מדמיינים שכל זה היה ניתן להכניס לגוף הקטן של טלפון נייד. הבעיה בפיתוח מוצר כזה - זה לבנות ממשק פונקציונאלי, אך נוח לשימוש עבור המשתמשים שעבורם נועד המכשיר. דוגמא פרטית: לסבתא שלי יש טלפון סלולארי (לא הכי חדיש), כל שימוש שהיא עושה עימו זה רק שיחות (בעיקר עם בני משפחה), טלפון מצויד בחלק מהתכונות אשר פירטתי מקודם, המכשיר קטן במימדים ומכך נובע שיש לו כפתורי הפעלה קטנים וצג קטן עם טקסטים בגודל קטן. מכשיר זה יכול להתאם לדור צעיר יותר, אך לאנשים זקנים ולאנשים עם מוגבלויות מסוימות אינו שימושי (עובדה מצערת - אין הרבה יצרנים שמפתחים מכשירים למבוגרים או עבור אוכלוסיות מוגבלות או עבור ילדים, אין גם הרבה חברות סלולאר שרוצות להתעסק עם זה).

אחזור לנושא...

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

הכלים החדשים לפיתוח תוכנה ב- WPF נותנים אפשרות לבצע עבודה על ממשק המשתמש במקביל - ז"א מעצב גראפי יכול לעצב חלקים מסוימים של ממשק גראפי ב-MS Expression Designer ואחר כך, ובמקביל, עם מפתח תוכנה לעבוד ב- MS Expression Blend ומפתח יעבוד ב-MS Visual Studio 2005/8. זה אפשרי אודות מתודולוגיה של פיתוח שמושתת על הכלים הללו והקשר ביניהם מתבצע דרך XAML. לאחר תכנון נכון של הפרויקט רוב המודולים שצריך לפתח כבר ידועים מראש וניתן להתחיל לעבוד על כל אחד מהם (בתנאי שיש מודל שכבתי שעושה הפרדה בין שכבת הממשק הגראפי - GUI ליתר השכבות בתוכנה).

שיתוף פעולה בין מעצב למפתח

השיטה הישנה:

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

מכוון שתהליך פיתוח הממשק לא יכול להתבצע במקביל, זמן הפיתוח היה ארוך, העבודה לא יכולה להתבצע במקביל מסיבות שונות כמו: GUI ניתן לעצב רק לאחר ששכבת המידע או שכבת לוגיקה העסקית מוכנה, GUI ניתן לעצב רק לאחר שכל הרכיבים הגראפיים הוכנו ע"י המעצב אחר. בד"כ חברות לא העסיקו מעצבים גראפיים, עיצוב הGUI נעשו ע"י מפתחי התוכנה (למען האמת גם אומר שלחלק גדול ממפתחי התוכנה חסר חוש עיצובי/ציורי או רקע בתחום, הם גם לא חייבים להיות מעצבים מתוקף תפקידם).

השיטה החדשה:

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

ניתן ליישם מתודולוגיה חדשה תודות לכלים החדשים ושפת ההתקשרות שלהם -  XAML. למשל: מעצב יבנה ממשק על כל רכיביו (או רק רכיבים) בתוכנה MS Expression Designer או בכל תוכנה שתומכת בפורמט ייצוא של XAML, בו הזמן מפתח יוכל לעבוד על "code behind" של GUI, מפתח יכול לעבוד ב-MS Expression Blend ו/או ב-MS Visual Studio 2005/8 או בכל כלי פיתוח אחר שתומך בפורמט ייבוא של XAML.

XAML:

• מהווה גורם מקשר בין תוכנה לעריכה גראפית לבין תוכנת פיתוח הקוד; ניתן לבנות רכיב גראפי (כמו כפתור, למשל) עם כל המאפיינים החיוניים, ולשמור אותו בפורמט של קובץ XAML. קובץ יתאר מאפיינים שונים של האובייקט (כמו: גודל, צבע, שקיפות, הצללה ועוד).

• את רכיב הגראפי אשר שמור בקובץ XAML ניתן לייבא לתוך סביבת פיתוח של GUI ולתת לו פונקציונאליות דרושה. ניתן להשתמש בכל שפת תכנות שנתמכת ע"י חבילת דוט-נט או להמשיך לפתח ב-XAML, זה תלוי תכנון הממשק.

בעזרת XAML, מעצבים ומפתחים יכולים לפשט תהליכי פיתוח:

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

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

לסיכום אומר: תנו לכל אחד לבצע את העבודה שהוא יודע לעשות הכי טוב (בהקשר של "מעצב vs. מפתח"). כל אחד למד את התחום שלו ולכל אחד יש התמחות בתחום שלו. מקצוע העיצוב הולך ותופס תאוצה בשנים האחרונות. מפתח תוכנה יכול להיות בעל כישרון עיצובי, אך אין זה יהיה נכון שהוא יעמיס על עצמו משימה של עיצוב GUI שאותה יכול לבצע בקלות המעצב. מודל פיתוח זה כבר עובד בתחום האינטרנט, לכן אין שום סיבה שלא יצליח בתחום היישומים החלונאיים.

מה יש לנו היום:

::: כלים של מיקרוסופט עבור מעצבים ומפתחים
::: תכנות הצהרתי ב- XAML
::: כלי פיתוח של צד שלישי: Aurora by Mobiform, ZAM 3D by Electric Rain, e.g.

הערות: ניתן לנהל ויקוחים/דיונים רבים לגבי נכונות הגישה או המצב במציאות. השילוב של מעצב ומפתח באותו הפרויקט די מסובך ודורש מיומנות בניהול פרויקטים. שימוש בכלים חדשים כמו MS Expression Blend במקביל ל- MS Visual Studio 2005/8 גם אינו פשוט, לפי ניסיוני אומר שאין עבודה חלקה בעיצוב הממשק כאשר עובדים במקביל עם כלים אלה ועוד ע"י שני אנשים ויותר, בפרויקטים גדולים זה יכול להיות מסובך עד בלתי אפשרי. כעת מתבשל פוסט בנושא, שבו אנסה לתאר את המצב היום ואת השיטות לעיצוב ממשקים גראפיים בעזרת כלים אלה וע"י שילוב מעצב בצוות המפתחים.