5 Replies Latest reply on Jan 3, 2012 7:49 PM by prithvi.zankat

    How to display checkbox within button using skin?

    prithvi.zankat

      Hi,

       

      I am trying to put checkbox inside spark button using skin. The button looks like  -

      button1.png

      I want the button to repond mouse event (which is any way responding), but I also want check box too should respond to mouse event when mouse pointer is over check box.

      I am able to create button which looks like above. But when I move mouse pointer over button, the button look changed and looks like -

      button2.png

      As can be seen that there is no check box. I need check box to be shown always in button and should also be clickable.

       

      Do any one have idea how to solve it?

       

      Thanks,

      Prithveesingh Zankat.


        • 1. Re: How to display checkbox within button using skin?
          saisri2k2 Level 4

          Is it posstible to post your skin code here, I'm assuming that your skin state is messing up the visibility of the checkbox, see that you include the checkbox in all the states. or else I've gotta look at your code.

          • 2. Re: How to display checkbox within button using skin?
            prithvi.zankat Level 1

            Hi,

            Here is complete skin code-

             

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

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

                               xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

                               minWidth="21" minHeight="21"

                               alpha.disabled="0.5"

                               width.up="84">

                

                <fx:Metadata>

                    <![CDATA[

                    /**

                     * @copy spark.skins.spark.ApplicationSkin#hostComponent

                     */

                    [HostComponent("spark.components.Button")]

                    ]]>

                </fx:Metadata>

               

                <fx:Script fb:purpose="styling">

                    <![CDATA[        

                        import spark.components.Group;

                        /* 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"];

                       

                        /**

                         * @private

                         */    

                        override public function get colorizeExclusions():Array {return exclusions;}

                       

                        /**

                         * @private

                         */

                        override protected function initializationComplete():void

                        {

                            useChromeColor = true;

                            super.initializationComplete();

                        } 

                       

                        /**

                         *  @private

                         */

                        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

                        {

                            var cr:Number = getStyle("cornerRadius");

                           

                            if (cornerRadius != cr)

                            {

                                cornerRadius = cr;

                                shadow.radiusX = cornerRadius;

                                fill.radiusX = cornerRadius;

                                lowlight.radiusX = cornerRadius;

                                highlight.radiusX = cornerRadius;

                                border.radiusX = cornerRadius;

                            }

                           

                            if (highlightStroke)

                                highlightStroke.radiusX = cornerRadius;

                            if (hldownstroke1)

                                hldownstroke1.radiusX = cornerRadius;

                            if (hldownstroke2)

                                hldownstroke2.radiusX = cornerRadius;

                           

                            super.updateDisplayList(unscaledWidth, unscaledHeight);

                        }

                       

                        private var cornerRadius:Number = 2;

                                            

                    ]]>       

                </fx:Script>

                   

                <!-- states -->

                <s:states>

                    <s:State name="up" />

                    <s:State name="over" />

                    <s:State name="down" />

                    <s:State name="disabled" />

                </s:states>

               

                <!-- layer 1: shadow -->

                <!--- @private -->

                <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">

                    <s:fill>

                        <s:LinearGradient rotation="90">

                            <s:GradientEntry color="0x000000"

                                             color.down="0xFFFFFF"

                                             alpha="0.01"

                                             alpha.down="0" />

                            <s:GradientEntry color="0x000000"

                                             color.down="0xFFFFFF"

                                             alpha="0.07"

                                             alpha.down="0.5" />

                        </s:LinearGradient>

                    </s:fill>

                </s:Rect>

               

                <!-- layer 2: fill -->

                <!--- @private -->

                <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">

                    <s:fill>

                        <s:LinearGradient rotation="90">

                            <s:GradientEntry color="0xFFFFFF"

                                             color.over="0xBBBDBD"

                                             color.down="0xAAAAAA"

                                             alpha="0.85" />

                            <s:GradientEntry color="0xD8D8D8"

                                             color.over="0x9FA0A1"

                                             color.down="0x929496"

                                             alpha="0.85" />

                        </s:LinearGradient>

                    </s:fill>

                </s:Rect>

             

                <!-- layer 3: fill lowlight -->

                <!--- @private -->

                <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">

                    <s:fill>

                        <s:LinearGradient rotation="270">

                            <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />

                            <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />

                            <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />

                        </s:LinearGradient>

                    </s:fill>

                </s:Rect>

               

                <!-- layer 4: fill highlight -->

                <!--- @private -->

                <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">

                    <s:fill>

                        <s:LinearGradient rotation="90">

                            <s:GradientEntry color="0xFFFFFF"

                                             ratio="0.0"

                                             alpha="0.33"

                                             alpha.over="0.22"

                                             alpha.down="0.12"/>

                            <s:GradientEntry color="0xFFFFFF"

                                             ratio="0.48"

                                             alpha="0.33"

                                             alpha.over="0.22"

                                             alpha.down="0.12" />

                            <s:GradientEntry color="0xFFFFFF"

                                             ratio="0.48001"

                                             alpha="0" />

                        </s:LinearGradient>

                    </s:fill>

                </s:Rect>

               

                <!-- layer 5: highlight stroke (all states except down) -->

                <!--- @private -->

                <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">

                    <s:stroke>

                        <s:LinearGradientStroke rotation="90" weight="1">

                            <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />

                            <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />

                        </s:LinearGradientStroke>

                    </s:stroke>

                </s:Rect>

               

                <!-- layer 6: highlight stroke (down state only) -->

                <!--- @private -->

                <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">

                    <s:stroke>

                        <s:LinearGradientStroke rotation="90" weight="1">

                            <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />

                            <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />

                            <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />

                            <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />

                            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />

                        </s:LinearGradientStroke>

                    </s:stroke>

                </s:Rect>

                <!--- @private -->

                <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">

                    <s:stroke>

                        <s:LinearGradientStroke rotation="90" weight="1">

                            <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />

                            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />

                        </s:LinearGradientStroke>

                    </s:stroke>

                </s:Rect>

             

                <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->

                <!--- @private -->

                <s:Rect id="border" left="0" top="0" bottom="0" radiusX="2"

                        right.disabled="0" width.disabled="69" height.disabled="20"

                        right.down="0" width.down="69" height.down="20"

                        right.over="0" width.over="69" height.over="20"

                        left.up="0" right.up="0" top.up="0" bottom.up="0">

                    <s:stroke>

                        <s:LinearGradientStroke rotation="90" weight="1">

                            <s:GradientEntry color="0x000000"

                                             alpha="0.5625"

                                             alpha.down="0.6375" />

                            <s:GradientEntry color="0x000000"

                                             alpha="0.75"

                                             alpha.down="0.85" />

                        </s:LinearGradientStroke>

                    </s:stroke>

                </s:Rect>

               

                <!-- layer 8: text -->

                <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->

                <s:Label id="labelDisplay" left="10" top="2" bottom="2" maxDisplayedLines="1" textAlign="center"

                         verticalAlign="middle"

                         right.disabled="10" horizontalCenter.disabled="0" verticalCenter.disabled="1"

                         left.down="20" right.down="5" top.down="2" bottom.down="2" horizontalCenter.down="7"

                         left.over="20" right.over="5" top.over="2" bottom.over="2" horizontalCenter.over="7"

                         left.up="20"  right.up="5"    top.up="2"   bottom.up="2"   horizontalCenter.up="7"

                         verticalCenter.up="2">

                </s:Label>

                <s:CheckBox includeIn="up" left="2" top="2" bottom="2" width="16" verticalCenter="0"

                            right.disabled="10" horizontalCenter.disabled="0" verticalCenter.disabled="0" width.disabled="18"

                            left.down="2" top.down="2" bottom.down="2" verticalCenter.down="0" width.down="18"

                            left.over="0" top.over="2" bottom.over="2" verticalCenter.over="0" width.over="18"

                            left.up="2"   top.up="2"   bottom.up="2"   verticalCenter.up="0"   width.up="18"

                            />

               

            </s:SparkButtonSkin>

             

            Thank,

            Prithveesingh Zankat.

            • 3. Re: How to display checkbox within button using skin?
              saisri2k2 Level 4

              <s:CheckBox includeIn="up" left="2" top="2" bottom="2" width="16" verticalCenter="0"

                              right.disabled="10" horizontalCenter.disabled="0" verticalCenter.disabled="0" width.disabled="18"

                              left.down="2" top.down="2" bottom.down="2" verticalCenter.down="0" width.down="18"

                              left.over="0" top.over="2" bottom.over="2" verticalCenter.over="0" width.over="18"

                              left.up="2"   top.up="2"   bottom.up="2"   verticalCenter.up="0"   width.up="18"

                              />

               

               

              in the above code you asked to include in Up state only, Also, you dont have to override the updatedisplaylist etc., if you dont need to, you may remove the other skinning elements like the highlight color, stroke, border etc., if you dont need them. But, remember to add your own background color when you remove everything else.

              • 4. Re: How to display checkbox within button using skin?
                prithvi.zankat Level 1

                Thanks a lot. Your suggestion worked. I have included <s:CheckBox includeIn="up,over,down".

                • 5. Re: How to display checkbox within button using skin?
                  prithvi.zankat Level 1

                  Hi,

                   

                  One more question regarding this button -

                  button1.png

                  Is it possible to receive click event on checkbox. Currently when I click anywhere in button, only button click event gets dispatched. I want that when mouse is over checkbox and clicked, checkbox click event should also be dispatched.

                   

                  Thanks,

                  Prithveesingh.