3 Replies Latest reply on Nov 11, 2009 10:30 AM by Peter deHaan

    spark ButtonBar change selected state

    tork314

      Hello.

       

      I need functionality of non-toggling buttonbar. By default it uses ToggleButton. Is there way to change ToggleButton to simple Button?

        • 1. Re: spark ButtonBar change selected state
          CoreyRLucier Adobe Employee

          I'd guess you'd just need to create a non-ToggleButton component class (say, one that derives from Button) that implements IItemRenderer?  Just model after ButtonBarButton to start for most of what you want.  Then you can create a custom ButtonBar skin which uses your new Button type as the first, middle, and last button template?

           

          But what are you going for exactly that necessitates the use of a ButtonBar (if you don't want toggleability) ?

          • 2. Re: spark ButtonBar change selected state
            Flex harUI Adobe Employee

            Basically, a List of Buttons with HorizontalLayout, or even, an HGroup of Buttons.  We chose to wire ButtonBar to ToggleButtons because the selectedIndex of the ButtonBar is tied to the ToggleButton that is selected.

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

            Blog: http://blogs.adobe.com/aharui

            • 3. Re: spark ButtonBar change selected state
              Peter deHaan Level 4

              I basically did exactly what Corey suggested...

               

              Created a custom ButtonBar skin which only specified the middle button declaration and pointed to my custom ButtonBarButton skin. Basically it's just a slightly modified ButtonSkin (minus the corner radius and with a few added states):

               

              <?xml version="1.0" encoding="utf-8"?>
              <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.disabledStates="0.5">
                  <!-- states -->
                  <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, selectedUpStates" />
                      <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
                      <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
                      <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
                  </s:states>
                  
                  <!-- host component -->
                  <fx:Metadata>
                      <![CDATA[ 
                          [HostComponent("spark.components.ButtonBarButton")]
                      ]]>
                  </fx:Metadata>
                      
                  <fx:Script fb:purpose="styling">
                      /* Define the skin elements that should not be colorized. 
                      For toggle button, the graphics are colorized but the label is not. */
                      static private const exclusions:Array = ["labelDisplay"];
                      override protected function initializationComplete():void {
                          useBaseColor = true;
                          super.initializationComplete();
                      }
                      override public function get colorizeExclusions():Array {
                          return exclusions;
                      }
                  </fx:Script>
                  
                  <!-- layer 1: shadow -->
                  <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="0">
                      <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 -->
                  <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="0">
                      <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 -->
                  <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="0">
                      <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 -->
                  <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="0">
                      <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) -->
                  <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="0" 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) -->
                  <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="0" 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>
                  <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="0" 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 -->
                  <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="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 -->
                  <s:Label id="labelDisplay"
                          textAlign="center"
                          verticalAlign="middle"
                          maxDisplayedLines="1"
                          horizontalCenter="0" verticalCenter="1"
                          left="10" right="10" top="2" bottom="2" />
                  
              </s:SparkSkin>
              
              

               

              Peter