Primefaces declarar tema por tela[Resolvido]

22 de agosto de 2012 16 respostas

LucianoTulio 22 de agosto de 2012

Estou desenvolvendo um sistema web cujo objetivo eh o controle de envio do documento!!

as telas em xhtml sao o mesmo padrão
mas gostaria de utilizar o thema que criei no themeroller
modifiquei as cores deles e o download deles coloquei em uma
pasta dentro de web-content chamada css

dai na tela tentei utilizar o

<link href="/WebContent/css/azul/css/dot-luv/jquery-ui-1.8.23.custom.css" media="screen" rel="stylesheet" type="text/css"/>

e utilizar

<h:outputStylesheet library="stylesheet" name="/WebContent/css/azul/css/dot-luv/jquery-ui-1.8.23.custom.css"  />

mas ambos não funciona

Alguem ae pra dar uma luz!!!

16 Respostas

Juh_Petri 22 de ago. de 2012

Oi Luciano Tulio…
eu uso da seguinte forma

no meu web.xml tenho definido um tema padrão

<context-param> <param-name>primefaces.THEME</param-name> <param-value>aristo</param-value> </context-param>

na minha template eu defino onde vou importar meu css

&lt;ui:insert name="css"/&gt;

na pagina que eu quero alterar o tema eu uso um ui:define dessa forma

<ui:define name="css"> <link href="#{facesContext.externalContext.request.contextPath}/css/tema2.css" rel="stylesheet" type="text/css" /> </ui:define>

e isso ja funciona… o tema2 substitui o aristo pre-definido no web.xml

LucianoTulio 23 de ago. de 2012

desculpa, mas sou iniciante em jsf2 + primefaces

minha pagina ta da seguinte forma

<html xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"  
    xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">  
  
    <h:head>  
  			<title> Controle de Envio de DACON</title>
  			
                        <ui:insert name="css"/>
  			
                        <ui:define name="css">  
         
                              <link href="/WebContent/css/verde/css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css"/>
       
                        </ui:define>  
  	</h:head>  
      
    <h:body>  
   
    
    	<f:metadata>  
    			<f:event type="preRenderView" listener="#{controleDACONBean.inicializarDACON()}"/>  		
		</f:metadata> 
    		<h:form id="formCabecalho"  >
	    		<p:menubar style="font-size:8pt">  
	        			<p:menuitem value="DCTF" action="dctf?faces-redirect=true"/>
						<p:menuitem value="DACON" action="dacon?faces-redirect=true"/>
						<p:menuitem value="DASN" action="dasn?faces-redirect=true"/>
						<p:menuitem value="DIPJ" action="dipj?faces-redirect=true"/>
						<p:menuitem value="DIRF" action="dirf?faces-redirect=true"/>
						<p:menuitem value="DMED" action="dmed?faces-redirect=true"/>
						<p:menuitem value="DSPJ" action="dspj?faces-redirect=true"/>
						<p:menuitem value="EFD" action="efd?faces-redirect=true"/>
						<p:menuitem value="GFIP/SEFIP" action="gfip?faces-redirect=true"/>
						<p:menuitem value="PER/DCOMP" action="per?faces-redirect=true"/>
						<p:menuitem value="RAIS" action="rais?faces-redirect=true" />
						<p:menuitem value="Sair" url="../../login.jsf" icon="ui-icon-close" action="#{logout.efetuarLogout}"/> 
		    	</p:menubar>
	    		
				<p:panel header="Controlador de Envio de DACON" style="text-align: center;font-size:15px ">
			    	<p:panelGrid id="panelCabecalho"  columns="4" width="1200" style="border:0px;margin-left: auto;
			    																margin-right: auto;font-size:15px;">
			       		<h:panelGroup>
			       				<h:outputText value="Mes/Ano: "/>
			       				<h:outputText value="#{controleDACONBean.nomeMes}/#{controleDACONBean.ano}" style="color:green;
			       																		font-weight:900;font-style:oblique" />
					      		<p:commandButton value="Alterar" label="Alterar" onclick="dlg3.show();" update=":form" immediate="true"/>
			      		</h:panelGroup>
		       			
		       			<h:outputText value="Data de Atualização:   #{controleDACONBean.dataInsercao}"  />
				      	<h:outputText value="Ultima Atualização antes do prazo:   #{controleDACONBean.dataAtualizacaoAntesDoPrazo}  "/>
		      			<h:panelGroup>
		      				<h:outputText value="Ultimo dia para envio:"/>
		      				<h:outputText value="  #{controleDACONBean.dataVencimentoString}" style="color:red;
		      																		font-weight:900;font-style:oblique" />
		      			</h:panelGroup>
		       			<h:outputText value="Quantidade Pendentes: #{controleDACONBean.quantidadePendentes}" />
		      			<h:outputText value="Quantidade Enviadas: #{controleDACONBean.quantidadeEnviadas}" />
		      			<h:outputText value="Quantidade Justificadas: #{controleDACONBean.quantidadeJustificadas}"/>
		      			<h:outputText value="Faltam dias" />
		      		</p:panelGrid>
			    
			    </p:panel>
			</h:form>
	    	<h:form id="form" prependId="false" style="background-color:gray" >
	       		
		       
	 			
	 			<p:layout style="height:450" header="Listas">
	 			
	 					<p:layoutUnit position="west" size="550"  >
	 						<p:dataTable style="widht:100%;font-size:12px" var="lista" value="#{controleDACONBean.pendentes}"
	 							 id="listaPendentes"  border="3" scrollable="true" scrollHeight="370" >
	        				
	        					<f:facet name="header">Lista de DACOM Pendentes</f:facet>
	      							<p:column  width="270" filterBy="#{lista.cliente.razao}">
	      								<f:facet  name="header">Razao</f:facet>
	      								<h:outputText  value="#{lista.cliente.razao}" />
	      							</p:column>
	      							<p:column width="150">
	      								<f:facet name="header">CNPJ</f:facet>
	      								<h:outputText  value="#{lista.cliente.cnpj}" />
	      							</p:column>
		 							<p:column width="40">
	      								<f:facet name="header"> Ações</f:facet>
	 									<p:commandLink title="Confirmar Envio" onclick="dlg.show();" 
	 												update=":formDialogoEnviar:panelEnviar" immediate="true">
	      									<p:graphicImage value="/imagens/tick_button.png" />
	      									<f:setPropertyActionListener target="#{controleDACONBean.selecionadaObrigacoesDacon}" value="#{lista}"/>
	      								</p:commandLink>
									
										<p:commandLink title="Justificar"  oncomplete="dlg2.show();" 
													   update=":formDialogoJustificar:panelJustificar" immediate="true" >
	      									<p:graphicImage value="/imagens/exclamation_button.png" />
	      							 		<f:setPropertyActionListener target="#{controleDACONBean.selecionadaObrigacoesDacon}" value="#{lista}"/>
	      							 	</p:commandLink>     						
									</p:column>
	      					</p:dataTable>
	 					</p:layoutUnit>
	 		
	 					<p:layoutUnit position="center" size="500" >
	 						<p:tabView id="tabView" style="widht:100%;font-size:12px" >
	 			 				<p:tab id="tabalaEnviadas" title="Tabela Enviadas"> 
	 								<p:dataTable style="widht:100%;font-size:12px"  var="lista2" value="#{controleDACONBean.enviadas}"
	 											 id="listaEnviadasDacon" border="3" scrollable="true" scrollHeight="310" >
		      					
		      						<f:facet name="header">Lista de DACOM Enviadas</f:facet>
	      				     		<p:column width="340" filterBy="#{lista2.cliente.razao}">
	      								<f:facet name="header">Razao</f:facet>
	      								<h:outputText value="#{lista2.cliente.razao}" />
	      							</p:column>
	      							<p:column width="130">
		      							<f:facet name="header">CNPJ</f:facet>
	      								<h:outputText value="#{lista2.cliente.cnpj}" />
	      							</p:column>
	      							
	      						</p:dataTable>
	 							</p:tab> 
	 							<p:tab id="tabelaJustificadas" title="Tabela Justificadas"> 
	 								<p:dataTable style="widht:100%;font-size:12px" var="lista3" value="#{controleDACONBean.justificadas}" 
	 										id="listaJustificadasDacon" border="3" scrollable="true" scrollHeight="310">
	      								
	      								<f:facet name="header">Lista de DACON Justificadas</f:facet>
	      									<p:column width="300" filterBy="#{lista3.cliente.razao}">
	      										<f:facet name="header">Razao</f:facet>
	      										<h:outputText value="#{lista3.cliente.razao}" />
	      									</p:column>
	      									
	      									<p:column width="120">
	      										<f:facet name="header">CNPJ</f:facet>
	      										<h:outputText value="#{lista3.cliente.cnpj}" />
	      									</p:column>
	      							
	      									<p:column width="150"  style="overflow: hidden" >
	      										<f:facet name="header">Justificativa</f:facet>
	      										<h:outputText value="#{lista3.justificativa}" />
	      									</p:column>
	      							</p:dataTable>
	     						</p:tab>	
	         				</p:tabView>
	 					</p:layoutUnit>
	 			 </p:layout>
	 			 
	 		</h:form>
 			<h:form id="formDialogoEnviar">
 				<p:dialog  header="Enviar" widgetVar="dlg" modal="true" showEffect="explode" hideEffect="explode"
 				resizable="false" style="font-size:10pt" position="center">  
    			<p:outputPanel id="panelEnviar" style="text-align:center;" layout="block">
					<h:panelGrid columns="1" cellpadding="5"  style="font-size:10pt">
    					<h:panelGroup>
    						<h:outputLabel for="razaoEnviar" value="Razao: " />  
               				<h:outputText id="razaoEnviar" value="#{controleDACONBean.selecionadaObrigacoesDacon.cliente.razao}" /> 
                    	
    					</h:panelGroup>
    					<h:panelGroup>
    						<h:outputLabel for="cnpjEnviar" value="CNPJ: " />  
               				<h:outputText id="cnpjEnviar" value="#{controleDACONBean.selecionadaObrigacoesDacon.cliente.cnpj}" /> 
    					</h:panelGroup>
    					<h:panelGroup>
    						<h:outputLabel for="mesEnviar" value="Mes: " />  
               				<h:outputText id="mesEnviar" value="#{controleDACONBean.selecionadaObrigacoesDacon.mes.nome}" /> 
    					</h:panelGroup>
    					<h:panelGroup>
    						<h:outputLabel for="anoEnviar" value="Ano: " />  
               				<h:outputText id="anoEnviar" value="#{controleDACONBean.selecionadaObrigacoesDacon.ano}" /> 
    					</h:panelGroup>
    					<h:outputText value="#{controleDACONBean.selecionadaObrigacoesDacon.tipo_obrigacoes.tipo}" />
    					<p:fileUpload fileUploadListener="#{fileUploadController.upload}" 
    								   
    								  label="Selecione os Arquivos"
    								  sizeLimit="500000" 
    								  description="Selecione os arquivos" 
    								  multiple="true" 
    								  dragDropSupport="true" 
	 								  invalidSizeMessage="Tamanha maior que o permitido!" 
	 								  invalidFileMessage="Extensão não Permitida" 
	 								  uploadLabel="Subir Arquivos" 
	 								  requiredMessage="Precisa de 2 Arquivos" 
	 								  cancelLabel=" "
	 								  mode="advanced" 
	 								  update="growlEnviar"
	 								  />
	 							    	<f:facet name="footer">
    								<p:commandButton id="EnviarBotton" value="Confirmar Envio"  
                    					 action="#{controleDACONBean.enviarDACON}"
                    					  onclick="dlg2.hide()"  />  
    				</f:facet>				
    				
    				</h:panelGrid>
    			</p:outputPanel>
    		</p:dialog>
    		<p:growl id="growlEnviar" showDetail="true"  />
 			</h:form>
 	 		<h:form id="formDialogoJustificar">
    			<p:dialog id="dialogJustificar" header="Justificar" widgetVar="dlg2" modal="true" style="font-size:10pt" 
    					  showEffect="explode" hideEffect="explode"  resizable="false" position="center">  
    			<h:panelGrid columns="1" cellpadding="5" width="300" id="panelJustificar" style="font-size:10pt" >
    				<h:panelGroup>
    					<h:outputLabel for="razaoJustificar" value="Razao: " />  
               			<h:outputText id="razaoJustificar" value="#{controleDACONBean.selecionadaObrigacoesDacon.cliente.razao}" /> 
                    </h:panelGroup>
    				<h:panelGroup>
    					<h:outputLabel for="cnpjJustificar" value="CNPJ: " />  
               			<h:outputText id="cnpjJustificar" value="#{controleDACONBean.selecionadaObrigacoesDacon.cliente.cnpj}" />
               		</h:panelGroup>
    				<h:panelGroup>
    					<h:outputLabel for="mesJustificar" value="Mes: " />  
               			<h:outputText id="mesJustificar" value="#{controleDACONBean.selecionadaObrigacoesDacon.mes.nome}" />
               		</h:panelGroup>
    				<h:panelGroup>
    					<h:outputLabel for="anoJustificar" value="Ano: " />  
               			<h:outputText id="anoJustificar" value="#{controleDACONBean.selecionadaObrigacoesDacon.ano}" /> 
		   			</h:panelGroup>
    				
    				<h:outputLabel for="justificar" value="justificativa:" />
    				<p:inputTextarea id="justificar" required="true" requiredMessage="Cade a Justificativa?"  autoResize="false"
							maxlength="250"  rows="11" cols="30" value="#{controleDACONBean.selecionadaObrigacoesDacon.justificativa}"/>  
    				<f:facet name="footer">
    					<p:commandButton id="justificarBotton" value="Justificar"  
                    					 action="#{controleDACONBean.justificarDACON}"
                    					 update=":form" onclick="dlg2.hide()" />  
    				</f:facet>
    			</h:panelGrid>
    		</p:dialog>
    		<p:growl id="growlJustificar"  />
    		</h:form>   			
    		<h:form id="formDialogoAlterarData">
    				<p:dialog id="dialogoAlterarData" widgetVar="dlg3" modal="true" showEffect="explode" hideEffect="explode"
    				resizable="false" position="top" style="font-size:10pt" header="Alterar data da DCTF"> 
    				<p:panelGrid columns="2">
    					<h:outputText style="font-size:17px;color:white" value="Ano: " />  
			        	<p:selectOneMenu  value="#{controleDACONBean.ano}">
			        		<f:selectItems value="#{controleDACONBean.listarAnos()}"
			        				var="ano" itemValue="#{ano}" itemLabel="#{ano}" />   
			        	</p:selectOneMenu>
			        	
			        	<h:outputText style="font-size:17px;color:white" value="Mes: "  /> 
			        	<p:selectOneMenu  height="350" value="#{controleDACONBean.mes}"  >
			    			<f:selectItems value="#{controleDACONBean.listarMes()}"  
			       				 var="mes" itemLabel="#{mes.nome}" itemValue="#{mes.id}"/>
			                     <p:column >#{mes.nome}</p:column>
			            </p:selectOneMenu> 
			           <p:commandButton value="Alterar"  update=":form" action="#{controleDACONBean.inicializarDACON()}" onclick="dlg3.hide()" />
    				</p:panelGrid>
    				</p:dialog>
    		</h:form>
 
    		
      	
    </h:body>  
</html>

Desculpa mas não sei como chamar, nunca trabalhei usando a tag <ui: >
se puder me ajudar, no web.xml ele chama para o projeto todo
agora mudar a pagina não

Obrigado

Juh_Petri 23 de ago. de 2012

Peguei seu html e alterei as linhas

<h:head> <title> Controle de Envio de DACON</title> <ui:insert name="css"/> <ui:define name="css"> <link href="/WebContent/css/verde/css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css"/> </ui:define> </h:head>

para

<h:head> <title> Controle de Envio de DACON</title>  <link href="#{facesContext.externalContext.request.contextPath}/css/tema1.css" rel="stylesheet" type="text/css" /> </h:head>

e funcionou aki… se nao funcionar assim manda pra mim seu web.xml

LucianoTulio 23 de ago. de 2012

Muito Obrigado!!!

Deu certo aqui!!!

Juh_Petri 23 de ago. de 2012

Por nada !!!

LucianoTulio 23 de ago. de 2012

Agora so um probleminha, qdo chamo o css meu menu superior ele fica sobre o header do panel
procurei no css se tinha alguma coisa mudada

mas nao consegui achar!!! sabe me flar alguma coisa!!! tentei colocar ele em um form e nao deu certo

Juh_Petri 23 de ago. de 2012

