מדריך jQuery Mobile - צעדים ראשונים
jQuery Mobile מאפשרת ליצור אפליקציות מובייל בטכנולוגיות Web עם HTML ו- JavaScript. התשתית, בקוד פתוח, המבוססת על ספריית ה- JavaScript הפופולרית jQuery, הופכת את יצירת אפליקציות מובייל התומכות במגוון פלטפורמות המובייל הקיימות היום למשהו פשוט, נוח ויפה.
במדריך jQuery Mobile זה, לאורך מספר פרקים, נכיר את התשתית משלב יצירת אתר חדש ועד לקבלת אפליקציית מובייל עשירה.
יצירת פרוייקט חדש
נתחיל ביצירת אתר ריק חדש. ב- Visual Studio 2010 ניצור Web Site חדש (לא New Project, אלא New Site):
במסך ה- New Web Site שנפתח, נבחר בתבנית של אתר ריק (ASP.NET Empty Web Site), ובמיקום האתר (Web Location בחלק התחתון) נבחר ב- HTTP.
נלחץ על Browse כדי ליצור אתר חדש תחת IIS Express. אם אתם עוד לא מכירים את IIS Expres - הגיע הזמן!
במסך שנפתח נבחר ב- Node של IIS Express ונלחץ על הכפתור Create New Site.
נזין את שם האתר החדש שנרצה ליצור (בדוגמא – jqm) ונלחץ על Open.
לסיום, נאשר את יצירת האתר החדש בחלון ה- New Web Site.
נקבל אתר ריק ללא שום דף HTML.
נוסיף דף HTML לאתר, בשם index.html.
לצורך בדיקה בלבד, נוסיף לדף ה- HTML תוכן כלשהו, לדוגמא:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Title</title>
</head>
<body>
<h1>This is a test content.</h1>
</body>
</html>
הרצה ובדיקה בדפדפן
בדיקת האתר בדפדפן יכולה להתבצע בשתי דרכים:
1. שימוש בדפדפן Desktop
נריץ את האתר שלנו בדפדפן. ונוודא שאנחנו מקבלים את התוצאה הרצויה.
נפעיל את כלי הפיתוח של אינטרנט אקספלורר 9 (ע”י לחיצה על F12), ובתפריט Tools נבחר באפשרות Resize ואז Custom.
במסך שנפתח, נוסיף את גודל הדפדפן של הטלפון הסלולרי, לדוגמא, במקרה של Windows Phone: רוחב 480, גובה 800 פיקסלים.
נזין את הרוחב והגובה ונלחץ על Add.
כעת נבחר את הרזולוציה ברשימה ונלחץ על Resize כדי לשנות את גודל הדפדפן לגודל דפדפן סלולרי.
2. שימוש באמולטור של Windows Phone
האופציה הרצויה היא כמובן לבדוק את האתר שלנו עם דפדפן סלולרי, לדוגמא ע”י שימוש באמולטור של Windows Phone המגיע עם כלי הפיתוח של Windows Phone.
נפעיל את האמולטור מתפריט ההתחל.
נפעיל את אינטרנט אקספלורר באמולטור של Windows Phone. כאשר ננסה להזין כתובת ע”י שימוש במקלדת נגלה שכברירת מחדל אנחנו לא יכולים לעשות זאת, ועלינו להשתמש במקלדת של הטלפון באמולטור.
כדי בכל זאת לאפשר שימוש במקלדת של המחשב נשתמש בקיצור המקשים Ctrl + PgUp.
נזין את כתובת האתר שלנו (בדוגמא: http://localhost:47300), והדפדפן באמולטור יציג את האתר.
הורדה והתקנה של jQuery Mobile
הדרך הפשוטה ביותר להוריד ולהתקין את הגירסא העדכנית של jQuery Mobile היא להשתמש ב- NuGet.
ב- Visual Studio 2010, נסמן את האתר שלנו, נלחץ על הכפתור הימני של העכבר ונבחר באפשרות Manage Nuget Packages.
בחלון שנפתח, נבצע חיפוש לחבילה jQuery Mobile ונקבל את החבילות העונות לקריטריון החיפוש.
החבילה בה אנחנו מעוניינים היא jQuery Mobile 1.0. בדוגמא מופיעה גירסת RC שהיא הגירסא העדכנית של jQuery Mobile נכון ליום כתיבת המדריך.
נסמן את החבילה הזאת ונלחץ על Install. כיוון שהחבילה עושה שימוש ב- jQuery, ויז’ואל סטודיו יבצע את כל ההורדות וההתקנות הנדרשות עבורנו.
בסוף התהליך יראה האתר שלנו כך:
נוספה ספריית Content ובה קבצי ה- css של jQuery Mobile וכן מספר אייקונים. הספרייה Scripts מכילה את קבצי הספרייות של jQuery ו- jQuery Mobile.
דף בסיסי של jQuery Mobile
לאחר שהוספנו את הספריות jQuery ו- jQuery Mobile לאתר שלנו, ניתן להתחיל לבנות את האפליקציה.
נשנה את הדף index.html שבנינו קודם:
1. ה- Doctype
דף אפליקציית jQuery Mobile תמיד יתחיל ב- doctype של HTML5, כיוון שהתשתית עושה שימוש במגוון יכולות של HTML5.
2. Viewport meta tag
בתוך איזור ה- head נשים את הגדרת ה- Viewport המגדירה לדפדפן הסלולרי כיצד להתאים את מרחק התצוגה עבור תצוגת האתר. באופן ברירת מחדל הדפדפן הסלולרי מבצע zoom out כדי להציג אתר שלם לפי הגודל אליו הותאם.
<head>
<title>Test Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
לדוגמא: האתר שלנו כרגע מוצג בדפדפן הסלולרי באופן הבא:
|
האתר כרגע ללא שימוש בתבית ה- viewport
|
האתר עם הגדרת ה- viewport
 |
3. קישור לספריות jQuery ו- jQuery Mobile
עוד בתוך איזור ה- head נוסיף את הקישור לסקריפטים ל- CSS של ספריות ה- jQuery ו- jQuery Mobile ע”י גרירת הקבצים המתאימים מה- Solution Explorer לתוך עורך הקוד:
<head>
<title>Test Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
<link href="Content/jquery.mobile-1.0rc1.css"
rel="stylesheet" type="text/css" />
</head>
4. הגדרת דף בסיסי באפליקציה
באיזור ה- body, כל דף באפליקציה יזוהה ע”י תגית (בדר”כ div) עם התכונה: "data-role="page.
<body>
<div data-role="page">
...
</div>
</body>
תגיות ה- data מאפשרות להוסיף כל מידע חופשי לאלמנטים של HTML5 כדי שספריות JavaScript יוכלו לעשות בהם שימוש. מומלץ לקרוא את הפוסט בנושא HTML5: הוספת מידע חופשי לאלנטים עם data- attributes ו- datasets.
בתוך איזור ה- page, ניתן להשתמש בתגיות HMTL תקניות, אך דף טיפוסי ב- jQuery Mobile יכיל 3 איזורים בסיסיים: header, footer ו- content.
<div data-role="page">
<div data-role="header">
...
</div>
<div data-role="content">
...
</div>
<div data-role="footer">
...
</div>
</div>
בסה”כ יראה הדף הבסיסי באפליקציית jQuery Mobile כך (מעתה, ניתן להעתיק את התוכן הזה לכל דף חדש שניצור):
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
<link href="Content/jquery.mobile-1.0rc1.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
This is some content </div>
<div data-role="footer">
Copyright 2011 </div>
</div>
</body>
</html>
נציג את הדף הזה בדפדפן הסלולרי שלנו ונקבל את התוצאה הבאה:
סיכום
בפרק זה במדריך jQuery Mobile יצרנו אפליקציה בסיסית וראינו את המבנה הבסיסי של דף באפליקציה. ראינו איך לסדר את סביבת העבודה כדי שנוכל לבדוק איך נראית האפליקציה שלנו בדפדפן ה- Desktop ובדפדפן הסלולרי.
בפרקים הבאים נמשיך בבניית אפליקצית ה- Web למובייל ונעשיר את הדוגמא עוד יותר.