תכנות לחלונות 8 – מבנה WinJS

17 בדצמבר 2011

תגיות: , , ,
אין תגובות

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

 

מבנה הקבצים של WinJS

כזכור מהפוסט על מבנה הספריות באפלקיציה – אלו הקבצים שמכילים את כל ספריית WinJS:

image_thumb2[1]

הקבצים הללו תלויים אחד בשני, והסדר שנוסיף אותם לאפליקציה הוא כדלהלן:

  • 1. base.js
  • wwaapp.js (after base.js)
  • ui.js (after base.js)
  • binding.js (after ui.js)
  • res.js (after ui.js)
  • animations.js (after ui.js)
  • controls.js (after animations.js)
  • uicollections.js (after animations.js)

על פי הסדר מבסיסי למתקדם (וכנראה הסדר בו נלמד בסדרת הפוסטים הזו)

1. Base.js – מכיל תמיכה בפיצ’רים שכל שאר הספרייה צריכה. בין השאר מכיל יכולות המזכירות את jQuery.

2. Wwaapp.js – תלוי ב base.js, ומספק תמיכה לעבודה עם ה- app-container שמריץ את האפליקציה שלנו. כדוגמא אירועים כגון קבלת פוקוס של האפליקציה, או כניסה למצב השהייה נקבל מכאן.

3. UI.js – תלוי ב base.js. מספק תמיכה ליצירת קונטרולים שמוגדרים ב controls.js, או לקונטרולים של WinJS שניצור בעצמנו.

4. Binding.js – תלוי ב ui.js. מספק תמיכה ב Data Binding, Data Templates וכו’.

5. res.js – תלוי ב ui.js, מספק תמיכה בעבודה עם משאבים כגון תמונות וכו’.

6. animations.js – תלוי ב ui.js, מספק תמיכה באנימציות ומגדיר את האנימציות הסטנדרטיות של חלונות 8 כך שנוכל להשתמש בהן גם אנחנו בקלות.

7. controls.js – תלוי ב animations.js (ולפיכך ב ui.js וב- base.js כמובן) – מכיל את הקוד של כל הקונטרולים של WinJS.

8. uicollections.js – תלוי ב animations.js ומספק תמיכה בקונטרולים של רשימות. הקונטרולים הללו הם המתוחכמים ביותר והמורכבים ביותר ממה שראיתי עד עכשיו.

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

<script src="/winjs/js/base.js"></script>

<script src="/winjs/js/wwaapp.js"></script>

<script src="winjs/js/ui.js" type="text/javascript"></script>

<script src="winjs/js/binding.js" type="text/javascript"></script>

<script src="winjs/js/res.js" type="text/javascript"></script>

<script src="winjs/js/animations.js" type="text/javascript"></script>

<script src="winjs/js/controls.js" type="text/javascript"></script>

<script src="winjs/js/uicollections.js" type="text/javascript"></script>

מבנה מרחבי השמות

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

מרחב השמות תיאור

Control attributes

לא ממש מרחב שמות אבל נחשב חלק מWinJS – מכיל attributes של HTML ש WinJS משתמש בהם.

CSS classes

לא ממש מרחב שמות אבל נחשב חלק מ- WinJS – מכיל את מחלקות הCSS של WinJS

WinJS Namespace

מרחב השמות הבסיסי של WinJS. מכיל תמיכה באג’קס (ע”י אובייקט xhr) ובתכנות אסינכרוני (ע”י promise, ראה פוסט של גיא בורשטיין בנושא)

WinJS.Application Namespace

טיפול בפונקציונאליות שמגיעה מה app-container כגון אירוע קבלת פוקוס, אירוע היכנסות למצב השהייה וכו’

WinJS.Binding Namespace

תמיכה ב Data Binding

WinJS.Class Namespace

פונקצות עזר למימוש Design Pattens של מחלקה

WinJS.Namespace Namespace

פונקציות עזר למימוש Design Patterns של מרחב שמות (namespace)

WinJS.Navigation Namespace

תמיכה בניווט והיסטוריה.

WinJS.Resources Namespace

תמיכה בעבודה עם משאבים כגון תמונות.

WinJS.UI Namespace

תמיכה בקונטרולים.

WinJS.UI.Animation Namespace

תמיכה באנימציות.

WinJS.UI.Fragments Namespace

תמיכה בטעינה של חלקי HTML מקבצים אחרים וניווט אליהם, נקרא Fragments בז’רגון של winJS. חלק מאוד חשוב בהתחשב בכך שלעבור לדף אחר אסור באפליקציות מטרו – אנו כותבים אפליקציות דף אחד (single page applications) כדוגמת פייסבוק או ג’ימייל

WinJS.Utilities Namespace

תמיכה בפונקציונאליות מקבילה לjQuery, כגון בחירת אלמנטים מה-DOM ומניפולציות עליהם (לדוגמא להוסיף ולהוריד css classes מאלמנטים)

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

כתיבת תגובה

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