Um guia para Spring Mobile

1. Visão geral

Spring Mobile é uma extensão moderna do popular frameworkSpring Web MVC que ajuda a simplificar o desenvolvimento de aplicações web, que precisa ser total ou parcialmente compatível com plataformas entre dispositivos, com mínimo esforço e menos codificação clichê.

Neste artigo, aprenderemos sobre o projeto Spring Mobile e criaremos um projeto de amostra para destacar os usos do Spring Mobile.

2. Recursos do Spring Mobile

Automatic Device Detection: Spring Mobile tem uma camada de abstração de resolução de dispositivo do lado do servidor integrada. Isso analisa todas as solicitações recebidas e detecta as informações do dispositivo do remetente, por exemplo, um tipo de dispositivo, um sistema operacional, etc.
Site Preference Management: Usando o Gerenciamento de Preferência de Site, o Spring Mobile permite que os usuários escolham a visualização móvel / tablet / normal do site. É uma técnica comparativamente obsoleta, pois usandoDeviceDelegatingViewresolver podemos persistir a camada de visualização dependendo do tipo de dispositivo sem exigir nenhuma entrada do lado do usuário
Site Switcher: Site Switcher é capaz de mudar automaticamente os usuários para a visualização mais apropriada de acordo com o tipo de dispositivo (ou seja, celular, computador etc.)
Device Aware View Manager: normalmente, dependendo do tipo de dispositivo, encaminhamos a solicitação do usuário para um site específico destinado a lidar com um dispositivo específico. OView Manager do Spring Mobile permite ao desenvolvedor a flexibilidade de colocar todas as visualizações em formato predefinido e Spring Mobile gerencia automaticamente as diferentes visualizações com base no tipo de dispositivo

3. Construindo um aplicativo

Vamos agora criar um aplicativo de demonstração usando Spring Mobile com Spring Boot eFreemarker Template Enginee tentar capturar detalhes do dispositivo com um mínimo de codificação.

3.1. Dependências do Maven

Antes de começar, precisamos adicionar a seguinte dependência Spring Mobile nopom.xml:


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

Podemos verificar a versão mais recente do Spring Mobile emCentral Maven Repository.

3.2. Crie modelos de Freemarker

Primeiro, vamos criar nossa página de índice usando o Freemarker. Não se esqueça de colocar a dependência necessária para habilitar a configuração automática do Freemarker.

Como estamos tentando detectar o dispositivo remetente e encaminhar a solicitação de acordo, precisamos criar três arquivos Freemarker separados para resolver isso; um para lidar com uma solicitação para celular, outro para lidar com tablet e o último (padrão) para lidar com a solicitação normal do navegador.

Precisamos criar duas pastas chamadas ‘mobile’ e ‘tablet’ emsrc/main/resources/templatese colocar os arquivos do Freemarker de acordo. A estrutura final deve ficar assim:

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

Agora, vamos colocar o seguinteHTML dentro dos arquivosindex.ftl:

You are into browser version

Dependendo do tipo de dispositivo, vamos mudar o conteúdo dentro da tag<h1>,

3.3. HabilitarDeviceDelegatingViewresolver

Para habilitar o serviço Spring MobileDeviceDelegatingViewresolver, precisamos colocar a seguinte propriedade dentro deapplication.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true

A funcionalidade de preferência do site é ativada por padrão no Spring Boot quando você inclui o iniciador do Spring Mobile. No entanto, ele pode ser desabilitado configurando a seguinte propriedade como false:

spring.mobile.sitepreference.enabled: true

3.4. Criar um controlador

Agora precisamos criar uma classeController para lidar com a solicitação de entrada. Usaríamos uma anotação@GetMapping simples para lidar com a solicitação:

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

Algumas coisas a serem observadas aqui:

No método de mapeamento do manipulador, estamos passandoorg.springframework.mobile.device.Device. Essas são as informações do dispositivo injetado em cada solicitação. Isso é feito porDeviceDelegatingViewresolver que habilitamos noapllication.properties
Oorg.springframework.mobile.device.Device tem alguns métodos embutidos comoisMobile(), isTablet(), getDevicePlatform() etc. Usando isso, podemos capturar todas as informações do dispositivo que precisamos e usá-las

3.5. Configuração Java

Estamos quase terminando. Uma última coisa a fazer é criar uma classe de configuração do Spring Boot para iniciar o aplicativo:

@SpringBootApplication
public class Application {

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

4. Testando o aplicativo

Assim que iniciarmos o aplicativo, ele será executado emhttp://localhost:8080.

We will use Google Chrome’s Developer Console to emulate different kinds of device. Podemos ativá-lo pressionandoctrl + shift + i ou pressionandoF12.

Por padrão, se abrirmos a página principal, poderemos ver que o Spring Web está detectando o dispositivo como um navegador de desktop. Devemos ver o seguinte resultado:

Agora, no painel do console, clicamos no segundo ícone no canto superior esquerdo. Isso permitiria uma visualização móvel do navegador.

Pudemos ver uma lista suspensa no canto superior esquerdo do navegador. No menu suspenso, podemos escolher diferentes tipos de tipo de dispositivo. Para emular um dispositivo móvel, vamos escolher o Nexus 6P e atualizar a página.

Assim que atualizarmos a página, notaremos que ocontent of the page changes because DeviceDelegatingViewresolver has already detected that the last request came from a mobile device. Portanto, ele passou o arquivoindex.ftl dentro da pasta mobile nos modelos.

Aqui está o resultado:

Da mesma forma, vamos emular uma versão para tablet. Vamos escolher iPad no menu suspenso como da última vez e atualizar a página. O conteúdo seria alterado e deve ser tratado como uma exibição de tablet:

Agora, veremos se a funcionalidade de preferência do site está funcionando conforme o esperado ou não.

Para simular um cenário em tempo real em que o usuário deseja visualizar o site de maneira otimizada para celular, adicione o seguinte parâmetro de URL no final do URL padrão:

?site_preference=mobile

Depois de atualizada, a visualização deve ser movida automaticamente para a visualização para dispositivos móveis, ou seja, o texto a seguir será exibido ‘Você está na versão móvel '.

Da mesma maneira para simular a preferência do tablet, basta adicionar o seguinte parâmetro de URL no final do URL padrão:

?site_preference=tablet

E, assim como na última vez, a visualização deve ser atualizada automaticamente para a visualização do tablet.

Observe que o URL padrão permanecerá o mesmo e, se o usuário passar novamente pelo URL padrão, ele será redirecionado para a visualização respectiva com base no tipo de dispositivo.

5. Conclusão

Acabamos de criar um aplicativo Web e implementamos a funcionalidade de plataforma cruzada. Do ponto de vista da produtividade, é um tremendo aumento de desempenho. Spring Mobile eliminates many front-end scripting to handle cross-browser behavior, thus reducing development time.

Como sempre, o código-fonte atualizado éover on GitHub.

TOC

Um guia para Spring Mobile