Creating a User Interface (UI) – Spark skins

January 24th, 2011 by aabhaanjan

Lets move to the other points of section Creating a User Interface (UI). There will be some question from Change the look and feel of a design by using API styles, style sheets, Spark skins, filters and blends, and visual customizations by using Halo.

Lets start with Spark skins first.

Spark skins :

The new features of Flex 4 SDK separates developer and designers by separating a component’s visual appearance from component’s coding or logic part. The new feature Spark provides  a design-oriented subset of MXML, and separates design-oriented component features into a component’s companion “skin” file.


1. It is new MXML subset for skins,

2. is valid XML code, and can be specified either inside an MXML file defining a component or, more often, in a separate file.

3. FGX files can declare any visual aspect of a component.

4. An FGX file, for instance, can define runtime graphics classes that draw shapes, specify containment of sub-components, define component effects, transitions, and even specify layout inside the component

5. In Flex 4, the runtime graphics primitives directly map to graphics classes in Flash Player 10

6. Default look and feel is known as Halo

7. Catalyst :Adobe provided a specialized designer tool, Catalyst, for the purpose of working with FGX content. Using this tool, a designer can create pixel-perfect application shells complete with behaviors, transitions, and even data placeholders that are ready for integration and implementation by a developer using Flash Builder 4.

8. 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.

Writing a simple button skin


<?xml version=”1.0″ encoding=”utf-8″?>

<s:Application xmlns:fx=”″


<s:Group verticalCenter=”0″ horizontalCenter=”0″>

<s:Rectfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>rect” radiusX=”4″ radiusY=”4″ top=”0″ right=”0″ bottom=”0″ left=”0″>


<s:SolidColor color=”0xFF3300″ />



<s:SolidColorStroke color=”0x131313″ weight=”1″/>



<s:Label text=”Skinned Button!” color=”0x121212″ textAlign=”center” verticalAlign=”middle”

horizontalCenter=”3″ verticalCenter=”1″

left=”23″ right=”17″ top=”7″ bottom=”5″





Tags: , , , , , , , , , , , , ,