בנייה קלה ומהירה של אפליקצייה ל-Windows Phone [מדריך]

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

ארז פדרו הוא מייסד, ארכיטקט בכיר ומומחה בתחומי ה-User Experience ב-CodeValue.

תמונה: יח"צ, מיקרוסופט

ישנן מספר אפשרויות לבניית אב-טיפוס לממשק משתמש, למשל ציור ידני של נייר ועפרון, או מצגת PowerPoint שבה ניתן לתאר בקלות ובמהירות את המסכים והמעברים ביניהם. אנחנו בחרנו להדגים בניית אב-טיפוס ב-Sketchflow, שהוא רכיב של Microsoft Expression Blend 4.0, בגלל הסיבות הבאות:

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

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

יצירת הפרויקט

ניגש ישר לעבודה, נפתח את האפליקציה ונבחר יצירת פרויקט חדש, נזכור לוודא שבחרנו:

  1. Windows Phone – הפלטפורמה
  2. SketchFlow – הכלי לבניית אבי טיפוס (כלול כאמור רק בגירסת ה-וֹUltimate)
  3. מתן שם לאפליקציה

הערה: אני בחרתי לפתח בשפת C#, אולם, מאחר ולא אכנס לקוד אז אין זה משנה.

 

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

זה הזמן להגלות את כלי העבודה הראשון שלנו ב-Sketchflow – מפת הניווט (Sketchflow Map):

זוהי דיאגראמה של מסכי הטיפוס והקשרים ביניהם, בדוגמה שלנו יש את שלושת מסכי מערכת ההפעלה (בסגול) ומסך הבית של האפליקציה שלנו שנקרא “Screen 1”.

לחיצה כפולה על אחד מהמלבנים תיקח אותנו אליו – לדוגמה חלון ה-Home:

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

החלון נראה עם קווים לא ישרים ונראה כאילו צוייר ביד חופשית, זו אינה טעות אלא מראה בעל סגנון של “סקיצה ראשונית”. המטרה היא למנוע התמקדות בפרטי ה “Look” בשלב מוקדם זה של העבודה. מראה זה מושג ע”י שימוש ב-Styles בעלי סיומת “Sketch” המוגדרים מראש בבלנד.

הערה: אם נסתכל ב-XAML של החלון נוכל לראות שהוא מכיל כבר מספר מרכיבים:

  1. <mockups:WindowsPhoneChrome.HomeButton> המדמה את כפתור ה-Home של מערכת ההפעלה.
  2. <mockups:WindowsPhoneChrome.SearchButton> המדמה את כפתור ה-Search של מערכת ההפעלה.
  3. מספר חלקים של <VisualStateManager> המדמים מצבים שונים של האמולטור כמו מצב Portrait/ Landscape.

בשלב זה נתעלם מקטעי ה-XAML הללו.

עריכת מבנה חלון האפליקציה

נעבור לחלון Screen 1 בכדי לבנות אותו:

במסגרת החלונית Objects and Timeline נראה שהחלון מגיע עם המסגרת של כפתורי מערכת ההפעלה ומלבן ריק שבו נצטרך למלא תוכן. השורה המסומנת (LayoutRoot) היא מסוג גריד.

נחלק אותה ל-3 שורות:

  • כותרת האפליקציה
  • כותרת “Contacts”
  • רשימת אנשי הקשר

מבצעים זאת ע”י click בעמודה השמאלית (צבועה בתכלת) כמו בצילום המסך:

אם נסתכל ב-XAML שנוצר (נבחר את התצוגה המשולבת Design-XAML  – מסומנת בריבוע אדום בתמונה הבאה) נוכל לראות שבלנד הוסיף הגדרות של Rows בתוך LayoutRoot:

 

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

