3 Replies Latest reply on May 24, 2010 7:28 PM by David_F57

    Is there an easier way to graphically skin a Button in a Flex 4 theme?

    XPCODER

      I found the following blog by Peter DeHaan

       

           Using a bitmap image skin in a Spark Button control in Flex 4

           http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-contro l-in-flex-4/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+FlexExamples+%28Fl ex+Examples%29

       

      and was able to incorporate the technique into a theme SWC. However, this implementation requires wrapping three bitmaps in a completely separate programmatic skin, then doing something like this in the theme's CSS file:

       

      s|Button.myReplyButton
      {
          skinClass: ClassReference("myTheme.skins.ReplyButtonSkin");
      }

       

      This works, but it seems like overkill. The following "simple" way I tried first did not work (in spite of the fact that I found numerous Flex 4 samples that claimed to work):

       

      .myReplyButton
      {
          disabled-skin: Embed(source="assets/images/reply.png");
          down-skin: Embed(source="assets/images/reply-down.png");
          over-skin: Embed(source="assets/images/reply-hover.png");
          up-skin: Embed(source="assets/images/reply.png");
          selected-disabled-skin: Embed(source="assets/images/reply.png");
          selected-down-skin: Embed(source="assets/images/reply-down.png");
          selected-over-skin: Embed(source="assets/images/reply-hover.png");
          selected-up-skin: Embed(source="assets/images/reply.png");
      }

       

      As the above implies, I need only the bitmap skins. Do I really need the technique Peter showed in his blog? Or, is there some easier method that does not require the creation of a new programmatic skin (the only purpose being to wrap the bitmaps)?

       

      Thanks.

      Dave

        • 1. Re: Is there an easier way to graphically skin a Button in a Flex 4 theme?
          Peter deHaan Level 4

          I haven't tested this very much, but you may be able to hack some custom CSS style names and then use getStyle() and databinding from a custom Button skin to do what you want:

           

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">
              <fx:Style>
                  #myReplyButton {
                      downSkin: Embed("assets/images/reply-down.png");
                      overSkin: Embed("assets/images/reply-hover.png");
                      upSkin: Embed("assets/images/reply.png");
                  }
              </fx:Style>
          
              <s:Button id="myReplyButton"
                        skinClass="skins.CustomBitmapButtonSkin"
                        x="20" y="20" />
          
          </s:Application>
          
          And my custom skins/CustomBitmapButtonSkin.mxml, is as follows:
          <?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"
                  alpha.disabled="0.5">
              <!-- states -->
              <s:states>
                  <s:State name="up" />
                  <s:State name="over" />
                  <s:State name="down" />
                  <s:State name="disabled" />
              </s:states>
              
              <!-- host component -->
              <fx:Metadata>
                  [HostComponent("spark.components.Button")]
              </fx:Metadata>
              
              <s:BitmapImage id="img"
                      source="{getStyle('upSkin')}"
                      source.down="{getStyle('downSkin')}"
                      source.over="{getStyle('overSkin')}" />
              
          </s:SparkSkin>
          
          I didn't really bother with all the skin states in your example since the s:Button doesn't really support the toggled/selected states (you'd need an s:ToggleButton for that -- and it doesn't look like you really cared since you're setting the same images in those states anyways).
          Peter
          • 2. Re: Is there an easier way to graphically skin a Button in a Flex 4 theme?
            Peter deHaan Level 4

            Or, if databinding offends you, this may also work (or maybe not, what do I know -- I didn't really test it):

             

            <?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"
                    alpha.disabled="0.5"
                    currentStateChange="currentStateChangeHandler(event);">
                <!-- states -->
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                    <s:State name="disabled" />
                </s:states>
            
                <fx:Script>
                    <![CDATA[
                        import mx.events.StateChangeEvent;
            
                        protected function currentStateChangeHandler(evt:StateChangeEvent):void {
                            switch (evt.newState) {
                                case "over":
                                    img.source = getStyle("overSkin");
                                    break;
                                case "down":
                                    img.source = getStyle("downSkin");
                                    break;
                                default:
                                    img.source = getStyle("upSkin");
                                    break;
                            }
                        }
                    ]]>
                </fx:Script>
            
                <!-- host component -->
                <fx:Metadata>
                    [HostComponent("spark.components.Button")]
                </fx:Metadata>
            
                <s:BitmapImage id="img" />
            
            </s:SparkSkin>
            
            There also may be a way better way of doing this. This was just the first thing that came to mind.
            Peter
            • 3. Re: Is there an easier way to graphically skin a Button in a Flex 4 theme?
              David_F57 Level 5

              hi,

               

              Using images dynamically in a skin was discussed in an earlier thread, I slapped together a basic way to do this, it may be of help to what you are tryng to do

               

              http://forums.adobe.com/message/2837375#2837375

               

               

              David.