How do you register for custom events in Dart using the new streams API

Question

I'm trying to register for a CustomEvent (https://developer.mozilla.org/en-US/docs/DOM/Event/CustomEvent) in Dart. The old code for this was:

window.on['foo'].add((e) => print(e.detail));

The new streams API has changed the way you register for events. How do you register for CustomEvents using the new API?

Answer 1

The idea is that custom events are declared and used the same way as built-in events.

So for a custom event, you'd do something along the lines of:

class DataGenerator {
   static EventStreamProvider<Event> dataEvent = new EventStreamProvider('data');
}

Then for listening to it on elements:

DataGenerator.dataEvent.forTarget(element).listen(...);

This will get cleaner once element subclassing is supported and events are normally fired directly on their element, and when event subclassing allows more useful event types for custom events.

We discussed keeping a window.on['foo'].listen(...) API, but are trying to discourage the string accessors as for some events we polyfill them to different event names.

Here's a more complete example:

import "dart:html";

DivElement dartDiv;

main() {
  dartDiv = query("#dartDiv");

  // Add a button to generate a CustomEvent called CustomDartEvent.
  var customEventStreamProvider = new EventStreamProvider<CustomEvent>("CustomDartEvent");
  var customEventButton = new ButtonElement()
    ..text = "Generate custom Dart event"
    ..classes.add("gwt-Button")  // For consistency
    ..onClick.listen((e) {
      var detail = {
        "n": 8,
        "s": "Hello from Dart",
        "obj": {
          "hello": "from Dart"          
        }
      };  
      var event = new CustomEvent("CustomDartEvent",
          canBubble: false, cancelable: false, detail: detail);
      window.dispatchEvent(event);
    });
  dartDiv.children.add(customEventButton);

  // Listen for CustomEvents called CustomDartEvent.
  customEventStreamProvider.forTarget(window).listen((e) {
    printString("""
      Received CustomDartEvent:
      type: ${e.type},
      detail: ${e.detail}
    """);
  });
}

void printString(String s) {
  var div = new DivElement()
    ..text = s;
  dartDiv.children.add(div);
}