JBoss RichFacesWebinar Series

Skins

Webinar #4

Max Katz

Charley Cowens

© Exadel

Webinar Recordingshttp://www.exadel.com/web/portal/webinars

Who Is This Guy?Senior Systems Engineer

RIA strategy, development, training

http://mkblog.exadel.com

http://twitter.com/maxkatz

Author ofPractical RichFaces(Apress)

Co-author ofRichFacesDzoneRefCard

The PlanReview what we have done so far

Skins – using and extending

Future plans

Questions

RichFaces1. JSF-AJAX components (100+)

a4j:* tag library rich:* tag library

2. Skins

3. CDK (Component Development Kit)

What You Should KnowRuns in:

Any servlet container, application server

Portals: JBoss, WebLogic, Liferay

Works with: JSF (1.1, 1.2, 2.0soon)

Works with: Seam, Spring

Works with any 3rd party components

JBoss Tools

What is Skinnability?High-level extension to CSS

Not replacement for CSS

Changing a few skin-parameters will modify the appearance of all components on a page

#ColorsheaderBackgroundColor=#5D7343headerGradientColor=#9AB37DheaderTextColor=#FFFFFFheaderWeightFont=bold

generalBackgroundColor=#EDEADDgeneralTextColor=#000000generalSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serif

controlTextColor=#000000controlBackgroundColor=#ffffffadditionalBackgroundColor=#EEE9D1shadowBackgroundColor=#000000shadowOpacity=1panelBorderColor=#B6AD84subBorderColor=#EDEADDtabBackgroundColor=#9AB37DtabDisabledTextColor=#A49449...

wine.skin.properties

Out-Of-The-Box Skins

classicemeraldTownblueSkyrubywinedeepMarinesakura

plaindefaultlaguna*glassX*darkX* * - (packaged in

separate jar file)

Skins are inside richfaces-impl-xxxxx.jar inside the /META-INF/skins folder

Using Skins

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

blueSky ruby

Set current skin in web.xml:

blueSky

Changing Skins In Runtimepublic class SkinBean { private String skin; // getter, setter}

In session scope

<context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>#{skinBean.skin}</param-value></context-param>

<h:selectOneRadio value="#{skinBean.skin}" onclick="submit()"> <f:selectItem itemLabel="plain" itemValue="plain" /> <f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" /> <f:selectItem itemLabel="blueSky" itemValue="blueSky" /> ...</h:selectOneRadio>

Creating Custom Skins

#ColorsheaderBackgroundColor=#5D7343headerGradientColor=#9AB37DheaderTextColor=#FFFFFFheaderWeightFont=bold...

1. Take an existing skin and start modifying it (create as many as you want)2. Name the skin <name>.skin.properties3. Place the skin: META-INF/skins WEB-INF/classes4. Register skin in web.xml file

Creating Custom Skins – Using Existing Skin As A Base

baseSkin=rubygeneralSizeFont=16pxheaderSizeFont=16px

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

ruby16.skin.properties

Skin Parameters RedefinitionHow to find out how skin parameters map into CSS properties? Everycomponent has a section like this:

Customizing Styles

Four ways: 1. Any of the default skins 2. Create custom skins 3. Skin extension: overwrite skin generated styles 4. Use component defined style attributes

Overwriting Skin Generated Styles

<rich:inplaceInput id="drink" value="#{bean.drink}" defaultLabel="enter drink"/>

<style> .rich-inplace-view {font-size: x-large;} .rich-inplace-field {font-size: x-large;} .rich-inplace-changed {font-size: x-large;}</style>

Overwriting these CSS classes:

Results in the following:

How tofind these?

Renders:

So, how do you know whichCSS class to overwrite?

Every rich component has a picture shown on the left

Each picture is followed by a table (below) describing Each style class

All styles are available inRichFaces Developer Guide

Using Component Defined Style Attributes

<style> .myClass {font-size: x-large}</style>...<rich:inplaceInput id="drink" value="#{bean.drink}" defaultLabel="enter drink" viewClass="myClass" editClass="myClass"/>

Standard Control Skinning

Using rich components with standard or HTML controls could result in the following:

Out of sync button

Standard Control Skinning

One option is to use #{richSkin.<skinParam>} implicit object:

<h:commandButton action="next" value="Next page - I want to learn about world oceans!" style="background-color:#{richSkin.tabBackgroundColor}"/>

All skin parameters are accessible in this fashion

Standard Control Skinning

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

Another option is to set this context param. This will skin all standardand HTML controls automatically

The following controls will be skinned:• input• select• textarea• keygen• isindex• legend• fieldset• hr• a (together with a:hover, a:visited "pseudo"-elements)

Standard:• IE 6• IE 7 (BackComp• Mode)• Opera• SafariExtended:• IE7• Firefox• Chrome

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

You can now select which standard controls will be skinned by explicitly using predefined CSS classes.

The available CSS classes are defined in two files located inside richfaces-ui-X.X.X.jar:• basic_classes.xcss• extended_classes.xcss

Another alternative is to set this context param:

This means that you have the class .rich-text-general available to use on a page and it consists of:

.rich-text-general { font-size: generalSizeFont; font-family: generalFamilyFont; color: generalTextColor;}

<h:panelGrid class="rich-container"> ...</h:panelGrid>

<div class="rich-container"> ...</div>

Instead of applying a CSS class to each component, .rich-container class can be used to skin all standard components inside a container <rich:panel>, <h:panelGrid> and <div>:

RichFaces 3.3.1Released May 18th, 2009

rich:colorPicker

rich:page

rich:layout, rich:layoutPanel

themes - predefined and packaged layouts

header

footer

sideb

ar

rich:page

subheader

top

center

top

bottom

left right

rich:layout, rich:layoutPanel

RichFaces Demo http://livedemo.exadel.com/richfaces-demo

RichFaces Photo Album Complete RichFaces-Seam application

Best practices http://livedemo.exadel.com/photoalbum

RichFaces 4.0Full integration with JSF 2.0

Will be updated for consistency, performance

Release schedule (2009): Alpha June

Beta August

CR September

GA October

http://www.jboss.org/community/wiki/RichFaces40Planning

What We Covered1.Skins

2.Creating, extending

3.Skinning standard controls

Webinar Recordingshttp://www.exadel.com/web/portal/webinars

JSF/RichFaces TrainingOn-site 1-3 days

More info: http://mkblog.exadel.com

Thank You. Questions?mkatz@exadel.com

http://mkblog.exadel.com