ממשק מותאם למובייל jQuery Mobile
div עם data-role="page", ובתוכו שלושה חלקים: header, content ו-footer. תכונות data-* אומרות ל-jQuery Mobile איך לעצב כל חלק.input type="button" או על קישור עם data-role="button". בכותרת אפשר לשים כפתורים וסרגל ניווט (data-role="navbar"). הכפתור הפעיל מסומן עם המחלקה ui-btn-active.listview) עם בועת מספר (ui-li-count) וכותרות מפרידות (list-divider), אקורדיון (collapsible) ורשת עמודות (ui-grid-a, ui-grid-b, ui-grid-c).data-role="page" עם id) מוגשים באותו קובץ, והמשתמש עובר ביניהם בלי בקשה לשרת. אפשר לקבוע סוג מעבר כמו flip או slide, ולפתוח דף כדיאלוג עם data-rel="dialog".data-role="fieldcontain" עוטף שדות כך שהתווית מוצגת מעל התיבה או לצדה לפי כיוון המסך. סוגי קלט כמו email ו-url מציגים מקלדת מתאימה. ערכות צבע (data-theme) נבנות בעזרת Theme Roller באתר jQuery Mobile.data-role="header", data-position="fixed", data-fullscreen="true", data-add-back-btn="true", data-transition="flip", data-native-menu="false", data-theme="a" ו-data-theme="b".להורדת קוד מקור של כל הדוגמאות בקורס MVC – לחץ כאן
פרקי ההרצאה: ממשק מותאם למובייל jQuery Mobile
תמלול ההרצאה: ממשק מותאם למובייל jQuery Mobile
הטקסט המלא של הדקות הראשונות בהרצאה «ממשק מותאם למובייל jQuery Mobile» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לפיתוח אתר אינטרנט המותאם למובייל בפרויקט MVC. מה שחשוב להבין בנוגע למובייל זה שה-UI שלנו צריך להיות קצת שונה מ-UI רגיל שמותאם לאתרי דסטופ.
למה? מפני שבמובייל יש הרבה פחות מקום להציג מלל, הרבה פחות מקום להציג UI, ולכן אנחנו צריכים להתאים את ה-UI כך שיהיה יותר נוח למשתמש לגלוש לאתר שלנו.
עכשיו, באתר של דסטופ, כלומר, אתר שגולשים אליו ממחשב רגיל, עם דרדפן רגיל, אנחנו יכולים להחזיק הרבה מלל, הרבה לחצנים, הרבה לינקים.
במובייל אנחנו צריכים לחשוב טוב טוב על איזה UI אנחנו מכניסים. אנחנו צריכים לצמצם את המלל. למשתמש אין מקלדת רגילה, יש לו רק את האצבעות שהוא יכול לגלוש, ולכן ה-UI הוא קצת שונה.
השיטה הטובה ביותר לפתח היום אתר היא בעזרת טכנולוגיית JQuery, ואנחנו הולכים לראות איך אנחנו משלבים את הטכנולוגיה הזאת בפרויקט MVC. לאחר מכן אנחנו הולכים לראות איך אנחנו יכולים לבנות אתר שהוא מותאם גם לדפדפנים רגילים ממחשב גסטופ וגם אותו אתר מותאם לדפדפנים של מובייל.
ולאחר מכן אנחנו הולכים לראות איך אנחנו יכולים לשלב שני אתרים שונים עם אותם משאבים שמשרתים גם אפליקציה גסטופ וגם אפליקציות למובייל. אז בואו נתחיל.
דבר ראשון יש לנו פה אתר ריק. הדבר הראשון שאנחנו צריכים לעשות באתר זה לצרף נאגט שמאפשר לנו לפתח ב jQuery מובייל אז בואו נצרף נאגט כזה נחפש jQuery מובייל נחפש אותו פה ברשימה הנה הוא פה נבצע install הדבר הזה מתקין לנו באתר את כל מה שאנחנו צריכים בשביל לפתח ב jQuery מובייל נוסיף קונטרולר
נקרא לו home controller יש לנו פה פונקציית אינדקס נייצר עבורה view זה ה-view שלנו ואנחנו אנחנו הולכים לראות איך אנחנו יכולים לפתח את ה-view הזה כך שהוא יתאים בדיוק למובייל.
קודם כל בואו נסתכל מה הנאגט הביא לנו. אז מה שהנאגט הביא לנו זה סקריפטים שמיוחדים ל- jQuery מובייל אנחנו רואים את זה כאן וגם את jQuery הרגיל כי מובייל מסתמך על jQuery. דבר נוסף אנחנו רואים בקונטנט שיש לנו css בכדי לשלב מניו i חזק עבור אפליקציות מובייל.
דבר ראשון שאנחנו צריכים לעשות זה ללכת ל-Layout שלנו וב-Layout שלנו אנחנו צריכים להגדיר את האישורים ל-CSS ול-JavaScript שאנחנו צריכים.
בואו נתקן את זה. אוקיי, אז איך אנחנו מבצעים את זה? דבר ראשון אנחנו הולכים פה ל-Head ואנחנו יכולים להכניס Style.src.peel לא עם סטייל עם לינק.
אנחנו מדברים על סטייל שיט href שווה, בואו נאתר המתאים נמצא בתוך קונטנט וכאן אנחנו רוצים להתחבר ל jquery מובייל בצורה כזאת לאחר מכן סטייל או ליתר דיוק סקריפט src נלך לסקריפט שלנו ונבחר את jquery לאחר מכן סקריפט נוסף עבור jquery מובייל וכעת האתר שלנו מכיל את כל מה שדרוש
בכדי שנוכל להתחיל לפתח ב-JQuery Mobile. בואו נחזור ל-View שלנו ונראה איך ההגדרות האלה צריכות להתבצע. הדבר הראשון שאנחנו צריכים להבין זה שדף שמותאם ל-JQuery Mobile בעצם יש לו מבנה מסוים שמחולק לשלושה חלקים.
יש לנו פה דיו, דיו הזאת מכילה מאפיין שנקרא DataMinus עכשיו שימו לב לפני שנסתכל על כל המאפיינים של DataMinus DataMinus זה בעצם Attributes שכולם מתחילים ב-DataMinus.
ומציינים לכל מיני מערכות כמו jQuery, jQuery Validation, jQuery Mobile, כל מיני דברים בדרך כלל על דיווים או גם על רכיבים אחרים. אז סך הכל אנחנו מגדירים את האטריביוטס המיוחדים האלה ו- jQuery Mobile או jQuery או כל דבר אחר שמתלבש על האתר שלנו יכול להבין מה החלקים
השונים מתארים ולעצב אותם בהתאם אז אנחנו הולכים לראות הרבה אטריביוטס שמתחילים בדאטה מינוס זה בעצם תקן שנכנס ב html 5 ויש לנו data- role כלומר התפקיד של הדיו הזאת היא לייצג page בתוך הדיו הזאת יש לנו שלושה חלקים יש לנו דיו שמכיל data- role header מוסיף עוד שני חלקים יש לנו content ויש לנו footer נכניס בתוך
ה-header איזשהו h1 אפילו נרשום test jquery מובייל נגדיר פה איזושהי פסקה this is the content ופה זכויות יוצרים עם הסמל של זכויות יוצרים בואו נגדיר שהדף הזה עולה שהאתר עולה יש לנו פה home index האמת שזה כבר מוגדר ונריץ אוקיי אז אנחנו רואים בעצם שהאתר שלנו נראה קצת יותר כמו מובייל אנחנו גם יכולים טיפה
להגדיר אותו שייראה בגודל של טלפון ועוד טיפה נסדר אותו וכעת אנחנו רואים שהיוזר אינטרפייס די דומה לאפליקציית מובייל רגילה אפילו שזה אתר אינטרנט רגיל אפילו שהיוזר גולש אליו עם דפדפן של מובייל רגיל אז הוא מצליח לראות משהו שהוא קצת יותר מותאם למובייל ומה שאנחנו הולכים לראות עכשיו זה כל מיני הגדרות
ורכיבי UI שאנחנו יכולים להגדיר באתר שלנו בשפת jquerymobile כדי להעשיר את היוזר אינטרפייס בפרויקט mvc אז בואו נבנה view שונה עבור כל אחד מהכלים שאנחנו הולכים לראות את זה אפשר לסגור ה-view הבא שאנחנו הולכים לראות מחזיר לנו UI לגבי לחצנים איך בדיוק לחצנים נראים ב-jquery מוביל בואו נייצר את ה-view הזה
והדבר הראשון שחשוב לזכור זה שכל דף בעצם צריך שיהיה לו את המבנה הזה שראינו נגדיר את זה פה ואנחנו מדברים על בטן בקונטנט אנחנו הולכים להגדיר לחצנים אז יש לנו כאן בעצם קודם כל input type שווה בטן אותו הדבר אנחנו יכולים לעשות גם ל-submit גם ל-reset שלושת אלה גם כן הם לחצנים ואנחנו יכולים לבצע את זה גם על לינק רגיל אם אנחנו מבצעים
את זה על לינק רגיל אנחנו צריכים להגדיר data-roll בטן בואו נגלוש לדף יש לנו פה את קונטנט ונגלוש ל-owned buttons אנחנו רואים בעצם שכל אחד מהם אלה לחצנים שנראים הרבה יותר טוב והרבה יותר גדולים והרבה יותר מותאמים למובייל אם היינו רוצים לקחת לדוגמה לחצנים ולשים אותם
בהדר בואו נסתכל מה קורה אז אם יש לנו פה לחצן ופה עוד לחצן אנחנו רואים שלחצנים בעצם מסתדרים על ה-header בצורה לא הכי אסתטית.
אז איך אנחנו יכולים לטפל בזה? אז מה שאנחנו צריכים לעשות זה להבין שאנחנו לא שמים לחצנים ב-header וגם ב-footer אלא שמים לינקים, כאילו אין צורך ב-data roll. יש לנו פה לינק href מגלוש ל-home buttons וזה נראה קצת יותר אז header גם כן יכול להחזיק לחצנים כנ"ל גם פוטר.
יש לנו פה טיפה בעיות עם jQuery Mobile בגרסה הזאת, בואו נסתכל על זה עוד פעם, ואנחנו רואים שזה טיפה עושה לנו בעיות, אבל מה שאנחנו נעשה, אנחנו נקרא למשהו אחר.
מה שקורה פה בעצם זה שה-Nuget הביא לנו איזושהי גרסה ישנה, בואו נסתכל על ה-Layout ונראה גרסה ישנה של jQuery ו-jQuery Mobile.
מה שמומלץ לעשות זה פשוט להיכנס לאתר של jQuery Mobile, ללכת לאזור דאומלואוד ולהעתיק את שלושת הכישורים האלה שמחליפים את הכישורים של הנאגר יש לנו לינק לקובץ ESS שנמצא ברשת יש לנו סקריפ לגרסת jQuery חדשה יש לנו סקריפ לגרסת jQuery מובייל חדשה
ולכן זה אמור לטפל בבעיה גרסה אחרת של שלושת הלינקים האלה מה שנעשה זה נחליף אותם, ובואו נבצע גלישה מחודשת. רואים שהבעיה טופלה.
אוקיי, אז לפעמים עדיף להשתמש בגרסה של קישור ל-JQuery מובייל לאינטרנט. מותאם יותר לדפדפנים חדשים. אוקיי, אז מה שראינו כרגע זה מספר דברים בנוגע ללחצנים, בואו נראה עוד כמה דברים בנוגע ללחצנים.
דבר ראשון, אם יש לנו לינק, אנחנו יכולים על הלינק או על לחצן אחר להציב אייקון. זה חלק מ-JQuery מובייל. אז יש לנו פה איזשהו data מינוס אייקון בוא נגיד שזה delete יש לנו אייקון של delete אנחנו יכולים להעביר אותו לצד אחר והעברנו אותו לצד ימין אז אלה מספר דברים שניתן לבצע על ידי לחצנים בואו ננסה לבצע כמה דברים אחרים שקשורים בכל הדף
נחזיר action result שמטפל בהדר ובפוטר נגדיר שאנחנו רוצים את אותו מבנה זה ההדר זה הפוטר ומה שאנחנו יכולים להגדיר בהדר זה data.position.fixed.panel בפוטר.
אוקיי, בואו נגלוש לזה, אנחנו נמצאים ב-header.n.footer. נבצע גלישה, ואנחנו רואים שלא משנה מה הגודל של המכשיר, תמיד ההדר מוצמד למעלה והפוטר מוצמד למטה.
בסדר, בואו נראה עוד משהו. אנחנו יכולים להגדיר בקונטנט, או ליתר דיוק בפייג' data.fullscreen.true. ועכשיו, ברגע שאנחנו לוחצים, אנחנו מקבלים את ההדר ואת הפוטר, לחיצה נוספת נותנת לנו את כל הקונטנט.
ובעצם זה מעין UI כזה שנראה טוב במוביילס. אוקיי, מה הדבר הבא? הדבר הבא זה Navigation Bar שיכול להיות בתוך ההדר.
ניצור כאן Action Result, Navigation Bar,