1. Prehľad

Spring Mobile je moderné rozšírenie k populárnemu Jarný web MVC rámec, ktorý pomáha zjednodušiť vývoj webových aplikácií, ktoré musia byť úplne alebo čiastočne kompatibilné s platformami pre rôzne zariadenia, s minimálnym úsilím a menším počtom kódovaní.

V tomto článku sa dozvieme niečo o projekte Spring Mobile a vytvorili by sme ukážkový projekt, ktorý by zdôraznil použitie Spring Mobile.

2. Vlastnosti Spring Mobile

• Automatická detekcia zariadenia: Spring Mobile má vstavanú abstrakčnú vrstvu na strane servera, ktorá rieši zariadenie. Toto analyzuje všetky prichádzajúce požiadavky a zisťuje informácie o zariadení odosielateľa, napríklad typ zariadenia, operačný systém atď
• Správa preferencií stránok: Spring Management pomocou správy preferencií stránok umožňuje používateľom zvoliť si mobilné / tabletové / bežné zobrazenie webových stránok. Je to pomerne zastaraná technika, pretože používaním DeviceDelegatingViewresolver môžeme zachovať vrstvu zobrazenia v závislosti od typu zariadenia bez toho, aby sme vyžadovali akýkoľvek vstup zo strany používateľa
• Prepínač stránok: Site Switcher je schopný automaticky prepnúť používateľov na najvhodnejšie zobrazenie podľa typu jeho zariadenia (napr. Mobilného počítača, počítača atď.)
• Správca zobrazenia podľa zariadenia: Zvyčajne v závislosti od typu zariadenia pošleme žiadosť používateľa na konkrétny web určený na spracovanie konkrétneho zariadenia. Spring Mobile Zobraziť správcu umožňuje vývojárom flexibilitu dať všetky zobrazenia do vopred definovaného formátu a Spring Mobile by automaticky spravoval rôzne zobrazenia na základe typu zariadenia

3. Vytvorenie aplikácie

Poďme si teraz vytvoriť ukážkovú aplikáciu pomocou Spring Mobile s Spring Boot a Freemarker Template Engine a pokúste sa zachytiť podrobnosti zariadenia s minimálnym počtom kódovania.

3.1. Maven závislosti

Predtým, ako začneme, musíme pridať nasledujúcu závislosť Spring Mobile do pom.xml:

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

Upozorňujeme, že najnovšia závislosť je k dispozícii v úložisku Spring Milestones, takže si ju pridajme do nášho pom.xml tiež:

  jarné míľniky Jarné míľniky //repo.spring.io/libs-milestone false 

3.2. Vytvárajte šablóny značiek zadarmo

Najskôr vytvoríme našu indexovú stránku pomocou nástroja Freemarker. Nezabudnite uviesť nevyhnutnú závislosť, ktorá umožní automatickú konfiguráciu programu Freemarker.

Pretože sa snažíme zistiť zariadenie odosielateľa a podľa toho smerovať požiadavku, musíme na vyriešenie problému vytvoriť tri samostatné súbory Freemarker; jeden na vybavenie mobilnej žiadosti, druhý na vybavenie tabletu a posledný (predvolený) na vybavenie bežnej požiadavky prehľadávača.

Musíme vytvoriť dva priečinky s názvommobilné„A“tabletu„Pod src / main / resources / templates a podľa toho vložte súbory Freemarker. Výsledná štruktúra by mala vyzerať takto:

└── src └── hlavní └── zdroje └── šablóny └── index.ftl └── mobil └── index.ftl └── tablet └── index.ftl

Teraz poďme na to HTML vo vnútri index.ftl súbory:

V závislosti od typu zariadenia zmeníme obsah vo vnútri

3.3. Povoliť DeviceDelegatingViewresolver

Ak chcete povoliť Spring Mobile DeviceDelegatingViewresolver službu, musíme vložiť nasledujúcu vlastnosť dovnútra application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true 

Funkcia preferencií stránok je v Spring Boot predvolene povolená, keď zahrniete Spring Mobile starter. Dá sa to však zakázať nastavením nasledujúcej vlastnosti na hodnotu false:

spring.mobile.sitepreference.enabled: true

3.4. Pridajte vlastnosti značky Freemarker

Aby Spring Boot dokázalo nájsť a vykresliť naše šablóny, musíme do našej pridať nasledujúce application.properties:

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

3.5. Vytvorte radič

Teraz musíme vytvoriť Kontrolór triedy na vybavenie prichádzajúcej požiadavky. Použili by sme jednoduché @GetMapping anotácia na vybavenie žiadosti:

@Controller verejná trieda IndexController {@GetMapping ("/") public String pozdrav (zariadenie zariadenia) {String deviceType = "browser"; Reťazcová platforma = "prehliadač"; Reťazec viewName = "index"; if (device.isNormal ()) {deviceType = "prehliadač"; } else if (device.isMobile ()) {deviceType = "mobile"; viewName = "mobile / index"; } else if (device.isTablet ()) {deviceType = "tablet"; viewName = "tablet / index"; } platforma = device.getDevicePlatform (). name (); if (platform.equalsIgnoreCase ("UNKNOWN")) {platform = "prehliadač"; } návrat viewName; }}

Tu je treba poznamenať niekoľko vecí:

• V metóde mapovania obsluhy prechádzame org.springframework.mobile.device.Device. Toto sú informácie o vloženom zariadení pri každej žiadosti. Toto sa deje pomocou DeviceDelegatingViewresolver ktoré sme povolili v apllication.properties
• The org.springframework.mobile.device.Device má niekoľko vstavaných metód ako isMobile (), isTablet (), getDevicePlatform () Pomocou nich môžeme zachytiť všetky potrebné informácie o zariadení a použiť ich

3.6. Konfigurácia Java

Ak chcete povoliť detekciu zariadení vo webovej aplikácii Spring, musíme tiež pridať určitú konfiguráciu:

@Configuration verejná trieda AppConfig implementuje WebMvcConfigurer {@Bean public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor () {vrátiť nový DeviceResolverHandlerInterceptor (); } @Bean public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver () {vrátiť nové DeviceHandlerMethodArgumentResolver (); } @Override public void addInterceptors (InterceptorRegistry registry) {registry.addInterceptor (deviceResolverHandlerInterceptor ()); } @Override public void addArgumentResolvers (List argumentResolvers) {argumentResolvers.add (deviceHandlerMethodArgumentResolver ()); }}

Sme skoro hotoví. Posledná vec, ktorú musíte urobiť, je zostaviť konfiguračnú triedu Spring Boot na spustenie aplikácie:

@SpringBootApplication verejná trieda Aplikácia {public static void main (String [] args) {SpringApplication.run (Application.class, args); }}

4. Testovanie aplikácie

Po spustení bude aplikácia bežať ďalej // localhost: 8080.

Použijeme Konzola pre vývojárov prehliadača Google Chrome emulovať rôzne druhy zariadení. Môžeme to povoliť stlačením ctrl + shift + i alebo stlačením F12.

V predvolenom nastavení, ak otvoríme hlavnú stránku, sme mohli vidieť, že Spring Web detekuje zariadenie ako prehliadač pre stolné počítače. Mali by sme vidieť nasledujúci výsledok:

Teraz na paneli konzoly klikneme na druhú ikonu vľavo hore. Umožnilo by to mobilné zobrazenie prehliadača.

V ľavom hornom rohu prehliadača sme videli rozbaľovaciu ponuku. V rozbaľovacej ponuke môžeme zvoliť rôzne druhy typov zariadení. Ak chcete emulovať mobilné zariadenie, vyberte si Nexus 6P a obnovte stránku.

Hneď ako obnovíme stránku, všimneme si, že obsah stránky sa mení, pretože DeviceDelegatingViewresolver už zistil, že posledná požiadavka pochádza z mobilného zariadenia. Preto to prešlo index.ftl súbor v mobilnom priečinku v šablónach.

Výsledok:

Rovnakým spôsobom ideme emulovať aj tabletovú verziu. Z rozbaľovacej ponuky vyberieme iPad rovnako ako naposledy a obnovíme stránku. Obsah by sa zmenil a malo by sa s ním zaobchádzať ako so zobrazením tabletu:

Teraz uvidíme, či funkčnosť preferencie stránok funguje podľa očakávania alebo nie.

Ak chcete simulovať scenár v reálnom čase, keď chce používateľ zobraziť web mobilným spôsobom, stačí na koniec predvolenej adresy URL pridať nasledujúci parameter URL:

? site_preference = mobile

Po obnovení by sa malo zobrazenie automaticky presunúť do mobilného zobrazenia, t. J. Nasledujúci text by sa zobrazil „Ste v mobilnej verzii“.

Rovnakým spôsobom, ako simulovať preferencie tabletu, stačí pridať nasledujúci parameter adresy URL na koniec predvolenej adresy URL:

? site_preference = tablet

Rovnako ako naposledy by sa malo zobrazenie automaticky obnoviť na zobrazenie tabletu.

Upozorňujeme, že predvolená adresa URL zostane rovnaká. Ak používateľ znova prejde predvolenou adresou URL, bude presmerovaný na príslušné zobrazenie na základe typu zariadenia.

5. Záver

Práve sme vytvorili webovú aplikáciu a implementovali sme multiplatformovú funkcionalitu. Z hľadiska produktivity je to ohromné ​​zvýšenie výkonu. Aplikácia Spring Mobile eliminuje množstvo front-endových skriptov na prácu s rôznymi prehliadačmi, čím skracuje čas potrebný na vývoj.

Aktualizované zdrojové kódy sú ako vždy na GitHube.