1. Oversigt

Spring Mobile er en moderne udvidelse til det populære Spring Web MVC ramme, der hjælper med at forenkle udviklingen af ​​webapplikationer, som skal være helt eller delvist kompatible med platforme på tværs af enheder med minimal indsats og mindre kedelpladekodning.

I denne artikel lærer vi om Spring Mobile-projektet, og vi vil oprette et eksempelprojekt for at fremhæve anvendelser af Spring Mobile.

2. Funktioner i Spring Mobile

• Automatisk enhedsregistrering: Spring Mobile har indbygget abstraktionslag til enhedsopløsning på serversiden. Dette analyserer alle indgående anmodninger og registrerer oplysninger om afsenderenheder, f.eks. En enhedstype, et operativsystem osv
• Webstedspræferencestyring: Ved hjælp af Site Preference Management giver Spring Mobile brugerne mulighed for at vælge mobil / tablet / normal visning af hjemmesiden. Det er forholdsvis forældet teknik siden ved hjælp af DeviceDelegatingViewresolver vi kan fortsætte visningslaget afhængigt af enhedstypen uden at kræve input fra brugersiden
• Site Switcher: Site Switcher er i stand til automatisk at skifte brugerne til den mest passende visning i henhold til hans / hendes enhedstype (dvs. mobil, desktop osv.)
• Device Aware View Manager: Afhængigt af enhedstype videresender vi normalt brugeranmodningen til et specifikt sted, der er beregnet til at håndtere specifik enhed. Spring Mobile's Vis manager giver udvikleren fleksibilitet til at sætte alle visningerne i foruddefineret format, og Spring Mobile ville automatisk skabte de forskellige visninger baseret på enhedstype

3. Opbygning af en applikation

Lad os nu oprette en demo-applikation ved hjælp af Spring Mobile med Spring Boot og Freemarker skabelonmotor og prøv at fange enhedsoplysninger med en minimal mængde kodning.

3.1. Maven afhængigheder

Før vi starter, skal vi tilføje følgende Spring Mobile-afhængighed i pom.xml:

 org.springframework.mobile fjeder-mobil-enhed 2.0.0.M3 

Bemærk, at den seneste afhængighed er tilgængelig i Spring Milestones repository, så lad os tilføje dette i vores pom.xml såvel:

  forårsmilepæle Forårsmilepæle //repo.spring.io/libs-milestone false 

3.2. Opret Freemarker-skabeloner

Lad os først oprette vores indeksside ved hjælp af Freemarker. Glem ikke at sætte den nødvendige afhængighed for at aktivere autokonfiguration til Freemarker.

Da vi prøver at opdage afsenderenheden og rute anmodningen i overensstemmelse hermed, skal vi oprette tre separate Freemarker-filer for at løse dette; en til at håndtere en mobilanmodning, en anden til at håndtere tablet og den sidste (standard) til at håndtere normal browseranmodning.

Vi skal oprette to mapper med navnet 'mobil'Og'tablet'Under src / main / ressourcer / skabeloner og sæt Freemarker-filerne i overensstemmelse hermed. Den endelige struktur skal se sådan ud:

└── src └── hoved └── ressourcer └── skabeloner └── index.ftl └── mobil └── index.ftl └── tablet └── index.ftl

Lad os nu sætte følgende HTML inde index.ftl filer:

Afhængigt af enhedstype ændrer vi indholdet i

3.3. Aktiver DeviceDelegatingViewresolver

For at aktivere Spring Mobile DeviceDelegatingViewresolver service, skal vi placere følgende ejendom indeni application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true 

Funktioner til webstedsindstillinger er som standard aktiveret i Spring Boot, når du inkluderer Spring Mobile-starter. Det kan dog deaktiveres ved at indstille følgende egenskab til falsk:

spring.mobile.sitepreference.enabled: true

3.4. Tilføj Freemarker Properties

For at Spring Boot skal kunne finde og gengive vores skabeloner, skal vi tilføje følgende til vores application.properties:

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

