1. Áttekintés

A Spring Mobile a népszerűek modern kiterjesztése Tavaszi Web MVC keretrendszer, amely elősegíti a webalkalmazások fejlesztésének egyszerűsítését, amelynek teljes mértékben vagy részben kompatibilisnek kell lennie az eszközökön keresztüli platformokkal, minimális erőfeszítéssel és kevesebb kazán kódolással.

Ebben a cikkben megismerjük a Spring Mobile projektet, és elkészítünk egy minta projektet, amely kiemeli a Spring Mobile felhasználását.

2. A Spring Mobile jellemzői

• Automatikus eszközészlelés: A Spring Mobile beépített szerveroldali eszközfeloldó absztrakciós réteggel rendelkezik. Ez elemzi az összes bejövő kérést és felismeri a küldő eszköz adatait, például egy eszköz típusát, egy operációs rendszert stb
• Webhely-beállítások kezelése: A webhelypreferencia-kezelés használatával a Spring Mobile lehetővé teszi a felhasználók számára, hogy mobil / tablet / normál nézetet válasszanak a webhelyről. Ez viszonylag elavult technika, mivel a használatával DeviceDelegatingViewresolver az eszköztípustól függően megtarthatjuk a nézeti réteget anélkül, hogy a felhasználó oldalától bármilyen bemenetet igényelnénk
• Site Switcher: A Site Switcher képes automatikusan átkapcsolni a felhasználókat a készüléktípusának megfelelő legmegfelelőbb nézetre (azaz mobil, asztali stb.)
• Device Aware View Manager: Általában az eszköz típusától függően továbbítjuk a felhasználói kérést egy adott webhelyre, amely az adott eszköz kezelésére szolgál. Spring Mobile's Nézetkezelő lehetővé teszi a fejlesztő számára, hogy az összes nézetet előre meghatározott formátumba helyezze, és a Spring Mobile automatikusan megváltoztatja a különböző nézeteket az eszköztípus alapján

3. Alkalmazás építése

Készítsünk most egy bemutató alkalmazást a Spring Mobile with Spring Boot és a segítségével Freemarker sablon motor és próbálja meg megörökíteni az eszköz részleteit minimális kódolással.

3.1. Maven-függőségek

Mielőtt elkezdenénk, hozzá kell adnunk a Spring Mobile függőségét a pom.xml:

 org.springframework.mobile rugós-mobil-eszköz 2.0.0.M3 

Felhívjuk figyelmét, hogy a legújabb függőség a Spring Milestones adattárban érhető el, ezért tegyük hozzá ezt a mi oldalunkhoz pom.xml is:

  tavaszi mérföldkövek Tavaszi mérföldkövek //repo.spring.io/libs-milestone false 

3.2. Hozzon létre Freemarker sablonokat

Először hozzuk létre indexlapunkat a Freemarker használatával. Ne felejtse el megadni a szükséges függőséget az automatikus konfigurálás engedélyezéséhez a Freemarker számára.

Mivel megpróbáljuk felderíteni a feladó eszközt és ennek megfelelően továbbítani a kérést, ennek kezelésére három különálló Freemarker fájlt kell létrehoznunk; az egyik egy mobil kérelem kezelésére, egy másik a táblagép kezelésére és az utolsó (alapértelmezett) a normál böngésző kérések kezelésére.

Két mappát kell létrehoznunk,Mobil„És”tabletta’Alatt src / main / resources / templates és ennek megfelelően tegye a Freemarker fájlokat. A végső struktúrának így kell kinéznie:

└── src └── fő └── források └── sablonok └── index.ftl └── mobil └── index.ftl └── táblagép └── index.ftl

Most tegyük fel a következőket HTML belül index.ftl fájlok:

Az eszköztípustól függően megváltoztatjuk a

3.3. Engedélyezze DeviceDelegatingViewresolver

A Spring Mobile engedélyezéséhez DeviceDelegatingViewresolver szolgáltatást, be kell helyeznünk a következő tulajdonságokat application.properties:

tavasz.mobil.devicedelegatingviewresolver.enabled: true 

A webhelypreferencia funkció alapértelmezés szerint engedélyezve van a Spring Boot alkalmazásban, amikor a Spring Mobile indítót is tartalmazza. Ez azonban kikapcsolható a következő tulajdonság hamis beállításával:

spring.mobile.sitepreference.enabled: true

3.4. Add Freemarker Properties

Ahhoz, hogy a Spring Boot képes legyen megtalálni és megjeleníteni a sablonjainkat, a következőket kell hozzáadnunk alkalmazás.tulajdonságok:

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

3.5. Hozzon létre egy vezérlőt

Most létre kell hoznunk a Vezérlő osztály kezeli a bejövő kérést. Egyszerűt használnánk @GetMapping jelölés a kérelem kezeléséhez:

