Universal Windows Apps – צעדים ראשונים

סגור באמצעות טופס זה תוכלו לספר ולהמליץ לחבריכם..
שם השולח:
כתובת דוא"ל של השולח:
שם המקבל:
שלח לכתובת דוא"ל:
הוסף הערה:
תבנית לבניית אפליקציות שמשתפות חלקים נרחבים מהקוד ובממשק המשתמש בין Windows 8.1 ל-Windows Phone 8.1. התבנית מתאפשרת בשל הרחבת תשתית הריצה Windows Runtime במערכת ההפעלה Windows Phone 8.1 שהיא קרובה הרבה יותר למה שקיים במערכת ההפעלה Windows 8.1 מאשר בעבר. העיקרון הוא מאוד פשוט, נכתבו את ליבת הקוד פעם אחת ונצרף אליה ממשק משתמש מתאים לכל אחת מהפלטפורמות השונות.



 
Universal Windows Apps – צעדים ראשונים
מאת: ארז קלר 
נובמבר 2014

הורדת דוגמת קוד: FirstUniversalApp

מה זה Universal Windows Apps?
תבנית לבניית אפליקציות שמשתפות חלקים נרחבים מהקוד ובממשק המשתמש ביןWindows 8.1  ל-Windows Phone 8.1.
התבנית מתאפשרת בשל הרחבת תשתית הריצהWindows Runtime  במערכת ההפעלה Windows Phone 8.1 שהיא קרובה הרבה יותר למה שקיים במערכת ההפעלהWindows 8.1  מאשר בעבר.
העיקרון הוא מאוד פשוט, נכתוב את ליבת הקוד פעם אחת ונצרף אליה ממשק משתמש מתאים לכל אחת מהפלטפורמות השונות.
זה לא code once, run everywhere" – Visual Studio" מייצר לנו שני קבצי הרצה שונים.
זה כנראה לעולם לא יהיה "code once, run everywhere" בכל מאת האחוזים משום שלמרות שאנו רוצים פונקציונאליות זהה בכל המכשירים שבהם אנחנו משתמשים, עדיין נדרש שממשק המשתמש יותאם למכשיר איתו אנחנו עובדים.
את הפונקציונאליות הזהה אנחנו משיגים באמצעות הליבה המשותפת אולם עדיין ניאלץ לבצע התאמות בממשק.
באמצעות התבנית Universal Windows Apps נבנה אפליקציות ל-Windows 8.1 ול-Windows Phone 8.1 בעת ובעונה אחת תוך כתיבת ליבה משותפת וממשק שיותאם לכל אחד מהמכשירים.
Universal Windows Apps

קצת סדר בפלטפורמות
WinRT (Windows Runtime) – סביבת ריצה המאפשרת פיתוח והרצה של אפליקציות (Windows Store apps) למערכת ההפעלה Windows 8 ול-Windows 8.1.
WinRT מיועד הן למחשבי PC והן לטאבלטים המריצים Windows 8 או Windows 8.1.
Windows Phone Runtime – גרסה מצומצמת של WinRT המיועדת למכשירים טלפון חכמים המריצים Windows Phone 8.1. על הגרסה המצומצמת התווספו יכולות נוספות הייחודיות ל-Windows Phone Runtime.
Windows Phone 8.1 - Windows 8.1

כלי הפיתוח
כלי הפיתוח המומלץ בעת כתיבת שורות אלו הוא Visual Studio Community Edition 2013.
 
Visual Studio Community 2013

ניתן להורידו מהכתובת הבאה:  

שלב ראשון - פרויקט Universal Windows App חדש
בחלון New Project תחת Visual C# ->Store Apps -> Universal Apps נבחר את התבנית Blank App(UniversalApp).
נקליד שם, נבחר מיקום ונלחץ OK על מנת לבנות את הפרויקט.
  New Universal Window Apps


מבנה הפרויקט.
Visual Studio יצר 3 פרויקטים:
  1. FirstUniversalApp.Windows(Windows 8.1)
  2. FirstUniversalApp.WindowsPhone(Windows Phone 8.1)
  3. FirstUniversalApp.Shared
הראשון הוא הפרויקט המותאם ל-Windows 8.1,
השני מותאם ל- Windows Phone 8.1,
בשלישי נכתוב את הקוד המשותף.
Solution Explorer


שלב שני – חלון משותף
החלון הראשי נקרא MainPage והוא מוגדר בנפרד בשתי האפליקציות.
תחילה נגדיר חלון ראשי משותף לשתי האפליקציות.
נגרור באמצעות העכבר את MainPage.xaml מאחד הפרויקטים העליונים (לא משנה מאיזה מהם) לפרויקט FirstUniversalApp.Shared.
ומכיוון שיכול להיות רק חלון ראשי אחד נמחק את הקבצים MainPage.XAML משני הפרויקטים האחרים.
בשלב זה ה- Solution Explorer אמור להיראות כך:
SolutionExplorer

שלב שלישי – הוספת קוד לחלון הראשי.
נלחץ לחיצה כפולה על הקובץ MainPage.xaml אשר נמצא בפרויקט FirstUniversalApp.xaml.
נמחק את התגית …</grid><grid> ובמקומה נכתוב את קוד ה- XAML הבא:


   1:  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
   2:     <TextBlock Name="txtDate" HorizontalAlignment="Center"></TextBlock>
   3:     <TextBlock Name="txtTime" HorizontalAlignment="Center"></TextBlock>
   4:     <Button Name="btnDateTime" Content="Get Time" Click="btnDateTime_Click" HorizontalAlignment="Center"></Button>
   5:  </StackPanel>

