Programmatic pretty

Programmatic Pretty
Styling and Skinning Best Practices in Flex 4

What is Styling…
… and how is it different from skinning?

Styling is:
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.
Reusable
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

CSS Example

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

Button Demo

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

Degrafa Skin Demo

Thank you!
Further Reading:
Styleanderror.net
Degrafa.org
flash.developerartofwar.com

Programmatic pretty

by sforst on Jun 11, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 28

Statistics

Programmatic pretty — Presentation Transcript

http://styleanderror.net	26
http://www.slideshare.net	2