ממשק מותאם למובייל MVC
Mobile באותה תיקייה, ו-MVC בוחר אותו אוטומטית לפי ה-User-Agent של הדפדפן.DisplayModeProvider.Instance.RequiredConsistentDisplayMode = true מונע מצב שבו דף מוצג בגרסה אחת ו-Layout בגרסה אחרת. בלעדיו, כשחסר View למובייל, הדף מוצג בתצוגה מעורבת.DefaultDisplayMode עם תנאי על מחרוזת ה-User-Agent, למשל iPhone ו-iPad, ומקבלים סיומות נפרדות לכל מכשיר.DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone") { ContextCondition = ... }), HttpContext.ClearOverriddenBrowser() ו-SetOverriddenBrowser(...). בכל View למובייל משתמשים באותו שם בסיסי עם הסיומת המתאימה.להורדת קוד מקור של כל הדוגמאות בקורס MVC – לחץ כאן
פרקי ההרצאה: ממשק מותאם למובייל MVC
תמלול ההרצאה: ממשק מותאם למובייל MVC
הטקסט המלא של הדקות הראשונות בהרצאה «ממשק מותאם למובייל MVC» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שראינו איך ניתן לבנות אתר שמותאם למובייל, חשוב לראות איך אנחנו יכולים לבנות אתר אחד שניתן לגלוש אליו גם מדפדפן רגיל, מחשב דסטופ, וגם ממכשיר מובייל עם דפדפן מובייל, והכל בתוך פרויקט mvc אתר אחד ויחיד.
אז קודם כל בואו נבנה קונטרולר רגיל שיש בו איזשהו אקשן רגיל שמותאם לדסטופ. נוסיף כאן קונטרולר, נקרא לו home, יש לנו פה פונקציית אינדקס, נייצר עבורה דיו אינדקס ונגדיר שאנחנו נמצאים בדסטופ אינדקס גם כאן וגם בטייטל.
כעת בואו נבצע גלישה נראה שאנחנו רואים את האתר כמו שצריך אנחנו נמצאים בדסטופ בואו נשלב גם layout מסוים שגם ה-layout יראה לנו שאנחנו בדסטופ.
יש לנו את ה-layout וב-layout נגדיר ב-body איזושהי כותרת אנחנו נמצאים בדסטופ layout נגדיר פה איזשהו אוריזונט על רואו נבצע גלישה ונראה שגם הלייאוט כרגע מוצג כמו שצריך וגם הדסק-טוק מוצג כמו שצריך.
נגדיר אפילו איזשהו סטייל background color light blue לרפרש. נראה שכרגע האתר שלנו נראה בצורה רגילה בדפדפן רגיל.
כעת אנחנו רוצים לבצע התאמה או להציג דף אחר עם לקוח גולש מדפדפן שהוא מותאם למוביילי, דפדפן ששייך למוביילי. אז איך אנחנו עושים את זה? אז יש לנו שתי שיטות.
שיטה אחת אנחנו הולכים לראות בסרטון הזה, שבה אנחנו הולכים לבצע דפים באותו אתר mvc שלנו שמותאמים ספציפית למובייל. ואז אנחנו הולכים לראות איך בדיוק הדפים האלה הולכים להיות מוצגים כאשר הלקוח גולש ממובייל והדפים הרגילים הולכים להיות מוצגים כאשר הלקוח הולך לגלוש מאפליקציית דסטופ רגילה, בכדפן דסטופ רגיל.
השיטה השנייה שאנחנו נראה בסרטון נוסף זה בעצם שיטה שבה אנחנו בונים שני אתרים נפרדים לגמרי, ממש נפרדים, וכל אחד מותאם לסוג דפדפנים אחר.
אחד מותאם לדפדפני דסטופ והשני מותאם לדפדפני מובייל. אז בואו נראה קודם כל בסרטון הזה איך אנחנו יכולים באותו אתר להציג שני viewים שונים כתלות בדפדפן של המשתמש.
בואו נסגור את זה, נסגור הכל וכל מה שאנחנו צריכים לעשות זה לקחת את ה-view שלנו, לבצע copy-paste להדביק אותו ופשוט לשנות לו את השם כך שהוא יהיה אותו השם כמו ה-view המקורי עם הסיומת מובייל וכמובן נקודה CSHTML. כעת אנחנו יכולים לבצע גלישה עם דפדפן מובייל וה-view הזה הספציפי יתבצע.
בואו נרשום ב-view הזה שאנחנו נמצאים במובייל, אין לנו צורך כרגע בכותרת בטייטל ונעשה את אותו הדבר על ה-layout. גם על ה-layout דבר כזה ניתן לבצע.
נגדיר שהלייאוט הוא נקודה מובייל, ניכנס ללייאוט הזה ונגדיר שאנחנו נמצאים במובייל לייאוט. עכשיו בואו נבצע גלישה לאתר ואנחנו רואים שאנחנו בדסטופ.
למה בעצם אנחנו בדסטופ? אז אנחנו בדסטופ בגלל שהדפדופן עצמו מוגדר ככזה ששייך לעולם הדסטופ. אינטרנט אקספלורר 10 רגיל לגמרי. בואו נלחץ על F12, נגיע ל-Development Tools.
ב-Development Tools אנחנו יכולים לגשת ל-Tools ולשנות את היוזר אייג'נט. היוזר אייג'נט בעצם מאפשר לנו לקבוע איזה סוג דפדפן עכשיו מתבצעת גלישה עבורו.
ובואו נלך כרגע לדפדפן אייפון. ואנחנו הגדרנו שאנחנו כרגע ביוזר אייג'נט אייפון, כאילו שאנחנו גולשים מתוך אייפון. ונבצע רפרש, ונראה אוטומטית שעברנו למובייל.
אם אנחנו נחזיר את זה בחזרה לדפולט, נבצע רפרש, נראה שאנחנו בדסטרופ. זאת אומרת שמה שקרה כאן בעצם זה שהפרויקט MVC יודע אוטומטית לזהות את ה-user agent ולפי זה להביא את ה-view המתאים.
במידה ואנחנו בדפדפן דסטופ רגיל ואנחנו גולשים ל-view index או ליתר דיוק ל-action index, בוא נניח נמצאת ב-controller home, פרויקט MVC יאתר בתיקיית home של views את ה-view index.cshtnl ואותה הוא ירנדר ללקוח.
במידה ואנחנו גולשים לאותה אקשן מיפ הדכדפן שהוא שייך למובייל אז פרויקט mvc אוטומטית ייתר לנו את אותו ה-view אבל עם הסיומת מובייל ויחזיר את זה למשתמש.
אז בואו לצורך הדוגמה נשנה את הלייאוט של מובייל לכזאת שתצליח להציג לנו גם איזשהו jQuery שמותאם למובייל.
בואו ניכנס רגע ל-jQuery מובייל נלך ל-Downloads ונבצע הורדה של שלושת הלינקים שאנחנו צריכים להגדיר למשתמש בכדי שהוא יוכל לראות את jQuery Mobile.
ניתן לראות את הלינקים כאן, נבצע קונטרול C, נדביק אותם ב-Layout אבל שימו לב שאנחנו נמצאים ב-Layout של ה-Mobile.
ה-Layout הרגיל יהיה מוגדר שם כנראה jQuery רגיל. כעת נחזור ל-Index של מובייל ונגדיר פה מבנה של דף שמתאים למובייל. יש לנו דיו דאטה רול h דיו עם דאטה רול הדר דיו עם דאטה רול קונטנט ועוד אחד עם פוטר וכעת את ה-h2 הזאת נשים בהדר ואנחנו רואים בעצם שאנחנו ביצענו עכשיו איזשהו ui שמתאים למובייל ב-view
שמתאים למובייל אוקיי אז יש לנו פה את הקונטנט בואו נבצע גלישה אנחנו חזרנו לדסטופ רגיל, F12, Tools, User Agent, אייפון.
נרפרש את הדף ונגיע כרגע לדף שמותאם למובייל. בואו נוסיף כאן פוטר כלשהו, נניח קופירייטס, פרש ולהלן אפליקציית מובייל או אתר שמותאם למובייל, כאשר המשתמש גולש ב-user agent שמותאם למובייל.
משתמש אחר גולש לאותו אתר עם דפדפן רגיל ומקבל את הדף הרגיל. ובעצם זאת השיטה הפשוטה ביותר לבצע גלישה לדפים שמותאמים לסוג של הדפדפן.
אבל מה קורה אם יש לנו לדוגמה איזשהו view שמותאם רק לאחד מהם? בואו נסתכל רגע. נניח שאנחנו הולכים ובונים איזשהו view, נתחיל עם האקשן,