群里一哥们问我 f4 设置 Application 的 backgroundImage 问题,
就写了一个demo Application skin文件 图片是http形式的
原理利用有 BorderContainer 控件 这个控件一般用来做边框,背景贴图。。。当然了这个空间有一个特殊的CSS属性
backgroundImage 底层的skin就是添加了 BorderContainer控件
1.新建一个 spark.components.Application skin
去掉系统的背景填充
<s:Rect id="backgroundRect" left="10" right="10" top="10" bottom="10" radiusX="10" radiusY="10" > <s:fill> <s:SolidColor id="bgRectFill" color="yellow"/> </s:fill> </s:Rect>
添加
<s:BorderContainer id="backgroundImg" backgroundColor="#FFFFFF" borderVisible="false" left="0" right="0" top="0" bottom="0" />
修改 updateDisplayList()方法
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { backgroundImg.setStyle("backgroundAlpha", getStyle("backgroundAlpha")); backgroundImg.setStyle("backgroundColor", getStyle("backgroundColor")); backgroundImg.setStyle("backgroundImage", getStyle("backgroundImage")); backgroundImg.setStyle("backgroundImageFillMode", "repeat"); super.updateDisplayList(unscaledWidth, unscaledHeight); }
源文件如下:
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Application component.
@see spark.components.Application
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:Skin 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" alpha.disabledWithControlBar="0.5">
<fx:Metadata>
<![CDATA[
/**
* A strongly typed property that references the component to which this skin is applied.
*/
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
backgroundImg.setStyle("backgroundAlpha",
getStyle("backgroundAlpha"));
backgroundImg.setStyle("backgroundColor",
getStyle("backgroundColor"));
backgroundImg.setStyle("backgroundImage",
getStyle("backgroundImage"));
backgroundImg.setStyle("backgroundImageFillMode", "repeat");
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<s:BorderContainer id="backgroundImg"
backgroundColor="#FFFFFF"
borderVisible="false"
left="0" right="0" top="0" bottom="0" />
<!-- fill -->
<!---
A rectangle with a solid color fill that forms the background of the application.
The color of the fill is set to the Application's backgroundColor property.
-->
<s:Group left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<!---
@private
Application Control Bar
-->
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<!-- layer 0: control bar highlight -->
<s:Rect left="0" right="0" top="0" bottom="1" >
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 1: control bar fill -->
<s:Rect left="1" right="1" top="1" bottom="2" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xEDEDED" />
<s:GradientEntry color="0xCDCDCD" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: control bar divider line -->
<s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
<!-- layer 3: control bar -->
<!--- @copy spark.components.Application#controlBarGroup -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
</s:layout>
</s:Group>
</s:Group>
<!--- @copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
</s:Group>
</s:Skin>
然后外部引用css 当然了这个css特殊的地方必须有 backgroundImage 这个属性
例如:
<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Application { backgroundImage: Embed("http://www.beasy.org/wp-content/uploads/2011/10/sh.jpg"); } </fx:Style>
测试ok