Programmatic Pretty Styling and Skinning Best Practices in Flex 4
What is Styling… … and how is it different from skinning?
A general term for applying a “style” or design to an application.
Styling can also be used to refer to the process of using CSS to customize an application’s look and feel.
Skinning is: Creating a customized appearance for a component, using any number of methods, such as: Bitmap skins, Vector Skins, and Programmatic Skins
Quick to produce
Can be produced by design teams, with minimal training.
Use little processing power
Advantages of Bitmap Skins
More control over scaling
Smaller size for less complex skins
Can include animation
Advantages of Vector Skins
Customizable on the fly
No initial load time.
Advantages of Programmatic Skins
Programmatic Skins in Flex 3
Built using Degrafa or Actionscript 3 Class files.
Nearly always based on the graphics object.
Not all containers had good support for skins.
Most developers relied on pngs to create skins.
Flex 4’s Spark components introduce a completely new way to create skins. Creating Flex 4 Skins
Flex 4’s styling also introduces namespaces.
Namespace format is namespace|ComponentName
Use the namespace mx for old flex 3 components
Use the namespace s for Spark Components
Components can now have multiple styleNames.
Flex 4 Styling Changes
Host Component | Other Meta Data | Skin Parts | States | Graphics MXML Elements of a Spark Skin
Skin Parts are elements of a component such as labels, icons, buttons, etc, that are a part of a component. The names of these Skin Parts must match the elements defined in the original component. For example, button expects (but does not require) a labelDisplay skin part. You can also create your own custom skin parts. Skin Parts
All skinnable spark components share the base class SkinnableComponent. Non-skinnable components extend Group. Skin classes all extend Skin (spark.components.supportClasses.Skin) or SparkSkin (spark.skins.SparkSkin) which is the base class for spark skins. New Classes in Flex 4
Layout is now controlled by the skin. Few built in layouts VerticalLayout HorizontalLayout HorizontalButtonBarLayout Custom layouts are easy to create, and reusable. Example: http://evtimmy.com/2009/06/flowlayout-a-spark-custom-layout-example/ Layout
Button Bar skinning requires the creation of at least two skins. A ButtonBar Skin A Button Skin A layout needs to be specified for the ButtonBar Button Bar Demo
Inheritance isn’t supported very well in Flex 4. It’s difficult to create skin base classes. Components don’t inherit skins as one would expect. Inheritance Demo
While applications can be completely styled using FXG and PNG’s, some applications require more versatile skins. In some cases, even mxml based skins will not work. In these cases, the skins can be produced with either complex Actionscript based skins, or more quickly, with Degrafa. Advanced Skinning