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

10 בדצמבר 2011

תגיות: , , ,
2 תגובות

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

פוסט זה הוא חלק מסדרת הפוסטים “תכנות לחלונות 8 בHTML5”.

מבנה הספריות

אם נפתח את כל הספריות ב 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

 

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

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 כמעט לחלוטין.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

2 תגובות

  1. Reader10 בדצמבר 2011 ב 21:34

    כרגיל , על פוסט נהדר!

    הגב
  2. eladkatz14 בדצמבר 2011 ב 3:31

    תודה 🙂

    הגב