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

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

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

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

<<< כיצד להתקין את גרסת ה-Preview של חלונות 8

בואו נתחיל מההתחלה.

יצירת אפליקציה ראשונה

ב-Visual Studio 11 נפתח פרוייקט חדש (צריך להריץ אותו תחת חלונות 8 כמובן) ונבחר בפרוייקט JavaScript ריק:

image

Visual Studio יוצר לנו לא מעט קבצים, כשהחשובים שבהם הם default.html ו- default.js, ששניהם כבר פתוחים. באפליקציית Win8 לא עוברים בין דפים בצורה הרגילה שאנו רגילים אליה מאתרי אינטרנט סטנדרטיים, אלא יש לנו דף ראשי אחד בלבד, והכל קורה רק בו. לאפליקציות מהסוג הזה (כדוגמת ג’ימייל או פייסבוק) קוראים אפליקציות דף אחד (Single Page Applications) והן מתנהגות הרבה יותר כמו אפליקציות רגילות. לאפליקציות מהסוג הזה יש לא מעט פלוסים, יחד עם לא מעט קשיים שמתלווים אליהם מבחינת ארכיטקטורה שנדבר עליהם בהמשך.

בדף הראשי יש כבר לא מעט קוד:

image

בשורה 7 יש קישור לקובץ CSS שמכיל את המראה הסטנדרטי הכהה של אפליקציות חלונות 8.

שורות 8-9 מכילות קישורים לקבצי JS בשם base.js ו- wwaapp.js שהם חלק מספריה בשם WinJS. הספרייה הזו חשובה מאוד – היא מאפשרת לנו ליצור קונטרולים של חלונות 8, יחד עם עוד הרבה מחלקות עזר שנשתמש בהן לעיתים קרובות. WinJS עקרונית יכול לעבוד גם באתרי אינטרנט רגילים, ונכון לעכשיו אין שום דבר בקוד שלנו שלא יכול לרוץ גם כאתר אינטרנט רגיל.

שורה 11 מכילה קישור ל default.css – קובץ ה-CSS הראשי של האפליקציה שלנו, שכרגע הוא די ריק.

שורה 12 מכילה קישור ל-default.js שכבר פתוח אוטומטית – הקובץ הזה יכיל את הקוד לדף הראשי, מעין CodeBehind.

בשביל להריץ את האפליקציה הפשוטה בעולם נשנה את ה Body כך שיהיה:

ונריץ. האפליקציה תארז ותתקין את עצמה על המחשב:

image

נעצור את האפליקציה ע”י Alt + F4 ונחזור ל Visual Studio. האפליקציה עצמה בנויה *מאוד* דומה לאתר אינטרנט רגיל, ואלו החדשות הטובות – אנחנו כבר יודעים לכתוב אתרי אינטרנט רגילים.

החלק המעניין הוא כמובן ב-default.js:

image

ננתח את הקוד:

שורה אחת ושורה 13 מגדירות פונקציה מיידית. פונקציה מיידית היא פונקציה ללא שם, שמריצה את עצמה מיידית לאחר ההגדרה. פונקציה מיידית היא Design Pattern שימושי מאוד ב-JavaScript, שמטרתו לודא שהקוד שאנחנו כותבים לא “מלכלך” את מרחב השמות הגלובאלי במשתנים גלובאליים. כל משתנה או פונקציה שנגדיר בתוך גוף הפונקציה המיידית “נראה” רק בתוך הפונקציה ולא מחוץ אליה. במובן מסויים זה דומה להגדרת namespace ב C#. (קרא עוד על פונקציה מיידית)

בשורה 2 יש את הפקודה ‘use strict’, שמוודאת שאנחנו עובדים בJavaScript 5. (או ליתר דיוק ECMA Script 5). הפקודה נרשמת כמחרוזת על מנת לוודא שדפדפנים שלא מכירים את JS5 כמו IE6 לא יקרסו בשורה הזו, אלא פשוט יתעלמו ממנה. כאמור, אנחנו רצים בתוך מנוע של IE10, אבל הפקודה נראית כך בכל מקרה.

JS5 לא מוסיף יותר מדי יכולות לשפה, חוץ מתיקונים שונים ואיסור על כל מיני טריקים בעייתיים בגאווה סקריפט – הוא מונע מהם לעבוד וכך לא נכנסים למקומות בעייתיים שגרסאות קודמות של JS מאפשרות. המשמעות הכי רלוונטית עבורנו לכך שאנו עובדים ב-JS5 היא שחייבים להצהיר על משתנים לפני שמשתמשים בהם. אי אפשר פשוט להתחיל להשתמש במשנה לפני שהצהרנו עליו. (די מזכיר את Option Explicit מ-VisualBasic של פעם).

שורה 4 – Debug.enableFirstChanceException – מאפשרת לנו לתפוס שגיאות של JS שבאופן רגיל היו מוחרשות. זה יאפשר לנו לדבג את האפליקציה ביתר קלות במידה ויהיו לנו באגים. (ויהיו מספיק)

כדאי להפוך את השורה הזו לאמיתית (להסיר את ההערה) על מנת שנתפוס בעיות מיד כשהן קורות.

בשורה 6-10 אנחנו פוגשים לראשונה את WinJS שנחקור אותו עוד הרבה בהמשך.

הקוד נרשם לאירוע onmainwindowactivated – שקורה כל פעם שהאפליקציה שלנו מופעלת. הפעלת אפליקציה יכולה לקרות מכל מיני סיבות; הפעלה רגילה בהתחלה, חזרה ממצב מושהה (אפליקציות בחלונות 8 נכנסות להשהייה כשהן לא נמצאות על המסך, גם כשהן לא סגורות) וכו’.
בשורה השנייה אנחנו בודקים אם האירוע נורה כתוצאה מפתיחה רגילה של האפליציה, ובמידה וכן מאפשר לנו להריץ קוד התחלתי, שנוסיף עוד מעט.

השורה האחרונה:

WinJS.Application.start();

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

הרצת קוד משלנו באפליקציה

נשנה את ה-HTML כך של H1 יהיה גם ID:

ואיפה שרשום TODO: startup code here // נוסיף קוד שלנו:

נריץ ונקבל את המסך הבא:

image

השורה האחרונה שהוספנו היא אולי השורה הכי “קלאסית” בג’אווה סקיפט, אבל לא רואים אותה לעיתים יותר מדי קרובות היום – במקום זה נהוג להשתמש בספרייה המעולה jQuery (או ספריות דומות). אפליקציות של חלונות 8 הן קודם כל HTML ו-JS רגילים, ולפיכך jQuery יכול להשתלב כאן בקלות. נראה בהמשך גם איך עושים את זה, וגם שלא כל כך חייבים את jQuery כשיש לנו את WinJS.

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

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

אלעד כץ

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

הגב

2 תגובות על "פיתוח ב-HTML5 לחלונות 8 [צעדים ראשונים]"

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

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

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

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

Bill Gates
Guest

Are you out of your mind?
Develop a web app for windows?

Are we back to 1999?

wpDiscuz

תגיות לכתבה: