UI פוסט 16: כלים לפיתוח תוכנה וממשקי משתמש – MS Expression Studio

28 במאי 2008

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


לפני שאעבור לכלי פיתוח אני רוצה להציג מבנה כללי של דוט-נט אשר עומדת בבסיס של כלי הפיתוח שאפרט בהמשך:

Dot-Net Frameworks: 1.0 – 3.0

כל החבילות הנן בעלות מבנה שכבתי-לוגי הבא:

clip_image002

שלש שכבות תחתונות (שכבות הבסיס):

Common Language Runtime – CLR: רכיב של מכונה וירטואלית של דוט-נט. נמצא מעל Common Language Infrastructure – CLI, זוהי שפת ביניים של מכונה וירטואלית, שפה זו מתארת קוד שמתבצע במכונה, שימוש בשפת ביניים מאפשר תכנות במספר שפות-על שונות באותה הסביבה. CLR מריץ סוג של byte-code שנקרא Microsoft Intermediate Language) MSIL) ,רמה הכי נמוכה של שפת פיתוח שניתן לקריאה, כמו שפת אסמבלר עם מאפיינים של שפת העל.

.NET Framework Class Library: אוסף ענק של יותר מ- 2500 מחלקות קוד שימושיות, ממשקים וטיפוסי מידע. מחלקות מסודרות בספריות עפ"י היררכיה וסווג, כל ספריה מכילה מספר Namespaces שמסווגים עפ"י יעודם פונקציונאלי. אוסף זה הנו חלק מפלטפורמת פיתוח והנו נגיש למפתחים דרך קבצי DLL שמותקנים במערכת הפעלה ומשותפים לכלי פיתוח שתומכים במודל דוט-נט.

Common Language SpecificationCLS: אוסף כללים בסיסיים שכל שפת תכנות צריכה להצמד על מנת לעבוד מול CLI ולהוות חלק מדוט-נט.

C#, Visual Basic .Net ואחרים: אלה שפות תכנות (שפות העל) שפותחו ע"י מיקרוסופט או אחרים והם תומכים ב-CLS, כך יכולים להיות משולבים בדוט-נט, ז"א ניתן לכתוב קוד תוכנה באחת השפות הללו ולהריץ אותו בסביבת דוט-נט.

Visual Studio .Net: סביבת פיתוח של דוט-נט (מיקרוסופט) בעלת סט כלים לפיתוח תוכנות בדוט-נט. כברירת מחדל, סביבה תומכת בפיתוח בארבע שפות תכנות: C++, C#, VB, ו- #J; בנוסף ניתן להתקין תמיכה לשפות נוספות שתומכות ב-CLS.


אחד החיסרונות המהותיים של סביבת דוט-נט בדומה לג'אווה הנו מהירות ביצוע הפקודות. כאשר מלבישים המון שכבות קוד אחד על השני, מגדילים את כמות הפקודות לביצוע של פעולה בסיסית. לדוגמא: קיימת פקודה שכותבת שורה לקובץ טקסט, הפקודה "נעטפה" בשכבה עליונה שמפעילה אותה, שכבה חדשה "נעטפה" בשכבה נוספת, נוצרו לפחות שלש שכבות מעל הפקודה המקורית, ז"א מעבד יצטרך לבצע עוד מספר פקודות נוספות לפני שמגיע לביצוע של פקודה מקורית. קיימות פקודות בקרה נוספות שנועדו להגן על המעבד בפני ביצוע פקודות בלתי חוקיות – הגנה תחת Managed Code.

 

MS Expression Studio

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

כלים של MS Expression Studio:

image

בהמשך ייעשה שימוש במושג WYSIWYG:
(What You See Is What You Got – מה שאתה רואה זה מה שאתה מקבל)

 

Expression Web

שם לא רשמי: "Quartz".

עורך מסוג WYSIWYG לדפי Web. ממשיכה של Microsoft Front-Page, מצוייד באופציות חדשות ומספק סביבה נוחה לפיתוח אתרי אינטרנט ו/או דפים/רכיבים של אתר.

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

מספק תמיכה רחבה לרוב טכנולוגיות פיתוח הנפוצות: XML, CSS 2.1, ASP.NET 2.0, XHTML, Java Script ועוד רבים. להפעלת העורך נחוצה התקנה של סביבת פיתוח של דוט-נט גרסה 2.0. עורך זה משתלב עם MS Share-Point Designer.

עורך זה עושה שימוש במנוע רינדור משלו בשונה מעורכים אחרים אשר מבוססים על מנוע רינדור של Internet Explorer – Trident. לטענת מיקרוסופט, מנוע זה מרנדר בצורה הכי תקנית לעומת יתר מנועי רינדור לדפי האינטרנט (המנוע מתמחה במיוחד ב- CSS).

תצלום מסך:

clip_image009

 

Expression Blend

שם לא רשמי: "Sparkle".

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

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

תצלום מסך:
blend_panels

העורך מורכב משלשה אזורי עבודה עיקריים:

משטח עבודה (אזור מרכזי שבו בונים ומעצבים ממשק גראפי)

פאנל הגדרות (עם תתי פאנלים בהם מוצגים פרמטרים שונים של אובייקטים/פקדים)

סרגל כלים (עם כפתורים עבור כל סוג של כלי עריכה)

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

