Accessibility
Ryan Frishberg

Ryan Frishberg

Adobe

Table of Contents

  1. Introduction
  2. Writing a simple button skin
  3. Introducing the skinning contract
  4. Skinning contract continued: skin parts
  5. Creating a skinnable component
Created:
6 July 2009
Modified:
4 October 2009
User Level:
Intermediate
Products:
Flex

Introducing skinning in Flex 4 beta (updated for beta 2)

One of the main themes for the Flex 4 (codename: Gumbo) release is "Design in Mind", and skinning is a big part of that theme. Flash Player is the delivery mechanism for some of the most creative work to be found on the web today. However, Flex applications have gained a reputation for looking too similar to each other, as many developers choose to use the Flex default look and feel (known as Halo) as opposed to applying extensive styling or skinning.

Flex 4 beta makes it easier to completely change the look and feel of an application. The new skinning architecture builds on top of other changes in Flex 4 and provides a clean separation between the logic and visual elements of a component. Because of this, none of the components in Flex 4 beta contains any information about their visual appearance. All of that information is contained in the skin file, and thanks to FXG and the new states syntax, the new skin files can be completely written in MXML, making them easier to read and write, as well as easier to access with tools.

In this article, you'll learn about the improvements to the skinning architecture in Flex 4 beta. By writing a basic skin for a button, you'll learn a little bit about FXG and the new states syntax. Next, you'll learn about the contract a component and a skin use to interact with each other through the process of skinning a slider. Lastly, you'll delve into skinnable components as you create a new component ripe for skinning.

Note: Throughout this document, the term Halo components refers to components originally included in Flex 3. The term Spark components refers to the new set of components in Flex 4 beta.

Requirements

In order to make the most of this article, you need the following software and files:

Flex 4 beta

Sample files:

Prerequisite knowledge

This article assumes knowledge of the Flex 3 Framework.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.

Page 1 of 5
Next Page

About the author

Ryan is a Software Engineer on the Flex SDK team at Adobe. He has over ten years of web programming experience and has written several articles on JavaScript and DHTML. Prior to joining Adobe, Ryan interned at Oracle, Morgan Stanley, and Google. He holds a BS in Electrical & Computer Engineering and Computer Science from Carnegie Mellon University. You can visit his blog at http://frishy.blogspot.com.