Aplicar SKIN do RichFaces aos componentes do padrão do JSF

falvesti · Abril 17, 2008, 11:20am

Salve galera,

Alguém sabe se é possível aplicar um SKIN do Rich Faces a todos os componentes, inclusive os que são padrão do JSF?

Não está funcionando na minha aplicação. Por exemplo o componente <h:commandLink> não fica com o SKIN.

Valeu!

Javabuntu · Abril 17, 2008, 12:40pm

cara de uma forma natural não, porque o RichFaces já espera um parâmetro no web-xml pra definir isso, onde define a cor preferida… blue, ruby…etc…, e os outros componentes não fazem leitura desse parâmetro…

falvesti · Abril 17, 2008, 1:25pm

Certo… A configuração deste parâmetro está ok. Achei que tivesse alguma maneira de fazer com que os outros componentes pudessem ler tbm…

gustavodelgado · Maio 5, 2008, 7:39pm

Bom, eles dizem que é possível sim… mas pra falar a verdade não entedi muito bem como fazer para funcionar. Dê uma olhada:

http://livedemo.exadel.com/richfaces-demo/richfaces/standardSkinning.jsf?c=StandardSkinning#

Eu achava que colocando no web.xml o seguinte:

org.richfaces.CONTROL_SKINNING
enabled

Já bastaria, mas aqui não funcionou não

Krusst · Maio 5, 2008, 7:52pm

seguinte, tem, porem, de uma forma que vc sobre-escreve tudo.

vc ja ouviu falar de sobre-escrever os estilos HTML?

vou postar uma parte do meu css, com isso, vc ja deve saber como fazer o resto

body {
	background-color: #EEE;
}
a {
	color: #666;
	text-decoration: none;
}

a:hover {
	color: #000;
}
h1{
	padding-top:3px;
	font-size: 	11px;
	color: 		#305273;
}
table {
	background:	#DBE2EC;
	float:left;
  }

table, caption{
	background:	url(../img/img_azul_cbc_centro.gif);
	font-size: 	11px;
	color: 		#305273;
}


table,th, td {
	border:	1px solid  #B3B7BC;
  }  

table, thead, tfoot{
	color:#0000FF;
	background:	#DBE2EC;	
  }


tbody tr:hover td, tbody tr:hover th {
	background-color: #E5E5CB;
}

com isso que passei, por exemplo, todas as tabelas tem um cabecalho,corpo e rodope “diferentes” sem voce aplicar nenhum estilo nelas.
o que ocorre ai, é que vc sobre-escreve os estilos padroes do HTML.
como se fosse um override do java.

eu uso dessa forma, e algumas poucos eu crio estilos, e isso funciona razoavelmente bem( no firefoz 100%, ja no IE, tem algumas coisas que nao funcionam)

no IE vai ter coisas que nao vai funcionar mesmo, por exemplo no estilo

