1. Overzicht

Spring Mobile is een moderne uitbreiding op het populaire Spring Web MVC framework dat helpt bij het vereenvoudigen van de ontwikkeling van webapplicaties, die volledig of gedeeltelijk compatibel moeten zijn met platformonafhankelijke platforms, met minimale inspanning en minder standaardcodering.

In dit artikel maken we kennis met het Spring Mobile-project en maken we een voorbeeldproject om het gebruik van Spring Mobile onder de aandacht te brengen.

2. Kenmerken van Spring Mobile

• Automatische apparaatdetectie: Spring Mobile heeft een ingebouwde server-side device resolver abstractielaag. Dit analyseert alle inkomende verzoeken en detecteert apparaatinformatie van de afzender, bijvoorbeeld een apparaattype, een besturingssysteem, enz
• Beheer van sitevoorkeuren: Met behulp van Site Preference Management kunnen gebruikers met Spring Mobile kiezen voor mobiel / tablet / normale weergave van de website. Het is een relatief verouderde techniek omdat door gebruik te maken van DeviceDelegatingViewresolver we kunnen de weergavelaag behouden, afhankelijk van het apparaattype zonder enige input van de gebruikerszijde te eisen
• Site Switcher: Site Switcher kan de gebruikers automatisch naar de meest geschikte weergave schakelen op basis van zijn / haar apparaattype (d.w.z. mobiel, desktop, enz.)
• Device Aware View Manager: Meestal, afhankelijk van het apparaattype, sturen we het gebruikersverzoek door naar een specifieke site die bedoeld is om een ​​specifiek apparaat af te handelen. Spring Mobile's Bekijk Manager geeft ontwikkelaar de flexibiliteit om alle weergaven in een vooraf gedefinieerd formaat te plaatsen en Spring Mobile zou de verschillende weergaven automatisch beheren op basis van het apparaattype

3. Een applicatie bouwen

Laten we nu een demo-applicatie maken met Spring Mobile met Spring Boot en Freemarker-sjabloon-engine en probeer apparaatdetails vast te leggen met een minimale hoeveelheid codering.

3.1. Afhankelijkheden van Maven

Voordat we beginnen, moeten we de volgende Spring Mobile-afhankelijkheid toevoegen in het pom.xml:

 org.springframework.mobile lente-mobiel-apparaat 2.0.0.M3 

Houd er rekening mee dat de nieuwste afhankelijkheid beschikbaar is in de Spring Milestones-repository, dus laten we deze toevoegen aan onze pom.xml ook:

  lente-mijlpalen Lente-mijlpalen //repo.spring.io/libs-milestone false 

3.2. Maak Freemarker-sjablonen

Laten we eerst onze indexpagina maken met Freemarker. Vergeet niet de nodige afhankelijkheid in te stellen om autoconfiguratie voor Freemarker in te schakelen.

Omdat we proberen het afzenderapparaat te detecteren en het verzoek dienovereenkomstig te routeren, moeten we drie afzonderlijke Freemarker-bestanden maken om dit aan te pakken; een voor het afhandelen van een mobiel verzoek, een ander voor het afhandelen van een tablet en de laatste (standaard) voor het afhandelen van een normaal browserverzoek.

We moeten twee mappen maken met de naam ‘mobiel‘En‘tablet' onder src / main / resources / templates en plaats de Freemarker-bestanden dienovereenkomstig. De uiteindelijke structuur zou er als volgt uit moeten zien:

└── src └── belangrijkste └── bronnen └── sjablonen └── index.ftl └── mobiel └── index.ftl └── tablet └── index.ftl

Laten we nu het volgende zeggen HTML binnen index.ftl bestanden:

Afhankelijk van het apparaattype wijzigen we de inhoud in het

3.3. Inschakelen DeviceDelegatingViewresolver

Om Spring Mobile in te schakelen DeviceDelegatingViewresolver service, moeten we de volgende eigenschap erin plaatsen application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true 

De functie voor sitevoorkeuren is standaard ingeschakeld in Spring Boot wanneer u de Spring Mobile-starter opneemt. Het kan echter worden uitgeschakeld door de volgende eigenschap in te stellen op false:

spring.mobile.sitepreference.enabled: true

3.4. Voeg Freemarker-eigenschappen toe

Om Spring Boot in staat te stellen onze sjablonen te vinden en weer te geven, moeten we het volgende toevoegen aan onze application.properties:

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

3.5. Maak een controller

Nu moeten we een Controller class om het inkomende verzoek af te handelen. We zouden simpel gebruiken @GetMapping annotatie om het verzoek te behandelen:

@Controller openbare klasse IndexController {@GetMapping ("/") openbare tekenreeksgroet (apparaatapparaat) {String deviceType = "browser"; String platform = "browser"; String viewName = "index"; if (device.isNormal ()) {deviceType = "browser"; } else if (device.isMobile ()) {deviceType = "mobile"; viewName = "mobile / index"; } else if (device.isTablet ()) {deviceType = "tablet"; viewName = "tablet / index"; } platform = device.getDevicePlatform (). naam (); if (platform.equalsIgnoreCase ("ONBEKEND")) {platform = "browser"; } return viewName; }}

