Un guide pour Spring Mobile

1. Vue d'ensemble

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

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

2. Caractéristiques de Spring Mobile

Automatic Device Detection: Spring Mobile a une couche d'abstraction de résolveur de périphérique intégrée côté serveur. Ceci analyse toutes les demandes entrantes et détecte les informations du périphérique émetteur, par exemple, un type de périphérique, un système d'exploitation, etc.
Site Preference Management: 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 utilisantDeviceDelegatingViewresolver, nous pouvons conserver la couche de vue en fonction du type d'appareil sans exiger aucune entrée de la part de l'utilisateur.
Site Switcher: Site Switcher est capable de basculer automatiquement les utilisateurs vers la vue la plus appropriée en fonction de son type d'appareil (c.-à-d. mobile, desktop, etc.)
Device Aware View Manager: Habituellement, selon le type d'appareil, nous transmettons la demande de l'utilisateur à un site spécifique destiné à gérer un appareil spécifique. LesView Manager de Spring Mobile permettent aux développeurs 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 etFreemarker Template Engine et essayons de capturer les détails de l'appareil avec un minimum de codage.

3.1. Dépendances Maven

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


    org.springframework.mobile
    spring-mobile-device
    1.1.5.RELEASE

Nous pouvons vérifier la dernière version de Spring Mobile dansCentral Maven Repository.

3.2. Créer des modèles Freemarker

Tout d'abord, créons notre page d'index à l'aide de Freemarker. N'oubliez pas de mettre les dépendances nécessaires pour activer la configuration automatique pour Freemarker.

Puisque nous essayons de détecter le périphérique émetteur et de router 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 une tablette et le dernier (par défaut) pour gérer une demande de navigateur normale.

Nous devons créer deux dossiers nommés «mobile» et «tablet» soussrc/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 lesHTML suivants dans les fichiersindex.ftl:

You are into browser version

Selon le type d'appareil, nous modifierons le contenu de la balise<h1>,

3.3. ActiverDeviceDelegatingViewresolver

Pour activer le service Spring MobileDeviceDelegatingViewresolver, nous devons mettre la propriété suivante dansapplication.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. Toutefois, il peut être désactivé en définissant la propriété suivante sur false:

spring.mobile.sitepreference.enabled: true

3.4. Créer un contrôleur

Nous devons maintenant créer une classeController pour gérer la requête entrante. Nous utiliserions une simple annotation@GetMapping pour gérer la requête:

@Controller
public class IndexController {

    @GetMapping("/")
    public String greeting(Device device) {

        String deviceType = "browser";
        String platform = "browser";

        if (device.isNormal()) {
            deviceType = "browser";
        } else if (device.isMobile()) {
            deviceType = "mobile";
        } else if (device.isTablet()) {
            deviceType = "tablet";
        }

        platform = device.getDevicePlatform().name();

        if (platform.equalsIgnoreCase("UNKNOWN")) {
            platform = "browser";
        }

        return "index";
    }
}

Quelques points à noter ici:

Dans la méthode de mappage du gestionnaire, nous transmettonsorg.springframework.mobile.device.Device. Ce sont les informations de périphérique injectées à chaque requête. Ceci est fait parDeviceDelegatingViewresolver que nous avons activé dans lesapllication.properties
Leorg.springframework.mobile.device.Device a quelques méthodes intégrées commeisMobile(), isTablet(), getDevicePlatform() etc. En les utilisant, nous pouvons capturer toutes les informations dont nous avons besoin et les utiliser.

3.5. Java Config

Nous avons presque fini. Une dernière chose à faire est de construire 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

Une fois que nous avons démarré l'application, elle fonctionnera surhttp://localhost:8080.

We will use Google Chrome’s Developer Console to emulate different kinds of device. Nous pouvons l'activer en appuyant surctrl + shift + i ou en appuyant surF12.

Par défaut, si nous ouvrons la page principale, nous pourrions voir que Spring Web détecte le périphérique en tant que navigateur de bureau. Nous devrions voir le résultat suivant:

Maintenant, sur le panneau de la console, nous cliquons sur la deuxième icône en haut à gauche. Cela permettrait une vue mobile du navigateur.

Nous avons pu voir un menu déroulant apparaître dans le coin supérieur gauche du navigateur. Dans la liste déroulante, nous pouvons choisir différents types de type d'appareil. Pour émuler un appareil mobile, choisissons le Nexus 6P et actualisons la page.

Dès que nous actualisons la page, nous remarquerons que lecontent of the page changes because DeviceDelegatingViewresolver has already detected that the last request came from a mobile device. Par conséquent, il a passé le fichierindex.ftl dans le dossier mobile dans les modèles.

Voici le résultat:

De la même manière, nous allons émuler une version de la tablette. Choisissons l'iPad dans le menu déroulant comme la dernière fois et actualisons la page. Le contenu serait modifié et il devrait être traité comme une vue de tablette:

Nous allons maintenant voir si la fonctionnalité de préférence de site fonctionne comme prévu ou non.

Pour simuler un scénario en temps réel dans lequel l'utilisateur souhaite afficher le site de manière conviviale pour les mobiles, il suffit d'ajouter le paramètre d'URL suivant à la fin de l'URL par défaut:

?site_preference=mobile

Une fois rafraîchie, la vue doit être automatiquement déplacée vers la vue mobile, c.-à-d. le texte suivant sera affiché "Vous êtes dans la version mobile".

De la même manière pour simuler les préférences de la tablette, ajoutez simplement le paramètre d'URL suivant à la fin de l'URL par défaut:

?site_preference=tablet

Et tout comme la dernière fois, la vue devrait être automatiquement actualisée en vue tablette.

Veuillez noter que l'URL par défaut resterait identique et que si l'utilisateur repasse à nouveau par l'URL par défaut, il sera redirigé vers la vue correspondante en fonction du type de périphérique.

5. Conclusion

Nous venons de créer une application Web et de mettre en œuvre la fonctionnalité multiplate-forme. Du point de vue de la productivité, c'est une amélioration considérable des performances. Spring Mobile eliminates many front-end scripting to handle cross-browser behavior, thus reducing development time.

Comme toujours, le code source mis à jour estover on GitHub.

TOC

Un guide pour Spring Mobile