3.5. Opret en controller

Nu skal vi oprette en Controller klasse til at håndtere den indgående anmodning. Vi bruger simpelt @GetMapping kommentar til at håndtere anmodningen:

@Controller public class IndexController {@GetMapping ("/") public String greeting (Device device) {String deviceType = "browser"; Strengplatform = "browser"; String viewName = "index"; hvis (device.isNormal ()) {deviceType = "browser"; } ellers hvis (device.isMobile ()) {deviceType = "mobile"; viewName = "mobil / indeks"; } ellers hvis (device.isTablet ()) {deviceType = "tablet"; viewName = "tablet / indeks"; } platform = device.getDevicePlatform (). navn (); hvis (platform.equalsIgnoreCase ("Ukendt")) {platform = "browser"; } returner viewName; }}

Et par ting at bemærke her:

• I handlerkortlægningsmetoden passerer vi org.springframework.mobile.device.Device. Dette er den indsprøjtede enhedsinformation med hver anmodning. Dette gøres af DeviceDelegatingViewresolver som vi har aktiveret i apllication.properties
• Det org.springframework.mobile.device.Device har et par indbyggede metoder som isMobile (), isTablet (), getDevicePlatform () osv. Ved hjælp af disse kan vi registrere al den information, vi har brug for, og bruge den

3.6. Java Config

For at aktivere enhedsregistrering i en Spring-webapplikation skal vi også tilføje nogle konfigurationer:

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

Vi er næsten færdige. En sidste ting at gøre er at oprette en Spring Boot-konfigurationsklasse for at starte applikationen:

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

4. Test af applikationen

Når vi starter applikationen, kører den videre // localhost: 8080.

Vi bruger Google Chromes udviklerkonsol at efterligne forskellige slags enheder. Vi kan aktivere det ved at trykke på ctrl + skift + i eller ved at trykke på F12.

Som standard, hvis vi åbner hovedsiden, kunne vi se, at Spring Web registrerer enheden som en desktop-browser. Vi skulle se følgende resultat:

Nu på konsolpanelet klikker vi på det andet ikon øverst til venstre. Det ville muliggøre en mobil visning af browseren.

Vi kunne se en rullemenu i øverste venstre hjørne af browseren. I rullemenuen kan vi vælge forskellige typer enhedstype. Lad os vælge Nexus 6P og opdatere siden for at efterligne en mobilenhed.

Så snart vi opdaterer siden, bemærker vi, at sidens indhold ændres, fordi DeviceDelegatingViewresolver har allerede registreret, at den sidste anmodning kom fra en mobilenhed. Derfor passerede den index.ftl fil inde i mobilmappen i skabelonerne.

Her er resultatet:

På samme måde vil vi efterligne en tabletversion. Lad os vælge iPad fra rullemenuen ligesom sidste gang og opdatere siden. Indholdet ville blive ændret, og det skulle behandles som en tabletvisning:

Nu skal vi se, om funktionalitet for Site Preference fungerer som forventet eller ej.

For at simulere et realtidsscenarie, hvor brugeren vil se webstedet på en mobilvenlig måde, skal du blot tilføje følgende URL-parameter i slutningen af ​​standard-URL:

? site_preference = mobil

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

På samme måde for at simulere tabletpræferencer skal du blot tilføje følgende URL-parameter i slutningen af ​​standard-URL:

? site_preference = tablet

Og ligesom sidste gang skal visningen automatisk opdateres til tabletvisning.

Bemærk, at standard-URL'en forbliver den samme, og hvis brugeren igen går gennem standard-URL, omdirigeres brugeren til den respektive visning baseret på enhedstype.

5. Konklusion

Vi oprettede netop en webapplikation og implementerede funktionerne på tværs af platforme. Fra produktivitetsperspektivet er det en enorm præstationsforøgelse. Spring Mobile eliminerer mange front-end-scripting for at håndtere adfærd på tværs af browsere og reducerer dermed udviklingstiden.

Som altid er opdateret kildekode forbi på GitHub.