CSS e Rich Faces

Assuntos Gerais
#1

Pessoal! Beleza?

Tô precisando de ajuda,

Tô trabalhando com uma aplicação utilizando o Rich Faces, que já possui seu próprio estilo o que facilita muito o desenvolvimento das telas.

Mas o que tô tentanto fazer é colocar um topo e uma base padrão pra todas as páginas da aplicação.

Este é o código da minha página de entrada do sistema

[code]<%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h”%>
<%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f”%>

<%@ taglib uri=“http://richfaces.org/a4j” prefix=“aj4”%>
<%@ taglib uri=“http://richfaces.org/rich” prefix=“rich”%>
<html>
<head>
<title>…::Virtual Teste - Seu Ambiente de Avaliação Virtual::…</title>
</head>
<body>

<f:view >

//COLOCANDO O ESTILO MANUALMENTE FUNCIONA E OBTENHO O QUE QUERO, COMO ABAIXO

	&lt;style&gt;
		.topo{				
			width: 800px;
		}
		.corpo{
			width:800px;
		}			

	&lt;/style&gt;

//PORÉM, NÃO GOSTARIA DE FAZER MANUALMENTE EM TODAS AS PÁGINAS DO SISTEMA PORQUE SÃO MUITAS

&lt;h:graphicImage id="topo" value="/images/topo.jpg"/&gt;
&lt;rich:panel styleClass="corpo"&gt;
    	&lt;f:facet name="header" &gt;
    		&lt;h:outputText value=""/&gt;
    	&lt;/f:facet&gt;
    	<br>
    	
    	&lt;rich:panel&gt;
    		&lt;f:facet name="header" &gt;
    			&lt;h:outputText value="ENTRE COM OS DADOS DO USUÁRIO"/&gt;
    		&lt;/f:facet&gt;
    		<br>
    		&lt;h:outputText value="USUÁRIO OU SENHA INVÁLIDOS!" rendered="#{validaLogin.usuarioNaoEncontrado}"/&gt;<br>
    		&lt;h:outputText value="TENTE NOVAMENTE!" rendered="#{validaLogin.usuarioNaoEncontrado}"/&gt;
    		
    		&lt;h:messages/&gt;
    		&lt;h:form id="Login" style="width:25%; "&gt;        			       				
    			
   					&lt;h:panelGrid columns="2"&gt;
        				&lt;h:outputText value="Usuário: "/&gt;
        				&lt;h:inputText requiredMessage="Informe o Usuário!" 
        							 validatorMessage="Seu usuário deve ter menos que 20 dígitos" 
        							 id="Usuario" required="true" 
        							 value="#{validaLogin.usuario.usuario}" size="20"&gt;
        					&lt;f:validateLength maximum="20"/&gt;
        				&lt;/h:inputText&gt;
        				
        				&lt;h:outputText value="Senha:"/&gt;
        				&lt;h:inputSecret validatorMessage="Sua senha deve ter menos que 20 dígitos" 
        							   id="Senha" required="true" 
        							   value="#{validaLogin.usuario.senha}" size="20"&gt;
        					&lt;f:validateLength maximum="20"/&gt;
        				&lt;/h:inputSecret&gt;
        				&lt;h:commandButton id="login" action="#{validaLogin.validarLogin}" value="Enviar"/&gt;        					
        				&lt;h:commandButton id="Limpar" type="reset" value="Cancelar"/&gt;
    				&lt;/h:panelGrid&gt;
    				        				
    					    				        				
   				        		
    		&lt;/h:form&gt;
    		
    	&lt;/rich:panel&gt;
    	
    &lt;/rich:panel&gt;
    
	&lt;h:graphicImage value="/images/base.jpg"/&gt;

</f:view>

</body>
</html>
[/code]

COMO POSSO FAZER REFERÊNCIA A UMA FOLHA DE ESTILOS NESTE CASO E APLICAR OS ESTILOS AOS COMPONENTES

POR EXEMPLO,

NA PÁGINA JPS, QUE COMPONENTE DEVO UTILIZAR NO QUAL A REFERÊNCIA (POR EXEMPLO O LOCAL DA IMAGEM) VAI ESTAR APENAS NA FOLHA DE ESTILO?

#2

Você pode usar facelets para criar os templates de top e bottom :stuck_out_tongue: dá uma olhada em https://facelets.dev.java.net/

Ps.: cuidado com o caps lock :slight_smile:

#3

[quote=Leozin]Você pode usar facelets para criar os templates de top e bottom :stuck_out_tongue: dá uma olhada em http://www.google.com/url?sa=t&source=web&cd=1&ved=0CB0QFjAA&url=https%3A%2F%2Ffacelets.dev.java.net%2F&ei=4ul8TO24LoO8lQeur-DrCw&usg=AFQjCNH9xh-uwQ2iBV3ilrhBxoSEKVfeMQ

Ps.: cuidado com o caps lock :)[/quote]

Leozin,

Dei uma olhada no link que você enviou mas tem um problema,

Mas tem muita coisa, tô com o tempo apertado pra terminar o projeto e não vou poder olhar com atenção a documentação pra aprender bacana facelets

Tu tens um exemplo que poderia usar como padrão pra minha aplicação?

Valeu

#4