מדריך מתקדם לפיתוח ב-Windows Phone 8

אחרי שכבר למדנו להכיר את מערכת ההפעלה Windows Phone הנה מדריך מעט יותר מתקדם לפיתוח עבורה

תמונה: יח"צ

תמונה: יח”צ

WP8-Icon מדריך זה הוא חלק מתחרות Windows Phone 8 App Challenge. פתחו אפליקציה ל-Windows Phone, הגישו אותה לתחרות ואולי תזכו בפרסים שווים וסקירה של האפליקציה שלכם בניוזגיק. רוצים לשמוע עוד?

מערכת ההפעלה החדשה מבית מיקרוסופט, Windows Phone 8, כבר כאן, אפילו בישראל, ובעברית – כמו שרק מיקרוסופט יודעת לעשות. ניתן להוריד את כלי הפיתוח חינם ולהתחיל לפתח.

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

אריחים חיים

האריחים החיים (Live Tiles) אינם יכולת חדשה – הם היו קיימים גם בגירסאות של Windows Phone 7.x. אבל, ב-WP8 יש מספר חידושים. למי שלא מכיר – האריחים מופיעים במסך הבית עבור אפליקציות שאנו מחשיבים שימושיות יותר, ובחרנו להצמיד אריח של האפליקציה במסך הבית.

ב-WP7.x היה רק גודל וסוג אחד של אריח. ב-WP8 יש שלושה גדלים של אריחים – קטן, בינוני (זה מה שהיה ב-WP7.x) ורחב. הנה דוגמאות לכל אחד מהם:

Screen Shot 2013-03-14 at 11.54.02 AM

כדי לבחור באפליקציה שלנו את סוגי האריחים, נמצא ב-Visual Studio את הקובץ WMAppManifest.xml (נמצא תחת תיקית Properties) ונעשה עליו double-click. בתגובה יפתח עורך גרפי של מאפייני האפליקציה (מי שזוכר איך זה היה בגרסאות הקודמות – היה צורך לעבוד עם ה-XML ישירות).

כאן נוכל לבחור האם נרצה תמיכה באריחים רחבים (במצב ההתחלתי רק אריחים קטנים ובינוניים יעבדו) ואת סוג האריחים:

pic1

ישנם שלושה סוגי אריחים:

1. TemplateFlip – זה הסוג הקרוב ביותר למה שיש ב-WP7.x. ניתן לבחור תמונה, טקסט ומספר בצד קדמי ו/או אחורי של האריח. את הבסיס ניתן לבחור בעורך עצמו, אך לביצוע שינוי דינאמי יש לכתוב קצת קוד. הנה דוגמא:

