Spring 3 MVC – Parte 6 – Usando temas em uma aplicação Spring – Tutorial através de um Exemplo

Bem vindo à parte seis da série de artigo sobre o Spring 3.0 MVC. No artigo anterior vimos como adicionar suporte a internacionalização i18n e localização L10n a aplicações web baseados no Spring. UsamosLocaleChangeInterceptor para interceptar a alteração no idioma e a classe ReloadableResourceBundleMessageSource para adicionar esse recurso na aplicação.

Nessa parte iremos ver como adicionar Temas ao Spring MVC. Criaremos três diferentes temas e adicionaremos funcionalidade a nosso projeto HelloWorldSpring para que o usuário selecione um tema, possa salva-lo nos cookies para que suas mudanças sejam persistentes entre diferentes sessões.

Introdução à Temas no Spring MVC

Uma tema é uma coleção de recursos estáticos, tipicamente folhas de estilo CSS e imagens, que afetam o estilo visual da aplicação. Podemos aplicar temas ao framework Spring MVC para ajustar a aparência geral da aplicação, melhorando dessa forma a experiência do usuário.

Para usar temas em sua aplicação web, você precisa configurar uma implementação da interface org.springframework.ui.context.ThemeSource. A interface WebApplicationContext estende ThemeSource  mas delega suas responsabiliddes a uma implementação dedicata. Por padrão a delegação será feita através uma implementação de org.springframework.ui.context.support.ResourceBundleThemeSource implementation que carrega arquivos de propriedades da raiz do classpath. Para usar uma implementação personalizada de ThemeSource ou configurar o prefixo de ResourceBundleThemeSource, você pode registrar um bean no contexto da aplicação com o nome reservado themeSource. A aplicação web automaticamente irá detectar um bean com esse nome e o usará.

Quando estiver usando ResourceBundleThemeSource, um tema é definido em um arquivo simples de propriedades. O arquivo de propriedades listará os recursos que comporão o tema. Abaixo segue um exemplo:

Nosso objetivo

Nosso objetivo é alterar a aplicação Hello World com Spring 3 MVC desenvolvida nos artigos anteriores e adicionar suporte a Temas a ele. O usuário terá a opção de selecionar o tema entre 3 pré-definidos (padrão, black e blue).

spring-mvc-theme-demo

Adicionando suporte a temas ao Spring 3 MVC

Vamos configurar nossa aplicação Spring 3 MVC para adicionar suporte a temas. Para isso, iremos adicionar o seguinte código ao arquivo spring-servlet.xml.

Arquiv: WebContent/WEB-INF/spring-servlet.xml

<bean id="themeSource"
    class="org.springframework.ui.context.support.ResourceBundleThemeSource">
        <property name="basenamePrefix" value="theme-" />
</bean>

<!-- Theme Change Interceptor and Resolver definition -->
<bean id="themeChangeInterceptor"
    class="org.springframework.web.servlet.theme.ThemeChangeInterceptor">
    <property name="paramName" value="theme" />
</bean>
<bean id="themeResolver"
    class="org.springframework.web.servlet.theme.CookieThemeResolver">
    <property name="defaultThemeName" value="default" />
</bean>


<bean id="handlerMapping"
    class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
    <property name="interceptors">
        <list>
            <ref bean="localeChangeInterceptor" />
            <ref bean="themeChangeInterceptor" />
        </list>
    </property>
</bean>

Na configuração acima, primeiro adicionamos o bean themeSource. Observe que esse bean é ima instância da classe ResourceBundleThemeSource e também especificamos uma propriedade chamada basenamePrefix com o valor “theme-”. A classe ResourceBundleThemeSource carregará os arquivos de propriedades que contenham as definições do tema que começem com o prefixo  “theme-”. Assim, se adicionarmos 3 novos temas a nosso projeto (default, black e blue) então criaremos 3 arquivos de propriedades enquanto teremos certos arquivos de configurações. Além disso, esses arquivos serão adicionados debaixo do classpath do projeto.

Em seguida, definimos um bean interceptador themeChangeInterceptor que é uma instância da classeorg.springframework.web.servlet.theme.ThemeChangeInterceptor. Aqui, observe também que especificamos uma propriedade paramName com o valor theme. Esse interceptador é chamado a qualquer momento que for feita uma requisição com o parâmetro “theme” e valores diferentes.

Uma vez que themeChangeInterceptor intercepte a alteração do tema, as mudanças são então armazenadas em um cookie usando a classe  org.springframework.web.servlet.theme.CookieThemeResolver. Configuramos essa classe em nosso arquivo de configuração spring-servlet.xml. Além disso, note que especificamos um nome padrão de tema com esse bean.

Agora criaremos os seguintes arquivos de propriedades no diretório resources/ de nosso projeto.

spring-mvc-theme-directory-structure

Arquivo: resources/theme-default.properties

css=themes/default.css

Arquivo: resources/theme-blue.properties

css=themes/blue.css

Arquivo: resources/theme-black.properties

css=themes/black.css

Folha de estilo CSS para temas diferentes

Vamos criar agora 3 folhas de estilo CSS que atuarão como arquivos de tema para nosso projeto. Crie os seguintes arquivos CSS no diretório WebContent/themes.

Arquivo: WebContent/themes/default.css

body {
    background-color: white;
    color: black;
}

Arquivo: WebContent/themes/blue.css

body {
    background-color: #DBF5FF;
    color: #007AAB;
}

Arquivo: WebContent/themes/black.css

body {
    background-color: #888;
    color: white;
}

Alterações nos Views JSP

Estamos quase terminando com as alterações e a única parte que falta é adicionar funcionalidade para que os usuários selecionem o tema a partir da interface. Para isso, iremoa alterar o arquivo header.jsp e adicionaremos 3 links para os diferentes temas. O usuário poderá clicar em qualquer um desses links e alterar o tema da aplicação web.

Arquivo: WebContent/WEB-INF/jsp/header.jsp

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<h3><spring:message code="label.title"/></h3>

<span style="float: right">
    <a href="?lang=en">en</a>
    |
    <a href="?lang=de">de</a>
</span>


<span style="float: left">
    <a href="?theme=default">def</a>
    |
    <a href="?theme=black">blk</a>
    |
    <a href="?theme=blue">blu</a>
</span>

Observe que no JSP acima criamos 3 links com o argumento “?theme=”. Dessa forma, seja qual for o link selecionado pelo usuário, uma novo parâmetro será passado para a requisição com o tema apropriado. O interceptador da requisição do Spring  irá capturar esse valor e alterar o tema de acordo.

Isso é tudo pessoal

E é praticamente isso. Apensa adicionamos suporte a Temas a nossa aplicação exemplo. Tudo que tivemos que fazer agora é executar a aplicação pelo Eclipse. pressione Alt + Shift + X, R.

spring-mvc-theme-demo

Baixar o código fonte

Clique aqui para baixar o código fonte (21kb, zip)

Traduzido de viralpatel.net