Is it possible to declaratively bind a CustomEvent handler when using Dart Web UI WebComponents?

Question

I've tried to bind a custom event handler to a WebComponent that has an EventStreamProvider exposed via a getter, but it comes back with "Class 'DivElement' has no instance getter 'onMainAction'.".

Trimmed down component .dart code...

import 'dart:html';
import 'dart:async';
import 'package:web_ui/web_ui.dart';

class SegmentedButtonsListComponent extends WebComponent {
  static const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent");
  Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this);
}

Trimmed usage of component…

<x-segmented-buttons-list id="segmented-buttons-list" on-main-action="eventHandler($event)"></x-segmented-buttons-list>

Trimmed code from main.dart…

import 'dart:html';
import 'dart:async';
import 'package:web_ui/web_ui.dart';

const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent");

void eventHandler(CustomEvent event) {
  print("""
    Yabba Dabba Doo!
    Type: ${event.type}
    Detail: ${event.detail}
  """);
}

void main() {
  mainActionEvent.forTarget(query('#segmented-buttons-list')).listen(eventHandler);
}

The "MainActionEvent" custom events are being dispatched by components instantiated within this "list" component.

As you can see from the above example I can catch the events if I create an EventStreamProvider in main.dart and target the component, that works fine (but by-passes the Stream getter in the component).

It would be great though if I could dispense with the EventStreamProvider in main.dart and simply bind to the onMainEvent getter on the component.

Is that possible?

Update 2013-05-05: Siggi explains below that at present it is not possible to do this, but there is a way to reference the component's CustomEventProvider's getter via the element's xtag. I found that I had to use a Timer to query the DOM after main() has completed because xtags aren't populated until the main() event loop has finished.

void postMainSetup() {
  query('#segmented-buttons-list').xtag.onMainAction.listen(eventHandler);
}

void main() {
  Timer.run(postMainSetup);
}

With the above setup a new CustomEventProvider isn't needed to monitor the component.

Siggi Cherem Siggi Cherem · Accepted Answer · 2013-05-03T22:00:23

Good question!

I see a couple parts to this question:

using custom events directly on a component: Currently web_ui uses different objects to represent your component and the actual dom element it represents. In the future, we plan to extend directly from "DivElement" instead of "WebComponent" and that will allow you to do what you wrote.

Meanwhile, you'll have to be more explicit when you want to use the host or shadow root of your component. In your example, it seems like you want to attach the event to the host, so you would need to write something more like this:

Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this.host);
using 'on-someting-foo' syntax in a component: you probably found a bug/missing feature =). Currently we treat attributes in a special way and bind their values to fields of a component if we identify that the target was corresponds to a component. We do this for value bindings, but not yet for binding custom events. A workaround before this feature is added, would be to query for your element and attach the event by hand:

query('#host-node').xtag.onMainAction.listen(...);

Is it possible to declaratively bind a CustomEvent handler when using Dart Web UI WebComponents?

1 Answers