תבנית ה- Grid ב- Visual Studio היא התבנית הפופולרית ביותר לפיתוח אפליקציות Windows 8. בפוסט בניית קורא RSS ל- Windows 8 עם HTML5 עשיתי שימוש בתבנית הזאת לבניית קורא RSS פשוט, ואני ממליץ להתחיל בו לצורך לימוד פיתוח אפליקציות ל- Windows 8 עם HTML ו- JavaScript.
ברוב המקרים, נרצה לקסטם את מראה האפליקציה שלנו, וכדי שנוכל לעשות את זה באופן יעיל ופשוט, כדאי להכיר את מבנה ה- Layout של תבנית ה- Grid.
תבנית ה- Grid מורכבת מ- 3 סוגי מסכים: המסך הראשי, הכולל נתונים מקובצים לפי קטגוריות, עמוד קטגוריה, המכיל פריטים השייכים לקטגוריה ספציפית, ועמוד פריט בודד.
ניתן לראות שהעמוד הראשי של האפליקציה האפליקציה מכיל כותרת ראשית (RSSReader), וכן רשימת פריטים המחולקים לפי קטגוריות. ניתן לגלול לצד ימין כדי לראות את שאר הנתונים בקטגוריות הנוספות.
בלחיצה על כותרת של קטגוריה מסויימת, נגיע לעמוד קטגוריה, המכיל תמונה ראשית של הקטגוריה וכן רשימת פריטים. בפינה השמאלית העליונה מופיע כפתור הניווט המאפשר לנו לחזור אחורה למסך הראשי.
בלחיצה על כל פריט, נגיע לעמוד הפריט, המציג את המידע המלא עליו. במקרה הזה – הטקסט של הכתבה.
Single Page Application – הכל בדף אחד
נסתכל בקובץ default.html שהוא הדף הראשון שנפתח בעת הפעלת האפליקציה, ובאיזור ה- body נראה את האלמנט הבא:
<div id="contenthost"
data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/groupedItems/groupedItems.html'}">
</div>
אלמנט זה (ה- content host) הוא האיזור בדף בו יוצגו דפי האפליקציה. הוא מוגדר להיות control מסוג PageControlNavigator (המוגדר בקובץ navigator.js בתיקיית קבצי ה- JavaScript) ויציג כדף פתיחה את התוכן המוצג בדף pages/groupedItems/groupedItems.html/.
אם נתבונן בקובץ default.css, נראה שאלמנט ה- content host תופס את כל גובה ורוחב האפליקציה.
#contenthost {
height: 100%;
width: 100%;
}
בזמן ריצה, יטען לתוך ה- content host תוכן דף באפליקציה, למשל תוכן הדף itemDetail.html. אם נסתכל על תוכן הדף הזה, נראה כמה אלמנטים שחוזרים על עצמם בכל דף תוכן של האפליקציה.
<body>
<!-- The content that will be loaded and displayed. -->
<div class="itemdetailpage fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle"></span>
</h1>
</header>
<div class="content" aria-label="Main content" role="main">
...
</div>
</div>
</body>
נשים לב למספר דברים:
1. שם הדף להיררכיית חוקי ה- CSS
איזור התוכן המרכזי של הדף, יהיה אלמנט div ולו 2 CSS Classes: ה- class הראשון של איזור התוכן המרכזי הוא class לפי שם הדף, וישמש להיררכיית חוקי ה- CSS עבור אותו דף (במקרה שלנו itemdetailspage). כפי שהסברתי קודם, אפליקציית Windows 8 היא Single Page Application ולכן אם נרצה שבשני דפים יהיה לנו חוק CSS המתייחס לאלמנט בשם content, אז בדף אחד יהיה לנו חוק בשם:
.itemdetailpage .content { ... }
ובדף השני (שמו groupdetailpage) יהיה חוק ששמו:
.groupdetailpage .content { ... }
1. איזור ה- fragment
ה- Class השני יהיה תמיד fragment ומגדיר לתבנית שזה איזור התוכן במרכזי של הדף. איזור זה יטען לתוך ה- content host של העמוד הראשי, ויוגדר להיות 100% מגובה ורוחב העמוד.
מתוך default.css:
.fragment {
height: 100%;
width: 100%;
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 128px 1fr;
}
עוד בחוק ה- CSS של איזור ה- fragment מוגדר Grid עם עמודה אחת (כלומר תופס את כל רוחב הדף), ובו 2 שורות. השורה הראשונה (בגובה 128px) תשתמש את שורת הכותרת של הדף עם כפתור הניווט לאחור וכותרת הדף הנוכחי.
כדאי לקרוא פוסט שכתבתי בנושא CSS3 Grid Layout: עימוד טבלאי באפליקציות Windows 8, כדי להבין יותר לעומק את ההגדרה הנ”ל.
3. Header עם role=banner
בתוך איזור התוכן המרכזי של הדף, ניתן לראות את איזור ה- header מוגדר ע”י אלמנט מסוג <header> עם סימון של role=banner.
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle"></span>
</h1>
</header>
האלמנט <header> הוא אלמנט סמנטי חדש ב- HTML5 שנועד במיוחד לאיזור עליון של דף, והתוספת role=banner היא תוספת סמנטית בלבד (אין לה אפקט על התצוגה) שמאפשרת לנו להגדיר חוקי CSS מיוחדים עבור האלמנט הזה.
בתוך איזור ה- header יש לנו את כפתור הניווט אחורה (אלמנט <button> עם CSS Class בשם win-backbutton) ואיזור הכותרת (איזור h1 עם CSS Class בשם titlearea).
עבור אלמנטים אלו מוגדרים החוקים באופן הבא בקובץ default.css:
.fragment header[role=banner] {
display: -ms-grid;
-ms-grid-columns: 120px 1fr;
-ms-grid-rows: 1fr;
}
.fragment header[role=banner] .win-backbutton {
-ms-grid-column: 1;
...
}
.fragment header[role=banner] .titlearea {
-ms-grid-column: 2;
...
}
החוק הראשון מתייחס לאלמנט header, המסומן ב- role=banner שנמצא בתוך איזור ה- fragment. במידה ויהיו לנו יותר מאלמנט header אחד, עלינו להקפיד שרק אחד מהם יהיה מסומן ב- role=banner.
גם איזור ה- header עצמו הוא גריד, בעל שורה אחת לכל אורכו 2 עמודות. בעמודה הראשונה נמצא כפתור הניווט לאחור, ובעמודה השניה כותרת העמוד.
דפי האפליקציה – חוקים היררכיים
אם נסתכל על איזור התוכן של הדף itemDetail.html ואת הגדרות ה- css המתאימות נראה את התמונה הבאה:
<body>
<div class="itemdetailpage fragment">
<header aria-label="Header content" role="banner">
...
</header>
<div class="content" aria-label="Main content" role="main">
<article>
<div>
<header>
<h2 class="item-title"></h2>
<h4 class="item-subtitle"></h4>
</header>
<img class="item-image" src="#" />
<div class="item-content"></div>
</div>
</article>
</div>
</div>
</body>
הגדרות ה- CSS בנויות בצורה היררכית, כאשר כל חוק תמיד יתחיל בשם הדף (במקרה שלנו itemdetailpage), ולאחר מכן בצורה היררכית לפי מבנה הדף.
.itemdetailpage .content {
...
}
.itemdetailpage .content article {
...
}
.itemdetailpage .content article header .item-title {
...
}
.itemdetailpage .content article header .item-subtitle {
...
}
.itemdetailpage .content article .item-image {
...
}
.itemdetailpage .content article .item-content p {
...
}
התאמה למצבי תצוגה שונים
כידוע, יש להתאים כל עמוד באפליקציה ל- 4 מצבי תצוגה:
- Landscape – מצב התצורה הרגיל בו האפליקציה תופסת את כל שטח המסך לרוחב
- Portrait – כאשר מסובבים את המסך 90 מעלות והאפליקציה מוצגת לאורך
- Snapped – תצוגה צרה בעד הצמדת האפליקציה הצידה
- Fill – תצוגה כאשר אפליקציה אחרת מוצמדת הצידה והאפליקציה הנוכחית מוצגת רק על 3/4 מסך.
בכל קובץ css של עמוד באפליקציה, נמצא את חוקי ה- CSS שמתאימים את התצוגה לתצוגות השונות ע”י שימוש ב- CSS3 Media Queries.
@media screen and (-ms-view-state: snapped) {
.itemdetailpage .content {
...
}
.itemdetailpage .content article {
...
}
...
}
@media screen and (-ms-view-state: fullscreen-portrait) {
.itemdetailpage .content article {
...
}
...
}
נשים לב שבעת השימוש ב- Media Queries כאן, לא מגדירים גודל מפורש של פיקסלים, אלא מגדירים את מצב התצוגה ע”י שימוש במאפיין ms-view-state.
סיכום
הבנה טובה של מבנה ה- CSS של תבנית הגריד של Visual Studio לאפליקציות Windows 8 הוא קריטי כדי לאפשר שינויים ותוספות לאפליקציה כדי לתת לה מראה ייחודי וחווית משתמש עשירה. בפוסט זה הסברתי את הנקודות החשובות שיש להכיר כדי לצאת לדרך.
תהנו!
