XAML

XAML (קיצור של Extensible Application Markup Language; מבוטאת "זאמל") היא שפת תגיות דקלרטיבית מבוססת XML שפותחה ב-2006 על ידי מיקרוסופט לייצוג והגדרה של ערכים ועצמים היררכיים. השפה זמינה תחת OSP (נוסח רישוי חדש שעוטף מספר טכנולוגיות מבית החברה). ראשי התיבות המקוריים היו Extensible Avalon Markup Language כאשר Avalon מתייחס לשם הקוד המקורי של WPF, בו נעשה שימוש מורחב בשפת התגיות כחלק מתשתית דוט נט החל מגרסה 3. כמו כן השפה היא חלק אינטגרלי מטכנולוגיות אחרות מבית מיקרוסופט כמו סילברלייט, Windows Workflow וכן Windows Runtime XAML Framework. בסביבת הפיתוח WPF השפה משמשת לייצוג אלמנטים ויזואליים של ממשק המשתמש, ביניהם הרחבה של תגיות לתמיכה בקישור לנתונים, אירועים והנפשה. באופן דומה משמשת שפה זו בסילברלייט ובכך ניתן לשלבה ביישומי מובייל ו-Windows Phone.

האלמנטים בשפת XAML ממופים ישירות לאובייקטים המתאימים בדוט נט, ואילו התכונות (Attributes) ממופים למאפייניהם. הרחבות השפה (Extensions) כוללות סגנונות, "התנהגויות", משאבים, תבניות, קישור לנתונים, אירועים מנותבים, אנימציה וכדומה. כמו כן מאפשרת השפה קישור לקוד התוכנה הפועל מאחורי הקלעים (מה שמכונה "Code behind"). מיזוג מאוחר של שפת התגיות עם קוד התוכנה מאפשר שינויים בממשק מבלי לגרום לשינוי בקוד. ניתן לכתוב בשפה זו באמצעות ויז'ואל סטודיו ו-Expresion Blend או בתוכנת Vector Architect. אפשר לכתוב תגיות XAML גם באמצעות כתבן או פנקס רשימות. עורך ויזואלי התומך בגרירה פוטר מהצורך לכתוב תגיות באופן ידני, במקום זאת כאשר גוררים אלמנט לתוך החלון, העורך מעדכן את קובץ ה-XAML אוטומטית.

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

קיימות כמה תתי מחלקות של שפה זו:

• WPF XAML: מכיל את המידע הדרוש לייצוג תכולת חלון יישום.
• XPS XAML: מגדיר ייצוג XML למסמכים מעוצבים בדומה ל-PDF.
• Silverlight XAML: מיועד לשימוש בדפדפנים כתוסף חוצה פלטפורמות.
• WF XAML: תשתית עבודה בחלונות (Windows Workflow).

ל-XAML כמה יתרונות בולטים:

1. שפת התגיות מאפשרת כתיבת קוד מצומצם. בכל תגית ניתן ליצור אלמנט ולקבוע ערכים. כתיבה של ה-UI בקובץ בשפה עילית (דוגמת C#‎) יכול להכפיל ואף לשלש את כמות הקוד הדרוש על מנת להציג את אותם הדברים.
2. השפה כוללת הרחבות רבות להעשרת מראה החלון והתנהגותו.
3. השפה פשוטה להבנה וללמידה (לעומת שפות תכנות) ועל כן מעצבי אפליקציות או אתרים יכולים להיעזר בה.
4. תגיות השפה מתאימות לתקן XML שהוא ידוע ומוכר למעצבי אתרים ומתחזקי אתרים.
5. ישנה הפרדה ברורה בין האלמנטים המוצגים בחלון לבין הלוגיקה של התוכנית שיכולה להיות אף בקובץ אחר ולמעצב אין חובה שתהיה לו גישה אליו.

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

דוגמת קוד

דוגמה של חלון WPF המכיל שלושה לחצנים בצבעים שונים, הכתוב כולו בשפת C#‎ ללא שימוש ב-XAML:

public MainWindow()
 {
 InitializeComponent();
 this.Height = 600;
 this.Width = 800;
 Button B1 = new Button();
 B1.Background = Brushes.Red;
 B1.Height = 200;
 Button B2 = new Button();
 B2.Background = Brushes.Yellow;
 B2.Height = 200;
 Button B3 = new Button();
 B3.Background = Brushes.Green;
 B3.Height = 200;
 StackPanel SP = new StackPanel();
 SP.Orientation = Orientation.Vertical;
 SP.Children.Add(B1);
 SP.Children.Add(B2);
 SP.Children.Add(B3);
 this.Content = SP;
 }

דוגמה של קטע קוד בשפת XAML שיוצר חלון זהה:

<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="MainWindow" Height="600" Width="800">
 <StackPanel Orientation="Vertical">
 <Button Height="200" Background="Red"></Button>
 <Button Height="200" Background="Yellow"></Button>
 <Button Height="200" Background="Green"></Button>
 </StackPanel>
</Window>

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

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

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

• Grid - מכולת סידור החשובה ביותר. ביכולתה לחלק את שטחה לתאים לוגיים כמו טבלה המכילה עמודות או שורות ולקבוע את מיקומם היחסי של האלמנטים המוכלים בתוכה בהתאם.
• Canvas - פקד מכולה בעל קואורדינטות X ו-Y שלפיהם ניתן לסדר פקדים על המסך. דומה לחלון Form הישן.
• StackPanel - מחסנית שמסדרת באופן דינאמי את האלמנטים המוכלים בה אחד מתחת לשני או מימין לשמאל.
• UniformGrid - פקד שמסדר את האלמנטים שבו, כך שלכל אחד מהם יהיה את אותו גובה ואותו רוחב.

לא ניתן לקבוע לתוכן של חלון 2 מופעים של כל אחד מהנ"ל, אבל הם יכולים להיות מוכלים אחד בתוך השני.

מנגנון קישור לנתונים

מאפיין חשוב בשפת ה-XAML הוא מנגנון Data binding המאפשר לבצע צימוד בין שדה של פקד לבין שדה של אובייקט אחר, או צימוד בין מבנה נתונים כלשהו בזיכרון התוכנית ואף מבני נתונים עצמיים למאפיין או תכונה של פקד כלשהו כמו צבע רקע או תוכן טקסטואלי. ניתן לקשר ערך של אלמנט אחד לאלמנטים אחרים ובלבד שיכילו מאפיינים ובנאי ברירת מחדל ללא ארגומנטים (פרמטרים). אם למשל קיימת מחלקה Person בעלת שני שדות FirstName ו-LastName, ניתן ליצור בחלון התוכנית שני פקדים מסוג TextBlock (פקד טקסטואלי) ולקשר את שדה הטקסט שלהם לשדות של האובייקט מסוג Person. אם ישתנו שדות אלו בזיכרון השינוי ישתקף מיידית בחלון ולהפך. הקוד הבא ממחיש את התהליך. נתונה המחלקה Person הכוללת שני מאפיינים FirstName ו-LastName:

public class Person
{
 public string FirstName {get; set;}
 public string LastName {get; set;}
}

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

public MainWindow()
{
 InitializeComponent();
 Person Israel = new Person();
 this.DataContext = Israel;
}

כעת נותר לבצע את הקישור עצמו ב-XAML, שדות האובייקט Israel מקושרים לתיבות הטקסט כדלהלן:

 <TextBlock Text="{Binding FirstName}" />
 <TextBlock Text="{Binding LastName}" />

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

Text="{Binding FistName}"

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

הנפשה

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

<Button Name="button" Height="30" Width="200">
 <Button.Triggers>
 <EventTrigger RoutedEvent="Button.Click">
 <BeginStoryboard>
 <Storyboard> 
 <DoubleAnimation Storyboard.TargetName="button"
 Storyboard.TargetProperty="Width" From="200" To="300" Duration="0:0:3" />
 </Storyboard>
 </BeginStoryboard>
 </EventTrigger>
 </Button.Triggers>
</Button>

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