вызвать пользовательское событие из средства визуализации элементов в flex 4

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);
}

, еслиparent не является списком, просто введите его в соответствие с родительским.

, затем в своем компоненте, который имеет список, вы можете сделать следующее:

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

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

Answer 3

Сделать событие пузырьком:

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

Добавление прослушивателя событий при завершении создания.

Answer 4

Это возможно с помощью тега метаданных события: 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 5

Возможно, это немного выходит за рамки, но такая сигнализация с событиями - это то, где MVC-структуры, такие как Cairngorm, сияют.Я обычно думаю о них как о мероприятиях.

Answer 6

Трудно понять, что вы пытаетесь сделать из вопроса, из-за форматирования, и кажется, что какой-то текст отсутствует.

Тем не менее. попробуйте создать всплывающее окно события и добавьте прослушиватель событий в список, содержащий элемент 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
    }
 }