var data = new FlipTileData {

Title = “Iron Man 3”,

BackgroundImage = new Uri(

“http://msc.wcdn.co.il/archive/1378818-41.jpg”),

SmallBackgroundImage = new Uri(

“http://msc.wcdn.co.il/archive/1378818-41.jpg”),

Count = 12,

BackBackgroundImage = new Uri(

“http://msc.wcdn.co.il/w/w-218/1398950-41.jpg”)

};

ShellTile.ActiveTiles.First().Update(data);

זה נראה כך:

pic2

ישנם מאפיינים נוספים ל-FlipTileData כמו BackContent, WideBackContent, WideBackgroundImage ו-WideBackBackgroundImage.

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

2. TemplateCycle – סוג זה מאפשר החלפה אוטומטית והדרגתית של תמונות (עד תשע). במסך המאפיינים חייבים לבחור תמונה אחת לפחות, אבל נוכל לשנות ולהוסיף תמונות בקוד, למשל:

var data = new CycleTileData {
Count = 12,
Title = “Movies”,
SmallBackgroundImage = new Uri(“/Assets/Tiles/small.png”,
UriKind.Relative),
CycleImages = new[] {
new Uri(“/Assets/Tiles/1.png”, UriKind.Relative),
new Uri(“/Assets/Tiles/2.png”, UriKind.Relative),
new Uri(“/Assets/Tiles/3.png”, UriKind.Relative),
new Uri(“/Assets/Tiles/4.png”, UriKind.Relative),
new Uri(“/Assets/Tiles/5.png”, UriKind.Relative),
}
};
ShellTile.ActiveTiles.First().Update(data);

הקוד מניח את קיומם של התמונות 1.png, 2.png וכו’.

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

string SaveLoadedImage(BitmapImage image, string name) {
var bmp = new WriteableBitmap(image);
var stg = IsolatedStorageFile.GetUserStoreForApplication();
using(var stm = stg.CreateFile(“/shared/shellcontent/image” +
name + “.jpg”)) {
bmp.SaveJpeg(stm, bmp.PixelWidth, bmp.PixelHeight, 0, 80);
}
return “isostore:/shared/shellcontent/image” + name + “.jpg”;
}

הפונקציה מחזירה את ה-Uri המתאים להשמה ל-TemplateCycle.

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

מסך הנעילה

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

בגרסאות קודמות של Windows Phone לא ניתן היה לעשות משהו עם המסך בצורה תכנותית. האפליקציות שהופיעו שם היו של מייקרוסופט בלבד. ב-WP8 ניתן להוסיף למסך הנעילה אפליקציות שלנו.

אם יש לאפליקציה שלנו מה לדווח במסך הנעילה ניתן לסמן אותה כאפשרית להופיע שם (ההחלטה האם להיות שם היא תמיד בידי המשתמש). בשלב הראשון עלינו להוסיף לפרויקט קובץ תמונה בגודל 38X38 פיקסלים שמכיל צבע לבן וחלקים שקופים.

בשלב השני עלינו לערוך את הקובץ WMAppManifest.xml ולהוסיף לו תמונה שתופיע במסך הנעילה. כרגע אין דרך לעשות זאת באמצעות העורך הגרפי ולכן עלינו לבצע זאת ידנית. לחיצה ימנית על הקובץ ב-Solution Explorer ובחירת Edit With… ואז Source Code with Encoding תפתח את הקובץ לעריכה טקסטואלית. עלינו למצוא את האלמנט DeviceLockImageURI ולהוסיף התייחסות לקובץ התמונה שהוספנו, כך:

<DeviceLockImageURI IsRelative=true IsResource=false>

Assets/LockImage.png</DeviceLockImageURI>

בשלב השלישי עלינו להוסיף אלמנט Extensions (אם לא קיים, ואם קיים – להוסיף בתוכו) את השורות הבאות (אם האלמנט לא קיים, השורות צריכות להופיע אחרי האלמנט Tokens):

    <Extensions>

      <Extension ExtensionName=LockScreen_Notification_IconCount ConsumerID={111DFF24-AA15-4A96-8006-2BFF8122084F} TaskID=_default />

      <Extension ExtensionName=LockScreen_Notification_TextField ConsumerID={111DFF24-AA15-4A96-8006-2BFF8122084F} TaskID=_default />

    </Extensions>

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

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

pic4

pic5

לחיצה על “פלוס” פנוי ובחירת האפליקציה שלנו תראה את התמונה שהוספנו:

pic6

(שימו לב לצלמית המרכזית בצורת מקרנת סרטים).

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

bool allow = await Launcher.LaunchUriAsync(new Uri(“ms-settings-lock:”));

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

תמונת הרקע של מסך הנעילה

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

כדי לבצע זאת נוסיף עוד Extension לקובץ WMAppManifest.xml:

<Extension ExtensionName=LockScreen_Background ConsumerID={111DFF24-AA15-4A96-8006-2BFF8122084F} TaskID=_default />

כל מה שנשאר לעשות כעת הוא להחליף את תמונת מסך הנעילה כשרוצים. כמובן שהמשתמש צריך להגדיר את האפליקציה שלנו כספק התמונות למסך הנעילה (רק אחד כזה יכול להיות בזמן נתון). גם זה ניתן לקביעה באותו מסך הגדרות של מסך הנעילה. אפשר להקפיץ את המשתמש לשם כדי “לעודד” אותו לבחור באפליקציה שלנו. הנה דוגמת קוד שעושה את זה ומשנה את הרקע אם אכן האפליקציה שלנו היא ספק הרקעים של מסך הנעילה:

bool provider = LockScreenManager.IsProvidedByCurrentApplication;
if(!provider)
provider = (await LockScreenManager.RequestAccessAsync()) ==
LockScreenRequestResult.Granted;
if(provider) {
LockScreen.SetImageUri(new Uri(“ms-appx:///Assets/Tiles/1.png”));
}

הקריאה ל-LockScreenManager.RequestAccessAsync מקפיצה את ההודעה הבאה (רק בפעם הראשונה שהאפליקציה רצה):

lock

בחירת “כן” מקפיצה להגדרות מסך הנעילה. הקריאה ל-LockScreen.SetImageUri משנה בפועל את התמונה. הקידומת “ms-appx:///” מציינת בסיס לתמונה שהותקנה עם האפליקציה. ניתן להשתמש בקידומת “ms-appdata:///Local/” כדי לגשת לתיקית המידע של האפליקציה (שם נשמור תמונות דינמיות למשל).

סיכום

Windows Phone 8 מגיעה עם יכולות רבות ומגוונות. שימוש במספר כלים ותכונות יכול להפוך אפליקציה “רגילה” למושכת. הדברים שתוארו במדריך זה הם רק ההתחלה – יש עוד דברים שאפשר לעשות, ועל כך אולי במדריך אחר.

למדריכים נוספים על פיתוח ל-Windows Phone 8:

מתחילים לכתוב ל-Windows Phone 8

פיתוח אפליקציות לחלונות 8 ו-Windows Phone

במה שונה פיתוח למובייל?


תחרות Windows Phone 8 App Challenge

רוצים שנסקור גם את האפליקציה שלכם וגם לזכות בפרסים שווים? מיקרוסופט ו – Newsgeek מכריזים על תחרות פיתוח אפליקציות ל – Windows Phone. במהלך התחרות אתה מוזמן לפתח ולהעלות אפליקציה/ות לMarketplace (חנות האפליקציות של Windows Phone) ולהגיש אותם לתחרות. בכל שבוע, מידי יום שני, יוכרז ב – Newsgeek המנצח השבועי שיזכה בסקירה של האפליקציה ובמתנה שבועית מתחלפת. בנוסף בסוף התחרות יבחרו 2 אפליקציות מתוך כל אלו שהוגשו לתחרות, אשר יזכו בפרסים הגדולים כולל טאבלט Microsoft Surface RT 32GB, מכשיר סמארטפון מבוסס Windows Phone, חבילת קידום ושיווק האפליקציה שלכם ב-Marketplace ואפילו דוכן להצגת האפליקציה שלכם בכנס ThinkNext הבא של מיקרוסופט.

לא יודעים איך להתחיל? כנסו למרכז המפתחים באתר מיקרוסופט והורידו את ה-SDK לפיתוח ב-Windows Phone 8.  לאחר מכן הורידו עכשיו את המדריך המלא (Tutorial) לצעדים ראשונים בפיתוח ל-Windows Phone 8 והתחילו לפתח!

אז למה אתם מחכים? הגישו עכשיו את האפליקציה שלכם!

פבל יוסיפוביץ'

פבל משמש כיום כ-CTO בתחום פיתוח תוכנה ומרצה בג'ון ברייס הי-טק, והוא בעל תואר MVP של מייקרוסופט. בעבר הקים עם שותפים סטארטאפ בשם Quiksee שנמכר ל-google בספטמבר 2010.

הגב

1 תגובה על "מדריך מתקדם לפיתוח ב-Windows Phone 8"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
אלי חיון
Guest

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

wpDiscuz

תגיות לכתבה: