Jumping Into Skinning with Flex 4
Last week a lot of new information came out for Flex 4 (Gumbo). One of the major changes we’ll be seeing in the next version of Flex is how you skin components. After doing some reading on the Adobe Open Source site, watching Ely Greenfield’s video on Adobe TV and reading some blog posts I thought I’d jump right into learning how to skin components in Flex 4.
Skinning in Flex 4 is drastically different than what we do today. Instead of having to work with a single graphic to represent the skin of a component, skins can be composed of multiple elements, like text, images, FXG graphics, transitions, filters, transforms, states, etc. You create your skin in a separate file and compose the skin elements together using MXML markup. This makes skinning so much more versatile so you can do things like layer graphics on top of labels, add multiple icons, create unique transitions and more.
Just to get started, I thought I’d just create a Button skin that began to illustrate some of the benefits of this new way of skinning. Here’s an image of the skin I ended up creating:
It’s a relatively simple skin (or is it?). If you look closer you’ll notice some things that aren’t possible to do in Flex 3 without making a custom component or using OpenFlux. Here’s why:
- - There’s two icons. One is the cloud, the other is an arrow.
- - Notice the Glow Filter on the text. How many times has a designer or yourself wanted to throw that in a Flex application only to have to scrap it ’cause it would take too long to implement.
- - It may be hard to see, but the highlight on the Button is actually an FXG graphic layered on TOP of the Label and the 2 icons.
Those reasons are just the beginning of why I’m looking forward to skinning in Flex 4. You have so much more control and it’s easy to do. However, that may have been the case for me because I use Degrafa so much.
This was just a “getting started” exercise for me and I plan to get into more dynamic things like transitions, working with transforms, maybe adding some 3D, experimenting with Pixel Bender filters and working with skins for other components, like Lists. Definitely fun stuff.
In case anyone’s interested, you can download the source here.
July 17th, 2008 at 4:31 am
Cool stuff Juan. I downloaded Gumbo and tried to create something similar by watching Ely’s video and trying to match it with the sdk but I did not get too far. Your source code should help me get further along. I was wondering how you guys on the Degrafa team would feel about these new features in Flex 4 after putting in so much work on this already. Are they incorporating any of your work or ideas into Gumbo?
July 17th, 2008 at 5:05 am
Flex 4 “Gumbo” ??????? ?? ?????? ???…
Ð?ÑÑ Ñ?лекÑÐ¾Ð²Ð°Ñ Ð±Ð»Ð¾Ð³Ð¾ÑÑ?еÑ?а в ÑÑ?Ñ?аÑ?ном волнении: ÑовÑем ÑкоÑ?о (ÑÑ?еÑ? на Ñ?аÑÑ?…
July 17th, 2008 at 6:58 am
@Bill - I tried doing that too and didn’t have much luck. The only thing I can think of is that what Ely was showing in the video was more the “prototype” code that he showed at MAX. Since then they’ve probably made changes.
Regarding Degrafa, we’ve known this was coming since we started developing. There were a lot of ideas we had for versatile uses of Degrafa, but to get there we had to start with a core. This core is similar to FXG, but I think we’re going a bit further with things like Repeaters, Decorators, etc.
Now that FXG is starting to become more public we can look at making Degrafa kind of like an extension of FXG. I think there are still plenty of reasons why you’d want to use Degrafa and those will become more apparent in Degrafa Beta 3 and 1.0.
July 17th, 2008 at 8:28 am
[...] [Read original] Tags: Adobe, all together separate, Best Friend, Elements, Ely, Greenfield, Gumbo, Jump Right, Open Source, Skins, Socializer, Text Images, Transitions [...]
July 17th, 2008 at 10:13 am
Quick question/point… isn’t this bullet point moot w/ degrafa?: “There’s two icons. One is the cloud, the other is an arrow.”
I just started using degrafa with the migration to flex of our HUGE application that manages the international company I work for. The triangle could be a polygon inside your skin’s geometry property, and while it would take some time, a degrafa:Path for the cloud graphic.
Just talkin’… Thanks for the post. Have a good one.
July 17th, 2008 at 10:24 am
@jeremy - Yup. My point was more that that isn’t supported in Flex 3 unless you use things like Degrafa and OpenFlux or take your own custom approach. In fact, I’ve made skins that have multiple icons using Degrafa like you said and it works great. Especially when you allow them to be accessed via CSS. Glad to hear Degrafa is working for you.
July 17th, 2008 at 1:08 pm
[...] going with Gumbo component development, there has already been some really great posts (examples here and here) investigating creating and skinning Gumbo components. Check them out. I have to say, [...]
July 17th, 2008 at 2:29 pm
Button looks great.
Although the framework of a Button Flex 3 isn’t built to allow it, you can create this type of thing. Instead of using the framework provided for a Button i.e…
1. It has label
2. you can give it an icon
scrap this concept and create a skin where you add your 2 icons, your Textfield with the GlowFilter and the PNG overlay and it will get its state changes. This skin has access to all the properties on the Button via parent its so you can get the label etc. Your only problem is that the base skin classes in Flex 3 don’t support children and they extend Shape, which is why i created SpriteBorder & SpriteProgrammaticSkin.
http://www.tink.ws/blog/adding-children-to-skins-spriteborder-spriteprogrammaticskin/
What looks nice here is that the skins gets a data object, and obviously the MXML drawing.
July 21st, 2008 at 12:30 am
[...] Sanchez took the weekend to check out some of the new skinning capabilities in Gumbo (Flex 4). The first one is kind of an intro and compares and contrasts the Flex 4 versus Flex 3 model. The second one uses [...]
July 21st, 2008 at 11:53 am
[...] ScaleNine blog entry scratching the surface of what’s possible with the new version of Flex in terms of skinning, that wasn’t possible with previous versions. Source code included. [...]
July 22nd, 2008 at 8:07 am
[...] over at Scale Nine is starting to experiment with Flex 4 skinning - creating a custom button and a button with [...]
July 23rd, 2008 at 1:41 am
Any chance if it’s possible to recreate this skin with Degrafa?
July 23rd, 2008 at 2:10 pm
[...] Jumping Into Skinning with Flex 4 [...]
August 2nd, 2008 at 9:46 am
[...] Jumping Into Skinning with Flex 4 http://scalenine.com/blog/2008/07/17/jumping-into-skinning-with-flex-4/ [...]
September 7th, 2008 at 12:35 am
[...] Read more [...]
September 18th, 2008 at 4:02 pm
[...] - Jumping Into Skinning with Flex 4 , Gumbo (Flex 4) Skin with [...]