Temas dinâmicos

Hoje com a quantidade de frameworks e bilbliotecas disponíveis para o frontend é comum o usuário poder customizar a página em tempo de execução, como alterar a cor de componentes por exemplo.

Uma das vantages de se utilizar o Primefaces é que ele possui vários temas gratuitos dísponiveis. Hoje mostro como é simples poder trocar o tema em tempo de execução.

1 – Utilizar um bean de sessão

Geralmente é comum utilizar um bean de sessão para armazenar as informações do usuário, como por exemplo o tema ou os temas.

 
@ManagedBean
@SessionScoped
public class UsuarioMB {
	private String tema;
	
	public String getTema() {
		if(tema == null){
			tema = "bluesky";
		}
		return tema;
	}
}

Veja que a variável tema guardará qual o tema o usuário está utilizando. Veja que no get é feito um teste para verificar se o tema está null, se  estiver null, pega o tema do usuário logado na aplicação.

2 – Escolher qual tema utilizar

Para permitir que o usuário escolha qual tema utilizar, usaremos um componente do primefaces chamado ThemeSwitcher. Não se esqueça de colocar o componente dentro de um h:form.

<h:form>
	<p:themeSwitcher value="#{usuarioMB.tema}">
		<f:selectItems value="#{usuarioMB.temas}" />
	</p:themeSwitcher>
</h:form>

Adicionaremos ao nosso bean de usuário uma lista com os temas que estarão disponíveis para serem trocados.
O Resultado do nosso bean será assim:

@ManagedBean
@SessionScoped
public class UsuarioMB {
	private String tema;
	private List<String> temas;
	
	public String getTema() {
		if(tema == null){
			tema = "bluesky";
		}
		return tema;
	}
	
	public List<String> getTemas() {
		if(temas == null){
			temas = new ArrayList<String>();
			temas.add("bootstrap");
			temas.add("cupertino");
			temas.add("dark-hive");
			temas.add("bluesky");
			temas.add("blitzer");
			}
		return temas;
		}
	
	public void setTemas(List<String> temas) {
		this.temas = temas;
	}
}
Bean de Temas

3 – Configurar web.xml

Será necessário alterar o arquivo web.xml para indicar ao Primefaces onde buscar o tema.

<context-param>
	<param-name>primefaces.THEME</param-name>
	<param-value>#{usuarioMB.tema}</param-value>
</context-param>
web.xml

Finalizado isso você já pode executar a aplicação.
Perceba que ao trocar o tema no nosso componente de seleção o Primefaces trocará por Ajax automaticamente a inteface de seus componentes

Veja como ficou o resultado nas imagens abaixo:

Se você quiser salvar o tema do usuário no banco de dados basta adicionar ao ThemeSwitcher  <p:ajax listener=”#{usuarioMB.salvarTema}”/> ficando assim o resultado:

<h:form>
	<p:themeSwitcher value="#{usuarioMB.tema}">
		<f:selectItems value="#{usuarioMB.temas}" />
		<p:ajax listener="#{usuarioMB.salvarTema}"/>
	</p:themeSwitcher>
</h:form>

assim a cada vez que o usuario trocar o tema esse método será chamado salvando assim o tema do usuário.

Para finalizar veja como você pode adicionar esses temas a sua aplicação:

maven:

<dependency>
	<groupId>org.primefaces.themes</groupId>
	<artifactId>bootstrap</artifactId>
	<version>1.0.10</version>
</dependency>
<dependency>
	<groupId>org.primefaces.themes</groupId>
	<artifactId>bluesky</artifactId>
	<version>1.0.10</version>
</dependency>
pom.xml

E para quem não utiliza o maven pode fazer o download dos jars direto no site do Primefaces.

DEIXE UMA RESPOSTA