5 Replies Latest reply on Apr 11, 2008 3:19 PM by senthil sathya

    How to refer skin parameters in CSS via JSF Expression Langu

    senthil sathya Newbie

      Hi

      I am developing a seam application using rich faces. I have defined my own custom stylesheet and skin.properties .Is there any way to reference the skin parameters within my CSS file. The jboss link http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/ArchitectureOverview.html
      says that it could be done using JSF expression language.

      This is my css

      HTML,BODY
      {
      background-color: #dfdfdf;
      margin:0px 0px 0px 0px;
      padding:0px;
      }
      .page {
      height:100%;
      width: 100%;
      }

      .panel {
      width: 100%;
      }

      td.leftContent {
      width:;
      background:#fff;
      border:1px solid #000;
      }


      td.centerContent {
      width:60%;
      background:#fff;
      border:1px solid #000;
      }

      td.rightContent {
      width:20%;
      background:#fff;
      border:1px solid #000;
      }

      .footer {
      vertical-align:bottom;
      }

      Skin properties

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

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

      shadowBackgroundColor=#000000
      shadowOpacity=1

      panelBorderColor=\#FFFFFF

      generalBackgroundColor=\#FFFFFF
      subBorderColor=#ffffff

      tabBackgroundColor=#C6DEFF
      tabDisabledTextColor=#8DB7F3

      trimColor=#D6E6FB

      tipBackgroundColor=\#FAE6B0
      tipBorderColor=\#E5973E

      selectControlColor=#E79A00


      #generalLinkColor=#0078D0
      generalLinkColor=#7DBA00
      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

      width =20%


      I would like to refer the width element in td.LeftContent class in my stylesheet with the width attribute ,width= 20% from my skin .properties.

      Any help will be highly appreciated.

      Thanks

      Senthil


        • 1. Re: How to refer skin parameters in CSS via JSF Expression L
          Sergey Smirnov Master

          In general, the way is described here (second sample):
          http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf?c=loadStyle

          If you have css rules defined directly on the page (not in the separate css file ), you can use #{richSkin.} right away on the page. Like:

          .foo {
           background-color: #{a4jSkin.tableBackgroundColor} ;
          }




          • 2. Re: How to refer skin parameters in CSS via JSF Expression L
            senthil sathya Newbie

            Thanks a lot.It works fine when i applied the css rules within my jsf page.I now need to get this working on a seperate file.

            • 3. Re: How to refer skin parameters in CSS via JSF Expression L
              Sergey Smirnov Master

              you have to use xcss instead of css for separate files.

              • 5. Re: How to refer skin parameters in CSS via JSF Expression L
                senthil sathya Newbie

                Hi,

                I tried applying this .xcss file

                <?xml version="1.0" encoding="UTF-8"?>
                <f:template xmlns:f='http:/jsf.exadel.com/template'
                xmlns:u='http:/jsf.exadel.com/template/util'
                xmlns="http://www.w3.org/1999/xhtml" >

                <f:verbatim><![CDATA[

                .rsPanel {
                border-width:1px;
                border-style:solid;
                padding:10px;
                background-position : top left;
                background-repeat : repeat-x;
                background-color: #CC6699;
                }

                .rsInput {
                border-style:solid;
                border-width:1px;
                }

                .rsButton {
                border-width:5px;
                border-style:solid;
                }

                .rsLabel {
                font-size: 15px;

                }

                ]]></f:verbatim>

                <u:selector name=".rsPanel">
                <u:style name="border-color" skin="panelBorderColor" />

                </u:selector>

                <u:selector name=".rsInput">
                <u:style name="background-color" skin="additionalBackgroundColor" />
                </u:selector>


                <u:selector name=".rsButton">
                <u:style name="background-color" skin="additionalBackgroundColor" />
                <u:style name="border-color" skin="panelBorderColor" />
                </u:selector>




                <u:selector name=".rsLabel">
                <u:style name="color" skin="headerTextColor" />
                <u:style name="background-color" skin="additionalBackgroundColor" />
                </u:selector>


                <u:style name="color" skin="headerTextColor" />


                </f:template>


                inside the .xhtml page

                <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">
                <a4j:loadStyle src="stylesheet/xyz.xcss" />
                <h:form>

                <rich:panel>
                <f:facet name="header">
                <h:outputText value="Applying Skin on non-RichFaces Components"/>
                </f:facet>


                <h:commandLink value="DeepMarine">
                <a4j:actionparam name="skin" value="deepMarine" assignTo="#{skinBean.skin}"/>
                </h:commandLink>
                <rich:spacer width="20" />
                <h:commandLink value="BlueSky" >
                <a4j:actionparam name="skin" value="blueSky" assignTo="#{skinBean.skin}"/>
                </h:commandLink>
                <rich:spacer width="20" />
                <h:commandLink value="JapanCherry" >
                <a4j:actionparam name="skin" value="japanCherry" assignTo="#{skinBean.skin}"/>
                </h:commandLink>

                <rich:separator height="1" style="padding:10px 0" />

                <h:panelGrid style="padding: 15px" styleClass="rsPanel" width="250" columns="2">
                <h:outputText styleClass="rsLabel" value="Name:" />
                <h:inputText styleClass="rsInput" value="#{userBean.name}" />

                <h:outputText styleClass="rsLabel" value="Job:" />
                <h:inputText styleClass="rsInput" value="#{userBean.job}" />

                <h:panelGroup />
                <h:commandButton styleClass="rsButton" value="Submit">
                <a4j:support disableDefault="true" event="onclick" reRender="out" />
                </h:commandButton>

                <f:facet name="footer">
                </f:facet>

                </h:panelGrid>
                <h:panelGrid id="out" columns="1">

                <rich:spacer height="10"/>
                <h:outputText value="You have just entered:"/>
                <h:outputText value=""/>
                <h:outputText value="Name: #{userBean.name}" />
                <h:outputText value="Job: #{userBean.job}" />
                </h:panelGrid>

                </rich:panel>
                </h:form>

                </ui:composition>


                I tried changing the "additionalBackgroundColor" in my skin.properties file for the rsButton class.But it doesn't seem to apply those changes defined within the

                <u:selector name=".rsButton">
                <u:style name="background-color" skin="additionalBackgroundColor" />
                <u:style name="border-color" skin="panelBorderColor" />
                </u:selector>

                But if i define the background-color attribute outside i.e within this block

                .rsButton {
                border-width:5px;
                border-style:solid;
                background-color:#0066FF

                }

                It applies the changes made. I am sure that the skin.properties are in the path because it works fine when I embedd my style within my jsf page and use a JSF reference attribute call to the rich.propreties.


                Any help..