Question

我有一个渲染器：

<?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>

和自定义事件类：

package events
{
  import flash.events.Event;
  [Bindable]
  public class ProductEvent extends Event
  {

    public var price:String;
    public var descript:String;

    public function ProductEvent(type:String,price:String, descript:String)
    {
      super(type);
      this.price=price;
      this.descript=descript;
    }
    override public function clone():Event
    {
      return new ProductEvent(type,price,descript);

    }
  }
}

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

<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)*** >

Answer 1

事件没有被调用，所以我不完全确定你想要什么。

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

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")]

您可以在实现项呈示器的List或DataGroup组件上添加事件侦听器，以便在调度事件后运行代码：

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

或

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

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

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

注意：在itemRenderer中，您经常要让事件冒泡，以便可以在使用渲染器的组件上进行侦听 - 通常是基于列表的类。

Answer 2

我希望这有助于某人，你不需要做所有这些......

这很简单：

的ItemRenderer：

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
}

Answer 3

由于格式化，很难弄清楚你要从问题中做什么，而且看起来有些文字丢失了。

然而。尝试制作事件气泡，并在包含itemRenderers的列表中添加事件侦听器。

例如：

 <mx:Canvas creationComplete="list1.addEventListener('addToCart',onAddToCart)">
    <mx:List id="list1" itemRenderer="com.foo.YourItemRenderer" />
 </mx:Canvas>


 <!-- YourItemRenderer.mxml -->
 <mx:Canvas>
      <!-- Other item renderer stuff -->
       <mx:Button click="dispatchEvent(new ProductEvent('addToCart'))" />
 </mx:Canvas>


 // ProductEvent.as
 public class ProductEvent {
    public function ProductEvent(type:String,bubbles:Boolean=true) {
         super(type,bubbles);
         // ... etc
    }
 }

Answer 4

也许这有点超出了范围，但这种与事件的信号传递是像Cairngorm这样的MVC框架闪耀的地方。我通常认为它们是AS事件总线。

Answer 5

可以使用事件元数据标记：http://livedocs.adobe.com/flex/3/html/help.html?content=createevents_3.html

您必须子类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>

然后使用这个新类而不是SkinnableDataContainer：

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

注意：取决于您的事件冒泡属性，您可能需要捕获它，然后在MySkinnableDataContainer内重新转发它。

Answer 6

制作活动泡泡：

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)">

在创建完成时添加事件侦听器。

从flex 4中的项呈示器调用自定义事件

6 个答案: