תיכנות לחלונות 8: מבנה אפליקציה ומודל ריצה

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

תמונה: flickr, cc-by, Ceo1O17

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

<<< פיתוח לחלונות 8 [צעדים ראשונים]

<<< התקנת חלונות 8, גרסת ה-Preview

/

מבנה הספריות

אם נפתח את כל הספריות ב-Solution Explorer, נקבל את המסך הבא:

image

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

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

2. Images – מכיל תמונות. כרגע מכיל את התמונות של מסך הפתיחה ושל האריח (Tile) של האפליקציה. מסך הפתיחה זה המסך שמוצג בזמן שהאפליקציה נטענת (שווה ערך ל-DOM loaded באפליקציית דפדפן רגילה).

3. JS – יכיל את קבצי ה-JS שלנו.

4. WinJS – JS – יכיל את קבצי הג’אווה סקריפט של WinJS – ספרייה שנדבר עליה עוד רבות. WinJS מעניק לנו תמיכה בהמון דברים בפיתוח לחלונות 8, וזו ספרייה שאפשר להשוות אותה בערך ל-jQuery + jQueryUI + KnockoutJS כולן יחד. על פי ברירת מחדל של הפרוייקט יש רפרפנס אך ורק ל base.js ול wwaapp.js אבל בזמן פיתוח נשתמש בכולן. חלק גדול מסדרת הפוסטים הנוכחית יוקדש להבנת הספריה הזו.

5. WinJS- CSS – יכיל את קבצי הCSS של WinJS ויאפשר לנו לתת מראה סטנדרטי של חלונות 8. מצורפים כאן שני קבצי CSS – אחד לכל Theme של חלונות – כהה ובהיר.

6. בספריה הראשית נמצא עוד קובץ אחד חשוב מאוד – package.appxmanifest שזה קובץ XML שמכיל קונפיגורציה של האפליקציה. אם נלחץ עליו לחיצה כפולה נקבל את המסך הבא:

image

נחזור להגדרות האלו כאשר נרצה לקבוע Contracts שאנו רוצים להשתמש בהם, כדוגמת חיפוש וShare. (תחת הלשונית Declarations)
בנוסף, תחת הלשונית Capabilities נוכל להצהיר על יכולות HTML5 שאנו מבקשים להשתמש בהן, כדוגמת גישה למצלמה, GPS וכיוצא בזה:

image

כאשר אנחנו מריצים את האפליקציה, כל הקבצים נארזים לתוך קובץ זיפ שמותקן בתוך התיקייה c:\program files\applications (ע”פ ברירת מחדל התיקייה מוסתרת)

image

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

image

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

2. אפליקציית ווב רגילה רצה בתוך פרוסס משלה בתוך לשונית (tab) בדפדפן. כל לשונית רצה בפרוסס משלה. אפליקציית מטרו לעומת זאת, רצה בתוך AppContainer שמקביל כמעט אחד לאחד לפרוסס של של הלשוניות (tab-ים) בדפדפן. לפרוסס הזה קוראים wwahost.exe והוא מכיל בתוכו את המנוע הרגיל של IE10.

3. לקוד שרץ בתוך הדפדפן יש גישה ל”Web Platform” – זאת אומרת כל ה API הרגיל של הדפדפן, לדוגמא document.getElementById. לקוד שרץ בתוך הAppContainer לעומת זאת, בנוסף לגישה לAPI הרגיל של הדפדפן, יש גם גישה ל-Windows Runtime – או בשמו המקוצר – WinRT – וכך הוא יכול לגשת ל-API הראשי של חלונות.

4. כשמריצים את האפליקציה – אם נפתח את מנהל המשימות (Task Manager) של חלונות 8 (ctrl + shift + esc), נראה את המסך הבא:

image

האפליקציה שיצרנו נראית כמו אפליקציה רגילה לכל דבר, אבל בפועל קורה משהו אחר. אם נלחץ על “more details” ואז על לשונית ה-details נראה את כל הפרוססים (Processes) שרצים במערכת. האחרון (מסומן) הוא הפרוסס שבפועל מכיל את האפליקציה שלנו (ואת המנוע רינדור של IE10)

image

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

8. כפי שנראה מאוחר יותר, כאשר משתמשים בספריות WinJS ו-WinRT , משתמשים לעיתים קרובות ביכולות ספציפיות של חלונות 8. יחד עם זאת, אין שום חובה לעשות זאת, ואפשר לשמור את האפליקציה שלנו Cross-Platform כמעט לחלוטין.

הפוסט פורסם לראשונה בבלוג “לגו של גדולים

Avatar

אלעד כץ

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

הגב

2 תגובות על "תיכנות לחלונות 8: מבנה אפליקציה ומודל ריצה"

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

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

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

מה שאתה אומר שאני יכול להריץ את אפלקציית המטרו שהכנתי עם ה WIZARD בהנחה שלא הוספתי כלום מעבר למה שיצר ה WIZARD בתוך
IE8 שרץ על WINDOWS7 למשל?

אלעד
Guest

לא. הויזארד כבר יצר תלות בסיסית ב winJS וב winRT.
יחד עם זאת, אפשר להוריד אותן – זה סה”כ כמה שורות קוד.

wpDiscuz

תגיות לכתבה: