1. Oversikt

Spring Mobile er en moderne utvidelse av det populære Spring Web MVC rammeverk som hjelper til med å forenkle utviklingen av webapplikasjoner, som må være helt eller delvis kompatible med plattformer med flere enheter, med minimal innsats og mindre koding av kjeleplaten.

I denne artikkelen vil vi lære om Spring Mobile-prosjektet, og vi vil bygge et prøveprosjekt for å markere bruken av Spring Mobile.

2. Funksjoner i Spring Mobile

• Automatisk enhetsdeteksjon: Spring Mobile har innebygd abstraksjonslag for enhetsoppløseren på serversiden. Dette analyserer alle innkommende forespørsler og oppdager informasjon om avsenderenhet, for eksempel en enhetstype, et operativsystem osv
• Administrasjon av nettstedsinnstillinger: Ved hjelp av Site Preferences Management lar Spring Mobile brukerne velge mobil / nettbrett / normal visning av nettstedet. Det er relativt avviklet teknikk siden ved hjelp av DeviceDelegatingViewresolver vi kan vedvare visningslaget avhengig av enhetstypen uten å kreve noen innspill fra brukerens side
• Site Switcher: Site Switcher er i stand til automatisk å bytte brukerne til den mest passende visningen i henhold til hans / hennes enhetstype (dvs. mobil, stasjonær, etc.)
• Device Aware View Manager: Avhengig av enhetstype videresender vi vanligvis brukerforespørselen til et bestemt nettsted ment å håndtere spesifikk enhet. Spring Mobile's Vis manager lar utvikleren fleksibiliteten til å plassere alle visningene i forhåndsdefinert format, og Spring Mobile vil automatisk skille de forskjellige visningene basert på enhetstype

3. Bygg en applikasjon

La oss nå lage en demo-applikasjon ved hjelp av Spring Mobile med Spring Boot og Freemarker malmotor og prøv å fange inn enhetsdetaljer med en minimal mengde koding.

3.1. Maven avhengigheter

Før vi begynner, må vi legge til følgende Spring Mobile-avhengighet i pom.xml:

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

Vær oppmerksom på at den siste avhengigheten er tilgjengelig i Spring Milestones repository, så la oss legge til dette i vårt pom.xml også:

  vår-milepæler Vår-milepæler //repo.spring.io/libs-milestone false 

3.2. Opprett Freemarker-maler

La oss først lage vår indeksside ved hjelp av Freemarker. Ikke glem å legge til nødvendig avhengighet for å aktivere autokonfigurasjon for Freemarker.

Siden vi prøver å oppdage avsenderenheten og rute forespørselen deretter, må vi opprette tre separate Freemarker-filer for å løse dette; en til å håndtere en mobilforespørsel, en annen til å håndtere nettbrett og den siste (standard) for å håndtere vanlig nettleserforespørsel.

Vi må opprette to mapper med navnet ‘mobil‘Og‘tablett‘Under src / hoved / ressurser / maler og legg Freemarker-filene deretter. Den endelige strukturen skal se slik ut:

└── src └── hoved └── ressurser └── maler └── index.ftl └── mobil └── index.ftl └── tablett └── index.ftl

La oss sette følgende: HTML innsiden index.ftl filer:

Avhengig av enhetstype, endrer vi innholdet i

3.3. Muliggjøre DeviceDelegatingViewresolver

For å aktivere Spring Mobile DeviceDelegatingViewresolver service, må vi plassere følgende eiendom inne application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true 

Nettstedsinnstillingsfunksjonalitet er aktivert som standard i Spring Boot når du inkluderer Spring Mobile-starter. Det kan imidlertid deaktiveres ved å sette følgende egenskap til false:

spring.mobile.sitepreference.enabled: true

3.4. Legg til Freemarker Properties

For at Spring Boot skal kunne finne og gjengi malene våre, må vi legge til følgende i vår application.properties:

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

3.5. Lag en kontroller

Nå må vi lage en Kontroller klasse for å håndtere den innkommende forespørselen. Vi bruker enkelt @GetMapping kommentar for å håndtere forespørselen:

@Controller public class IndexController {@GetMapping ("/") public String greeting (Device device) {String deviceType = "browser"; Strengplattform = "nettleser"; String viewName = "indeks"; hvis (device.isNormal ()) {deviceType = "browser"; } annet hvis (device.isMobile ()) {deviceType = "mobile"; viewName = "mobil / indeks"; } annet hvis (device.isTablet ()) {deviceType = "nettbrett"; viewName = "nettbrett / indeks"; } plattform = device.getDevicePlatform (). navn (); if (platform.equalsIgnoreCase ("UNKNOWN")) {platform = "browser"; } returner viewName; }}

Et par ting å merke seg her:

• I behandlerkartleggingsmetoden passerer vi org.springframework.mobile.device.Device. Dette er informasjonen om den injiserte enheten med hver forespørsel. Dette gjøres av DeviceDelegatingViewresolver som vi har aktivert i applikasjon.egenskaper
• De org.springframework.mobile.device.Device har et par innebygde metoder som isMobile (), isTablet (), getDevicePlatform () osv. Ved å bruke disse kan vi fange all informasjon om enheten vi trenger og bruke den

3.6. Java Config

For å aktivere enhetsgjenkjenning i en Spring-webapplikasjon, må vi også legge til noen konfigurasjoner:

@Configuration offentlig klasse AppConfig implementerer WebMvcConfigurer {@Bean public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor () {returner ny DeviceResolverHandlerInterceptor (); } @Bean public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver () {returner ny DeviceHandlerMethodArgumentResolver (); } @Override public void addInterceptors (InterceptorRegistry registry) {registry.addInterceptor (deviceResolverHandlerInterceptor ()); } @ Override public void addArgumentResolvers (List argumentResolvers) {argumentResolvers.add (deviceHandlerMethodArgumentResolver ()); }}

Vi er nesten ferdige. En siste ting å gjøre er å bygge en Spring Boot-konfigurasjonsklasse for å starte applikasjonen:

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

4. Testing av applikasjonen

Når vi starter applikasjonen, kjører den videre // lokal vert: 8080.

Vi vil bruke Google Chromes utviklerkonsoll å etterligne forskjellige typer enheter. Vi kan aktivere det ved å trykke ctrl + skift + i eller ved å trykke på F12.

Som standard, hvis vi åpner hovedsiden, kunne vi se at Spring Web oppdager enheten som en stasjonær nettleser. Vi bør se følgende resultat:

Nå, på konsollpanelet, klikker vi på det andre ikonet øverst til venstre. Det ville muliggjøre en mobilvisning av nettleseren.

Vi kunne se en rullegardinmeny øverst til venstre i nettleseren. I rullegardinmenyen kan vi velge forskjellige typer enhetstype. For å etterligne en mobilenhet, la oss velge Nexus 6P og oppdatere siden.

Så snart vi oppdaterer siden, merker vi at innholdet på siden endres fordi DeviceDelegatingViewresolver har allerede oppdaget at den siste forespørselen kom fra en mobil enhet. Derfor passerte den index.ftl filen inne i mobilmappen i malene.

Her er resultatet:

På samme måte skal vi etterligne en nettbrettversjon. La oss velge iPad fra rullegardinmenyen akkurat som forrige gang, og oppdater siden. Innholdet vil bli endret, og det bør behandles som en nettbrettvisning:

Nå får vi se om funksjonen for nettstedsinnstillinger fungerer som forventet eller ikke.

For å simulere et sanntidsscenario der brukeren vil se nettstedet på en mobilvennlig måte, er det bare å legge til følgende URL-parameter på slutten av standard URL:

? site_preference = mobil

Når den er oppdatert, skal visningen flyttes automatisk til mobilvisning, dvs. følgende tekst vil vises 'Du er i mobilversjon'.

På samme måte for å simulere nettbrettpreferanse, er det bare å legge til følgende URL-parameter på slutten av standard URL:

? site_preference = nettbrett

Og akkurat som sist, bør visningen oppdateres automatisk til nettbrettvisning.

Vær oppmerksom på at standard URL vil forbli den samme, og hvis brukeren igjen går gjennom standard URL, vil brukeren bli omdirigert til respektive visning basert på enhetstype.

5. Konklusjon

Vi har nettopp opprettet en webapplikasjon og implementert plattformfunksjonaliteten. Fra produktivitetsperspektivet er det et enormt ytelsesløft. Spring Mobile eliminerer mange front-end-skript for å håndtere atferd på tvers av nettlesere, og reduserer utviklingstiden.

Som alltid er oppdatert kildekode over på GitHub.