@Controller public class IndexController {@GetMapping ("/") public String greeting (Device device) {String deviceType = "browser"; String platform = "böngésző"; String viewName = "index"; if (device.isNormal ()) {deviceType = "böngésző"; } else if (device.isMobile ()) {deviceType = "mobile"; viewName = "mobil / index"; } else if (device.isTablet ()) {deviceType = "tablet"; viewName = "tablet / index"; } platform = device.getDevicePlatform (). név (); if (platform.equalsIgnoreCase ("Ismeretlen")) {platform = "böngésző"; } return viewName; }}

Néhány megjegyzendő dolog itt:

• A handler térképezési módszerben átmegyünk org.springframework.mobile.device.Device. Ez az injektált eszközinformáció minden kérésnél. Ezt az DeviceDelegatingViewresolver amelyet engedélyeztünk a apllication.properties
• A org.springframework.mobile.device.Device rendelkezik néhány beépített módszerrel, mint például isMobile (), isTablet (), getDevicePlatform () stb. Ezek segítségével rögzíthetjük az összes szükséges eszközinformációt és felhasználhatjuk azt

3.6. Java Config

Az eszközfelismerés engedélyezéséhez a Spring webalkalmazásban hozzá kell adnunk néhány konfigurációt:

@Configuration public class AppConfig implementálja a WebMvcConfigurer {@Bean public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor () {return new DeviceResolverHandlerInterceptor (); } @Bean public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver () {return new DeviceHandlerMethodArgumentResolver (); } @Orride public void addInterceptors (InterceptorRegistry registry) {register.addInterceptor (deviceResolverHandlerInterceptor ()); } @Orride public void addArgumentResolvers (List argumentResolvers) {argumentResolvers.add (deviceHandlerMethodArgumentResolver ()); }}

Majdnem készen vagyunk. Utolsó dolog az, hogy felépítünk egy Spring Boot konfigurációs osztályt az alkalmazás elindításához:

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

4. Az alkalmazás tesztelése

Miután elindítottuk az alkalmazást, tovább fog futni // localhost: 8080.

Használni fogjuk A Google Chrome Developer Console különböző típusú eszközök utánzásához. A megnyomásával engedélyezhetjük ctrl + shift + i vagy megnyomásával F12.

Alapértelmezés szerint, ha megnyitjuk a főoldalt, láthatjuk, hogy a Spring Web asztali böngészőként érzékeli az eszközt. A következő eredményt kell látnunk:

Most a konzol panelen kattintson a bal felső sarokban található második ikonra. Lehetővé tenné a böngésző mobil nézetét.

Láthattunk egy legördülő menüt a böngésző bal felső sarkában. A legördülő menüben különböző típusú készülékeket választhatunk. Mobileszköz utánzásához válassza a Nexus 6P lehetőséget, és frissítse az oldalt.

Amint frissítjük az oldalt, észrevesszük, hogy a az oldal tartalma megváltozik, mert DeviceDelegatingViewresolver már észlelte, hogy az utolsó kérés mobil eszközről érkezett. Ezért telt el a index.ftl fájl a sablonok mobil mappájában.

Itt az eredmény:

Ugyanígy fogunk utánozni egy tablet verziót is. Válasszuk az iPad-t a legördülő menüből, csakúgy, mint legutóbb, és frissítsük az oldalt. A tartalom megváltozik, és táblagép-nézetként kell kezelni:

Most meglátjuk, hogy a Site Preference funkció megfelelően működik-e vagy sem.

Valós idejű forgatókönyv szimulálásához, ahol a felhasználó mobilbarát módon szeretné megtekinteni a webhelyet, csak az alapértelmezett URL végén adja hozzá a következő URL-paramétert:

? site_preference = mobile

A frissítést követően a nézetet automatikusan át kell helyezni a mobil nézetbe, vagyis a következő szöveg jelenik meg: „Ön mobil verzióba áll”.

A táblagéppreferencia szimulálásához ugyanúgy adja hozzá a következő URL-paramétert az alapértelmezett URL végén:

? site_preference = tablet

És ugyanúgy, mint legutóbb, a nézetet is automatikusan fel kell frissíteni táblagép nézetre.

Felhívjuk figyelmét, hogy az alapértelmezett URL ugyanaz marad, és ha a felhasználó ismét átmegy az alapértelmezett URL-n, akkor a felhasználót az eszköztípus alapján átirányítják a megfelelő nézetre.

5. Következtetés

Most hoztunk létre egy webalkalmazást, és megvalósítottuk a platformok közötti funkcionalitást. A termelékenység szempontjából óriási teljesítménynövekedés. A Spring Mobile kiküszöböli a számos böngészőbeli szkriptet a böngészők közötti viselkedés kezeléséhez, ezzel csökkentve a fejlesztési időt.

Mint mindig, a frissített forráskódnak is vége a GitHubon.