设置Spark Form 的背景色 in Flex Hero | Flex Examples

以下展示了如何设置  backgroundColor style 来改变Spark Form的背景色

以下示例需要 Flash Player 10 和 the beta Adobe Flex Hero SDK. 点击这里下载 Adobe Flash Builder 4 trial. 下载最新版 Flex Hero SDK, seehttp://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-form-container-in-flex-hero/ -->
<s:Application name="Spark_Form_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>
    <s:controlBarContent>
        <s:Form backgroundAlpha="0.0">
            <s:FormItem label="backgroundColor:">
                <mx:ColorPicker id="clrPckr" selectedColor="red" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>

    <s:Form id="frm"
            backgroundColor="{clrPckr.selectedColor}"
            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>

也可以在外部.css文件或者 <Style>代码块来设置  backgroundColor style ,看下面的demo:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/28/setting-the-background-color-on-a-spark-form-container-in-flex-hero/ -->
<s:Application name="Spark_Form_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|Form {
            backgroundColor: red;
        }
    </fx:Style>

    <s:Form id="frm"
            defaultButton="{submitBtn}">
        <s:layout>
            <s:FormLayout gap="7" />
        </s:layout>
        <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>

当然，你也可以用 ActionScript设置 backgroundColor style , 看demo:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/28/setting-the-background-color-on-a-spark-form-container-in-flex-hero/ -->
<s:Application name="Spark_Form_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>
    <s:controlBarContent>
        <s:Form backgroundAlpha="0.0">
            <s:FormItem label="backgroundColor:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="white"
                        change="clrPckr_changeHandler(event);"/>
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>

    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            protected function clrPckr_changeHandler(evt:ColorPickerEvent):void {
                frm.setStyle("backgroundColor", evt.color);
            }
        ]]>
    </fx:Script>

    <s:Form id="frm"
            defaultButton="{submitBtn}">
        <s:layout>
            <s:FormLayout gap="7" />
        </s:layout>
        <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>

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.

 

翻译&转载自 Setting the background color on a Spark Form container in Flex Hero | Flex Examples