Een paar dingen om op te merken:

• In de handler mapping-methode passeren we org.springframework.mobile.device.Device. Dit is de geïnjecteerde apparaatinformatie bij elk verzoek. Dit wordt gedaan door DeviceDelegatingViewresolver die we hebben ingeschakeld in de apllication.properties
• De org.springframework.mobile.device.Device heeft een aantal ingebouwde methoden zoals isMobile (), isTablet (), getDevicePlatform () enz. Door deze te gebruiken, kunnen we alle apparaatinformatie die we nodig hebben vastleggen en gebruiken

3.6. Java Config

Om apparaatdetectie in een Spring-webtoepassing in te schakelen, moeten we ook enkele configuratie toevoegen:

@Configuration openbare klasse AppConfig implementeert WebMvcConfigurer {@Bean openbare DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor () {retourneer nieuwe DeviceResolverHandlerInterceptor (); } @Bean openbare DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver () {retourneer nieuwe DeviceHandlerMethodArgumentResolver (); } @Override public void addInterceptors (InterceptorRegistry-register) {registry.addInterceptor (deviceResolverHandlerInterceptor ()); } @Override public void addArgumentResolvers (List argumentResolvers) {argumentResolvers.add (deviceHandlerMethodArgumentResolver ()); }}

We zijn bijna klaar. Een laatste ding om te doen is om een ​​Spring Boot-configuratieklasse te bouwen om de applicatie te starten:

@SpringBootApplication openbare klasse Toepassing {openbare statische leegte hoofd (String [] args) {SpringApplication.run (Application.class, args); }}

4. Testen van de applicatie

Zodra we de applicatie starten, wordt deze uitgevoerd // localhost: 8080.

We zullen gebruiken De ontwikkelaarsconsole van Google Chrome om verschillende soorten apparaten te emuleren. We kunnen het inschakelen door op te drukken ctrl + shift + i of door op te drukken F12.

Als we de hoofdpagina openen, kunnen we standaard zien dat Spring Web het apparaat detecteert als een desktopbrowser. We zouden het volgende resultaat moeten zien:

Nu klikken we op het consolepaneel op het tweede pictogram linksboven. Het zou een mobiele weergave van de browser mogelijk maken.

We konden een vervolgkeuzelijst zien komen in de linkerbovenhoek van de browser. In de vervolgkeuzelijst kunnen we verschillende soorten apparaattypen kiezen. Om een ​​mobiel apparaat te emuleren, kiezen we Nexus 6P en vernieuwen we de pagina.

Zodra we de pagina vernieuwen, zullen we merken dat het inhoud van de pagina verandert omdat DeviceDelegatingViewresolver heeft al gedetecteerd dat het laatste verzoek afkomstig was van een mobiel apparaat. Daarom passeerde het de index.ftl bestand in de mobiele map in de sjablonen.

Hier is het resultaat:

Op dezelfde manier gaan we een tabletversie emuleren. Laten we een iPad kiezen uit de vervolgkeuzelijst, net als de vorige keer, en de pagina vernieuwen. De inhoud zou worden gewijzigd en moet worden behandeld als een tabletweergave:

Nu zullen we zien of de functionaliteit voor sitevoorkeuren werkt zoals verwacht of niet.

Om een ​​real-time scenario te simuleren waarin de gebruiker de site op een mobielvriendelijke manier wil bekijken, voegt u gewoon de volgende URL-parameter toe aan het einde van de standaard-URL:

? site_preference = mobiel

Eenmaal vernieuwd, zou de weergave automatisch naar de mobiele weergave moeten worden verplaatst, d.w.z. dat de volgende tekst wordt weergegeven ‘U bent in mobiele versie '.

Op dezelfde manier om tabletvoorkeuren te simuleren, voegt u gewoon de volgende URL-parameter toe aan het einde van de standaard-URL:

? site_preference = tablet

En net als de vorige keer, zou de weergave automatisch moeten worden vernieuwd naar tabletweergave.

Houd er rekening mee dat de standaard-URL hetzelfde zou blijven en als de gebruiker opnieuw de standaard-URL doorloopt, wordt de gebruiker omgeleid naar de respectieve weergave op basis van het apparaattype.

5. Conclusie

We hebben zojuist een webapplicatie gemaakt en de platformonafhankelijke functionaliteit geïmplementeerd. Vanuit het oogpunt van productiviteit is het een enorme prestatieverbetering. Spring Mobile elimineert veel front-end scripting om het gedrag van verschillende browsers aan te kunnen, waardoor de ontwikkelingstijd wordt verkort.

Zoals altijd is de bijgewerkte broncode voorbij op GitHub.