כעת נבחר רכיב TextBlock ונוסיף את רכיבי הכותרות, אחת לכותרת הראשית ואחת לכותרת אנשי הקשר. כאשר “מציירים” את הרכיב בגריד, בלנד ידע להבין באיזה שורות ועמודות הרכיב נמצא ופרטים אלה מופיעים ב-XAML (הכותרת השנייה מקבלת “Grid.Row=1”. כאשר הטקסט נבחר קל ומהר לערוך אותו.

עריכת מאפייני הטקסט

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

בשלב זה האפליקציה צריכה להראות בערך כמו בתמונת המסך הבאה:

נריץ ע”י לחיצה על F5 או Project>RunProject בתפריט. המערכת תפתח אלא אם לא מותקן במחשב שלכם ה-Plug-in של Silverlight ואז תקבלו את ההודעה הבאה:

ה-browser  שלכם יציג את אפליקציית ה-Sketchflow Player ובתוכה אפליקציית הטפלון שבנינו תראה כך:

  • מצד שמאל יוצג אזור הניווט שיאפשר לנו לנווט בין חלונות שונים לפי הגדרת החיצים ב-`sketchflow map`
  • משמאל למטה מוצג אזור בו ניתן להוסיף משוב על התוכן למשל בניסויי usability.
  • במרכז המסך יוצג החלון הראשי עם הגריד ושתי שורות הכותרת שבו.

הוספת המרכיבים החסרים בחלון

נחזור לעריכת החלון ונחלק את השורה התחתונה לשלוש שורות:

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

בסוף התהליך נקבל את המצב הבא:

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

בכדי להתגבר על הקושי הזה, נשתמש ביכולת של בלנד לייצר מידע להדגמה (Sample Data).

 

יצירת מידע להדגמה (Sample Data)

לבלנד יש לשונית של Data ובה כלים ויצירה ועריכת מידע להדגמה. הכלי מאפשר ליצור מידע פיקטיבי ע”פ שלושה בסיסים:

  • ידנית – על ידי הגדרה פרטנית של השדות של כל פריט
  • על בסיס סכימה המגיעה מקובץ XML
  • על בסיס מחלקה (Class)

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

נלחץ על כפתור יצירת המידע בלשונית ה-Data ונבחר ‘New Sample Data’

אז נמלא את:

  1. שם המאגר MyContactsList
  2. ניצור אותו בפרויקט – כך שהמידע יהיה זמין גם בדפים אחרים
  3. נאפשר זמינות של המידע גם בזמן ריצה – המצב ההפוך רצוי כאשר יודעים שיש מקור מידע אחר עבור זמן הריצה.

לאחר היצירה המאגר מופיע בלשונית ה-Data

בשלב זה נוכל:

  • לשנות את שם האוסף ל Contacts
  •  כדי לשנות את המאפיין הראשון
    • את שמו ל-Name
    • את הסוג ל-String
    • ואת צורתו ל-Name, כך שהדוגמאות יהיו שמות של ממש.

 

  •  כדי לשנות את המאפיין השני נשנה את הדברים הבאים:
    • את שמו ל-PhoneNumber
    • את הסוג ל-String
    • ואת צורתו ל-PhoneNumber, כך שהדוגמאות יהיו ממש מספרי טלפון.

 

עכשיו, בכדי להוסיף תמונות עבור מאגר אנשי הקשר שלנו, נקבץ מספר תמונות בתיקייה במחשב.כדי להוסיף המאפיין השלישי נלחץ על כפתור ה-‘+’ בשורת הרשימה contacts, ונשנה כך:

  • את שמו ל-Image
  • את הסוג ל-Image
  • על מנת לקשר את המאגר למחיצה המכילה את התמונות שאספנו נלחץ על Browse ונבחר את התיקייה המכילה את התמונות.

 

כעת, נבחן המאגר שיצרנו ונוודא שהוא תקין, לצורך כך נלחץ על כפתור Edit Sample Values. לחיצה זו תפתח טבלה המכילה את הנתונים שהכלי יצר עבורנו (עם התמונות ששמנו בתיקייה). אני לדוגמא הורדתי אייקונים חינמיים מהאתר: http://www.iconspedia.com.

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

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

קישור המאגר לרשימה

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

התוצאה היא שכאשר נגיע עם הסמן מעל ל הListBox, אז קו המתאר שלה יוצג בכחול, ועל גביה יוצג הטקסט “Data bind [ListBox].itemsSource to Contacts” כלומר מקור המידע של ה הListBox  יקושר ע”י DataBinding לרשימה בשם Contacts. מאחר וזה בדיוק מה שרצינו אז נבצע drop על גבי הרשימה.

 

 

 

והתוצאה, הפריטים שיצרנו אכן מוצגים ברשימה. בנוסף לכך ניתן לראות שהרשימה בלשונית ה-Data, מסומנת במסגרת צהובה (כמקובל במקרים של DataBinding).

 

 

עריכת אופן התצוגה של פריטי הרשימה

כעת נוכל לבחור פריט מרשימה ולערוך את אופן התצוגה שלו עם משוב (feedback) ויזואלי מלא. כזכור, ב-WPF וב-Silverlight מוגדר אופן התצוגה של פריט בעזרת ‘DataTemplate’. עכשיו כדי לערוך אותה נבחר מתפריט העכבר הימני את:

Edit Additional Templates> Edit Generated Items (ItemTemplate)> EditCurrent:

ה-DataTemplate איתו אנחנו מתחילים הוא:

<DataTemplate x:Key=”ContactsItemTemplate”>

<StackPanel>

<Image Source=”{Binding Image}”

HorizontalAlignment=”Left” Height=”64″ Width=”64″/>

<TextBlock Text=”{Binding Name}”

Style=”{StaticResource BasicTextBlock-Sketch}”/>

<TextBlock Text=”{Binding PhoneNumber}”

Style=”{StaticResource BasicTextBlock-Sketch}”/>

</StackPanel>

</DataTemplate>

מאחר ואנחנו רוצים להוסיף יכולת לבחור איש קשר, אז נוסיף CheckBox

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

נריץ את האפליקציה ונראה את התוצאה:

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

הוספת חלון הודעה

בכדי להוסיף חלון הודעה נלחץ על הכפתור השמאלי המופיע מתחת ל-‘Screen 1’ במצב MouseOver

כפתור זה מוסיף חלון מקושר ‘Create a Connected Screen’:

נגרור ונוסיף חלון הודעה ונשנה את שמו ל-Done, ונקבל את התוצאה הבאה:

כעת נבצע לחיצה כפולה על “Done” על מנת לפתוח את החלון.

בדומה לבניית החלון הראשי, נוסיף גם כאן שורה עבור כפתורי ההפעלה ובשורה העליונה נוסיף TextBlock המכיל את המשפט ‘Your message was Sent to the selected contacts’. לכפתור השמאלי נוסיף תווית “Another” ולימני נוסיף תווית “Exit”. התוצאה תהיה כזו:

דימוי הניווט בין חלונות

נחזור לחלון הראשי, נבחר את הכפתור הימני, ‘Send’, ונוסיף לו פונקציית NavigateTo לחלון Done.

הדרך לבצע זאת היא בתפריט העכבר הימני. נבחר: NavigateTo>Done – וזהו!

נבחן מה נוסף ל-XAML ונראה שנוסף קטע של:

<i:Interaction.Triggers>

<i:EventTrigger EventName=”Click”>

<pi:NavigateToScreenAction TargetScreen=”SMSAllScreens.Done”/>

</i:EventTrigger>

</i:Interaction.Triggers>

 

קטע זה מפעיל את ההתנהגות של ניווט בין מסכים ‘NavigateTo Screen Action’. ועכשיו, בנוסף למה שבנינו בעצמנו, השתמשנו ביכולות האינטראקטיביות הבנויות בכלי, כמו למשל, יכולת המעבר בין חלונות המושגת בעזרת התנהגויות (Behaviors). נריץ את האפליקציה, ונראה שלחיצה על כפתור Send מעבירה אותנו לחלון Done ומציגה את ההודעה על שליחה מוצלחת של ההודעה.

סיכום

  • רצינו לתכנן ממשק משתמש לאפליקציה של שליחת SMS למספר רב של אנשי קשר.
  • בחרנו להשתמש בכלי הדיגום Sketchflow שכלול בגרסת Ultimate של Microsoft Expression Blend.
  • בנינו בצורה קלה ומהירה את האפליקציה, ויכולנו להריץ את אב הטיפוס גם ללא כתיבת קוד.

בצורה זו, שמרנו כל הזמן על עיצוב שאותו ניתן לממש ‘Windows Phone Silverlight’, כיוון שהשתמשנו למעשה בכלי הפיתוח עצמו, ויכולנו לראות את התוצאה עם מידע שיצרנו לבד בעזרת הכלי.

בהשוואה לשימוש בשתי האפשרויות אותן שקלנו:

  1. ציור ידני
  2.  ‘PowerPoint Storyboarding VS11’

הפוסט בחסות Windows Phone


Windows Phone מביא חווית משתמש ייחודית בחיבור לרשתות חברתיות, תחביבים, משפחה ועבודה ושם את האנשים במרכז. גרסת Windows Phone 7.5 (מנגו) מוסיפה כ – 500 יכולות חדשות למשתמשים ועם יותר מ – 1500 APIs חדשים למפתחים.

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

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

כתב אורח

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

הגב

2 Comments on "בנייה קלה ומהירה של אפליקצייה ל-Windows Phone [מדריך]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
אבי
Guest

כל הכבוד ותודה.
תענוג לראות מפתח שעובד עם סקצ’פלואו… אכן משמש את אנשי הUX שבנינו לבניית אבות טיפוס לאפליקציות WPF + SL בשביל להקל על האינטרקציה שביננו למפתחים.

אברהם
Guest

קצת קשה לי להאמין שיצא משזה משחק רציני לא?

wpDiscuz

תגיות לכתבה: