Styling/Skinning Differences in Flex 3
Going back and forth between Flex 2 and the new Flex 3 Beta 2, there are a few things I’ve immediately noticed that have changed. This may result in former styling/skinning properties not appearing or possibly errors showing up. Another thing to note is that there are some styling/skinning properties that have been added. Here’s a list of a few things I’ve noticed so far:
Combo Box
Padding for top and bottom can be set on a ComboBox: paddingTop, paddingBottom. Option to specify a color for the arrow icon: iconColor.
Data Grid
A skin can be specified for a DataGrid header: headerBackgroundSkin.
Effects
You can now specify effects for data items in a List and TileList. There are effects for instances of data changing: dataChangeEffect. This works with the added DefaultListEffect and DefaultTileListEffect (part of effects like ResizeEffect, MoveEffect, etc.). A property has also been added that allows for the creation of itemRenderers when the effect is played: offscreenExtraRowsOrColumns.
PopUpButton
Skin states that were called overRightSkin and downRightSkin are now called popUpOverSkin and popUpDownSkin. Skin states overLeftSkin and downLeftSkin are just overSkin and downSkin.
In Flex 3 you can now replace the arrow icon by specifying a graphic for popUpIcon. You can also specify a color for the default arrow icon.
Some of these things may or may not affect some of the previously released ScaleNine themes. Moving forward, the themes I create will be built for use in Flex 3. I’ll try to add to this list as I notice more things or as others let me know of what changes they’ve noticed. Be sure to check out Narciso Jaramillo’s post on some other workflow features that are available along with the new Flex Builder 3 Beta 2.
For now, I’m referring to the new and improved Live Docs for Flex 3 Beta 2 for anything I run into.
October 9th, 2007 at 5:01 pm
Re the Flex Component Kit for Flash - re-worked to include transitions, right? The page at labs says it’s bundled with the FB3 SDK. I don’t see how to navigate to it…any ideas? Any other ‘transition-enabled’ templates floating around?
Very much looking forward to seeing how this stuff develops and your coverage is a first stop.
thx
October 9th, 2007 at 5:59 pm
@Steve - Yes. You can create skins with transitions using the Flex Component Kit. I believe the Flash bundle on this page : http://labs.adobe.com/downloads/flex_sdext.html contains the FCK, skin extensions and the necessary templates. Once you install that, fire up Flash CS3 and you should see “Flex Skins” as an option under the “Create from Template” on the Getting Started window. When you select that, you have the option to select a skin template. Each one of those templates are set up to get you started with transitions. Just create the animations and maybe move some key frames around.
I’m working on a couple posts about creating a skin with a transition from scratch and one using the templates. They’re long, so I might break ‘em up.