So pra entender vc colocou 2 css no mesmo layout???
não entendi muito bem o que voce disse.

LucianoTulio 23 de ago. de 2012

apenas o menu fica sobre os outros componentes

tentei colocar dentro de um panel mas tbm ele fica sobre os componentes

LucianoTulio 23 de ago. de 2012

Não não, eu coloquei 1 css para sobreescrever o q eu coloquei no web.xml

o problema eh q, gerei o css no themeroller q mostra no site do primefaces

chamo ele do jeito q vc me flou e funcionou certinho, so que o componente

menu fica visualmente sobre outros componentes!

LucianoTulio 23 de ago. de 2012

chamando do jeito que vc me flou

ele muda o css mas ele coloca bug
nos componentes

tabview

no tabview ele mostra as duas abas, depois de clicado
ele volta ao normal, e o menu fica sobre outros componentes

saberia me dizer s eh o css que eu criei pelo
themeroller

http://jqueryui.com/themeroller/

???

Juh_Petri 23 de ago. de 2012

nao consegui testar ainda… pra ver o que ha… estou com problemas pra levantar minha aplicacao
se voce colocar o menu dentro do form nao funciona
eu geralmente uso um form so pra toda pagina. e quando preciso separar uso panel
e meu menu fica em uma template separada

LucianoTulio 23 de ago. de 2012

vc teria algum material
q mostra como desenvolver do tipo q
vc faz?

Juh_Petri 23 de ago. de 2012

passa seu e-mail pra mim que eu te encaminho um exemplo de como faço

LucianoTulio 23 de ago. de 2012

[email removido]

LucianoTulio 24 de ago. de 2012

Obrigado pela ajuda!!!

Os componentes estavam desconfigurado por causa do css
que fiz com o themeroller

juniorsatanas 1 de set. de 2012

como vc fez ? baixou o zip, descompactou jogou no projeto e setou ?

Criado 22 de agosto de 2012

Ultima resposta 1 de set. de 2012

Respostas 16

Participantes 3

16 Respostas

Topicos relacionados