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

    How to refer skin parameters in CSS via JSF Expression Langu

    dilsent

      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

          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
            dilsent

            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

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

              • 4. Re: How to refer skin parameters in CSS via JSF Expression L
                dilsent

                Thanks.

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

                  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..