Post on 24-Jun-2015
description
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