Flex 4自定义组件 - 如何通知皮肤的属性更改？ [英] Flex 4 Custom Component - How to notify skin of property changes?
问题描述
我有一个自定义的Flex 4+组件，我正在尝试使皮肤知道对自定义属性的更改。这个属性将决定按钮上的图形（以及其他一些视觉上的变化），但是数据会不断变化，因为它会被定时器更新。
我看过在无数的例子，似乎仍然无法得到正确的语法，或发现事情应该分开。我已经看过覆盖commitProperties和PropertyChangeEvent没有成功。所以我有两个问题。
$ b $ 1）如何获得绑定属性的皮肤更改时通知皮肤？
2）如果组件的绑定属性的数据是一个对象，如果对象的属性发生变化，绑定是否可以正常工作（或者单独传递每个属性会更好）？ b
$ b
下面是我试图实现的一个简单例子。
组件如下所示：
< s：ButtonBase xmlns：fx =http://ns.adobe.com/mxml/2009
xmlns： s =library：//ns.adobe.com/flex/spark
xmlns：mx =library：//ns.adobe.com/flex/mx>
< fx：Script>
<！[CDATA [
private var _iconData：String;
[Bindable]
public function get iconData（）：String
{
return _iconData;
public function set iconData（value：String）：void
{
_iconData = value;
}
]]>
< / fx：Script>
这个：
< components：MyButton id =myButtoniconData ={myData.curIconTag}skinClass =皮肤。 MyButtonSkin/>
我有很多不同的图片可以加载，所以恐怕有很多州（使用up / down / over / disabled等组合可能会失控，因此SetIconDisplay正在设置图标，但真正的关键是在iconData属性更改时需要执行该函数中的其他代码所以皮肤是这样的：
< 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
creationComplete =init（）>
< fx：元数据>
[HostComponent（components.MyButton）]
< / fx：元数据>
< s：状态>
< s：状态名称=default/>
< s：状态
< s：State name =up/>
< s：State name =over/>
< s：州名=禁用/>
< / s：州& GT;
< fx：Script>
<！[CDATA [
import components.MyButton;
[Embed（source =images / image1.png）]
private var icon1：Class;
[Embed（source =images / image2.png）]
private var icon2：Class;
[Embed（source =images / image3.png）]
private var icon3：Class;
[Bindable]
public var hostComponent：MyButton;
[Bindable]
private var iconClass：Class;
private function init（）：void
{
iconClass = new Class（）;
}
//当我的自定义组件上的iconData属性发生更改时，如何调用此方法？
私钥函数SetIconDisplay（）：void
{
switch（hostComponent.iconData）
{
caseapple：
iconClass = icon1;
break;
caseorange：
iconClass = icon2;
break;
casegrape：
iconClass = icon3;
break;
}
}
]]>
< / fx：Script>
尽可能多的关于皮肤是如何做的，因为这可能会改变（不使用状态）。
谢谢！
当数据更新并在皮肤中侦听时，我最终调度了一个自定义事件。组件：
< s：ButtonBase xmlns：fx =http://ns.adobe.com/mxml/2009
xmlns：s =library：//ns.adobe.com/flex/spark
xmlns：mx =library：//ns.adobe.com/flex/mx>
< fx：Script>
<！[CDATA [
import classes.CustomEvent;
private var _iconData：String;
[Bindable]
public function get iconData（）：String
{
return _iconData;
public function set iconData（value：String）：void
{
_iconData = value;
dispatchEvent（new CustomEvent（iconDataUpdated））;
}
]]>
< / fx：Script>
皮肤增加了这个： / p>
protected function skin_preinitializeHandler（event：FlexEvent）：void
{
hostComponent.addEventListener（CustomEvent.ICON_DATA_UPDATED， SetIconDisplay）;
}
I have a custom Flex 4+ component that I am trying to make and have the skin be aware of changes to a custom property. This property will determine the graphic on the button (and some other visual changes) but the data will change constantly as it will be updated by a timer.
I've looked at untold examples and still seem unable to get the syntax correct or discover how things should be separated. I've looked at overriding commitProperties and the PropertyChangeEvent without success. So I have two questions.
1) How can I get a skin to be notified of a bound property when it changes?
2) If the data for a bound property of the component is an object, will binding work properly if a property of the object changes (or would it be better to pass each property separately)?
Here is a stripped down example of what I'm trying to achieve.
The component looks like this:
<s:ButtonBase xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
private var _iconData:String;
[Bindable]
public function get iconData():String
{
return _iconData;
}
public function set iconData(value:String):void
{
_iconData = value;
}
]]>
</fx:Script>
I'm calling it like this:
<components:MyButton id="myButton" iconData="{myData.curIconTag}" skinClass="skins.MyButtonSkin" />
I have a lot of different images I could be loading and so I'm afraid the number of states (with the combinations of up/down/over/disabled, etc. may get out of hand so the SetIconDisplay is setting the icon, but the real key is that I have other code in that function that needs to execute when the iconData property changes every X minutes or so. So the skin is something like this:
<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"
creationComplete="init()">
<fx:Metadata>
[HostComponent("components.MyButton")]
</fx:Metadata>
<s:states>
<s:State name="default" />
<s:State name="down"/>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="disabled" />
</s:states>
<fx:Script>
<![CDATA[
import components.MyButton;
[Embed(source="images/image1.png")]
private var icon1:Class;
[Embed(source="images/image2.png")]
private var icon2:Class;
[Embed(source="images/image3.png")]
private var icon3:Class;
[Bindable]
public var hostComponent:MyButton;
[Bindable]
private var iconClass:Class;
private function init():void
{
iconClass = new Class();
}
// how do I get this called when the iconData property on my custom component is changed?
private function SetIconDisplay():void
{
switch (hostComponent.iconData)
{
case "apple":
iconClass=icon1;
break;
case "orange":
iconClass=icon2;
break;
case "grape":
iconClass=icon3;
break;
}
}
]]>
</fx:Script>
<s:BitmapImage source="{iconClass}" x="0" y="0" width="180" height="108"/>
Again, don't worry as much about how the skin is actually doing what it is doing as that will probably change (not using states). I'm just trying to figure out how to call a specific function when the bound property is changed.
Thank You!
I ended up dispatching a custom event when the data is updated and listen for it in the skin.
The component:
<s:ButtonBase xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import classes.CustomEvent;
private var _iconData:String;
[Bindable]
public function get iconData():String
{
return _iconData;
}
public function set iconData(value:String):void
{
_iconData = value;
dispatchEvent(new CustomEvent("iconDataUpdated"));
}
]]>
</fx:Script>
The skin adds this:
protected function skin_preinitializeHandler(event:FlexEvent):void
{
hostComponent.addEventListener(CustomEvent.ICON_DATA_UPDATED,SetIconDisplay);
}
这篇关于Flex 4自定义组件 - 如何通知皮肤的属性更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
