Criando Skin para JBoss Rich Faces

Um breve passo-a-passo de como desenvolver e configurar um SKIN para o Rich Faces.

Passo 1:

Crie um arquivo com o nome do seu skin, é necessário seguir a especificação de nomeclatura: <name>.skin.properties. Como exemplo pode verificar os skins predefinidos do Rich Faces, no pacote richfaces-impl-xxxx.jar dentro da pasta /META-INF/skins.

No meu caso criei o arquivo yross.skin.properties, copiei as chave/valor do skin blueSkyskin.properties para o meu skin.

Passo 2:

Adicione uma tag <context-param> no arquivo web.xml de sua aplicação. Exemplo:

<context-param>
   <param-name>org.richfaces.SKIN</param-name>
   <param-value>name</param-value>
</context-param>

Passo 3:

Coloque seu arquivo em um dos elementos: META-INF/skins ou no classpath de sua aplicação.

Em meu caso coloquei dentro da pasta de recurso, ficando:

Aplicação\src\yross.skin.properties

Passo 4:

Os componentes do rich faces são modelados por CSS, como exemplo, vamos modificar a barra de cabeçalho de um </rich:panel>:

#Colors
headerBackgroundColor=#3fa989
headerGradientColor=#00956b
headerTextColor=#FFFFFF
headerWeightFont=bold

Observação:  Como comentado o arquivo é composto por chave/valor, onde as chaves representam as classes CSS, a definição dos nomes destas classes podem ser encontradas dentro dos documentos de referência do JBoss Rich Faces.

Passo 5:

Estamos prontos para usar o skin, reconstrua sua aplicação no cônteiner e desfrute do novo visual.

6 comentários até agora

  1. W. Neto on

    Muito bom o post.

  2. Marcos Filho on

    Muito bom!!

  3. [...] Criando Skin para Rich Faces « YRoss (tags: richfaces) [...]

  4. joao on

    Obrigado ajudou a entender como funciona estes skin’s

  5. Emerson Lugo on

    Parabéns!!!!
    de uma forma simples e rápida vc mostrou como é fácil criar um skin vlw

    • yross on

      Muito Obrigado!


Leave a reply