Bem vindo à parte seis da série de artigo sobre o LocaleChangeInterceptor 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).
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.
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.
Baixar o código fonte
Clique aqui para baixar o código fonte (21kb, zip)
Traduzido de viralpatel.net