Ein Leitfaden für Spring Mobile

1. Übersicht

Spring Mobile ist eine moderne Erweiterung des beliebten Spring Web MVC- Frameworks, das die Entwicklung von Webanwendungen vereinfacht, die mit geräteübergreifenden Plattformen mit minimalem Aufwand und weniger Boilerplate-Codierung vollständig oder teilweise kompatibel sein müssen.

In diesem Artikel lernen wir das Spring Mobile-Projekt kennen und erstellen ein Beispielprojekt, um die Verwendung von Spring Mobile hervorzuheben.

2. Funktionen von Spring Mobile

  • Automatische Geräteerkennung: Spring Mobile verfügt über eine integrierte serverseitige Abstraktionsschicht für Geräte-Resolver. Dies analysiert alle eingehenden Anforderungen und erkennt Absendergeräteinformationen, z. B. einen Gerätetyp, ein Betriebssystem usw.
  • Site Preference Management: Mit dem Site Preference Management können Benutzer in Spring Mobile zwischen Mobile / Tablet / Normalansicht der Website wählen. Es ist eine vergleichsweise veraltete Technik, da wir mit DeviceDelegatingViewresolver die Ansichtsebene je nach Gerätetyp beibehalten können, ohne dass die Benutzer etwas eingeben müssen
  • Site Switcher : Site Switcher kann die Benutzer automatisch auf die am besten geeignete Ansicht entsprechend ihrem Gerätetyp (z. B. Mobil, Desktop usw.) umschalten.
  • 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. Mit dem View Manager von 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

Lassen Sie uns nun eine Demo-Anwendung mit Spring Mobile mit Spring Boot und Freemarker Template Engine erstellen und versuchen, Gerätedetails mit minimalem Codierungsaufwand zu erfassen.

3.1. Maven-Abhängigkeiten

Bevor wir beginnen, müssen wir die folgende Spring Mobile-Abhängigkeit in die pom.xml einfügen :

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

Bitte beachten Sie, dass die neueste Abhängigkeit im Spring Milestones-Repository verfügbar ist. Fügen Sie diese also auch in unsere pom.xml ein :

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

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 die Bearbeitung einer mobilen Anfrage, eine für die Bearbeitung von Tablets und die letzte (Standard) für die Bearbeitung normaler Browseranfragen.

Wir müssen zwei Ordner mit den Namen ' mobile ' und ' tablet ' unter src / main / resources / templates erstellen 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 den folgenden HTML- Code in die index.ftl- Dateien ein:

Je nach Gerätetyp ändern wir den Inhalt im

Etikett,

3.3. Aktivieren DeviceDelegatingViewresolver

Um den Spring Mobile DeviceDelegatingViewresolver- Dienst zu aktivieren , müssen wir die folgende Eigenschaft in application.properties einfügen :

spring.mobile.devicedelegatingviewresolver.enabled: true 

Die Site-Voreinstellungsfunktion 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. Fügen Sie Freemarker-Eigenschaften hinzu

Damit Spring Boot unsere Vorlagen finden und rendern kann, müssen wir unseren application.properties Folgendes hinzufügen :

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

3.5. Erstellen Sie einen Controller

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

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

Ein paar Dinge, die hier zu beachten sind:

  • Bei der Handler-Zuordnungsmethode übergeben wir org.springframework.mobile.device.Device . Dies sind die injizierten Geräteinformationen bei jeder Anforderung. Dies erfolgt durch DeviceDelegatingViewresolver, den wir in den Eigenschaften apllication.properties aktiviert haben
  • Das org.springframework.mobile.device.Device verfügt über einige integrierte Methoden wie isMobile (), isTablet (), getDevicePlatform () usw. Mit diesen können wir alle benötigten Geräteinformationen erfassen und verwenden

3.6. Java Config

Um die Geräteerkennung in einer Spring-Webanwendung zu aktivieren, müssen Sie außerdem einige Konfigurationen hinzufügen:

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

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

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.

Wie immer ist der aktualisierte Quellcode auf GitHub beendet.