4 Replies Latest reply on Aug 22, 2010 7:56 AM by Craig Grummitt

    ToggleButton with checkbox?

    Craig Grummitt Level 3

      Is it possible to add a checkbox to a togglebutton? I want the checkbox to work independently of the toggleButton. However if i add the checkbox to the toggleButton skin, the checkbox doesn't seem to be receiving mouse clicks, and only the toggle Button responds to the click. In the end I would like a ButtonBar of these buttons(with checkBoxes) and a way of determining which buttons have their checkboxes selected.

      Would this be possible with the Flex components? Or will I need to build a custom component?

        • 1. Re: ToggleButton with checkbox?
          Lior Bruder

          Can you attach the skin code?

          • 2. Re: ToggleButton with checkbox?
            Craig Grummitt Level 3

            Sure, I just didn't coz it's fairly straightforward but long!

             

            Here's the first basic example of just trying to add a Checkbox to a button(if I can get that working, i'll move on to a ButtonBarButton and eventually a ButtonBar)

             

            Application MXML:

            <?xml version="1.0"?>
            
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark">
            
                    <s:Button skinClass="testButtonSkin" />
            
            </s:Application>
            

             

             

            Now to create the testButtonSkin, you could either select create new MXML skin, select Button, call it testButtonSkin and then add the following line before the </s:SparkSkin> endtag:
                <s:CheckBox/>

             

            OR! you can copy paste the following code into a file called testButtonSkin.mxml. This is all just standard Flex code with the addition of one line(see above!)

            <?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 Button component.  
            
                   @see spark.components.Button
                    
                  @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" minWidth="21" minHeight="21" alpha.disabled="0.5">
                
                <!-- host component -->
                <fx:Metadata>
                    <![CDATA[ 
                    /** 
                     * @copy spark.skins.spark.ApplicationSkin#hostComponent
                     */
                    [HostComponent("spark.components.Button")]
                    ]]>
                </fx:Metadata>
                
                <!-- 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" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
                    <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"
                         textAlign="center"
                         verticalAlign="middle"
                         maxDisplayedLines="1"
                         horizontalCenter="0" verticalCenter="1"
                         left="10" right="10" top="2" bottom="2">
                </s:Label>
                
                 <s:CheckBox/>
                 
            </s:SparkSkin>
            
            • 3. Re: ToggleButton with checkbox?
              Lior Bruder Level 1

              Sorry, did not find a way, because of the:

               

                        case MouseEvent.CLICK:
                          {
                              if (!enabled)
                                  event.stopImmediatePropagation();
                              else
                                  clickHandler(MouseEvent(event));
                              return;
                          }

               

              you will have to buld your own component (Which is not that bad :-) )

               

              Lior

              • 4. Re: ToggleButton with checkbox?
                Craig Grummitt Level 3

                not sure what that code was that you quoted( case MouseEvent.CLICK etc)...

                 

                Anyway, thanks for looking into it, anyone else with ideas?

                 

                I know it'd be quite straightforward to build a custom button component, but the problem is that in this situation i'll have to build a custom ButtonBar as well, which is starting to be a few hours work...

                 

                Might have to be the way to go though, i've encountered another problem with the ButtonBar anyway: (http://forums.adobe.com/thread/704177?tstart=60)