Setting the background color on a Spark FormItem container in Flex Hero

In a previous example, “Setting the background color on a Spark Form container in Flex Hero”, we saw how you could set the background color on a Spark Form container in Flex Hero by setting the backgroundColor style.

The following example shows how you can set the background color on a Spark FormItem container in Flex Hero by setting the backgroundColor style.

The following example(s) require Flash Player 10 and the beta Adobe Flex Hero SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex Hero SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/28/setting-the-background-color-on-a-spark-formitem-container-in-flex-hero/ -->
<s:Application name="Spark_FormItem_backgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|FormHeading {
            backgroundColor: purple;
        }
 
        s|FormItem {
            backgroundColor: red;
        }
    </fx:Style>
 
    <s:Form id="frm" defaultButton="{submitBtn}">
        <s:FormHeading label="Spark Form Heading" />
        <s:FormItem label="Username:">
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem label="Password:">
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem label="Confirm password:">
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

View source is enabled in the following example.

[GoogleAdsWide]

This entry is based on a beta version of the Flex Hero SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Hero SDK.