« RichFaces & Maven -... | Main | Glassfish and OpenID »

RichFaces - using custom Skinns

The current Version of RichFaces (3.2.1.GA) allows you to use skins in your web application in a much easier way as in the RichFaces versions before.

A detailed documentation about this feature can be found here:

http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/ArchitectureOverview.html#Skinnability

I used this in my own web application and did only two things:

1.) I created a custom skin property file. "myfirstskin.skin.properties" and placed this file into the /src/main/resources folder of my maven project (if you did not use maven put this file in the /META-INF/skins folder or classpath of your webapp)

You can also copy a existing skin property file to start. You will find skins form RichFaces in the richfaces-impl-3.2.1.GA.jar file under /META-INF/skins/.

This is a example for a skin.propertyfile (blueSky.skin.properties)

#Colors

headerBackgroundColor=#BED6F8
headerGradientColor=#F2F7FF
headerTextColor=#000000
headerWeightFont=bold
generalBackgroundColor=#FFFFFF
generalTextColor=#000000
generalSizeFont=11px
generalFamilyFont=Arial, Verdana, sans-serif 

controlTextColor=#000000
controlBackgroundColor=#ffffff
additionalBackgroundColor=#ECF4FE

shadowBackgroundColor=#000000
shadowOpacity=1
panelBorderColor=#BED6F8
subBorderColor=#ffffff

tabBackgroundColor=#C6DEFF
tabDisabledTextColor=#8DB7F3

trimColor=#D6E6FB
tipBackgroundColor=#FAE6B0 
tipBorderColor=#E5973E 
selectControlColor=#E79A00

generalLinkColor=#0078D0
hoverLinkColor=#0090FF
visitedLinkColor=#0090FF

# Fonts
headerSizeFont=11px

headerFamilyFont=Arial, Verdana, sans-serif
tabSizeFont=11
tabFamilyFont=Arial, Verdana, sans-serif
buttonSizeFont=11
buttonFamilyFont=Arial, Verdana, sans-serif
tableBackgroundColor=#FFFFFF
tableFooterBackgroundColor=#cccccc
tableSubfooterBackgroundColor=#f1f1f1
tableBorderColor=#C0C0C0
tableBorderWidth=1px

#Calendar colors
calendarWeekBackgroundColor=#F5F5F5
calendarHolidaysBackgroundColor=#FFEBDA
calendarHolidaysTextColor=#FF7800
calendarCurrentBackgroundColor=#FF7800
calendarCurrentTextColor=#FFEBDA
calendarSpecBackgroundColor=#E4F5E2
calendarSpecTextColor=#000000

warningColor=#FFE6E6
warningBackgroundColor=#FF0000
editorBackgroundColor=#F1F1F1
editBackgroundColor=#FEFFDA

#Gradients
gradientType=plain

2.) next I added two params into my web.xml file:

	<!-- ### Richt Faces params deepMarine #### -->
	<context-param>
		<param-name>org.richfaces.SKIN</param-name>
		<param-value>deepMarine</param-value>
	</context-param>
	
	<context-param>
		<param-name>org.richfaces.CONTROL_SKINNING</param-name>
		<param-value>enable</param-value>
	</context-param>

 The first param tells RichFaces to use a predefined or custom skin property file (the name is the first part of your .skin.property file)

And the second param (very important) tells RichFaces also to render standard HTML tags in this skin.

So if you use a standard JSF Tag like 

	<h:outputLabel value="User name:" />
	<h:inputText id="j_username" />

	<h:outputLabel value="Password:" />
	<h:inputSecret id="j_password" />
 

these tags will also be renderd in new cool style!

Posted at 07:25AM Sep 21, 2008
Posted by: Ralph
Category: General

| Kommentare [3]

Kommentare:

Ralph, Thank you for your post on this subject. However I am a bit confused on how to get this to work. I have create a META-INF/skins directory in my project that is packaged in my .war. I have also made the settings changes in web.xml. But when trying to access my application I get the following exception: org.richfaces.skin.SkinNotFoundException Any clues?

Gesendet von David D. am November 26, 2008 at 11:57 PM GMT #

Make sure that you have named your skin file "xxx.skin.properties". You only can rename 'xxx'! The skin file must end with '.skin.properties' Also make sure that in you deployed war archive the skin files are located under /[webapproot]/WEB-INF/classes/

Gesendet von Ralph am November 29, 2008 at 10:09 AM GMT #

Dude, you've saved my life with this post. I'm a designer with limited Java experience, and after messing around with RF for a couple of days, I've finally been able to create my own skin and it actually works. Thank you! =) --J

Gesendet von Jason A. am Dezember 04, 2008 at 06:27 PM GMT #

Senden Sie einen Kommentar:
  • HTML Syntax: Eingeschaltet