Question

flex4中如何给自定义Group控件添加背景图片

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:buttons="com.giantstone.workflow.ui.buttons.*"
width="46" height="80" rollOut="this.currentState=null"
resizeEffect="{resize}" >
<fx:Style source="balloon.css"/>
<fx:Metadata>
[Event(name="removeNode", type="flash.events.MouseEvent")]
[Event(name="linkNode", type="flash.events.MouseEvent")]
</fx:Metadata>
<s:states>
<s:State name="removeQuestion"/>
</s:states>
<s:Group x="27" y="10" width="109" height="58" id="msgCanvas" >
<mx:Label x="15" y="5" text="Remove me?" fontWeight="bold" />
<mx:Button x="5" y="30" label="Yes" width="47" click="dispatchEvent(new MouseEvent('removeNode'))"/>
<mx:Button x="54" y="30" label="No" width="49" click="this.currentState=null"/>
</s:Group>
</s:Group>
怎么给这个最外面的GROUP添加背景图片?

Answer 1

1、直接在组件里嵌入图片
增加标签；
<fx:Script>
<![CDATA[
[Bindable]
[Embed(source="asserts/bg01.PNG")]
private var bkimage:Class;
]]>
</fx:Script>
在view组件中加入<mx:image />标签
...
</s:Group>
<mx:Image id="image" source="{bkimage}" left="0" top="0" right="0" bottom="0" />
</s:Group>

2、提供接口由使用组件的实例定义背景图片
script标签：
<fx:Script>
<![CDATA[

[Bindable]
private var _bkimage:Class;

public function get bkimage():Class
{
return _bkimage;
}

public function set bkimage(value:Class):void
{
_bkimage = value;
}

]]>
</fx:Script>
试图标签：
...
</s:Group>
<mx:Image id="image" source="{_bkimage}" left="0" top="0" right="0" bottom="0" />
</s:Group>

使用该组件：
<fx:Script>
<![CDATA[
[Bindable]
[Embed(source="asserts/bg01.PNG")]
private var bkimage:Class;

]]>
</fx:Script>
<local:MyGroup width="400" height="300" verticalCenter="0" horizontalCenter="0" bkimage="{bkimage}"/>
希望对你有帮助！

追问

实在看不明白你的答案,我新手,没接触过flex,网上下了个3.5的例子,但是我用的是4.1,所以好多东西要改,其中就有这个,Group的自定义控件,我的Group是在原位置的,不是控件里面包含的Group,你办法我试试 行的话给你分,100分不是那么好拿的
我试验过了,你的不是添加背景图片,而是直接设置个图片,完全把我的group里面的button都给挡住了,完全看不见了

追答

你要实现的是一个控件，我比较建议第二种方案，就是允许外部自定义自己的背景图片。
我用的是FB4
你要的是外层的Group背景，其实就是你控件的背景，这里定义一个image标签采用完全填充的坐标方式，就是这个控件被引用时的尺寸。你这里其实实现的是一个组合控件，通过对现有组件的重新组合实现新的组件效果
你的源码修改如下：

[Event(name="removeNode", type="flash.events.MouseEvent")]
[Event(name="linkNode", type="flash.events.MouseEvent")]

补充一下，不知道你对这种方法的理解，在Script脚本里定义了一个变量：_bkimage，采用了绑定的方式，这个变量可以作为这个组件的一个属性，在使用该组件的时候，你可以看到的，不过显示为：bkimage，绑定的意义，就是你在使用该组件的时候，修改bkimage可以动态的呈现背景图片。
在使用该组件的时候，你定义的这个组件里会多出“bkimage”这个属性。这里可以设置你想要的背景图片。

作为新手还是要做动手尝试，呵呵，我也刚用了一年！

追问

你这个方法我试验过了,不行,完全挡住了我自己控件里面的button,Image之类的东西,我这个控件是要的背景图片效果,你这么做就是在控件的基础上放了一个图片,百度提问有字数限制的,不像CSDN一样可以copy一整篇的代码,我这只是给了一部分重要代码,Group里面还有好多BUTTON和其他的INPUT之类的东西,你这个image放上去完全遮挡住了我的其他控件,弄出来的效果就是一个照片,其他什么都没有了,行不通的,你这个办法就是简单的数据绑定

追答

兄弟，不好意思，你应该把图片的标签放到第一行处

[Event(name="removeNode", type="flash.events.MouseEvent")]
[Event(name="linkNode", type="flash.events.MouseEvent")]

Answer 2

首先写个skin:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

<!-- Define what you are skinning -->
<fx:Metadata>
[HostComponent("spark.components.Application")]
</fx:Metadata>

<!-- Define the visual component states -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>

<!-- Draw background -->
<s:Rect horizontalCenter="0"
width="400" height="1000">
<s:fill>
<s:SolidColor color="#CCCCCC" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#AAAAAA" />
</s:stroke>
</s:Rect>

<!-- Layout the parts of the skin -->
<s:Group id="contentGroup"
top="20" horizontalCenter="0">
<s:layout>
<s:VerticalLayout />
</s:layout>
</s:Group>
</s:SparkSkin>
===============
然后在应用里面引用：
<?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:mx="library://ns.adobe.com/flex/mx"
skinClass="components.AppSkin">
//应用代码
</s:Application>

追问

我的是自定义控件
而且我是<s:Group开头的
不是你的<s:Application开头的 Group开头的里面根本没有skinClass属性,100分你就从网上COPY一下?你这些东西我都看过了,就是因为不会给Group加背景图片才问的

Answer 3

可以设置样式也可以写CSS。

Answer 4

没有backgroundImage这个属性吗？？

Answer 5

http://blog.csdn.net/mixi1988/archive/2011/01/14/6139541.aspx 我前段时间写的例子。正好满足你的要求