tbody tr:hover td, tbody tr:hover th { background-color: #E5E5CB; }
sabe aquele efeito de vc passar o mouse por cima da linha da tabela e esta mudar de cor, essas 3 linhas fazem isso!!!
simples, muito mais facil e bem mais leve que fazer aquele monte de script java script, porem, na joça do IE nao fuciona, me falaram que corrigiram isso no IE8, porem, eu nao testei ainda.

veja se é isso que vc esta precisando, se nao for, da um toqui

falow
T+

eu sei que o pessoal do java meio que “corre” do CSS, mas tenta dar uma estuda em css, no imasters.com.br tem bastante coisa falando sobre isso!

gustavodelgado · Maio 5, 2008, 8:07pm

Bom, mas o que vc disse não tem nada a ver com o Richfaces não é? Posso estar enganado, mas pelo que entendi o Richfaces já tem prontos os estilos, para que a gente não precise definir isso tudo de novo… basta habilitar algo para que ele aplique estes estilos (por baixo dos panos ele deve fazer isso mesmo que vc postou, mas acho que ele já tem tudo pronto de acordo com o skin escolhido).

Krusst · Maio 5, 2008, 11:12pm

sim ele ja tem pronto, porem, pelo que eu entendi, ele queria alterar ou aplicar alguns para os componentes que nao existem
e dessa forma, ele consegue criar/editar e mesclar os estilos
era essa o que eu estava tentando dizer…

abs
T+

rponte · Maio 9, 2008, 2:04pm

Gustavo,

Na verdade no site de demo online do Richfaces há um erro, lá o parâmetro que eles colocam é “enabled”, porém o correto é “enable”. Acerte que deve funcionar.

<context-param> <param-name>org.richfaces.CONTROL_SKINNING</param-name> <param-value>enable</param-value> </context-param>

JotaJota · Setembro 12, 2008, 8:40am

Oi

então… eu coloquei todos os parametros certinho do jeito que se pede:


    <context-param>
    	<param-name>org.rechfaces.SKIN</param-name>
    	<!-- <param-value>emeraldTown</param-value>-->    	 
    	<param-value>classic</param-value> 
    	<!-- <param-value>blueSky</param-value> -->
    	<!-- <param-value>ruby</param-value> -->
    	 <!-- <param-value>wine</param-value> --> 
    	<!-- <param-value>deepMarine</param-value> -->
    	<!-- <param-value>japanCherry</param-value> -->
    	<!-- <param-value>plain</param-value> -->
    </context-param>
    
    
    <context-param>  
    	<param-name>org.richfaces.CONTROL_SKINNING</param-name>  
    	<param-value>enable</param-value>  
 	</context-param>

e mesmo colocando certinho o skin não é aplicado no projeto
qq um que eu esoho ele fica sem nenhum skin em tempo de execução
alguem tem alguma ideia do porque ?
PS: eu estou usando um o Richfaces 3.2

EhRuimHein · Setembro 30, 2008, 8:23am

Extended skinning is not applied to browsers having rich visual styling for controls (e.g. Opera and Safari). Also advanced level of skinning requires support of CSS 2 attribute selectors either as implicit type attributes for button/textarea elements (e.g. IE7 in standards compilant mode) or CSS 3 draft namespace selectors (e.g. Mozilla Firefox).

Aqui no IE6 não vai ter jeito!

vides · Novembro 21, 2008, 1:00pm

[quote=JotaJota]Oi

então… eu coloquei todos os parametros certinho do jeito que se pede:


    <context-param>
    	<param-name>org.rechfaces.SKIN</param-name>
    	<!-- <param-value>emeraldTown</param-value>-->    	 
    	<param-value>classic</param-value> 
    	<!-- <param-value>blueSky</param-value> -->
    	<!-- <param-value>ruby</param-value> -->
    	 <!-- <param-value>wine</param-value> --> 
    	<!-- <param-value>deepMarine</param-value> -->
    	<!-- <param-value>japanCherry</param-value> -->
    	<!-- <param-value>plain</param-value> -->
    </context-param>
    
    
    <context-param>  
    	<param-name>org.richfaces.CONTROL_SKINNING</param-name>  
    	<param-value>enable</param-value>  
 	</context-param>

e mesmo colocando certinho o skin não é aplicado no projeto
qq um que eu esoho ele fica sem nenhum skin em tempo de execução
alguem tem alguma ideia do porque ?
PS: eu estou usando um o Richfaces 3.2[/quote]

Cara… eu consegui… a única coisa q mudei ali no teu código é q está “org.rechfaces.SKIN”… e nao “org.richfaces.SKIN”…
Assim nao ia funcionar mesmo…

blackout · Abril 6, 2009, 7:48am

Pessoal,

Aproveitando o tópico, eu queria saber se existe uma maneira de misturar duas cores de escolha minha no SKIN, por exemplo, se eu escolher o SKIN blueSky, vou obter branco com azul claro, eu queria ter um laranja com azul, mas não tem SKIN que tenha essas cores.

Posso personalizar isso???

Desde já agradeço toda ajuda!

marciomaciel · Junho 15, 2009, 1:24pm

Alguém sabe se é possível usar o css ro richfaces para aplicar em outros componentes como <h:outputText> JSF?

Marcio_Nogueira · Setembro 18, 2009, 10:44am

Você já testou com navegadores diferentes? Como o Òpera, Fire Fox, etc?

lipe82 · Abril 3, 2012, 12:41pm

Pessoal, eu estou tentando aplicar as minhas configurações css no xhtml para JSF1.2 e RichFaces3.3.
Mas sem sucesso. Alguém pode me ajudar?

<style type="text/css">

.rich-table-thead {
background-color: #2F4388;
font-size: 20px;
background-image: none;
}
</style>

...

<rich:dataTable
value="#{consultaInconsistenciasImportacaoBean.arquivosInconsistentes}"
rendered="#{consultaInconsistenciasImportacaoBean.listSize > 0}"
var="arquivo" width="100%" cellspacing="1"
cellpadding="0" rows="20">
<rich:column>
  <f:facet name="header">
   <h:outputText value="Nome do arquivo" />
  </f:facet>
  <h:outputText value="#{arquivo.nomeArquivo}" />
</rich:column>

Também tentei com rf-dt-hdr e não deu certo. Usei o firebug do firefox para descobrir o nome da tag do rich para poder sobreescreve-la.
E também coloquei essa configuração no web.xml

<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name> 
<param-value>disable</param-value> 
</context-param> 
<context-param> 
<param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name> 
<param-value>disable</param-value> 
</context-param>

Alguém tem outra dica? Obrigado.

alias · Abril 3, 2012, 1:18pm

[quote=lipe82]Pessoal, eu estou tentando aplicar as minhas configurações css no xhtml para JSF1.2 e RichFaces3.3.
Mas sem sucesso. Alguém pode me ajudar?

<style type="text/css">

.rich-table-thead {
background-color: #2F4388;
font-size: 20px;
background-image: none;
}
</style>

...

<rich:dataTable
value="#{consultaInconsistenciasImportacaoBean.arquivosInconsistentes}"
rendered="#{consultaInconsistenciasImportacaoBean.listSize > 0}"
var="arquivo" width="100%" cellspacing="1"
cellpadding="0" rows="20">
<rich:column>
  <f:facet name="header">
   <h:outputText value="Nome do arquivo" />
  </f:facet>
  <h:outputText value="#{arquivo.nomeArquivo}" />
</rich:column>

Também tentei com rf-dt-hdr e não deu certo. Usei o firebug do firefox para descobrir o nome da tag do rich para poder sobreescreve-la.
E também coloquei essa configuração no web.xml

<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name> 
<param-value>disable</param-value> 
</context-param> 
<context-param> 
<param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name> 
<param-value>disable</param-value> 
</context-param>

Alguém tem outra dica? Obrigado.[/quote]

Pra sobrescrever os estilos do rich, tente usar o !important nos atributos da classe que voce criou. tipo isso aqui

<style type="text/css">

.rich-table-thead {
background-color: #2F4388 !important;
font-size: 20px !important;
background-image: none !important;
}

JotaJota · Abril 3, 2012, 2:39pm

Dá uma olhada na configuração correta do web.xml.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>overun</display-name>
	 <session-config>  
        <session-timeout>30</session-timeout>  
    </session-config>
    
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
	</welcome-file-list>
	<context-param>
		<param-name>org.richfaces.SKIN</param-name>
	<!-- <param-value>emeraldTown</param-value>-->           
    <!-- <param-value>blueSky</param-value> -->  
    <!-- <param-value>ruby</param-value> -->  
    <!-- <param-value>wine</param-value> -->   
    <!-- <param-value>deepMarine</param-value> -->  
    <!-- <param-value>japanCherry</param-value> -->  
    <!-- <param-value>plain</param-value> -->  
	<param-value>classic</param-value>
	</context-param>
	
<!--	<context-param>-->
<!--		<param-name>facelets.BUILD_BEFORE_RESTORE</param-name>-->
<!--		<param-value>true</param-value>-->
<!--	</context-param>-->

	<context-param>
      <param-name>org.richfaces.CONTROL_SKINNING</param-name>
      <param-value>enable</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>server</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
		<param-value>.xhtml</param-value>
	</context-param>
	<filter>
		<display-name>Ajax4jsf Filter</display-name>
		<filter-name>ajax4jsf</filter-name>
		<filter-class>org.ajax4jsf.Filter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>ajax4jsf</filter-name>
		<servlet-name>Faces Servlet</servlet-name>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
		<dispatcher>INCLUDE</dispatcher>
	</filter-mapping>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.jsf</url-pattern>
	</servlet-mapping>
		<servlet>
	<servlet-name>teste</servlet-name>
	<servlet-class>ServletVendaToPagSeguro</servlet-class>
	</servlet>
	<servlet-mapping>
	<servlet-name>teste</servlet-name>
	<url-pattern>/servlet/teste</url-pattern>
	</servlet-mapping>
	
	
</web-app>

system · Dezembro 29, 2015, 10:23pm

Aplicar SKIN do RichFaces aos componentes do padrão do JSF

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