[Resolvido] Mudar cor da linha de um dataTable

Agr0 · Fevereiro 15, 2017, 2:17pm

Pessoal,

Tenho um dataTable e gostaria de mudar a cor dos registros das tarefas (essa é a classe) que não foram finalizadas até a dataPrazo. O dataTable ta pronto e funcionando corretamente. Só preciso agora mudar a cor dos registros baseado na condição acima…
Como posso fazer isso ?

		<p:dataTable id="listatarefas" value="#{tarefaBean.tarefas}"
						var="tarefa" rows="20" cellpadding="5" paginator="true"
						emptyMessage="Nenhum registro encontrado">

						<f:facet name="caption">

							<br />
						</f:facet>

						<p:column width="4%">
							<f:facet name="header">#</f:facet>
							<h:outputText value="#{tarefa.tarefa}" />
						</p:column>

						<p:column width="20%" style="white-space:normal !important;">
							<f:facet name="header">Nome</f:facet>
							<h:outputText value="#{tarefa.nome}" />
						</p:column>

						<p:column style="white-space:normal !important;" width="20%">
							<f:facet name="header">Início</f:facet>
							<h:outputText value="#{tarefa.dataInicio}">
								<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
							</h:outputText>
						</p:column>

						<p:column style="white-space:normal !important;" width="20%">
							<f:facet name="header">Prazo</f:facet>
							<h:outputText value="#{tarefa.dataPrazo}">
								<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
							</h:outputText>
						</p:column>

						<p:column style="white-space:normal !important;" width="20%">
							<f:facet name="header">Fim</f:facet>
							<h:outputText value="#{tarefa.dataFim}">
								<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
							</h:outputText>
						</p:column>

						<p:column style="white-space:normal !important;" width="12%">
							<f:facet name="header">Projeto</f:facet>
							<h:outputText value="#{tarefa.projeto.nome}" />
						</p:column>

						<p:column style="white-space:normal !important;" width="15%">
							<f:facet name="header">Atendente</f:facet>
							<h:outputText value="#{tarefa.usuarioAtendente.nome}" />
						</p:column>

						<p:column style="white-space:normal !important;" width="15%">
							<f:facet name="header">Solicitante</f:facet>
							<h:outputText value="#{tarefa.usuarioSolicitante.nome}" />
						</p:column>
						
						
						<p:column width="20%" style="white-space:normal !important;">
							<f:facet name="header">Referência do equipamento</f:facet>
							<h:outputText value="#{tarefa.referenciaEquipamento}"/>
						</p:column>

						<p:column style="white-space:normal !important;" width="15%">
							<f:facet name="header">Status</f:facet>
							<h:outputText value="#{tarefa.statusTarefa.nome}" style="color:black;font-weight:bold"/>
						</p:column>
						
						<p:column width="4%">
							<h:commandLink action="#{tecnicoSessaoBean.editarTarefa}">
								<h:graphicImage library="imagens" name="itens_req.png"
									style="border:0" title="Editar" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.codigoTarefa}"
									value="#{tarefa.tarefa}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.nomeTarefa}" value="#{tarefa.nome}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.dataInicioTarefa}"
									value="#{tarefa.dataInicio}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.dataPrazoTarefa}"
									value="#{tarefa.dataPrazo}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.dataFimTarefa}"
									value="#{tarefa.dataFim}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.usuario}"
									value="#{tarefa.usuarioAtendente.nome}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.usuario2}"
									value="#{tarefa.usuarioSolicitante.nome}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.projeto}"
									value="#{tarefa.projeto.nome}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.descricaoSolicitanteTarefa}"
									value="#{tarefa.descricaoSolicitante}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.descricaoAtendenteTarefa}"
									value="#{tarefa.descricaoAtendente}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.referenciaEquipamento}"
									value="#{tarefa.referenciaEquipamento}" />

								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.statusTarefa}"
									value="#{tarefa.statusTarefa.nome}" />
							</h:commandLink>
						</p:column>

						<p:column width="4%">
							<h:commandLink action="#{tarefaBean.verDetalhe}">
								<h:graphicImage library="imagens" name="detalhe.png"
									style="border:0" title="Ver detalhes" />
								<f:setPropertyActionListener target="#{tarefaBean.codigoTarefa}"
									value="#{tarefa.tarefa}" />
							</h:commandLink>
						</p:column>

						<p:column width="4%">
							<h:commandLink action="#{tecnicoSessaoBean.mudarAtendente}"
								onclick="if (!confirm('Deseja pegar essa tarefa?')) return false;">
								<h:graphicImage library="imagens" name="pegartarefa.png"
									style="border:0" title="Pegar tarefa" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.codigoTarefa}"
									value="#{tarefa.tarefa}" />
							</h:commandLink>
						</p:column>

						<p:column>
							<p:commandButton id="selectButton" update=":buscando:display2"
								oncomplete="carDialog.show()" icon="ui-icon-circle-check"
								title="Finalizar tarefa">
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.codigoTarefa}"
									value="#{tarefa.tarefa}" />
								<f:setPropertyActionListener
									target="#{tecnicoSessaoBean.descricaoSolicitanteTarefa}"
									value="#{tarefa.descricaoSolicitante}" />
							</p:commandButton>

						</p:column>


					</p:dataTable>
				
					<p:dialog header="Finalizar tarefa" widgetVar="carDialog"
						resizable="false" id="carDlg" showEffect="fade"
						hideEffect="explode" modal="true">
						<h:panelGrid id="display2" columns="2" cellpadding="4"
							style="margin:0 auto;">

							<h:outputText value="#:" />
							<h:outputText value="#{tecnicoSessaoBean.codigoTarefa}"
								style="font-weight:bold" />

							<p:outputLabel value="Descrição solicitante:" />
							<h:outputText
								value="#{tecnicoSessaoBean.descricaoSolicitanteTarefa}"
								style="font-weight:bold" />

							<p:outputLabel value="Descrição atendente:"
								for="descricaoAtendente" />
							<p:inputTextarea id="descricaoAtendente"
								label="descricaoAtendente"
								value="#{tecnicoSessaoBean.descricaoAtendenteTarefa}" cols="80"
								rows="5" maxlength="400" />

							<h:commandButton action="#{tecnicoSessaoBean.finalizarTarefa}"
								value="Finalizar" />

						</h:panelGrid>
					</p:dialog>

				</h:form>
			</p:panel>
		</h:panelGrid>

Agr0 · Fevereiro 16, 2017, 5:45pm

Pelo que vi posso utilizar o rowStyleClass.

Tentei fazer isso e depois chamar no dataTable, mas nao funcionou.

public String getVerificaPrazo(){
		
		if(tarefa.getDataPrazo().after(getPegaDataAtual())){
			
			return "red";
		}
			
		return null;
	
	}

Como eu poderia fazer algo do tipo utilizando rowStyleClass ?

diego12 · Fevereiro 16, 2017, 10:57pm

vc poderia usar JavaScript

Agr0 · Fevereiro 17, 2017, 2:33am

Nunca utilizei JavaScript… Como vc faria utilizando JavaScript ?

Obrigado desde já

diego12 · Fevereiro 17, 2017, 1:42pm

Entendi errado, desculpa.

Verifique o link:
http://www.primefaces.org/showcase/ui/data/datatable/rowColor.xhtml

#{tarefa.dataPrazo.time le #{MB.dataAtual.time} ? 'old' : null}

e dentro da tag head da pagina

<style>
.old {
  background-color: #fca752 !important;
  color: #000000 !important;
}
</style>

Tenho pouca experiência com PF e JSF, então não estou certo se vai funcionar

Agr0 · Fevereiro 17, 2017, 2:48pm

Fiz isso:

rowStyleClass="#{tarefa.dataPrazo.time le #{tarefaBean.dataAtual.time} ? 'old' : null}"

Deu esse erro:

