Apache flex 从Flex4中的项目呈现器调用自定义事件

我有一个建议：

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 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:Metadata>
    [Event(name="addToCart",type="event.ProductEvent")]
  </fx:Metadata>
  <fx:Script>
    <![CDATA[
      import events.ProductEvent;

      import mx.collections.ArrayCollection;


      protected function button1_clickHandler(event:MouseEvent):void
      {
        var eventObj:ProductEvent=new ProductEvent("addToCart",data.price,data.descript);

        dispatchEvent(eventObj);

      }
    ]]>
  </fx:Script>

  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>

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

  <s:BorderContainer >
    <s:layout>
      <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>
    </s:layout>

    <s:Label text="{data.descript}"/>
    <mx:Image source="{data.url}" width="50" height="50" width.hovered="100" height.hovered="100"/>
    <s:Label text="{data.price}"/>
    <s:Button includeIn="hovered" click="button1_clickHandler(event)" label="buy"/>



  </s:BorderContainer>
</s:ItemRenderer>

但我不能从主应用程序在容器中调用该事件

<s:SkinnableDataContainer id="Sk" x="200" y="300" left="100" right="900" dataProvider="{imagesCollection}" itemRenderer="components.ImageRenderer" includeIn="normal"   >
    <s:layout>
      <s:TileLayout/>
    </s:layout>

  </s:SkinnableDataContainer>

有什么想法吗

谢谢

---

我想说：

<s:SkinnableDataContainer id="Sk" x="200" y="300" left="100" right="900" dataProvider="{imagesCollection}" itemRenderer="components.ImageRenderer" includeIn="normal" ***addToCart=something(event)*** >

---

由于格式的原因，很难从问题中看出您想做什么，而且似乎缺少一些文本

不过。尝试创建事件气泡，并将事件侦听器添加到包含ItemRenders的列表中

例如：

//ProductEvent.as
公共类产品事件{
公共函数ProductEvent（类型：String，气泡：Boolean=true）{
超级（类型，气泡）；
//…等等
}
}

未调用事件，因此我不完全确定您想要什么

您可以创建事件类的实例，如下所示：

var myProductEvent : ProductEvent  = new ProductEvent("productEventTypeA", true, ...); // true is for enabling Bubbles, so that the event bubbles up to the listener.

您可以从itemRenderer中调度该事件，方法与在其他地方使用事件时相同：

dispatchEvent(myEvent); 

另外，在项目呈现器上，声明要调度的事件：

[Event(name="productEventTypeA", type="local.events.ProductEvent")]

myList.addEventListener("productEventTypeA", onProductEvent); // or a constant instead of "productEventTypeA"

您可以在实现项呈现器的列表或数据组组件上添加事件侦听器，以便它在调度事件后运行代码：

[Event(name="productEventTypeA", type="local.events.ProductEvent")]

myList.addEventListener("productEventTypeA", onProductEvent); // or a constant instead of "productEventTypeA"

或

最后在添加事件侦听器的同一文件中声明侦听器函数：

public function onProductEvent(e:ProductEvent):void
{
// do stuff
}

---

注意：在itemRenderer中，您通常希望使事件冒泡，以便可以在使用Renderer的组件（通常是基于列表的类）上侦听事件。

这可能有点超出范围，但像Cairngorm这样的MVC框架正是在这种情况下发出事件信号的。我通常认为它们是事件总线。

这可以使用事件元数据标签：

您必须对SkinnableDataContainer进行子类

并添加元数据标记：

[Event(name="addToCart", type="events.ProductEvent")]
public class MySkinnableDataContainer extends spark.components.SkinnableDataContainer
{
}

您也可以在MXML中执行此操作：

<?xml version="1.0"?>
<!-- ../MySkinnableDataContainer.mxml -->
<s:SkinnableDataContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <mx:Script>
    <![CDATA[
        import events.ProductEvent;
    ]]>
    </mx:Script>

    <mx:Metadata>
        [Event(name="addToCart", type="events.ProductEvent")]
    </mx:Metadata>

</s:SkinnableDataContainer>

注意：根据您的事件气泡属性，您可能必须捕获它，然后沿着
MySkinnableDataContainer
的内部重新转发它。创建事件气泡：

public function ProductEvent(type:String,price:String, descript:String)
{
  super(type, true); // Add bubbles = true instead of default false
  this.price=price;
  this.descript=descript;
}

然后在你的应用程序中：

<s:SkinnableDataContainer id="Sk" x="200" y="300" left="100" right="900" dataProvider="{imagesCollection}" itemRenderer="components.ImageRenderer" includeIn="normal" creationComplete="Sk.addEventListener('addToCart', myFunctionToHandle)">



在创建完成时添加一个事件侦听器。
我希望这对某人有所帮助，您不需要做所有这些

很简单：

项目渲染器：

protected function dispatchMyCustomEvent():void {
(owner as List).dispatchEvent(new CustomEvent);
}

如果父对象不是列表，则只需将其键入父对象

然后，在具有列表的组件中，可以执行以下操作：

protected function creationComplete():void {
myList.addEventListener(CustomEvent.TYPE, onMyCustomeEvent);
}

protected function onMyCustomEvent(event:MyCustomEvent):void {
// handle the event
}

我认为您需要修复问题中代码的格式。请参阅下面我的评论。发送事件时，需要以下内容：（所有者为列表）。dispatchEvent（新CustomEvent）；//将所有者设置为您正在使用的容器。然后，您可以在创建完成后向该组件添加侦听器：myList.addEventListener（CustomEvent.TYPE，myCustomEventHandler）；所以我不能使用自定义事件作为项目渲染器的属性？因为我可以从一个自定义组件中找到它，所以它是一个自定义事件—就像您的示例中的ProductEvent。您只需使用元数据标记将其声明为事件，即可使用MXML将其公开。无需使其冒泡，请参阅我上面关于如何执行此操作的评论。
protected function dispatchMyCustomEvent():void {
(owner as List).dispatchEvent(new CustomEvent);
}

protected function creationComplete():void {
myList.addEventListener(CustomEvent.TYPE, onMyCustomeEvent);
}

protected function onMyCustomEvent(event:MyCustomEvent):void {
// handle the event
}