5 Replies Latest reply on Jun 7, 2013 8:15 AM by KavinKannan

    LabelPlacement in spark checkbox

    Shweta Gothe

      Hi All,

       

      I need to place the checkbox Label to the left of the checkbox.

       

      In Flex 3 , there is a attribute lebelPlacement which helps in acheiving it.

       

      How can achieve it in Flex 4.5 ? i.e Spark Component.

       

      Thanks.

      Shweta

        • 1. Re: LabelPlacement in spark checkbox
          _spoboyle Level 4

          create your own custom skin

          • 2. Re: LabelPlacement in spark checkbox
            Shweta Gothe Level 1

            Yeah I need to create a custom skin. What I need to make the changes in the skin ?

             

            Thanks,

            Shweta

            • 3. Re: LabelPlacement in spark checkbox
              _spoboyle Level 4
              <?xml version="1.0" encoding="utf-8"?>
              
              <!--
              
                  ADOBE SYSTEMS INCORPORATED
                  Copyright 2008 Adobe Systems Incorporated
                  All Rights Reserved.
              
                  NOTICE: Adobe permits you to use, modify, and distribute this file
                  in accordance with the terms of the license agreement accompanying it.
              
              -->
              
              <!--- The default skin class for the Spark CheckBox component.  
              
                    @see spark.components.CheckBox
                      
                    @langversion 3.0
                    @playerversion Flash 10
                    @playerversion AIR 1.5
                    @productversion Flex 4
              -->
              <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5">
              
                  <fx:Metadata>
                  <![CDATA[ 
                      /** 
                       * @copy spark.skins.spark.ApplicationSkin#hostComponent
                       */
                      [HostComponent("spark.components.CheckBox")]
                  ]]>
                  </fx:Metadata> 
                  
                  <fx:Script fb:purpose="styling">
                      /* Define the skin elements that should not be colorized. 
                         For button, the graphics are colorized but the label is not. */
                      static private const exclusions:Array = ["labelDisplay", "check"];
              
                     /** 
                      * @private 
                      */     
                      override public function get colorizeExclusions():Array {return exclusions;}
                      
                      /* Define the symbol fill items that should be colored by the "symbolColor" style. */
                      static private const symbols:Array = ["checkMarkFill"];
              
                     /**
                      * @private 
                      */
                      override public function get symbolItems():Array {return symbols};
                      
                      /**
                       * @private
                       */
                      override protected function initializationComplete():void
                      {
                          useChromeColor = true;
                          super.initializationComplete();
                      }
                  </fx:Script>
                  
                  <fx:Script>
                      <![CDATA[
                          /** 
                           * @private 
                           */     
                          private static const focusExclusions:Array = ["labelDisplay"];
              
                          /**
                           * @private
                           */
                          override public function get focusSkinExclusions():Array { return focusExclusions;};
                      ]]>
                  </fx:Script>
                  
                  <s:states>
                      <s:State name="up" />
                      <s:State name="over" stateGroups="overStates" />
                      <s:State name="down" stateGroups="downStates" />
                      <s:State name="disabled" stateGroups="disabledStates" />
                      <s:State name="upAndSelected" stateGroups="selectedStates" />
                      <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
                      <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
                      <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
                  </s:states>
                  
                  <s:Group right="0" verticalCenter="0" width="13" height="13" layoutDirection="ltr">
                      <!-- drop shadow -->
                      <s:Rect left="-1" top="-1" right="-1" bottom="-1">
                          <s:stroke>
                              <s:LinearGradientStroke rotation="90" weight="1">
                                  <s:GradientEntry color="0x000000" 
                                                 color.downStates="0xFFFFFF"
                                                 alpha="0.011"
                                                 alpha.downStates="0" />
                                  <s:GradientEntry color="0x000000" 
                                                 color.downStates="0xFFFFFF" 
                                                 alpha="0.121"
                                                 alpha.downStates="0.57" />
                              </s:LinearGradientStroke>
                          </s:stroke>
                      </s:Rect>
                      
                      <!-- fill -->
                      <s:Rect left="1" top="1" right="1" bottom="1">
                          <s:fill>
                              <s:LinearGradient rotation="90">
                                  <s:GradientEntry color="0xFFFFFF" 
                                                 color.overStates="0xBBBDBD" 
                                                 color.downStates="0xAAAAAA" 
                                                 alpha="0.85" />
                                  <s:GradientEntry color="0xD8D8D8" 
                                                 color.overStates="0x9FA0A1" 
                                                 color.downStates="0x929496" 
                                                 alpha="0.85" />
                              </s:LinearGradient>
                          </s:fill>
                      </s:Rect>
                      
                      <!-- fill highlight -->
                      <s:Rect left="1" right="1" top="1" height="5">
                          <s:fill>
                              <s:SolidColor color="0xFFFFFF" alpha="0.33" alpha.downStates="0" />
                          </s:fill>
                      </s:Rect>
                      
                      <!-- layer 6: highlight stroke (all states except down) -->
                      <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="downStates">
                          <s:stroke>
                              <s:LinearGradientStroke rotation="90" weight="1">
                                  <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.33" />
                                  <s:GradientEntry color="0xFFFFFF" alpha="0.12" alpha.overStates="0.0396" />
                              </s:LinearGradientStroke>
                          </s:stroke>
                      </s:Rect>
                      
                      <!-- layer 6: highlight stroke (down state only) -->
                      <s:Rect left="1" top="1" bottom="1" width="1" includeIn="downStates">
                          <s:fill>
                              <s:SolidColor color="0x000000" alpha="0.07" />
                          </s:fill>
                      </s:Rect>
                      <s:Rect right="1" top="1" bottom="1" width="1" includeIn="downStates">
                          <s:fill>
                              <s:SolidColor color="0x000000" alpha="0.07" />
                          </s:fill>
                      </s:Rect>
                      <s:Rect left="1" top="1" right="1" height="1" includeIn="downStates">
                          <s:fill>
                              <s:SolidColor color="0x000000" alpha="0.25" />
                          </s:fill>
                      </s:Rect>
                      <s:Rect left="1" top="2" right="1" height="1" includeIn="downStates">
                          <s:fill>
                              <s:SolidColor color="0x000000" alpha="0.09" />
                          </s:fill>
                      </s:Rect>
                      
                      <!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
                      <s:Rect left="0" top="0" right="0" bottom="0">
                          <s:stroke>
                              <s:LinearGradientStroke rotation="90" weight="1">
                                  <s:GradientEntry color="0x000000" 
                                                 alpha="0.5625"
                                                 alpha.downStates="0.6375" />
                                  <s:GradientEntry color="0x000000" 
                                                 alpha="0.75"
                                                 alpha.downStates="0.85" />
                              </s:LinearGradientStroke>
                          </s:stroke>
                      </s:Rect>
                  
                      <!-- checkmark -->
                      <!--- The checkmark in the box for this skin. To create a custom check mark, create a custom skin class. -->
                      <s:Path left="2" top="0" includeIn="selectedStates" id="check" itemCreationPolicy="immediate"
                              data="M 9.2 0.1 L 4.05 6.55 L 3.15 5.0 L 0.05 5.0 L 4.6 9.7 L 12.05 0.1 L 9.2 0.1">        
                          <s:fill>
                              <!--- 
                                  @private 
                                  The solid color fill for the CheckBox's checkmark. The default alpha is .9, and the default fill color is 0x000000. 
                              -->
                              <s:SolidColor id="checkMarkFill" color="0" alpha="0.8" />
                          </s:fill>
                      </s:Path>
                  </s:Group>
              
                  <!-- Label -->
                  <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
                  <s:Label id="labelDisplay"
                           textAlign="start"
                           verticalAlign="middle"
                           maxDisplayedLines="1"
                           left="0" right="18" top="3" bottom="3" verticalCenter="2" />
              
              </s:SparkSkin>
              

               

              I changed the tickbox group to have a value of right=0

              and the label to have left=0 and right=18

               

              simples

              • 4. Re: LabelPlacement in spark checkbox
                Shweta Gothe Level 1

                Thank you so much !!:) This helps.

                 

                Regards,

                Shweta

                • 5. Re: LabelPlacement in spark checkbox
                  KavinKannan

                  The simplest and the fastest way to do this is by changing the default layoutDirection from ltr to rtl.

                   

                  <s:CheckBox label="Label will be shown on the left" layoutDirection="rtl"/>