Setting a bitmap image fill on a Spark Form container in Flex Hero

In a previous example, “Setting a bitmap image fill on a Spark FormHeading control in Flex Hero”, we saw how you could set a bitmap image fill on a Spark FormHeading control in Flex Hero by creating a custom FormHeading skin and creating a repeating BitmapFill object.

The following example shows how you can set a bitmap image fill on a Spark Form control in Flex Hero by creating a custom Spark Form skin and creating a repeating BitmapFill object.

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/09/04/setting-a-bitmap-image-fill-on-a-spark-form-container-in-flex-hero/ -->
<s:Application name="Spark_Form_BitmapFill_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";
 
        s|Form {
            backgroundAlpha: 0.4;
            skinClass: ClassReference("skins.CustomSparkFormSkin");
        }
 
        s|FormHeading {
            backgroundAlpha: 0.3;
            backgroundColor: black;
        }
    </fx:Style>
 
    <s:Form id="frm" defaultButton="{submitBtn}">
        <s:FormHeading id="fh1" label="Spark Form Heading"/>
        <s:FormItem sequenceLabel="1." label="Username:" required="true">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:" required="true">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <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>

The custom Spark Form skin, skins/CustomSparkFormSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/09/04/setting-a-bitmap-image-fill-on-a-spark-form-container-in-flex-hero/ -->
<s:Skin name="CustomSparkFormSkin" 
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.Form")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                bgFill.alpha = getStyle("backgroundAlpha");
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="error" />
        <s:State name="disabled" />
    </s:states>
 
    <!--- Defines the appearance of the Form class's background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:BitmapFill id="bgFill" source="@Embed('assets/pattern_149.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <!-- We set Form's showErrorTip and showErrorSkin to false, so we set them back
    to true for the Form's elements -->
    <s:Group id="contentGroup" showErrorSkin="true" showErrorTip="true"
             left="10" right="10" top="10" bottom="10">
        <s:layout>
            <s:FormLayout gap="7"/>
        </s:layout>
    </s:Group>
 
</s:Skin>

Or you can create a custom Spark Form skin using ActionScript, as seen in the following example:

/** http://blog.flexexamples.com/2010/09/04/setting-a-bitmap-image-fill-on-a-spark-form-container-in-flex-hero/ */
package skins {
    import mx.graphics.BitmapFill;
    import mx.graphics.BitmapFillMode;
    import spark.skins.spark.FormSkin;
 
    public class CustomSparkFormSkinAS extends FormSkin {
        [Embed(source="assets/pattern_149.gif")]
        protected const PATTERN:Class;
 
        protected var btmpFill:BitmapFill;
 
        public function CustomSparkFormSkinAS() {
            super();
            btmpFill = new BitmapFill();
            btmpFill.source = PATTERN;
            btmpFill.fillMode = BitmapFillMode.REPEAT;
            background.fill = btmpFill;
        }
 
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            background.visible = true;
            background.alpha = getStyle("backgroundAlpha");
        }
    }
}

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.