3 Replies Latest reply on Nov 7, 2007 7:32 AM by ctansky

    How to skin the ToggleButtonBar

    Mark.P. Level 1
      I'm trying to skin the buttons in the ToggleButtonBar but I'm having a hard time figuring this one out. I used the style on a Button and it worked fine. Can someone see what's wrong?

      Here's what I have by way of code:

      MXML:
      <mx:ApplicationControlBar width="100%" y="80">
      <mx:ToggleButtonBar selectedIndex="0" horizontalGap="2" styleName="toggleButton">
      <mx:dataProvider>
      <mx:Array>
      <mx:Object label="ProjectCatalog" icon="@Embed(source='images/alert.png')"/>
      <mx:Object label="Snapshot" icon="@Embed(source='images/undo.png')"/>
      <mx:Object label="Country"/>
      <mx:Object label="Calendar"/>
      <mx:Object label="Radar"/>
      <mx:Object label="Current and Previous"/>
      </mx:Array>
      </mx:dataProvider>
      </mx:ToggleButtonBar>
      </mx:ApplicationControlBar>


      CSS:

      .toggleButton {
      upSkin:Embed(source="../images/TabButton.swf", symbol="up_skin");
      selectedUpSkin:Embed(source="../images/TabButton.swf#up_skin_selected");
      overSkin:Embed(source="../images/TabButton.swf#over_skin");
      selectedOverSkin:Embed(source="../images/TabButton.swf#over_skin_selected");
      downSkin:Embed(source="../images/TabButton.swf#down_skin");
      selectedDownSkin:Embed(source="../images/TabButton.swf#down_skin_selected");

      borderStyle: none;
      /* hide the default focus rectangle*/
      focusThickness: 0;
      }
        • 1. Re: How to skin the ToggleButtonBar
          JabbyPandaUA Level 3
          Take a look at http://www.scalenine.com/ themes source files:

          E.g:

          CSS:

          ToggleButtonBar
          {
          buttonStyleName: "buttonBarButton";
          firstButtonStyleName: "firstButtonBarButton";
          lastButtonStyleName: "lastButtonBarButton";
          horizontalGap:10;
          }

          /*
          //------------------------------
          // ButtonBarButtons
          //------------------------------
          */

          .firstButtonBarButton
          {
          disabledSkin: Embed(source="messenger.swf", symbol="ButtonBar_firstDisabledSkin");
          downSkin: Embed(source="messenger.swf", symbol="ButtonBar_firstDownSkin");
          overSkin: Embed(source="messenger.swf", symbol="ButtonBar_firstOverSkin");
          selectedDisabledSkin: Embed(source="messenger.swf", symbol="ButtonBar_firstSelectedDisabledSkin");
          selectedDownSkin: Embed(source="messenger.swf", symbol="ButtonBar_firstSelectedUpSkin");
          selectedOverSkin: Embed(source="messenger.swf", symbol="ButtonBar_firstSelectedUpSkin");
          selectedUpSkin: Embed(source="messenger.swf", symbol="ButtonBar_firstSelectedUpSkin");
          upSkin: Embed(source="messenger.swf", symbol="ButtonBar_firstUpSkin");
          color: #ffffff;
          textRollOverColor: #ffffff;
          textSelectedColor: #ffffff;
          }
          .buttonBarButton
          {
          disabledSkin: Embed(source="messenger.swf", symbol="ButtonBar_buttonDisabledSkin");
          downSkin: Embed(source="messenger.swf", symbol="ButtonBar_buttonDownSkin");
          overSkin: Embed(source="messenger.swf", symbol="ButtonBar_buttonOverSkin");
          selectedDisabledSkin: Embed(source="messenger.swf", symbol="ButtonBar_buttonSelectedDisabledSkin");
          selectedDownSkin: Embed(source="messenger.swf", symbol="ButtonBar_buttonSelectedUpSkin");
          selectedOverSkin: Embed(source="messenger.swf", symbol="ButtonBar_buttonSelectedUpSkin");
          selectedUpSkin: Embed(source="messenger.swf", symbol="ButtonBar_buttonSelectedUpSkin");
          upSkin: Embed(source="messenger.swf", symbol="ButtonBar_buttonUpSkin");
          color: #ffffff;
          textRollOverColor: #ffffff;
          textSelectedColor: #ffffff;
          }

          .lastButtonBarButton
          {
          disabledSkin: Embed(source="messenger.swf", symbol="ButtonBar_lastDisabledSkin");
          downSkin: Embed(source="messenger.swf", symbol="ButtonBar_lastDownSkin");
          overSkin: Embed(source="messenger.swf", symbol="ButtonBar_lastOverSkin");
          selectedDisabledSkin: Embed(source="messenger.swf", symbol="ButtonBar_lastSelectedDisabledSkin");
          selectedDownSkin: Embed(source="messenger.swf", symbol="ButtonBar_lastSelectedUpSkin");
          selectedOverSkin: Embed(source="messenger.swf", symbol="ButtonBar_lastSelectedUpSkin");
          selectedUpSkin: Embed(source="messenger.swf", symbol="ButtonBar_lastSelectedUpSkin");
          upSkin: Embed(source="messenger.swf", symbol="ButtonBar_lastUpSkin");
          color: #ffffff;
          textRollOverColor: #ffffff;
          textSelectedColor: #ffffff;
          }
          • 2. Re: How to skin the ToggleButtonBar
            Mark.P. Level 1
            Thank You!! This is great it pretty much worked. The only thing is the buttonStyleName worked just fine but the first and lastButtonStyleName doesn't. I copied the CSS exactly, is there something in the MXML? I looked at the MXML from the example and didn't see anything. What could it be?

            ToggleButtonBar
            {

            buttonStyleName:"buttonBarButton";
            firstButtonStyleName:"firstButtonBarButton";
            lastButtonStyleName:"lastButtonBarButton";
            }

            /*
            //------------------------------
            // ButtonBarButtons
            //------------------------------
            */

            .firstButtonBarButton
            {
            upSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            selectedUpSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            overSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            selectedOverSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            downSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            selectedDownSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            color: #000000;
            textRollOverColor: #FFFFFF;
            textSelectedColor:#000000;
            }
            .buttonBarButton
            {
            upSkin:Embed(source="../images/TabButton.swf", symbol="up_skin");
            selectedUpSkin:Embed(source="../images/TabButton.swf", symbol="up_skin_selected");
            overSkin:Embed(source="../images/TabButton.swf", symbol="over_skin");
            selectedOverSkin:Embed(source="../images/TabButton.swf", symbol="over_skin_selected");
            downSkin:Embed(source="../images/TabButton.swf", symbol="down_skin");
            selectedDownSkin:Embed(source="../images/TabButton.swf", symbol="down_skin_selected");
            color: #000000;
            textRollOverColor: #FFFFFF;
            textSelectedColor:#000000;
            }

            .lastButtonBarButton
            {
            upSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            selectedUpSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            overSkin:Embed(source="../images/TabButton.swf", symbol="lastOver");
            selectedOverSkin:Embed(source="../images/TabButton.swf", symbol="over_skin_selected");
            downSkin:Embed(source="../images/TabButton.swf", symbol="down_skin");
            selectedDownSkin:Embed(source="../images/TabButton.swf", symbol="down_skin_selected");
            color: #000000;
            textRollOverColor: #FFFFFF;
            textSelectedColor:#000000;
            }
            • 3. Re: How to skin the ToggleButtonBar
              ctansky
              what if you have more than three buttons in the ToggleButtonBar and you want to have unique rollovers/rolloffs etc for each one? Seems like you can set the first and last and maybe one middle (using buttonStyleName) but how do you add in for more?