Flex 4 Example – Halo Component with Spark Skin

Lately I’ve been playing with the Flex 4 Beta to better understand the new Spark component set. Halo is the name being used to describe the Flex 2 and Flex 3 component set. In Flex 4 you can choose to either use only Halo or use both Spark and Halo together. Since Spark has some great features like improved skinning and FXG (declarative vector drawing) support it is a great option for creating pixel perfect UIs. But sometimes you might need to stick with the Halo components. Luckily it seems that you can use the Spark skinning classes on Halo components. Here’s an example of this technique based on an earlier demo I built which used only Spark:

Here is the application code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[0x0e0e0e,0x0e0e0e]" backgroundColor="#0e0e0e" viewSourceURL="srcview/index.html">
    
    <mx:Button label="hello, world" skin="PrettyButtonSkin" color="#bbbbbb" textRollOverColor="#dddddd" textSelectedColor="#dddddd" width="200" height="50"/>
    
</mx:Application>

And here is the skin code:

<SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns="library://ns.adobe.com/flex/spark">
  
    <fx:Declarations>
      <AnimateColor id="colorEffect" targets="{innerBorderColorTop, innerBorderColorTop, fillColorTop, fillColorBottom, labelElement]}" duration="1000"/>
    </fx:Declarations>
    
  <states>
    <State name="up"/>
    <State name="over"/>
    <State name="down"/>
  </states>
  
  <transitions>
    <Transition fromState="up" toState="over" effect="{colorEffect}"/>
    <Transition fromState="over" toState="up" effect="{colorEffect}"/>
    <Transition fromState="down" toState="up" effect="{colorEffect}"/>
    <Transition fromState="down" toState="over" effect="{colorEffect}"/>
  </transitions>
    
  <Rect id="r1" radiusX="2" radiusY="2" width="100%" height="100%">
    <fill>
      <LinearGradient rotation="90">
              <entries>
          <GradientEntry id="innerBorderColorTop" color="0x141414" color.down="0x0b0b0b" ratio="0" alpha="1"/>
                <GradientEntry id="innerBorderColorBottom" color="0x0b0b0b" color.down="0x0b0b0b" ratio="1" alpha="1"/>
                </entries>
      </LinearGradient>
    </fill>
    <stroke>
        <SolidColorStroke alpha="1" color="0x252525" pixelHinting="true"/>
    </stroke>
    </Rect>
    
  <Rect radiusX="2" radiusY="2" width="{r1.width - 3}" height="{r1.height - 3}" x="2" y="2">
    <fill>
      <LinearGradient rotation="90">
        <GradientEntry id="fillColorTop" color="0x393939" color.over="0x161616" color.down="0x0b0b0b" ratio="0" alpha="1"/>
        <GradientEntry id="fillColorBottom" color="0x131313" color.over="0x161616" color.down="0x0b0b0b" ratio="1" alpha="1"/>
      </LinearGradient>
    </fill>      
    </Rect>
    
    <SimpleText id="labelElement" color="#bbbbbb" color.over="#dddddd" color.down="#dddddd" verticalCenter="0" horizontalCenter="0"/>

</SparkSkin>

You could even use the Spark ButtonSkin on the Halo Button component:

<mx:Button label="hello, world" skin="spark.skins.default.ButtonSkin" color="#bbbbbb" textRollOverColor="#dddddd" textSelectedColor="#dddddd" width="200" height="50"/>

This approach allows for a more incremental adoption of the new features in Flex 4. I’ve only tried Button so I’m not sure if this same approach works for other more complex components. But it seems that in many cases this will help us use FXG for the skins on Halo components. Let me know what you think.