מדריך jQuery Mobile – צעדים ראשונים

14 באוקטובר 2011

תגובה אחת
מדריך jQuery Mobile

jQuery Mobile מאפשרת ליצור אפליקציות מובייל בטכנולוגיות Web עם HTML ו- JavaScript. התשתית, בקוד פתוח, המבוססת על ספריית ה- JavaScript הפופולרית jQuery, הופכת את יצירת אפליקציות מובייל התומכות במגוון פלטפורמות המובייל הקיימות היום למשהו פשוט, נוח ויפה.

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

יצירת פרוייקט חדש

נתחיל ביצירת אתר ריק חדש. ב- Visual Studio 2010 ניצור Web Site חדש (לא New Project, אלא New Site):

מדריך jQuery Mobile

במסך ה- New Web Site שנפתח, נבחר בתבנית של אתר ריק (ASP.NET Empty Web Site), ובמיקום האתר (Web Location בחלק התחתון) נבחר ב- HTTP.

נלחץ על Browse כדי ליצור אתר חדש תחת IIS Express. אם אתם עוד לא מכירים את IIS Expres – הגיע הזמן!

מדריך jQuery Mobile

במסך שנפתח נבחר ב- Node של IIS Express ונלחץ על הכפתור Create New Site.

נזין את שם האתר החדש שנרצה ליצור (בדוגמא – jqm) ונלחץ על Open.

מדריך jQuery Mobile

לסיום, נאשר את יצירת האתר החדש בחלון ה- New Web Site.

נקבל אתר ריק ללא שום דף HTML.

מדריך jQuery Mobile

נוסיף דף 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.

מדריך jQuery Mobile

במסך שנפתח, נוסיף את גודל הדפדפן של הטלפון הסלולרי, לדוגמא, במקרה של Windows Phone: רוחב 480, גובה 800 פיקסלים.

נזין את הרוחב והגובה ונלחץ על Add.

מדריך jQuery Mobile

כעת נבחר את הרזולוציה ברשימה ונלחץ על Resize כדי לשנות את גודל הדפדפן לגודל דפדפן סלולרי.

מדריך jQuery Mobile

2. שימוש באמולטור של Windows Phone

האופציה הרצויה היא כמובן לבדוק את האתר שלנו עם דפדפן סלולרי, לדוגמא ע”י שימוש באמולטור של Windows Phone המגיע עם כלי הפיתוח של Windows Phone.

נפעיל את האמולטור מתפריט ההתחל.

מדריך jQuery Mobile

נפעיל את אינטרנט אקספלורר באמולטור של Windows Phone. כאשר ננסה להזין כתובת ע”י שימוש במקלדת נגלה שכברירת מחדל אנחנו לא יכולים לעשות זאת, ועלינו להשתמש במקלדת של הטלפון באמולטור.

כדי בכל זאת לאפשר שימוש במקלדת של המחשב נשתמש בקיצור המקשים Ctrl + PgUp.

נזין את כתובת האתר שלנו (בדוגמא: http://localhost:47300), והדפדפן באמולטור יציג את האתר.

מדריך jQuery Mobile

הורדה והתקנה של jQuery Mobile

הדרך הפשוטה ביותר להוריד ולהתקין את הגירסא העדכנית של jQuery Mobile היא להשתמש ב- NuGet.

ב- Visual Studio 2010, נסמן את האתר שלנו, נלחץ על הכפתור הימני של העכבר ונבחר באפשרות Manage Nuget Packages.

מדריך jQuery Mobile

בחלון שנפתח, נבצע חיפוש לחבילה jQuery Mobile ונקבל את החבילות העונות לקריטריון החיפוש.

מדריך jQuery Mobile

החבילה בה אנחנו מעוניינים היא jQuery Mobile 1.0. בדוגמא מופיעה גירסת RC שהיא הגירסא העדכנית של jQuery Mobile נכון ליום כתיבת המדריך.

נסמן את החבילה הזאת ונלחץ על Install. כיוון שהחבילה עושה שימוש ב- jQuery, ויז’ואל סטודיו יבצע את כל ההורדות וההתקנות הנדרשות עבורנו.

מדריך jQuery Mobile

בסוף התהליך יראה האתר שלנו כך:

נוספה ספריית Content ובה קבצי ה- css של jQuery Mobile וכן מספר אייקונים. הספרייה Scripts מכילה את קבצי הספרייות של jQuery ו- jQuery Mobile.

מדריך jQuery Mobile

דף בסיסי של jQuery Mobile

לאחר שהוספנו את הספריות jQuery ו- jQuery Mobile לאתר שלנו, ניתן להתחיל לבנות את האפליקציה.

נשנה את הדף index.html שבנינו קודם:

1. ה- Doctype

דף אפליקציית jQuery Mobile תמיד יתחיל ב- doctype של HTML5, כיוון שהתשתית עושה שימוש במגוון יכולות של HTML5.

<!DOCTYPE html>

 

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מדריך jQuery Mobile

האתר עם הגדרת ה- viewport

מדריך jQuery Mobile

 

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

סיכום

בפרק זה במדריך jQuery Mobile יצרנו אפליקציה בסיסית וראינו את המבנה הבסיסי של דף באפליקציה. ראינו איך לסדר את סביבת העבודה כדי שנוכל לבדוק איך נראית האפליקציה שלנו בדפדפן ה- Desktop ובדפדפן הסלולרי.

בפרקים הבאים נמשיך בבניית אפליקצית ה- Web למובייל ונעשיר את הדוגמא עוד יותר.

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

תגובה אחת

  1. יובל16 בינואר 2012 ב 12:45

    מאמר מצויין להתחלה.

    אבל יש לי שאלה חשובה!
    בניתי דף ב
    Jquery Mobile
    וכתבתי בו בעברית, אבל זה מציג לי את העברית כג'יבריש

    איך אפשר לתקן את זה? והאם יש בכלל אפשרות לכתוב בעברית כשבונים בטכנולוגיה זאת?

Comments are closed.