Learning Flex 4 – Spark Components and Skinning Basics

One of the key changes to Flex moving to version 4 is the introduction of the Spark component set.

The components in Flex 3 (Button, TextInput etc) were known under the code name Halo and they’re still available in Flex 4. These components are distinguished by the mx namespace prefix you are used to. The new Spark components have an s prefix and require the addition of a new namespace definition – xmlns:s="library://ns.adobe.com/flex/spark" (The mx namespace definition also changes to  xmlns:mx="library://ns.adobe.com/flex/halo").

There are Spark equivalents of most but not all mx or Halo components (DataGrid, AdvancedDataGrid and Tree are some of the currently missing).

The key difference in the component sets is their construction. Halo components contain everything required for that object including styling, behavior and layout. Spark components on the other hand, separate out the behavior of a component from the display aspects. The information corresponding to component display is kept in a separate skin class.

The upshot of this change is that the look and feel of an application can be separated from it’s behavior and more readily changed. With the introduction of the Catalyst tool in CS5, designers can deal with the display skins while developers deal with the underlying behavior.

You can specify the skin a component should use with:

  • CSS: S|Button {skinClass: ClassReference ("com.example.skins.MyButtonSkin");}
  • MXML: <s:Button skinClass="com.example.MyButtonSkin"/>
  • ActionScript: myButton.setStyle("skinClass",Class(MyButtonSkin);

The skin class is generally written in MXML and defines the states (with transitions) the skin reacts to, graphical elements and any component parts the skin is constructed from. The skin may also specify the HostComponent in a metadata tag. The HostComponent is the component class that will use the skin. This is useful for the skin to be able to gain a reference to properties of the component instance.

A skin class must declare state properties that are specified for it’s host component. For example, a Spark Button has states up, over, down and disabled so the skin must declare what it looks like for each of these states. The component will then set the relevant state at runtime.

Skin parts are sub components used to define a larger component – for example, a scrollbar has increment and decrement button parts together with a track and thumb part whereas a button just has a label.

The graphical elements of a skin are defined using a new graphics tag library cald FXG which includes graphics and text primitives including tags for creating basic shapes, fills, gradients and bitmaps. FXG is also used by Catalyst and other tools to transfer graphical data. The specification for FXG can be found here.

A great way to begin working with Skins is to modify the Adobe supplied skin class for a component. Flash Builder 4 has a workflow for creating skin classes that allows you to work from a supplied class. With FlashDevelop, you’ll have to go off and find the class for yourself and copy it in to your project under the name you want. You’ll find the skin class source files under your SDK install in the frameworks\projects\spark\src\spark\skins\spark directory.

For further detail on skinning Spark components, take a look at these Adobe articles.

Advertisements
Posted in Flex. 4 Comments »

4 Responses to “Learning Flex 4 – Spark Components and Skinning Basics”

  1. Rajneesh Says:

    I am having a problem in using spark.

    This is the error I am getting :-

    Unable to locate specified base class ‘spark.components.Application’ for component class ‘dropdownlist’. dropdownlist.mxml /brace-builder/src Unknown Flex Problem

    thanks in advamnce

    • mattreyuk Says:

      Rajneesh – what tool are you using to build your app (Flash builder/FlashDevelop/command line)? I could see you getting that error if you’re pointing to a 3.X SDK or maybe if you’ve told it you’re building an Air app.

  2. doug Says:

    Can you elaborate on the ActionScript: myButton.setStyle(“skinClass”,Class(MyButtonSkin); method?

    I’m trying to apply this in practice and having a lot of trouble with the syntax.

    Do you import the class and then call it without quotes? For instance:

    import mx.fictional.MyClass;

    public function MyClass() {
    setStyle(“skinClass”, MyClass);
    }

    • mattreyuk Says:

      Doug, it’s a lot simpler if your skin and your button class are in the same package eg com.example.view then you can just reference your skin class by the name you gave it directly.
      Say I create a skin class MyNewSkin(.as or .mxml) in …/com/example/view and I create a button called myButton in MyBottonView(.as or .mxml) also in …/com/example/view I can set the skin of myButton within that view using myButton.setStyle(“skinClass”,MyNewSkin);

      You’re calling the setStyle() method on the button you created.

      If your skin was in a different package (say ../com/example/skin you should be able to write myButton.setStyle(“skinClass”,com.example.skin.MyNewSkin);


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: