Ein Leitfaden für Spring Mobile

1. Überblick

Spring Mobile ist eine moderne Erweiterung des beliebtenSpring Web MVC-Frameworks, die dazu beiträgt, die Entwicklung von Webanwendungen zu vereinfachen, die mit geräteübergreifenden Plattformen mit minimalem Aufwand und weniger Codierung der Boilerplates vollständig oder teilweise kompatibel sein müssen.

In diesem Artikel erfahren Sie mehr über das Spring Mobile-Projekt und erstellen ein Beispielprojekt, um die Verwendung von Spring Mobile hervorzuheben.

2. Funktionen von Spring Mobile

Automatic Device Detection: Spring Mobile verfügt über eine integrierte serverseitige Resolver-Abstraktionsschicht für Geräte. Auf diese Weise werden alle eingehenden Anforderungen analysiert und Informationen zum Absender ermittelt, z. B. ein Gerätetyp, ein Betriebssystem usw
Site Preference Management: Mit Spring Mobile Management können Benutzer mithilfe von Site Preference Management die mobile / Tablet- / normale Ansicht der Website auswählen. Dies ist eine vergleichsweise veraltete Technik, da wir mitDeviceDelegatingViewresolver die Ansichtsebene abhängig vom Gerätetyp beibehalten können, ohne dass die Benutzerseite Eingaben vornehmen muss
Site Switcher: Site Switcher kann die Benutzer automatisch auf die am besten geeignete Ansicht entsprechend ihrem Gerätetyp umschalten (d. h. Handy, Desktop usw.)
Device Aware View Manager: Normalerweise leiten wir die Benutzeranforderung je nach Gerätetyp an eine bestimmte Site weiter, die für die Verarbeitung eines bestimmten Geräts vorgesehen ist. MitView Managervon Spring Mobile können Entwickler alle Ansichten flexibel in ein vordefiniertes Format bringen, und Spring Mobile verwaltet die verschiedenen Ansichten je nach Gerätetyp automatisch

3. Erstellen einer Anwendung

Erstellen Sie jetzt eine Demo-Anwendung mit Spring Mobile mit Spring Boot undFreemarker Template Engine und versuchen Sie, Gerätedetails mit minimalem Codierungsaufwand zu erfassen.

3.1. Maven-Abhängigkeiten

Bevor wir beginnen, müssen wir die folgenden Spring Mobile-Abhängigkeiten inpom.xml hinzufügen:


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

Wir können die neueste Version von Spring Mobile inCentral Maven Repository überprüfen.

3.2. Erstellen Sie Freemarker-Vorlagen

Lassen Sie uns zunächst unsere Indexseite mit Freemarker erstellen. Vergessen Sie nicht, die erforderliche Abhängigkeit anzugeben, um die automatische Konfiguration für Freemarker zu aktivieren.

Da wir versuchen, das Absendergerät zu erkennen und die Anforderung entsprechend weiterzuleiten, müssen wir drei separate Freemarker-Dateien erstellen, um dies zu beheben. Eine für eine mobile Anfrage, eine für ein Tablet und die letzte (Standard) für eine normale Browseranfrage.

Wir müssen zwei Ordner mit den Namen "mobile" und "tablet" untersrc/main/resources/templateserstellen und die Freemarker-Dateien entsprechend ablegen. Die endgültige Struktur sollte folgendermaßen aussehen:

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

Fügen wir nun die folgendenHTML inindex.ftl Dateien ein:

You are into browser version

Abhängig vom Gerätetyp ändern wir den Inhalt innerhalb des<h1>-Tags.

3.3. Aktivieren SieDeviceDelegatingViewresolver

Um den Dienst von Spring MobileDeviceDelegatingViewresolverzu aktivieren, müssen Sie die folgende Eigenschaft inapplication.properties: einfügen

spring.mobile.devicedelegatingviewresolver.enabled: true

Die Site-Einstellungsfunktion ist in Spring Boot standardmäßig aktiviert, wenn Sie den Spring Mobile-Starter einschließen. Sie kann jedoch deaktiviert werden, indem Sie die folgende Eigenschaft auf false setzen:

spring.mobile.sitepreference.enabled: true

3.4. Erstellen Sie einen Controller

Jetzt müssen wir eineController-Klasse erstellen, um die eingehende Anforderung zu verarbeiten. Wir würden die einfache Annotation@GetMappingverwenden, um die Anfrage zu bearbeiten:

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

Ein paar Dinge, die Sie hier beachten sollten:

Bei der Handler-Zuordnungsmethode übergeben wirorg.springframework.mobile.device.Device. Dies ist die injizierte Geräteinformation bei jeder Anforderung. Dies geschieht durchDeviceDelegatingViewresolver, die wir inapllication.properties aktiviert haben
Dasorg.springframework.mobile.device.Device hat einige eingebaute Methoden wieisMobile(), isTablet(), getDevicePlatform() usw. Mit diesen können wir alle benötigten Geräteinformationen erfassen und nutzen

3.5. Java Config

Wir sind fast fertig. Als letztes müssen Sie eine Spring Boot-Konfigurationsklasse erstellen, um die Anwendung zu starten:

@SpringBootApplication
public class Application {

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

4. Testen der Anwendung

Sobald wir die Anwendung starten, wird sie aufhttp://localhost:8080 ausgeführt.

We will use Google Chrome’s Developer Console to emulate different kinds of device. Wir können es aktivieren, indem wirctrl + shift + i oderF12. drücken

Wenn wir die Hauptseite öffnen, sehen wir standardmäßig, dass Spring Web das Gerät als Desktop-Browser erkennt. Wir sollten das folgende Ergebnis sehen:

Jetzt klicken wir im Konsolenfenster auf das zweite Symbol oben links. Es würde eine mobile Ansicht des Browsers ermöglichen.

In der oberen linken Ecke des Browsers ist ein Dropdown-Menü zu sehen. In der Dropdown-Liste können Sie verschiedene Gerätetypen auswählen. Um ein mobiles Gerät zu emulieren, wählen Sie Nexus 6P und aktualisieren Sie die Seite.

Sobald wir die Seite aktualisieren, werden wir feststellen, dasscontent of the page changes because DeviceDelegatingViewresolver has already detected that the last request came from a mobile device. die Dateiindex.ftl im mobilen Ordner in den Vorlagen übergeben hat.

Hier ist das Ergebnis:

Ebenso werden wir eine Tablet-Version emulieren. Wählen Sie wie beim letzten Mal das iPad aus der Dropdown-Liste aus und aktualisieren Sie die Seite. Der Inhalt wird geändert und sollte als Tablettansicht behandelt werden:

Jetzt werden wir sehen, ob die Site Preference-Funktionalität wie erwartet funktioniert oder nicht.

Fügen Sie zum Simulieren eines Echtzeitszenarios, in dem der Benutzer die Site mobilfreundlich anzeigen möchte, einfach den folgenden URL-Parameter am Ende der Standard-URL hinzu:

?site_preference=mobile

Nach dem Aktualisieren sollte die Ansicht automatisch in die mobile Ansicht verschoben werden, d. H. Der folgende Text wird angezeigt: "Sie befinden sich in der Mobilversion".

Um die Tablet-Einstellungen zu simulieren, fügen Sie am Ende der Standard-URL einfach den folgenden URL-Parameter hinzu:

?site_preference=tablet

Und genau wie beim letzten Mal sollte die Ansicht automatisch auf die Tablet-Ansicht aktualisiert werden.

Beachten Sie, dass die Standard-URL unverändert bleibt. Wenn der Benutzer die Standard-URL erneut durchläuft, wird der Benutzer je nach Gerätetyp zur entsprechenden Ansicht weitergeleitet.

5. Fazit

Wir haben gerade eine Webanwendung erstellt und die plattformübergreifende Funktionalität implementiert. Aus Sicht der Produktivität ist dies eine enorme Leistungssteigerung. Spring Mobile eliminates many front-end scripting to handle cross-browser behavior, thus reducing development time.

Der aktualisierte Quellcode ist wie immerover on GitHub.

TOC

Ein Leitfaden für Spring Mobile