1. Pregled

Spring Mobile je moderno proširenje popularnog Proljetni web MVC okvir koji pomaže pojednostaviti razvoj web aplikacija, koje moraju biti u potpunosti ili djelomično kompatibilne s platformama za više uređaja, uz minimalan napor i manje kodiranja.

U ovom ćemo članku naučiti o projektu Spring Mobile i napravili bismo uzorak projekta kako bismo istakli upotrebu Spring Mobilea.

2. Značajke Spring Mobilea

• Automatsko otkrivanje uređaja: Spring Mobile ima ugrađeni sloj apstrakcije razrješivača uređaja na strani poslužitelja. Ovo analizira sve dolazne zahtjeve i otkriva podatke o uređaju pošiljatelja, na primjer, vrstu uređaja, operativni sustav itd
• Upravljanje postavkama web mjesta: Korištenjem Upravljanja postavkama web mjesta, Spring Mobile omogućava korisnicima da odaberu mobitel / tablet / uobičajeni prikaz web stranice. To je relativno zastarjela tehnika jer pomoću DeviceDelegatingViewresolver možemo zadržati sloj prikaza ovisno o vrsti uređaja bez potrebe za bilo kakvim unosom od strane korisnika
• Prebacivač web mjesta: Site Switcher sposoban je automatski prebaciti korisnike na najprikladniji prikaz u skladu s njegovom / njenom vrstom uređaja (tj. Mobilni, stolni itd.)
• Upravitelj prikaza uređaja svjestan uređaja: Obično, ovisno o vrsti uređaja, prosljeđujemo korisnički zahtjev na određeno web mjesto namijenjeno rukovanju određenim uređajem. Spring Mobile's View Manager omogućuje programeru fleksibilnost da stavi sve poglede u unaprijed definirani format, a Spring Mobile će automatski upravljati različitim pogledima na temelju vrste uređaja

3. Izrada aplikacije

Stvorimo sada demo aplikaciju pomoću Spring Mobile-a s Spring Boot-om i Freemarker Template Engine i pokušajte uhvatiti detalje uređaja s minimalnom količinom kodiranja.

3.1. Ovisnosti Mavena

Prije nego što započnemo, moramo dodati sljedeću ovisnost Spring Mobilea u pom.xml:

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

Imajte na umu da je najnovija ovisnost dostupna u spremištu Spring Milestones, pa dodajmo ovo u naš pom.xml također:

  proljetne prekretnice Proljetne prekretnice //repo.spring.io/libs-milestone false 

3.2. Stvorite Freemarker predloške

Prvo, kreirajmo našu indeksnu stranicu pomoću Freemarkara. Ne zaboravite staviti potrebnu ovisnost kako biste omogućili automatsku konfiguraciju za Freemarker.

Budući da pokušavamo otkriti uređaj pošiljatelja i u skladu s tim usmjeriti zahtjev, trebamo stvoriti tri zasebne Freemarker datoteke kako bismo to riješili; jedan za obradu mobilnog zahtjeva, drugi za obradu tableta i posljednji (zadani) za obradu uobičajenog zahtjeva preglednika.

Moramo stvoriti dvije mape pod nazivom 'mobilni'I'tableta' pod, ispod src / main / resources / predlošci i u skladu s tim stavite datoteke Freemarker. Konačna struktura trebala bi izgledati ovako:

└── src └── glavni └── resursi └── predlošci └── index.ftl └── mobilni └── index.ftl └── tablet └── index.ftl

Stavimo sada sljedeće HTML iznutra indeks.ftl datoteke:

Ovisno o vrsti uređaja, promijenit ćemo sadržaj unutar

3.3. Omogućiti DeviceDelegatingViewresolver

Da biste omogućili Spring Mobile DeviceDelegatingViewresolver uslugu, trebamo staviti sljedeće svojstvo unutra svojstva.svojstva:

spring.mobile.devicedelegatingviewresolver.enabled: true 

Funkcija postavki web mjesta omogućena je prema zadanim postavkama u Spring Boot-u kada uključite Spring Mobile starter. Međutim, to se može onemogućiti postavljanjem sljedećeg svojstva na false:

proljeće.mobilnost.preferencija mjesta.omogućeno: istina

3.4. Dodajte svojstva Freemarker

Da bi Spring Boot mogao pronaći i prikazati naše predloške, u naše moramo dodati sljedeće primjena.svojstva:

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

3.5. Stvorite kontroler

Sada moramo stvoriti Kontroler klasa za obradu dolaznog zahtjeva. Koristili bismo jednostavno @GetMapping napomena za obradu zahtjeva:

@Controller javna klasa IndexController {@GetMapping ("/") javni pozdrav niza (Uređaj uređaja) {String deviceType = "browser"; Niz platforme = "preglednik"; Niz niza pogleda = "indeks"; if (device.isNormal ()) {deviceType = "browser"; } inače if (device.isMobile ()) {deviceType = "mobile"; viewName = "mobile / index"; } inače if (device.isTablet ()) {deviceType = "tablet"; viewName = "tablet / indeks"; } platforma = device.getDevicePlatform (). name (); if (platforma.equalsIgnoreCase ("UNKNOWN")) {platform = "browser"; } povratak viewName; }}

Ovdje treba napomenuti nekoliko stvari:

• U načinu mapiranja rukovatelja prolazimo org.springframework.mobile.device.Device. Ovo su informacije o ubrizganom uređaju uz svaki zahtjev. To čini DeviceDelegatingViewresolver što smo omogućili u aplikacija.svojstva
• The org.springframework.mobile.device.Device ima nekoliko ugrađenih metoda poput isMobile (), isTablet (), getDevicePlatform () itd. Pomoću njih možemo uhvatiti sve podatke o uređaju koji su nam potrebni i koristiti ih

3.6. Java Config

Da bismo omogućili otkrivanje uređaja u Spring aplikaciji, trebamo dodati i neke konfiguracije:

@Configuration javna klasa AppConfig implementira WebMvcConfigurer {@Bean public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor () {return new DeviceResolverHandlerInterceptor (); } @Bean public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver () {return new DeviceHandlerMethodArgumentResolver (); } @Override public void addInterceptors (registar InterceptorRegistry) {registry.addInterceptor (deviceResolverHandlerInterceptor ()); } @Override public void addArgumentResolvers (Popis argumentResolvers) {argumentResolvers.add (deviceHandlerMethodArgumentResolver ()); }}

Skoro smo gotovi. Posljednje što treba učiniti je izgraditi klasu konfiguracije Spring Boot za pokretanje aplikacije:

@SpringBootApplication javna klasa Application {public static void main (String [] args) {SpringApplication.run (Application.class, args); }}

4. Testiranje aplikacije

Jednom kad pokrenemo aplikaciju, ona će se pokretati // localhost: 8080.

Koristit ćemo Konzola za programere Google Chromea oponašati različite vrste uređaja. Možemo ga omogućiti pritiskom na ctrl + shift + i ili pritiskom F12.

Prema zadanim postavkama, ako otvorimo glavnu stranicu, mogli bismo vidjeti da Spring Web otkriva uređaj kao preglednik na radnoj površini. Trebali bismo vidjeti sljedeći rezultat:

Sada, na ploči konzole, kliknite drugu ikonu u gornjem lijevom kutu. Omogućio bi mobilni prikaz preglednika.

Mogli smo vidjeti padajući meni u gornjem lijevom kutu preglednika. U padajućem izborniku možemo odabrati različite vrste uređaja. Da bismo oponašali mobilni uređaj, odaberite Nexus 6P i osvježite stranicu.

Čim osvježimo stranicu, primijetit ćemo da sadržaj stranice se mijenja jer DeviceDelegatingViewresolver je već otkrio da je zadnji zahtjev stigao s mobilnog uređaja. Stoga je prošlo indeks.ftl datoteka u mobilnoj mapi u predlošcima.

Evo rezultata:

Na isti ćemo način oponašati verziju tableta. Odaberimo iPad s padajućeg izbornika baš kao i prošli put i osvježimo stranicu. Sadržaj bi se promijenio i trebao bi se tretirati kao prikaz tableta:

Sad ćemo vidjeti funkcionira li funkcija Postavke web-mjesta prema očekivanjima ili ne.

Da biste simulirali scenarij u stvarnom vremenu u kojem korisnik želi pregledati web mjesto na mobilni način, samo dodajte sljedeći parametar URL-a na kraj zadanog URL-a:

? site_preference = mobile

Jednom kad se osvježi, prikaz bi se trebao automatski premjestiti u mobilni prikaz, tj. Prikazat će se sljedeći tekst "Vi ste u mobilnoj verziji".

Na isti način da simulirate preferencije tableta, samo dodajte sljedeći parametar URL-a na kraj zadanog URL-a:

? site_preference = tablet

I kao i prošli put, prikaz bi se trebao automatski osvježiti u prikaz tableta.

Imajte na umu da će zadani URL ostati isti, a ako korisnik ponovno prođe kroz zadani URL, korisnik će biti preusmjeren na odgovarajući prikaz na temelju vrste uređaja.

5. Zaključak

Upravo smo stvorili web aplikaciju i implementirali funkcionalnost više platformi. Iz perspektive produktivnosti, to je izuzetno poboljšanje performansi. Spring Mobile eliminira mnoge front-end skripte za rukovanje ponašanjem različitih preglednika, smanjujući tako vrijeme razvoja.

Kao i uvijek, ažurirani izvorni kod je gotov na GitHub-u.