1 Reply Latest reply on Dec 1, 2010 10:31 AM by Peter deHaan

    Do we need the equivalent of "labelStyleName" property for Spark FormItem class?

    JabbyPandaUA Level 3

      Hi all,

       

      I do not find an CSS way to change the colour of Spark FormItem label, the only way is to edit FormItemSkin. 

       

      The use-case is as follows: I want to empathize via visual means only a few Spark FormItems in a Form.     

        • 1. Re: Do we need the equivalent of "labelStyleName" property for Spark FormItem class?
          Peter deHaan Level 4

          Because the color and fontWeight are declared in the default Spark FormItem skin, I believe you will have to create a custom skin if you want to override those styles. But it should be fairly easy to create a custom skin which looks for a specific styleName in your CSS and applies those styles:

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx">

              <s:controlBarContent>

                  <s:Button id="sdkVer" initialize="sdkVer.label = mx_internal::VERSION;" click="System.setClipboard(sdkVer.label);" />

                  <s:Label text="{Capabilities.version} ({Capabilities.isDebugger ? 'debug' : 'release'})" />

              </s:controlBarContent>

           

              <fx:Style>

                  <![CDATA[

                      @namespace s "library://ns.adobe.com/flex/spark";

                      @namespace mx "library://ns.adobe.com/flex/mx";

           

                      s|FormItem  {

                          skin-class: ClassReference("skins.CustomFormItemSkin");

                      }

           

                      .formItemLabelStyles {

                          color: haloOrange;

                          font-size: 19;

                          font-style: italic;

                      }

                  ]]>

              </fx:Style>

           

              <s:Form>

                  <s:FormItem label="Foo:">

                      <s:TextInput text="TextInput" />

                      <s:Button label="Button" />

                  </s:FormItem>

                  <s:FormItem label="Bar:">

                      <mx:DateChooser />

                  </s:FormItem>

              </s:Form>

           

          </s:Application>

           

          And my custom Spark FormItem skin, skins/CustomFormItemSkin.as, is as follows:
          package skins {
              import spark.skins.spark.FormItemSkin;
             
              public class CustomFormItemSkin extends FormItemSkin {
                  override public function CustomFormItemSkin() {
                      super();
                      labelDisplay.clearStyle("color");
                      labelDisplay.clearStyle("fontWeight");
                      labelDisplay.styleName = "formItemLabelStyles";
                  }
              }
          }
          Peter

          1 person found this helpful