UI – פוסט 7: מבוא ל- WPF – Windows Presentation Foundation

19 בינואר 2008

בהמשך לפוסט הקודם שנתן סקירה כללית לדוט-נט 3.0, אני מעלה פוסט על WPF – Windows Presentation Foundation:






wpf


Windows Presentation Foundation – WPF, שם לא רשמי – Avalon – הנה תת חבילה של .Net Framework 3.0 (שם לא רשמי: WinFX). תת חבילה זו מובנית במערכת הפעלה חדשה של מיקרוסופט בשם "Vista"; בנוסף יכולה להיות מותקנת כרכיב שדרוג במערכות הפעלה Windows XP/2003. תת-חבילה מספקת מודל פיתוח עקבי לאפליקציות חלונאיות ואינטרנטיות; מודל זה מהווה הפרדה ברורה בין שכבת ממשק משתמש (UI) ושכבה עסקית/מידע (Business Logic). אפליקציות שמפותחות ב-WPF יכולות "לרוץ" בסביבה חלונאית (שולחן עבודה) או בסביבה אינטרנטית (כאפליקציה בתוך אתר WEB). חבילה זו מספקת מגוון אפשרויות עיצוב של פקדים ואלמנטים גראפיים (עם/ללא אפקטים ואנימציות) עבור ממשק המשתמש. ממשק משתמש יכול להיות מוצג הן ב-2D והן ב-3D; בנוסף חבילה מספקת יכולות עיצוב של מסמכים אינטראקטיביים, יכולות טיפוגראפיות, גראפיקה וקטורית וסיביות (ראסטר), אנימציה, מאגדי נתונים, אודיו ווידאו.


ניתן לפתח ממקשים ע"י שימוש בשפת תכנות XAML; XAML למעשה מהווה שפת תווך בין שכבות שונות של תוכנה. כל האובייקטים של WPF (פקדים ועוד) יכולים להיות בנויים ב-XAML (ראו פירוט בהמשך).


מספר דוגמאות לאפליקציות שנבנו ב-WPF:


אפליקציות מסוג Standalone


Yahoo! Messenger for Windows Vista
Microsoft Expression Blend
Electric Rain Standout
Roxio Central
The Print Shop Zoom


אפליקציות מסוג Browser Application


Vector Studio
Actipro Wizard
DominoKen
WeatherNews
Warner


slogan


silverlight


MS Silverlight – תת-חבילה של WPF עבור אפליקציות אינטרנט. גם Silverlight מבוסס XAML בשילוב עם Java Script. תת חבילה זו בדומה ל-Flash של Adobe מאפשרת לפתח אפליקציות בעלות תוכן אינטראקטיבי ועם אפקטים מרהיבים. נותנת אפשרות לפתח אפליקציות לאינטרנט באותו קוד וטכניקות פיתוח המקובלות בפיתוח אפליקציות חלונאיות. חבילה אינה תומכת כעת ב-3D, אבל נותנת תמיכה לפיתוח 2D מבוססת גראפיקה ווקטורית עם שימוש במאיצים של חומרה (לעומתה מנוע פלאש של Adobe בעל חיסרון בכך שלא משתמש בחומרה להאצת הרינדור של גראפיקה, Silverlight vs. Flash – אולי אעשה על כך פוסט משלי).


 



מספר דוגמאות לאפליקציות/אתרים שנבנו ב-Silverlight:


Halo III 
Let There Be Light
intersoftpt.com 
Windows Vista Simulator 
mediapreview.tv




תרשים המתאר חלוקה לוגית של WPF בשכבות לוגיות לפי חלוקה "קוד מנוהל" ו"קוד לא מנוהל" (דוגמא במע' "ויסטה"):


managed_vs_unmanaged


WPF כוללת את השירותים הבאים:


שירותי גראפיקה

כל הגראפיקה (כולל פקדים של Windows Forms) "תצויר" ע"י Direct3D (כפי שהזכרתי בפוסטים קודמים, זוהי תת חבילה של MS DirectX האחראית לגראפיקה תלת/דו-ממדית).


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


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


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


פריסה והטמעה


WPF – נועד לא רק עבור בניית ממשקים תקניים ש"רצים" רק על שולחן העבודה (Desktop Standalone Applications), מודל הפריסה של החבילה מציע שתי גרסאות: Standalone וגרסת אינטרנט XAML Browser Applications (XBAP). כאשר המודל התכנותי הוא זהה עבור שתיהן.


– אפליקציות Standalone מותקנות על מחשב לקוח ע"י שימוש בתוכנות מסוג Click-Once או Windows Installer MSI. אפליקציות אלו בד"כ מסוג Full Trust ז"א יש להן גישה חופשית לכל משאבי המחשב.


– XAML Browser Applications – XBAP הנן תוכנות שמאוחסנות בשרתי אינטרנט ומוצגות בתוך אתרי האינטרנט ע"י הדפדפן. אפליקציות אלה הנן מסוג Partial Trust (שם נוסף: "ארגז חול"). ז"א אינן מקבלות גישה חופשית לכל משאבי המחשב והנן כפופות לכללים מקובלים של אפליקציות אינטרנט (בדומה לפלאש); כל ההגבלות נועדו להגן על מחשב המשתמש שבחר להשתמש בתוכנות ש"רצות" כאפליקציות און-ליין באינטרנט. תוכנות XBAP מופעלות בתהליך (Process) נפרד מהדפדפן.



פעולה הדדית (שילוב טכנולוגיות)


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


– פעולה הדדית של WPF עם Win32 ועם יתר טכנולוגיות אפשרית דרך אובייקטים של Element-Host ו-Windows-Forms-Host.



שירותי מדיה


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


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


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


– ישנה תמיכה בפורמטים שונים של מדיה כמו WMV, MPEG וקבצי AVI בהתאם ל-Codec-ים המותקנים במערכת ההפעלה.


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


קישורי מידע (איגוד מידע – Data Binding)


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


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


– לאיגוד מידע יש השפעה על אופן התצוגה שלו, WPF מספק תבניות מידע לבקרת אופן התצוגה.


(בפוסטים עתידיים אגע ב-Data binding mechanism)



ממשק משתמש


– WPF מכיל סט תקני של פקדים שניתן היה לפגוש בחבילות פיתוח קודמות כמו .Net 1.0-2.0, ההבדל הוא שפקדים המגיעים עם חבילת WPF הנם וקטוריים לעומת הדור הקודם, כפי שצוין מקודם לאלה יש יתרון איכותי על פני פקדים ש"מצוירים" בטכניקה של ראסטר.


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


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



עיבוד תמונה


– רכיב עיבוד תמונה (Windows Imaging Component – WIC) של WPF מאפשר למפתחים לייצר Codec-ים עבור פורמטים חדשים של תמונות.



אפקטים


– WPF מכיל סט בסיסי של אפקטים עבור תמונות סיביות (Bitmap Files), אפקטים אלה מרונדרים ע"י התוכנה.


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



טקסט


WPF מכיל מספר תכונות עשירות מתחום הטיפוגראפיה (תצוגת טקסט על גבי המסך), אפשרויות אלה לא היו זמינות ב-GDI. זהו ממשק פיתוח ראשון (במערכת הפעלה של Windows) שמסוגל לעבוד בצורה מקצועית עם גופנים מסוג Open-Type, True-Type ו-Compact-Open-Type (Compact Font Format – CFF).


ישנה תמיכה עבור תכונות טיפוגראפיות הבאות:


– סגנון תצוגה "תבניות" (Ligatures)


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


– סגנון תצוגה "הבזק", תצוגת טקסט (בד"כ כותרות) עם אפקט של הבזק (Swash variants)


– סגנון תצוגה "מקטעים"


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


– סגנון תצוגה "אותיות קטנות"


– סגנון תצוגה "יישור משתנה", ניתן לקבוע שכל שורה תקבל יישור משתנה בהתאם להגדרה כלשהי


– סגנון תצוגה "אבן יקרה", הטקסט יוצג עם אפקט של פאות אבן יקרה (Ruby characters)


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


– סגנון תצוגה "שורות בסיס", השורה הדמיונית שעליה מסודרות האותיות (בלי חלקיהן היורדים של האותיות g, y, p, q, j)


– סגנון תצוגה "עיצוב מתחלף", בשורה אחת ניתן לעצב טקסט בצורות שונות: משפחות גופנים שונות, גדלי גופנים שונים ועוד


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


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


כפי שכתבתי מקודם, WPF משתמש בטכנולוגיית רינדור Clear-Type של מיקרוסופט. טכנולוגיה זו מבוססת על טכניקת רינדור פונטים sub-pixel rendering (שעליה יפורט בפוסט נפרד). WPF עושה שימוש ביכולות מובנות של כרטיס גראפי (שימוש במאיץ גראפי לשם החלקת פונטים, אחרת CPU היה צריך להיות "מועמס" בעבודה זו), WPF נותן תמיכה מובנית ברזולוציות מסך שונות ו"מתחשב" באיכות התצוגה שמוגדרת במחשב המשתמש. חסרון: לא ניתן לנטרל תכונה של Clear-Type, עפ"י סקרים אחרונים, כמחצית משתמשים היו מעדיפים לנטרל תכונה זו ולקבל תצוגה ללא החלקת הפונטים.



קלט ממקור חילופי


WPF תומך בהתקן קלט מסוג "דיו דיגיטאלי".



נגישות


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


Microsoft UI Automation (UIA) – API חדש של מיקרוסופט שנכלל בחבילה .Net Framework 3.0, API זה מאשר חשיפה של פקדי הממשק לבדיקות אוטומציה וטכנולוגיות קריאה כמו Assisting Technology, תוכנות עזר כמו יישומים שמקריאים מהמסך (בשימוש בעיקר ע"י אנשים עיוורים).


תרשים המתאר מבנה לוגי של WPF לפי השכבות :

structure


מבנה לוגי שכבתי של WPF מעל ה- Kernel של מערכת הפעלה:


wpf




XAML


– Extensible Application Markup Language שפת תכנות מבוסס XML מבית מיקרוסופט. עליה יפורט בפוסט נפרד… 
 



 


כלי פיתוח








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


– תוסף (Add-In) שניתן להתקנה בתוך סביבת פיתוח MS Visual Studio 2005, מאפשר לפתח ממשקים עם פקדים של WPF וגישה לספריות שונות של הבילה, כמו כן נותן תמיכה לפיתוח בשפת XAML. בסביבת פיתוח MS Visual Studio 2008 אין צורך בתוספת זו, WPF הנו חלק אינטגראלי מהסביבה ומכיל עורכים מובנים (עורך XAML, עורך Visual forms designer ועוד).


Microsoft Expression Blend – כלי פיתוח לממשקי משתמש ב-WPF. מספק סביבה נוחה לבניית טפסים עם תמיכה בגראפיקת 2D ו-3D. ישנה אפשרות לכתוב קוד תוכנה בשפת XAML וגם לייצא טפסים ופקדים מעוצבים כקבצים של XAML.


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


Electric Rain ZAM 3D, תוכנת צד שלישי המאפשרת לעצב אובייקטים (דגמים) תלת-ממדיים ולייצא אותם כקבצים של XAML בדומה ל-MS Expression Design.

tools


 


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


Technorati Tags: ,,,

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>

*

5 comments

  1. Justin-Josef Angel [MVP]19 בינואר 2008 ב 13:29

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

    אגב, כל דוגמאות ה-
    Silverlight
    שלך הן למעשה
    XBAP.
    אם אתה רוצה דוגמאות ל-
    Silverlight
    אתה מוזמן לבדוק את ה-
    Silverligh Showcase
    באתר הרשמי.

    Reply
  2. Maxim19 בינואר 2008 ב 13:41

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

    Reply
  3. Felix19 בינואר 2008 ב 15:54

    מקסים –
    אחלה פוסט.

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

    פליקס.

    Reply
  4. Maxim19 בינואר 2008 ב 21:01

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

    Reply
  5. Avi Pinto9 בפברואר 2008 ב 17:37

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

    Reply