javax.faces.view.facelets.TagAttributeException: /pages/restrito_tecnico/lista_tarefa.xhtml @63,137 rowStyleClass="#{tarefa.dataPrazo.time le #{tarefaBean.dataAtual.time} ? ‘old’ : null}" Error Parsing: #{tarefa.dataPrazo.time le #{tarefaBean.dataAtual.time} ? ‘old’ : null}
at com.sun.faces.facelets.tag.TagAttributeImpl.getValueExpression(TagAttributeImpl.java:398)
at com.sun.faces.facelets.tag.TagAttributeImpl.getValueExpression(TagAttributeImpl.java:348)
at com.sun.faces.facelets.tag.jsf.ComponentRule$ValueExpressionMetadata.applyMetadata(ComponentRule.java:104)
at com.sun.faces.facelets.tag.MetadataImpl.applyMetadata(MetadataImpl.java:77)
at javax.faces.view.facelets.MetaTagHandler.setAttributes(MetaTagHandler.java:125)
at javax.faces.view.facelets.DelegatingMetaTagHandler.setAttributes(DelegatingMetaTagHandler.java:96)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.doNewComponentActions(ComponentTagHandlerDelegateImpl.java:345)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.apply(ComponentTagHandlerDelegateImpl.java:146)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:114)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:94)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:131)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.apply(ComponentTagHandlerDelegateImpl.java:162)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:114)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:131)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.apply(ComponentTagHandlerDelegateImpl.java:162)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:114)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:131)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.apply(ComponentTagHandlerDelegateImpl.java:162)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:114)
at com.sun.faces.facelets.tag.ui.DefineHandler.applyDefinition(DefineHandler.java:99)
at com.sun.faces.facelets.tag.ui.CompositionHandler.apply(CompositionHandler.java:174)
at com.sun.faces.facelets.impl.DefaultFaceletContext$TemplateManager.apply(DefaultFaceletContext.java:392)
at com.sun.faces.facelets.impl.DefaultFaceletContext.includeDefinition(DefaultFaceletContext.java:363)
at com.sun.faces.facelets.tag.ui.InsertHandler.apply(InsertHandler.java:104)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:94)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:131)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.apply(ComponentTagHandlerDelegateImpl.java:162)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:114)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:94)
at com.sun.faces.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:89)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:94)
at com.sun.faces.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:79)
at com.sun.faces.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:304)
at com.sun.faces.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:363)
at com.sun.faces.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:342)
at com.sun.faces.facelets.impl.DefaultFaceletContext.includeFacelet(DefaultFaceletContext.java:196)
at com.sun.faces.facelets.tag.ui.CompositionHandler.apply(CompositionHandler.java:151)
at com.sun.faces.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:89)
at com.sun.faces.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:79)
at com.sun.faces.facelets.impl.DefaultFacelet.apply(DefaultFacelet.java:148)
at com.sun.faces.application.view.FaceletViewHandlingStrategy.buildView(FaceletViewHandlingStrategy.java:734)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:96)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:97)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:135)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:311)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.primefaces.webapp.filter.FileUploadFilter.doFilter(FileUploadFilter.java:79)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at requisicao.web.filter.ConexaoHibernateFilter.doFilter(ConexaoHibernateFilter.java:34)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:344)
at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:110)
at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.doFilter(FilterSecurityInterceptor.java:84)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:98)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.session.SessionManagementFilter.doFilter(SessionManagementFilter.java:95)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:79)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter.doFilter(SecurityContextHolderAwareRequestFilter.java:55)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(RequestCacheAwareFilter.java:36)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter.doFilter(AbstractAuthenticationProcessingFilter.java:188)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.authentication.logout.LogoutFilter.doFilter(LogoutFilter.java:106)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.context.SecurityContextPersistenceFilter.doFilter(SecurityContextPersistenceFilter.java:80)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:356)
at org.springframework.security.web.FilterChainProxy.doFilter(FilterChainProxy.java:150)
at org.springframework.web.filter.DelegatingFilterProxy.invokeDelegate(DelegatingFilterProxy.java:237)
at org.springframework.web.filter.DelegatingFilterProxy.doFilter(DelegatingFilterProxy.java:167)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:225)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:168)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:98)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:927)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:407)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1001)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:585)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:312)
at java.util.concurrent.ThreadPoolExecutor$Worker.runTask(ThreadPoolExecutor.java:886)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:908)
at java.lang.Thread.run(Thread.java:662)
Caused by: javax.el.ELException: Error Parsing: #{tarefa.dataPrazo.time le #{tarefaBean.dataAtual.time} ? ‘old’ : null}
at com.sun.el.lang.ExpressionBuilder.createNodeInternal(ExpressionBuilder.java:171)
at com.sun.el.lang.ExpressionBuilder.build(ExpressionBuilder.java:188)
at com.sun.el.lang.ExpressionBuilder.createValueExpression(ExpressionBuilder.java:232)
at com.sun.el.ExpressionFactoryImpl.createValueExpression(ExpressionFactoryImpl.java:92)
at com.sun.faces.facelets.tag.TagAttributeImpl.getValueExpression(TagAttributeImpl.java:382)
… 91 more
Caused by: com.sun.el.parser.ParseException: Encountered “{” at line 1, column 29.
Was expecting one of:
"}" …
"." …
"[" …
">" …
“gt” …
"<" …
“lt” …
">=" …
“ge” …
"<=" …
“le” …
"==" …
“eq” …
"!=" …
“ne” …
"&&" …
“and” …
"||" …
“or” …
"*" …
"+" …
"-" …
"?" …
"/" …
“div” …
"%" …
“mod” …

at com.sun.el.parser.ELParser.generateParseException(ELParser.java:2252)
at com.sun.el.parser.ELParser.jj_consume_token(ELParser.java:2134)
at com.sun.el.parser.ELParser.DeferredExpression(ELParser.java:113)
at com.sun.el.parser.ELParser.CompositeExpression(ELParser.java:40)
at com.sun.el.lang.ExpressionBuilder.createNodeInternal(ExpressionBuilder.java:139)
... 95 more

diego12 · Fevereiro 17, 2017, 5:55pm

Perdão

rowStyleClass="#{tarefa.dataPrazo.time le tarefaBean.dataAtual.time ? 'old' : null}"

Se não funcionar

Tente criar métodos que retornam a data no tipo long

public long getDataPrazoLong() {
  // acho que é o método getTime, verifique a documentação
  return getDataPrazo().getTime();
}

Na página

rowStyleClass="#{tarefa.dataPrazoLong le tarefaBean.dataAtualLong ? 'old' : null}"

Tenho pouca experiência com PF e JSF, então não estou certo se vai funcionar

Agr0 · Fevereiro 17, 2017, 6:51pm

O erro parou (o q é bom), mas nada acontece. Utilizei o old e nada, aí fui no aquivo CSS e criei isso:

.vermelho {
    color: #FF0000!important;
    background-color: #000000!important;
    background-image: none!important;
}

Nao acontece nada… Ficou assim:

 rowStyleClass="#{tarefa.dataPrazo.time le tarefaBean.pegaDataAtual.time} ? 'vermelho' : null}">

Esse é o metodo que pega a data atual:

public Date getPegaDataAtual() {
		Calendar calendar = new GregorianCalendar();
		Date date = new Date();
		calendar.setTime(date);
		return calendar.getTime();
	}

Não sei o que pode ser

Para chamar o arquivo CSS eu preciso colocar mais alguma tag no meu dataTable ? Não né?
To aqui pensando numa solucao. Alguma dica ? E obrigado desde já. Já sei que o caminho é esse

diego12 · Fevereiro 17, 2017, 8:07pm

Verifique se está inserindo a classe vermelho no elemento correto (no browser). Se estiver inserindo, mas não no elemento desejado, poderá arrumar com css. Se não estiver inserindo, o problema ainda pode ser o rowStyleClass.

<html>
<head>
<style>
.vermelho {
    color: #FF0000!important;
    background-color: #000000!important;
    background-image: none!important;
}
</style>
</head>
<body>
conteudo
</body>
</html>

Isso deve estar dentro da tag head, é melhor para testar, depois vc poderá usar um arquivo css:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

não

Agr0 · Fevereiro 20, 2017, 7:40pm

Fiz um teste… Mudei apenas a cor e funcionou!

rowStyleClass="vermelho"

Só pode ser algo errado na condição

rowStyleClass="#{tarefa.dataPrazo.time le tarefaBean.pegaDataAtual.time} ? 'vermelho' : null}">

diego12 · Fevereiro 20, 2017, 8:03pm

tente assim:

rowStyleClass="#{tarefa.dataPrazo.time le tarefaBean.pegaDataAtual.time ? 'vermelho' : null}"

Agr0 · Fevereiro 20, 2017, 8:08pm

Funcionou! Obrigado, Diego

Só falta uma condição: tarefa.status for igual a “Pendente”! Vou tentar fazer aqui

[Resolvido] Mudar cor da linha de um dataTable

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI