Una guida a Spring Mobile

1. Panoramica

Spring Mobile è un'estensione moderna del popolare framework Spring Web MVC che aiuta a semplificare lo sviluppo di applicazioni web, che devono essere completamente o parzialmente compatibili con piattaforme cross-device, con il minimo sforzo e una codifica meno standard.

In questo articolo, impareremo a conoscere il progetto Spring Mobile e creeremo un progetto di esempio per evidenziare gli usi di Spring Mobile.

2. Caratteristiche di Spring Mobile

  • Rilevamento automatico del dispositivo: Spring Mobile ha un livello di astrazione del resolver del dispositivo lato server integrato. Questo analizza tutte le richieste in arrivo e rileva le informazioni sul dispositivo del mittente, ad esempio un tipo di dispositivo, un sistema operativo, ecc
  • Gestione delle preferenze del sito: utilizzando la gestione delle preferenze del sito, Spring Mobile consente agli utenti di scegliere la visualizzazione normale del sito Web da dispositivo mobile / tablet. È una tecnica relativamente deprecata poiché utilizzando DeviceDelegatingViewresolver possiamo rendere persistente il livello di visualizzazione a seconda del tipo di dispositivo senza richiedere alcun input da parte dell'utente
  • Site Switcher : Site Switcher è in grado di far passare automaticamente gli utenti alla visualizzazione più appropriata in base al tipo di dispositivo (ad es. Mobile, desktop, ecc.)
  • Device Aware View Manager : solitamente, a seconda del tipo di dispositivo, inoltriamo la richiesta dell'utente a un sito specifico destinato a gestire un dispositivo specifico. View Manager di Spring Mobile offre agli sviluppatori la flessibilità di mettere tutte le visualizzazioni in un formato predefinito e Spring Mobile gestisce automaticamente le diverse visualizzazioni in base al tipo di dispositivo

3. Creazione di un'applicazione

Creiamo ora un'applicazione demo utilizzando Spring Mobile con Spring Boot e Freemarker Template Engine e proviamo a catturare i dettagli del dispositivo con una quantità minima di codice.

3.1. Dipendenze di Maven

Prima di iniziare dobbiamo aggiungere la seguente dipendenza Spring Mobile nel pom.xml :

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

Tieni presente che l'ultima dipendenza è disponibile nel repository Spring Milestones, quindi aggiungiamola anche nel nostro pom.xml :

  spring-milestones Spring Milestones //repo.spring.io/libs-milestone  false   

3.2. Crea modelli Freemarker

Per prima cosa, creiamo la nostra pagina indice utilizzando Freemarker. Non dimenticare di mettere la dipendenza necessaria per abilitare l'autoconfigurazione per Freemarker.

Poiché stiamo cercando di rilevare il dispositivo mittente e instradare la richiesta di conseguenza, dobbiamo creare tre file Freemarker separati per risolvere il problema; uno per gestire una richiesta mobile, un altro per gestire il tablet e l'ultimo (predefinito) per gestire la normale richiesta del browser.

Dobbiamo creare due cartelle denominate " mobile " e " tablet " in src / main / resources / templates e inserire i file Freemarker di conseguenza. La struttura finale dovrebbe assomigliare a questa:

└── src └── main └── resources └── templates └── index.ftl └── mobile └── index.ftl └── tablet └── index.ftl

Ora, inseriamo il seguente HTML nei file index.ftl :

A seconda del tipo di dispositivo, cambieremo il contenuto all'interno del file

etichetta,

3.3. Abilita DeviceDelegatingViewresolver

Per abilitare il servizio Spring Mobile DeviceDelegatingViewresolver , dobbiamo inserire la seguente proprietà all'interno di application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true 

La funzionalità di preferenza del sito è abilitata per impostazione predefinita in Spring Boot quando si include lo starter Spring Mobile. Tuttavia, può essere disabilitato impostando la seguente proprietà su false:

spring.mobile.sitepreference.enabled: true

3.4. Aggiungi proprietà freemarker

Affinché Spring Boot sia in grado di trovare e visualizzare i nostri modelli, dobbiamo aggiungere quanto segue al nostro application.properties :

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

3.5. Crea un controller

Ora dobbiamo creare una classe Controller per gestire la richiesta in arrivo. Useremo la semplice annotazione @GetMapping per gestire la richiesta:

@Controller public class IndexController { @GetMapping("/") public String greeting(Device device) { 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().name(); if (platform.equalsIgnoreCase("UNKNOWN")) { platform = "browser"; } return viewName; } }

Un paio di cose da notare qui:

  • Nel metodo di mappatura del gestore, stiamo passando org.springframework.mobile.device.Device . Queste sono le informazioni sul dispositivo iniettate con ogni richiesta. Questo viene fatto da DeviceDelegatingViewresolver che abbiamo abilitato in apllication.properties
  • L'org.springframework.mobile.device.Device ha un paio di metodi incorporati come isMobile (), isTablet (), getDevicePlatform () ecc Utilizzando queste possiamo acquisire tutte le informazioni sul dispositivo di cui abbiamo bisogno e usarlo

3.6. Java Config

Per abilitare il rilevamento del dispositivo in un'applicazione Web Spring, è necessario aggiungere anche alcune configurazioni:

@Configuration public class AppConfig implements WebMvcConfigurer { @Bean public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor() { return new DeviceResolverHandlerInterceptor(); } @Bean public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver() { return new DeviceHandlerMethodArgumentResolver(); } @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(deviceResolverHandlerInterceptor()); } @Override public void addArgumentResolvers(List argumentResolvers) { argumentResolvers.add(deviceHandlerMethodArgumentResolver()); } }

Abbiamo quasi finito. Un'ultima cosa da fare è creare una classe di configurazione Spring Boot per avviare l'applicazione:

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

4. Test dell'applicazione

Once we start the application, it will run on //localhost:8080.

We will use Google Chrome's Developer Console to emulate different kinds of device. We can enable it by pressing ctrl + shift + i or by pressing F12.

By default, if we open the main page, we could see that Spring Web is detecting the device as a desktop browser. We should see the following result:

Now, on the console panel, we click the second icon on the top left. It would enable a mobile view of the browser.

We could see a drop-down coming in the top left corner of the browser. In the drop-down, we can choose different kinds of device type. To emulate a mobile device let's choose Nexus 6P and refresh the page.

As soon as we refresh the page, we'll notice that the content of the page changes because DeviceDelegatingViewresolver has already detected that the last request came from a mobile device. Hence, it passed the index.ftl file inside the mobile folder in the templates.

Here's the result:

In the same way, we are going to emulate a tablet version. Let's choose iPad from the drop-down just like the last time and refresh the page. The content would be changed, and it should be treated as a tablet view:

Now, we'll see if Site Preference functionality is working as expected or not.

To simulate a real time scenario where the user wants to view the site in a mobile friendly way, just add following URL parameter at the end of default URL:

?site_preference=mobile

Once refreshed, the view should be automatically moved to mobile view i.e. following text would be displayed ‘You are into mobile version'.

In the same way to simulate tablet preference, just add following URL parameter at the end of default URL:

?site_preference=tablet

And just like the last time, the view should be automatically refreshed to tablet view.

Please note that the default URL would remain as same, and if the user again goes through default URL, the user will be redirected to respective view based on device type.

5. Conclusion

We just created a web application and implemented the cross-platform functionality. From the productivity perspective, it's a tremendous performance boost. Spring Mobile eliminates many front-end scripting to handle cross-browser behavior, thus reducing development time.

Come sempre, il codice sorgente aggiornato è finito su GitHub.