在Flex4 Spark Application中设置图片背景解决方案汇总
来源:互联网 发布:西安管家婆软件 编辑:程序博客网 时间:2024/06/05 08:41
问题:如何在 Flex4 Spark Application 中添加图片背景?
方案1:自定义含有BitmapGraphic的皮肤类,然后再MXML,CSS,AS中设置skinClass的皮肤样式
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Application_skinClass_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
skinClass="skins.CustomApplicationSkin">
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Application>
自定义皮肤类, skins/CustomApplicationSkin.mxml代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<!-- fill -->
<s:BitmapImage id="img"
source="@Embed('image1.jpg')"
smooth="true"
left="0" right="0"
top="0" bottom="0"/>
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"/>
</s:Skin>
你也可以通过外部.css样式表文件或者使用<Style/>标签来设置使用skinClass样式
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Application_skinClass_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|Application {
skinClass: ClassReference("skins.CustomApplicationSkin");
}
</fx:Style>
</s:Application>
或者你可以使用ActionScript来设置skinClass样式,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Application_skinClass_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"creationComplete=”init();”>
<fx:Script>
<![CDATA[
import skins.CustomApplicationSkin;
protected function init():void {
setStyle("skinClass", CustomApplicationSkin);
}
]]>
</fx:Script>
</s:Application>
方案2:在运行时embedded图片到BitmapFill对象中,修改Application皮肤的backgroundRect皮肤部分的填充属性。代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ho="library://ns.adobe.com/flex/halo"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"creationComplete="init();">
<fx:Script>
<![CDATA[
import mx.graphics.BitmapFill;
import mx.graphics.BitmapFillMode;
import spark.skins.spark.ApplicationSkin;
[Embed("style/background.jpg")]
protected const BgImg:Class;
protected function init():void{
var bmpFill : BitmapFill = new BitmapFill();
bmpFill.source = BgImg;
bmpFill.fillMode = BitmapFillMode.SCALE;
ApplicationSkin(skin).backgroundRect.fill=bmpFill;
]]>
</fx:Script>
</s:Application>
方案3:扩展默认的Spark包 中Application 皮肤,并通过embedded图片来覆盖backgroundRect皮肤部分的填充属性,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ho="library://ns.adobe.com/flex/halo"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"skinClass="skins.CustomBitmapApplicationSkin">
</s:Application>
扩展的自定义的应用程序皮肤类,skins/CustomBitmapApplicationSkin.as如下:
package skins{
import mx.graphics.BitmapFill;
import mx.graphics.BitmapFillMode;
import spark.skins.spark.ApplicationSkin;
publicclass CustomBitmapApplicationSkin extends ApplicationSkin{
[Embed("style/background.jpg")]
protectedconst BgImg:Class;
publicfunction CustomBitmapApplicationSkin(){
super();
var bmpFill:BitmapFill = new BitmapFill();
bmpFill.source=BgImg;
bmpFill.fillMode = BitmapFillMode.SCALE;
backgroundRect.fill = bmpFill;
}
}
}
方案4:自定义皮肤类(有别于方案一,不需要BitmapGraphic)实现代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ho="library://ns.adobe.com/flex/halo"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"skinClass="skins.CustomBitmapApplicationSkin2">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|Application {
backgroundImage: Embed("style/background.jpg");
}
</fx:Style>
</s:Application>
自定义的应用程序皮肤类,skins/CustomBitmapApplicationSkin2.as如下:
<?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"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabledStates="0.5">
<s:states>
<s:State name="normal" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="normalWithControlBar" stateGroups="controlBarStates" />
<s:State name="disabledWithControlBar" stateGroups="disabledStates,controlBarStates" />
</s:states>
<fx:Metadata>
[HostComponent("spark.components.Application")]
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
overrideprotectedfunction updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
backgroundRect.setStyle("backgroundAlpha", getStyle("backgroundAlpha"));
backgroundRect.setStyle("backgroundColor", getStyle("backgroundColor"));
if (getStyle("backgroundImage")) {
backgroundRect.setStyle("backgroundImage", getStyle("backgroundImage"));
backgroundRect.setStyle("backgroundImageFillMode", "repeat");
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<!-- 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:BorderContainer id="backgroundRect"
backgroundColor="#FFFFFF"
borderVisible="false"
left="0" right="0" top="0" bottom="0" />
<s:Group left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<!--- Application Control Bar -->
<s:Group id="topGroup"
minWidth="0" minHeight="0"
includeIn="controlBarStates" >
<!-- 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 -->
<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>
<s:Group id="contentGroup"
width="100%" height="100%"
minWidth="0" minHeight="0" />
</s:Group>
</s:Skin>
本人关于Flex4 Spark Application 背景图片设置的解决方案就到此,如有其它更高效,更可行的方案可以分享出来,互相学习。
- 在Flex4 Spark Application中设置图片背景解决方案汇总
- 在Flex4 Spark Application中设置图片背景解决方案汇总
- 在Flex4 Spark Application中设置图片背景解决方案汇总
- Flex4的Application中设置背景图像
- Flex4 Spark组件ButtonBar设置图片
- FLEX4中怎样设置背景,及惭变色
- FLEX4中怎样设置背景,及惭变色
- FLEX4中怎样设置背景,及惭变色 .
- flex4 application设置滚动条
- Flex4 Spark 中使用 TitleWindow
- Flex4以后Menubar背景设置问题
- 设置图片的工具类 在BaseApplication类中继承Application并调用方法
- 在android中使用ImageLoder加载网络图片时,将图片设置为ImageView的背景
- flex4.5中spark.components.image组件
- 如何在netbeans中插入图片背景
- Flex4 TitleWindow 给标题栏设置为图片
- 在Java中设置Imageview的背景
- 在Flex4中嵌入字体
- 《你所不知的OSG》第二章:OSG与GLSL(1)实现摇摆的树
- C语言中,int的最大值与最小值:
- VC++编程实现镜像劫持
- 如何根据乱码现象来分析转码出错的原因
- C#操作Word完全方法
- 在Flex4 Spark Application中设置图片背景解决方案汇总
- jQuery 表格展开伸缩
- HDU 3695 Computer Virus on Planet Pandora(AC自动机)
- c#读取Excel数据到Gridview
- HR报表开发基本流程
- JSP中
- Booki Objavi安装出错:SyntaxError和with语句有关
- 【华为】不得不走在成为世界第一的路上
- 摩库广告条项目