Panduan untuk Spring Mobile

1. Gambaran keseluruhan

Spring Mobile adalah peluasan moden untuk rangka kerja Spring Web MVC yang popular yang membantu mempermudah pengembangan aplikasi web, yang perlu sepenuhnya atau sebahagiannya serasi dengan platform silang peranti, dengan usaha minimum dan pengekodan boilerplate yang lebih sedikit.

Dalam artikel ini, kita akan belajar mengenai projek Spring Mobile, dan kita akan membina contoh projek untuk menyoroti penggunaan Spring Mobile.

2. Ciri-ciri Spring Mobile

  • Pengesanan Peranti Automatik: Spring Mobile mempunyai lapisan abstraksi penyelesai peranti sisi pelayan terbina dalam. Ini menganalisis semua permintaan masuk dan mengesan maklumat peranti pengirim, misalnya, jenis peranti, sistem operasi, dll
  • Pengurusan Keutamaan Laman: Menggunakan Pengurusan Keutamaan Laman, Spring Mobile membolehkan pengguna memilih paparan mudah alih / tablet / laman web biasa. Ini teknik yang sudah tidak digunakan lagi kerana dengan menggunakan DeviceDelegatingViewresolver kita dapat mempertahankan lapisan pandangan bergantung pada jenis peranti tanpa menuntut input dari sisi pengguna
  • Site Switcher : Site Switcher mampu menukar pengguna secara automatik ke paparan yang paling sesuai mengikut jenis perantinya (iaitu mudah alih, desktop, dll.)
  • Device Aware View Manager : Biasanya, bergantung pada jenis peranti, kami meneruskan permintaan pengguna ke situs tertentu yang dimaksudkan untuk menangani perangkat tertentu. Pengurus Pandangan Spring Mobile membolehkan fleksibiliti pengembang untuk meletakkan semua paparan dalam format yang telah ditentukan dan Spring Mobile akan memudar pandangan berbeza secara automatik berdasarkan jenis peranti

3. Membina Aplikasi

Sekarang mari kita buat aplikasi demo menggunakan Spring Mobile dengan Spring Boot dan Freemarker Template Engine dan cuba merakam perincian peranti dengan jumlah pengekodan minimum.

3.1. Ketergantungan Maven

Sebelum memulakan, kita perlu menambahkan pergantungan Spring Mobile berikut di pom.xml :

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

Harap maklum bahawa kebergantungan terbaru tersedia di repositori Spring Milestones, jadi mari kita tambahkan ini di pom.xml kami juga:

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

3.2. Buat Templat Freemarker

Pertama, mari buat halaman indeks kami menggunakan Freemarker. Jangan lupa untuk meletakkan kebergantungan yang diperlukan untuk mengaktifkan konfigurasi automatik untuk Freemarker.

Oleh kerana kami berusaha mengesan peranti pengirim dan mengarahkan permintaan dengan sewajarnya, kami perlu membuat tiga fail Freemarker yang berasingan untuk mengatasi hal ini; satu untuk menangani permintaan mudah alih, yang lain untuk mengendalikan tablet dan yang terakhir (lalai) untuk menangani permintaan penyemak imbas biasa.

Kita perlu membuat dua folder bernama ' mobile ' dan ' tablet ' di bawah src / main / resources / templat dan meletakkan fail Freemarker dengan sewajarnya. Struktur akhir kelihatan seperti ini:

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

Sekarang, mari letakkan HTML berikut di dalam fail index.ftl :

Bergantung pada jenis peranti, kami akan mengubah kandungan di dalamnya

teg,

3.3. Dayakan DeviceDelegatingViewresolver

Untuk mengaktifkan perkhidmatan Spring Mobile DeviceDelegatingViewresolver , kita perlu memasukkan harta berikut di dalam application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true 

Fungsi keutamaan laman diaktifkan secara lalai dalam Spring Boot apabila anda memasukkan starter Spring Mobile. Walau bagaimanapun, ia boleh dilumpuhkan dengan menetapkan sifat berikut ke palsu:

spring.mobile.sitepreference.enabled: true

3.4. Tambah Properties Freemarker

Untuk Spring Boot dapat mencari dan memberikan templat kami, kami perlu menambahkan yang berikut ke aplikasi kami .

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

3.5. Buat Pengawal

Sekarang kita perlu membuat kelas Controller untuk menangani permintaan masuk. Kami akan menggunakan anotasi @GetMapping yang mudah untuk menangani permintaan:

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

Beberapa perkara yang perlu diperhatikan di sini:

  • Dalam kaedah pemetaan pengendali, kami menyampaikan org.springframework.mobile.device.Device . Ini adalah maklumat peranti yang disuntik dengan setiap permintaan. Ini dilakukan oleh DeviceDelegatingViewresolver yang telah kami aktifkan di apllication.properties
  • The org.springframework.mobile.device.Device mempunyai beberapa kaedah inbuilt seperti isMobile (), isTablet (), getDevicePlatform () dll. Dengan menggunakan ini, kita dapat menangkap semua maklumat peranti yang kita perlukan dan menggunakannya

3.6. Konfigurasi Java

Untuk membolehkan pengesanan peranti dalam aplikasi web Spring, kami juga perlu menambahkan beberapa konfigurasi:

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

Kami hampir selesai. Satu perkara terakhir yang perlu dilakukan ialah membina kelas konfigurasi Spring Boot untuk memulakan aplikasi:

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

4. Menguji Aplikasi

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.

Seperti biasa, kod sumber yang dikemas kini ada di GitHub.