Question

How to add a background image?
I just tied to code like:

.bg{
backgroundImage:Embed(source="../../assets/Interaction-Screen_BG_pump.png");
}

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        actionBarVisible="true" enterFrame="view1_enterFrameHandler(event)"
        initialize="view1_initializeHandler(event)" menuKeyPressed="onMenu(event)"
        overlayControls="false" tabBarVisible="true" title="Interact"
                styleName="bg"
>

But it not work.

And also,how to create a image button?

Answer 1

To add a background image to a Flex Mobile View or app, first create your skin class (let’s call it “ViewBackgroundSkin.mxml”):

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Metadata>
    [HostComponent("spark.components.View")]
</fx:Metadata>

<s:states>
    <s:State name="disabled" />
    <s:State name="normal" />
</s:states>

<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
    <s:fill>
        <s:BitmapFill source="@Embed('assets/images/BackgroundImage.png')"/>
    </s:fill>
</s:Rect>

<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />

If you want the image to tile the background, set fillMode to repeat on the BitmapFill:

    <s:BitmapFill source="@Embed('assets/images/BackgroundImage.png')" fillMode="repeat" />

In your css file(let’s call it MyStyle.css) reference your skin class:

s|View
{   
    skinClass: ClassReference("ViewBackgroundSkin");
} 

In your View, set the Style source to your css file:

<fx:Style source="MyStyle.css"/> 

or add the Style to your Application file to set the background for the whole app.