פאנל אובייקטים וסרגל זמן (מכיל תת-פאנל בו מנהלים אובייקטים עפ"י שכבות ותת-פאנל שבו ממוקם סרגל זמן עבור האנימציות)

 

Expression Design

שם לא רשמי: "Acrylic".

עורך מסוג WYSIWYG, נועד לעיצוב איורים גראפיים וקטוריים וראסטריים. גם עורך זה נבנה ב- WPF.

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

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

תצלום מסך:
design_panels

העורך מורכב משלשה אזורי עבודה עיקריים:

משטח עבודה (אזור מרכזי שבו בונים ומעצבים אובייקטים גראפיים)

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

סרגל כלים (עם כפתורים עבור כל סוג של כלי עריכה)

 

Expression Media

כלי לניהול אוספים של מדיות במחשב אישי (ניתן להתקנה במערכות הפעלה MS Windows ו- Mac OS). מאפשר איסוף וקיטלוג אוטומטי של קבצי מדיה במחשב האישי. מספק ממשק נוח עם יכולות של "גרור ושחרר" ותומך ביותר ממאה פורמטים של קבצים. מנהל מדיה מאפשר ליצור קטלוג אינטרנטי של אוספים, עריכה של מספר גדול של פורמטים (ישנה אפשרות לבצע פעולות Batch אוטומטיות על מספר גדול של קבצים בו-זמנית). מצוייד במנוע חיפוש מתקדם, עורך תמונות חזק ומנהל גרסאות עבור קבצים. אפשרות נוספת היא בניה של מצגות על סמך הקבצים הקיימים, מצגות אלה ניתן להמיר לכל פורמט וידאו שנתמך במנהל מדיה.
 

< XAML >

(ראשי תיבות של Extensible Application Markup Language) – מבטאים "zammel", הוא תקן לייצוג נתונים בסביבת WPF. שימוש ב־XAML מקל על החלפת נתונים בין מערכות שונות שפועלות על גבי תשתיות של WPF. תקן ה-XAML לא מגדיר איזה מידע יוצג אלא מגדיר כיצד לייצג מידע באופן כללי. תקן XAML שייך למשפחת שפת התגיות (markup language), ומבוסס על תקן משנת 1986 בשם SGML.

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

אלמנטים של XAML יכולים להיות ממופים באופן אוטומטי ל- CLR – Common Language Runtime עבור מופעים של אובייקטים שאותם הוא יכול להגדיר בזמן הפיתוח ובזמן הריצה, זה מקל על כלי עריכה שמציגים שינויים במאפייני הפקדים באופן מיידי. בשימוש תקני, קבצי XAML יכולים להיות מיוצרים ע"י עורכים של UI וע"י סביבות פיתוח כמו MS Visual Studio 2005/2008. בחבילה של WPF מסופק עורך XAML בסיסי אשר מאפשר כתיבה של XAML והצגה של תוצאות הקוד במקביל.

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

כאשר XAML נמצא בשימוש ב- WPF, הוא משמש לתיאור ממשק גראפי עשיר שדומה ל- Adobe Flash, XUL, Glade-XML ו-UIML – אלה דוגמאות של טכנולוגיות המשתמשות בפורמט של XML לתיאור רכיבים הגראפיים. רכיב חבילת WPF מאפשר הגדרה הצהרתית בתוך קבצי XAML עבור אובייקטים של 2D ו- 3D ובנוסף אנימציות, סיבובים ועוד מגוון אפקטים.

ברכיב דוט-נט 3.0 נוסף נעשה שימוש ב-XAML: WF – Windows Workflow Foundation, XAML משמש לתיאור לוגיקה בתרשימי זרימה, כמו תיאור של תהליכי ארוכים או כללים במערכות שונות.

כל מה שנוצר ב-XAML יכול להיות מיושם ומיוצר בשפות יותר מסורתיות כמו C# או VB.Net ואחרות. בכל מקרה, באספקט טכנולוגי ועקב המורכבות של תהליכי פיתוח עדיף להשתמש ב-XAML, מכוון שזהו למעשה XML פשוט.

דוגמא לקוד שכתוב ב-XAML:

<Page xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
x:Class="MyNamespace.MyPageCode">
             <Button Click="ClickHandler">Click Me!</Button>
</Page>

אותו קוד ב- #C:

namespace MyNamespace
{
      public partial class MyPageCode
      {
            private void ClickHandler(object sender, RoutedEventArgs e)
            {
                Button b = e.Source as Button;
                b.Background = Brushes.Red;
            }
      }
}

xaml_example

 

לסיכום, XAML:

• שפה נוחה – ככלי פיתוח, תכנות הצהרתי כמו ב-XML

• קוד תוכנה ותוכן מופרדים (מודל השכבות של WPF)

• יכול להיות כחלק של יישום שולחני עצמאי או כאפליקצית Web

 


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

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

3 comments

  1. תמר29 במאי 2008 ב 13:35

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

    Reply
  2. Maxim2 ביוני 2008 ב 11:10

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

    Reply
  3. Gila Shalit23 בדצמבר 2008 ב 16:56

    מחפשת מתכנת XAML לפרוייקט מעניין.
    מכירים?

    צרו קשר- gila.s@mosttechnologies.com

    תודה,
    גילה שליט

    Reply