בקובץ MainPage.xaml.cs נוסיף קוד המטפל באירוע Click של הפקד btnTime:

   1:  private void btnDateTime_Click(object sender, RoutedEventArgs e)
   2:  {
   3:      CultureInfo he_il = new CultureInfo("he-IL");
   4:      txtDate.Text = DateTime.Now.ToString("d", he_il);
   5:      txtTime.Text = DateTime.Now.ToString("t", he_il);
   6:  }
תחילה ניעזר במחלקה CultureInfo (שורה 3) המוגדרת במרחב השמות System.Globalization מכיוון שנרצה להבטיח שהתאריך והשעה יוצגו בפורמט הישראלי המקובל (dd/mm//yy) ולא הפורמט האמריקאי (mm/dd/yy).
לאחר מכן נגדיר את התוכן של פקדי ה- TextBlock.
הפקד txtDate יציג את התאריך והפקד txtTime יציג את השעה בזמן החיצה על הפקד btnDateTime.

שלב רביעי – הרצה ובדיקה בשתי הפלטפורמות
את התוכנית שכתבנו נריץ ונבדוק על שתי הפלטפורמות,
תחילה נריץ ונבדוק את הקוד על מחשב PC (Window 8.1) ולאחר מכן על טלפון (Windows Phone 8.1).
בסרגל הכלים ניתן לבחור את הפלטפורמה אותה נרצה להריץ ולבדוק באמצעות בחירת ה- Startup Project (ניתן לבצע זאת גם בחלוניתSolution Explorer).
תחילה נבחר להריץ ב-PC.
את ההרצה ניתן לבצע על אמולטור (במידה והוא אינו מותקן תינתן לכם האפשרות להתקינו) או על מחשב הפיתוח, נבחר במחשב הפיתוח ונריץ (לחיצה על המשולש הירוק). 
Run and Test


תצוגת האפליקציה על Windows 8.1:
First Windows 8.1 app


תצוגת האפליקציה על Windows Phone 8.1:
First WIndows Phone 8.1 App


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



שלב חמישי – קוד מותאם
לעיתים קרובות נרצה להוסיף קוד המותאם לפלטפורמה אחת וקוד אחר המותאם לפלטפורמה האחרת.
ניתן להגדיר זאת באמצעות "Conditional Compilation" המבוסס על הנחיות לקומפיילר שניתן להוסיף לקוד.
את ההנחיות הייחודיות עבור הקומפיילר של Windows 8.1 נתחום ב:
#if WINDOWS_APP
      . . .
#endif

את ההנחיות הייחודיות עבור הקומפיילר של Windows Phone 8.1 נתחום ב:
#if WINDOWS_PHONE_APP
      . . .
#endif

נגדיר גודל גופן ייחודי לכל אחת מהפלטפורמות של הפקד btnDateTime, את גודל הגופן נגדיר במתודה המטפלת באירוע OnNavigateTo, האירוע מופעל כאשר לפני שמוצג חלון, האירוע מתרחש עבור ה-MainPage  כאשר האפליקציה נטענת:
   1:  protected override void OnNavigatedTo(NavigationEventArgs e)
   2:  {
   3:  #if WINDOWS_APP
   4:        btnDateTime.FontSize = 45;
   5:  #endif
   6:  #if WINDOWS_PHONE_APP
   7:        btnDateTime.FontSize = 30;
   8:  #endif
   9:  }
שורה 4 - תתקמפל רק עבור WinRT.
שורה 7 - תתקמפל רק עבור Windows Phone Runtime.


ונגדיר גודל גופן וצבע שונה עבור כל אחת מהפלטפורמות בזמן הטיפול באירוע Click:
   1:  private void btnDateTime_Click(object sender, RoutedEventArgs e)
   2:  {
   3:              CultureInfo he_il = new CultureInfo("he-IL");
   4:              txtDate.Text = DateTime.Now.ToString("d", he_il);
   5:              txtTime.Text = DateTime.Now.ToString("t", he_il);
   6:  #if WINDOWS_APP
   7:              txtDate.Foreground = new SolidColorBrush(Colors.Green);
   8:              txtTime.Foreground = new SolidColorBrush(Colors.Green);
   9:              txtDate.FontSize = 250;
  10:              txtTime.FontSize = 250;
  11:  #endif
  12:  #if WINDOWS_PHONE_APP
  13:              txtDate.Foreground = new SolidColorBrush(Colors.Yellow);
  14:              txtTime.Foreground = new SolidColorBrush(Colors.Yellow);
  15:              txtDate.FontSize = 50;
  16:              txtTime.FontSize = 50;
  17:  #endif
  18:  }
שורה 7-10 יתקמפלו רק עבור WinRT.
שורה 13-16 יתקמפלו רק עבור Windows Phone Runtime. 


נריץ ונבדוק הפעם על כל אחת מהפלטפורמות:
Windows 8.1 Output
Windows Phone 8.1 output








כל הזכויות שמורות למחבר ©