1. סקירה כללית

Spring Mobile הוא הרחבה מודרנית לפופולריות אביב רשת MVC מסגרת המסייעת לפשט את הפיתוח של יישומי אינטרנט, אשר צריכים להיות תואמים באופן מלא או חלקי לפלטפורמות חוצות מכשירים, במאמץ מינימלי ופחות קידוד של צלחת הדוד.

במאמר זה נלמד על פרויקט Spring Mobile ונבנה פרויקט לדוגמא כדי להדגיש את השימושים ב- Spring Mobile.

2. תכונות של Spring Mobile

• זיהוי מכשיר אוטומטי: ל- Spring Mobile שכבת הפשטה של ​​מכשיר לפתרון מכשיר בצד השרת. זה מנתח את כל הבקשות הנכנסות ומגלה פרטי התקן שולח, למשל סוג מכשיר, מערכת הפעלה וכו '
• ניהול העדפות אתרים: באמצעות ניהול העדפות אתרים, Spring Mobile מאפשר למשתמשים לבחור בנייד / טאבלט / תצוגה רגילה של האתר. זו טכניקה מקופחת יחסית על ידי שימוש DeviceDelegatingViewresolver אנו יכולים להתמיד בשכבת התצוגה בהתאם לסוג המכשיר מבלי לדרוש קלט מצד המשתמש
• מחליף אתרים: Site Switcher מסוגל להחליף את המשתמשים באופן אוטומטי לתצוגה המתאימה ביותר בהתאם לסוג המכשיר שלו (כלומר נייד, שולחן עבודה וכו ').
• מנהל תצוגת מודעות מכשיר: בדרך כלל, בהתאם לסוג המכשיר אנו מעבירים את בקשת המשתמש לאתר ספציפי שנועד לטפל במכשיר ספציפי. אביבים ניידים מנהל תצוגה מאפשר למפתח את הגמישות להציב את כל התצוגות בפורמט שהוגדר מראש, ו- Spring Mobile יבצע אוטומטית את התצוגות השונות בהתבסס על סוג המכשיר

3. בניית יישום

בואו ניצור כעת אפליקציית הדגמה באמצעות Spring Mobile עם Spring Boot ו- מנוע תבניות של סמן חופשי ונסה ללכוד את פרטי המכשיר עם כמות מינימלית של קידוד.

3.1. תלות Maven

לפני שנתחיל עלינו להוסיף את התלות הבאה באביב נייד pom.xml:

 org.springframework.mobile-mobile-device-2.0.0.M3 

לידיעתך, התלות האחרונה זמינה במאגר אבני דרך, אז בואו להוסיף את זה לתאריך שלנו pom.xml גם כן:

  אבני דרך באביב אבני דרך באביב //repo.spring.io/libs-milestone false 

3.2. צור תבניות של סמן חופשי

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

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

עלינו ליצור שתי תיקיות בשם 'נייד'ו'לוּחַ'מתחת src / main / resources / templates ושם את קבצי ה- Freemarker בהתאם. המבנה הסופי צריך להיראות כך:

└── src └── ראשי └── משאבים └── תבניות └── index.ftl └── נייד └── index.ftl └── טאבלט └── index.ftl

עכשיו, בוא נניח את הדברים הבאים HTML בְּתוֹך index.ftl קבצים:

בהתאם לסוג המכשיר, נשנה את התוכן בתוך ה-

3.3. לְאַפשֵׁר DeviceDelegatingViewresolver

כדי לאפשר את Spring Mobile DeviceDelegatingViewresolver שירות, עלינו להכניס את הנכס הבא לתוכו application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: נכון 

פונקציונליות להעדפות אתרים מופעלת כברירת מחדל ב- Spring Boot כאשר אתה כולל את המתנע של Spring Mobile. עם זאת, ניתן להשבית אותו על ידי הגדרת המאפיין הבא כ- false:

spring.mobile.sitepreference.enabled: נכון

3.4. הוסף נכסים של סמן חופשי

כדי שאביב אתחול יוכל למצוא ולעבד את התבניות שלנו, עלינו להוסיף את הדברים הבאים שלנו application.properties:

spring.freemarker.template-loader-path: classpath: / templates spring.freemarker.suffix: .ftl

3.5. צור בקר

עכשיו עלינו ליצור בקר בכיתה לטיפול בבקשה הנכנסת. היינו משתמשים בפשטות @GetMapping הערה לטיפול בבקשה:

@Controller מחלקה ציבורית IndexController {@GetMapping ("/") ברכת מחרוזת ציבורית (מכשיר התקן) {String deviceType = "דפדפן"; פלטפורמת מיתרים = "דפדפן"; מחרוזת viewName = "אינדקס"; אם (device.isNormal ()) {deviceType = "דפדפן"; } אחר אם (device.isMobile ()) {deviceType = "mobile"; viewName = "נייד / אינדקס"; } אחר אם (device.isTablet ()) {deviceType = "טאבלט"; viewName = "טאבלט / אינדקס"; } פלטפורמה = device.getDevicePlatform (). שם (); אם (platform.equalsIgnoreCase ("לא ידוע")) {platform = "browser"; } להחזיר viewName; }}

כמה דברים שיש לציין כאן:

• בשיטת מיפוי המטפלים אנו עוברים org.springframework.mobile.device.Device. זהו המידע על המכשיר שהוזרק עם כל בקשה. זה נעשה על ידי DeviceDelegatingViewresolver שהפעלנו ב- apllication.properties
• ה org.springframework.mobile.device.Device יש כמה שיטות מובנות כמו isMobile (), isTablet (), getDevicePlatform () וכו 'באמצעות אלה אנו יכולים ללכוד את כל פרטי המכשיר הדרושים לנו ולהשתמש בו

3.6. Java Config

כדי לאפשר זיהוי מכשירים ביישום אינטרנט של Spring, עלינו להוסיף תצורה מסוימת:

@Configuration מחלקה ציבורית AppConfig מיישם את WebMvcConfigurer {@Bean DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor () {להחזיר DeviceResolverHandlerInterceptor חדש (); } @Bean DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver () {החזר DeviceHandlerMethodArgumentResolver חדש (); } @Override ריקים ציבוריים addInterceptors (InterceptorRegistry registry) {registry.addInterceptor (deviceResolverHandlerInterceptor ()); } @ ביטול חלל ציבורי addArgumentResolvers (רשימת argumentResolvers) {argumentResolvers.add (deviceHandlerMethodArgumentResolver ()); }}

כמעט סיימנו. דבר אחרון לעשות הוא לבנות מחלקת תצורה של Spring Boot כדי להפעיל את היישום:

@SpringBootApplication מחלקה ציבורית יישום {public static void main (String [] args) {SpringApplication.run (Application.class, args); }}

4. בדיקת היישום

לאחר שנתחיל את היישום, הוא יפעל // localhost: 8080.

אנחנו נשתמש מסוף המפתחים של גוגל כרום לחקות סוגים שונים של מכשירים. אנו יכולים לאפשר זאת על ידי לחיצה ctrl + shift + i או על ידי לחיצה F12.

כברירת מחדל, אם נפתח את הדף הראשי, נוכל לראות ש- Spring Web מזהה את המכשיר כדפדפן שולחני. עלינו לראות את התוצאה הבאה:

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

יכולנו לראות תפריט נפתח בפינה השמאלית העליונה של הדפדפן. בתפריט הנפתח אנו יכולים לבחור סוגים שונים של סוג מכשיר. כדי לחקות מכשיר נייד, בואו לבחור ב- Nexus 6P ונרענן את הדף.

ברגע שנרענן את הדף, נבחין כי ה- תוכן הדף משתנה בגלל DeviceDelegatingViewresolver כבר זיהה שהבקשה האחרונה הגיעה ממכשיר נייד. לפיכך, זה עבר את index.ftl קובץ בתוך התיקיה הניידת בתבניות.

הנה התוצאה:

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

כעת נראה אם ​​פונקציונליות של העדפות אתרים פועלת כצפוי או לא.

כדי לדמות תרחיש בזמן אמת שבו המשתמש מעוניין להציג את האתר בצורה ידידותית לנייד, פשוט הוסף את הפרמטר הבא של כתובת ה- URL בסוף כתובת ה- URL המוגדרת כברירת מחדל:

? site_preference = נייד

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

באותו אופן כדי לדמות העדפת טאבלט, פשוט הוסף את הפרמטר הבא של כתובת האתר בסוף כתובת האתר המוגדרת כברירת מחדל:

? site_preference = טאבלט

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

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

5. מסקנה

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

כמו תמיד, קוד המקור המעודכן הסתיים ב- GitHub.