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