Un guide de Spring Mobile

1. Vue d'ensemble

Spring Mobile est une extension moderne du célèbre framework Spring Web MVC qui permet de simplifier le développement d'applications Web, qui doivent être totalement ou partiellement compatibles avec les plates-formes multi-appareils, avec un minimum d'effort et moins de codage standard.

Dans cet article, nous en apprendrons davantage sur le projet Spring Mobile et nous créerons un exemple de projet pour mettre en évidence les utilisations de Spring Mobile.

2. Caractéristiques de Spring Mobile

  • Détection automatique des périphériques: Spring Mobile a une couche d'abstraction intégrée du résolveur de périphériques côté serveur. Cela analyse toutes les demandes entrantes et détecte les informations sur le périphérique de l'expéditeur, par exemple, un type de périphérique, un système d'exploitation, etc.
  • Gestion des préférences du site: en utilisant la gestion des préférences du site, Spring Mobile permet aux utilisateurs de choisir une vue mobile / tablette / normale du site Web. C'est une technique relativement obsolète car en utilisant DeviceDelegatingViewresolver, nous pouvons conserver la couche de vue en fonction du type d'appareil sans exiger aucune entrée du côté utilisateur.
  • Site Switcher : Site Switcher est capable de basculer automatiquement les utilisateurs vers la vue la plus appropriée en fonction de leur type d'appareil (c'est-à-dire mobile, ordinateur de bureau, etc.)
  • Device Aware View Manager : Habituellement, en fonction du type d'appareil, nous transmettons la demande de l'utilisateur à un site spécifique destiné à gérer un appareil spécifique. Le gestionnaire de vues de Spring Mobile offre aux développeurs la possibilité de mettre toutes les vues dans un format prédéfini et Spring Mobile gèrerait automatiquement les différentes vues en fonction du type d'appareil

3. Création d'une application

Créons maintenant une application de démonstration à l'aide de Spring Mobile avec Spring Boot et Freemarker Template Engine et essayons de capturer les détails de l'appareil avec un minimum de codage.

3.1. Dépendances de Maven

Avant de commencer, nous devons ajouter la dépendance Spring Mobile suivante dans le pom.xml :

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

Veuillez noter que la dernière dépendance est disponible dans le référentiel Spring Milestones, ajoutons-la également dans notre pom.xml :

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

3.2. Créer des modèles Freemarker

Tout d'abord, créons notre page d'index en utilisant Freemarker. N'oubliez pas de mettre les dépendances nécessaires pour activer l'autoconfiguration pour Freemarker.

Puisque nous essayons de détecter le périphérique expéditeur et d'acheminer la demande en conséquence, nous devons créer trois fichiers Freemarker distincts pour résoudre ce problème; un pour gérer une demande mobile, un autre pour gérer la tablette et le dernier (par défaut) pour gérer la demande normale du navigateur.

Nous devons créer deux dossiers nommés « mobile » et « tablette » sous src / main / resources / templates et placer les fichiers Freemarker en conséquence. La structure finale devrait ressembler à ceci:

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

Maintenant, mettons le code HTML suivant dans les fichiers index.ftl :

Selon le type d'appareil, nous modifierons le contenu à l'intérieur du

marque,

3.3. Activer DeviceDelegatingViewresolver

Pour activer le service Spring Mobile DeviceDelegatingViewresolver , nous devons placer la propriété suivante dans application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true 

La fonctionnalité de préférence de site est activée par défaut dans Spring Boot lorsque vous incluez le démarreur Spring Mobile. Cependant, il peut être désactivé en définissant la propriété suivante sur false:

spring.mobile.sitepreference.enabled: true

3.4. Ajouter des propriétés de Freemarker

Pour que Spring Boot puisse trouver et rendre nos modèles, nous devons ajouter ce qui suit à notre application.properties :

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

3.5. Créer un contrôleur

Nous devons maintenant créer une classe Controller pour gérer la demande entrante. Nous utiliserions une simple annotation @GetMapping pour gérer la demande:

@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; } }

Quelques points à noter ici:

  • Dans la méthode de mappage du gestionnaire, nous transmettons org.springframework.mobile.device.Device . Il s'agit des informations sur le périphérique injectées avec chaque requête. Ceci est fait par DeviceDelegatingViewresolver que nous avons activé dans le apllication.properties
  • Le org.springframework.mobile.device.Device a quelques méthodes intégrées telles que isMobile (), isTablet (), getDevicePlatform () etc.

3.6. Configuration Java

Pour activer la détection des appareils dans une application Web Spring, nous devons également ajouter une configuration:

@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()); } }

On a presque terminé. Une dernière chose à faire est de créer une classe de configuration Spring Boot pour démarrer l'application:

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

4. Test de l'application

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.

Comme toujours, le code source mis à jour est terminé sur GitHub.