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.
6 Comments
good button
Hey james
It’s not quite using the skin properly.
The limitation of Halo skins were that they weren’t DisplayObjectContainers, so you could only put graphics in them, no DisplayObjects, but this was easily solved by creating a couple of custom base skin classes that extended Sprite. The other problem was being able to affect the object that displayed the text as in mx, the TextField was inside the mx:Button itself, where as in spark this has be removed and you have to add an object to your skin to display the text. This was also possible to get round as the TextField inside an mx:Button is the first child added, so it was possible to access this from your skin via getChildAt() and set it’s visible property to false, then adding your own object to display the label inside your custom skin and populating its text using the label property on the mx:Button.
This is not was happening here though. The SimpleText object you have inside you skin is being totally ignored by the mx:Button and no String is ever added to it (as the Button has no idea it should do anything with it). Instead the String that is visible is the protected TextField inside the mx:Button.
You can see this by adding your skin to a spark:Button, You’ll see that your label on your spark:Button has a transition on its color, unlike the mx:Button where the color changes immediately. Here’s an example, and for the purpose of making the color transition clearer I have made the start colors red.
The default skin for an mx:Button in Flex 4 is the same skin that is used for the spark:Button (i.e. spark.skins.default.ButtonSkin), but the object that is in the skin to display the String is ignored and the TextField inside the mx:Button is used, as in the above example.
Wow Tink! Thanks for all the insight there. Makes total sense. The thing that I’m excited about is mainly just being able to use FXG skins on Halo components. So that still seems to be valid. But what doesn’t work is having other parts of the component rendered by the skin (the Label in the case of Button). Right?
-James
Can we have a Spark SKin for a Halo Text Input (mx TextINput) ofcourse spark text input has a skinClass directly but i want to use a mx text input component
i appreciate your response
Thanks,
Lisa
Hi Lisa,
Sorry but you can’t do that. What do you need on the Spark TextInput that isn’t there?
-James
Thanks James,
well actually i have a good looking skin for a text input but unfortunately there are few bugs in Flex SDK when a textinput has a skin cladd but i got a work around for it now using the text input over the skin (code) so its working for now.
anyways thanks for you response
Lisa