Using FlatSpark skins

FlatSpark is an open source project created to bring skins based on FlatUI to Flex. Apache Flex 4.14 marks the first release that has FlatSpark as an official part of Apache Flex.

Installing FlatSpark

FlatSpark is automatically installed when using Flex 4.14 SDK, you just need to accept the "Adobe Embedded Font Libraries and Utilites" license, otherwise you will get an error when trying to use it.

Using FlatSpark

Right now there are two ways to use FlatSpark as the skin for your components.

Changing the default skin of all components

If you want to change the skin of all your components, you can just set the skin via CSS.

For example, if you want to change all RadioButton components to use FlatSpark skin, add this CSS code:

s|RadioButton {
    skinClass: ClassReference("flatspark.skins.RadioButtonSkin");
}

Changing the skin of a single component

If you want to change the skin of a single component, you can just use the skinClass attribute, like this:

<s:RadioButton label="Test 2" skinClass="flatspark.skins.RadioButtonSkin"/> 

The naming scheme of the skins is following the convention "componentSkin". That means you can expect FlatSpark to provide ButtonSkin, TextInputSkin and so on.

List of components available:

• Alert (experimental)
• Button
• ButtonIcon*
• CheckBox
• ComboBox
• DropDownList
• Panel
• ProgressBar (experimental)
• RadioButton
• TextInput
• TextInputIcon*
• TitleWindow

* Custom components only available using FlatSpark

Changing FlatSpark's components appearance

FlatSpark has different goals than usual skins, it is meant to work as the FlatUI and Bootstrap CSS frameworks. This means that FlatSpark usually gives default sizes and colors for components and is intended to be used with them, letting you define properties that don't break the original design. Trying to define custom designs on top of FlatSpark may be hard sometimes as that is not the intended nature of the skin.

Defining component size

As mentioned at the start of this page, FlatSpark is designed to be as close to FlatUI as possible. This means that, by default, FlatSpark defines fontSize based on the height attribute.

FlatUI is based on Bootstrap, which has 4 different sizes, FlatSpark keeps that rule. So FlatSpark will look better if you use the provided ButtonSizeEnum and TextInputSizeEnum to set the height of your components. That way your components will render exactly as intended. Examples:

<s:Button label="Large Button" skinClass="flatspark.skins.ButtonSkin" height="{ButtonSizeEnum.Large}"/>
<s:TextInput skinClass="flatspark.skins.TextInputSkin" height="{TextInputSizeEnum.Large}"/>

If you don't define any height, it will always assume the Normal height.

Defining component color

FlatSpark also defines an easy way to change the button color according to FlatUI "states". There are 7 default colors for buttons, as follows: Primary, Success, Warning, Inverse, Default, Info and Danger. Defining a button as "Warning", for example, changes more than just its base color. That's why we provide an easy way for you to define the button "state". This "state" is called a brand. If you define the brand of a button, FlatSpark will change all the colors according to FlatUI colors.

You can define a ButtonIcon's brand property like this:

<components:ButtonIcon label="Success Button" brand="{BrandColorEnum.Success}"/>

The BrandColorEnum class defines all 7 available brands described before.

Using FontAwesome

FontAwesome is included in FlatSpark skin, it can be used on ButtonIcon and TextInputIcon skins.

<components:ButtonIcon iconFont="{AwesomeUtils.fa_info_circle}" height="{ButtonSizeEnum.Large}" label="Icon Button"/>
<components:TextInputIcon iconFont="{AwesomeUtils.fa_user}"/>

You can also use any of the icons with the Label component, like this:

<s:Label fontFamily="FontAwesome" text="{AwesomeUtils.fa_toggle_off}" />

If you find that an icon is missing from AwesomeUtils you can use the code provided in FontAwesome cheatsheet, like this:

<!-- uses ambulance icon -->
<s:Label fontFamily="FontAwesome" text="/uf0f9" />