Added custom events sample

shailen · shailen · commit 228fbabcd421 · 2014-09-29T22:21:33.000-07:00
diff --git a/web/events/using_custom_events/README.md b/web/events/using_custom_events/README.md
@@ -0,0 +1,3 @@
+# Using custom events
+
+Ports https://github.com/PolymerLabs/polymer-patterns/blob/e43f8b037203f5ea0d848ad64ee2f25d422e0093/snippets/events/using-custom-events.html
diff --git a/web/events/using_custom_events/child_element.html b/web/events/using_custom_events/child_element.html
@@ -0,0 +1,9 @@
+<link rel="import" href="packages/polymer/polymer.html">
+
+<polymer-element name="child-element">
+<template>
+    <input id="myInput" type="text" placeholder="Write something">
+    <button on-tap="{{fireEvent}}">Fire custom event</button>
+  </template>
+  <script type="application/dart" src="elements.dart"></script>
+</polymer-element>
diff --git a/web/events/using_custom_events/elements.dart b/web/events/using_custom_events/elements.dart
@@ -0,0 +1,22 @@
+library web.events.using_custom_events.elements;
+
+import 'dart:html' show Event, Node;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('parent-element')
+class ParentElement extends PolymerElement {
+  @observable String message = '';
+  ParentElement.created() : super.created();
+  void heard(Event e, var detail, Node sender) {
+    message = 'heard: ' + detail['message'];
+  }
+}
+
+@CustomTag('child-element')
+class ChildElement extends PolymerElement {
+  ChildElement.created() : super.created();
+  void fireEvent(Event e, var detail, Node sender) {
+    fire('spoken', detail: {'message': this.$['myInput'].value});
+  }
+}
diff --git a/web/events/using_custom_events/index.html b/web/events/using_custom_events/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <script src="packages/web_components/dart_support.js"></script>
+    <link rel="import" href="parent_element.html">
+  </head>
+  <body unresolved>
+    <parent-element></parent-element>
+    <script type="application/dart">export 'package:polymer/init.dart';</script>
+  </body>
+</html>
diff --git a/web/events/using_custom_events/parent_element.html b/web/events/using_custom_events/parent_element.html
@@ -0,0 +1,12 @@
+<link rel="import" href="packages/polymer/polymer.html">
+<link rel="import" href="child_element.html">
+
+<polymer-element name="parent-element">
+  <template>
+    <div on-spoken="{{heard}}">
+      <child-element></child-element>
+      <div>{{message}}</div>
+    </div>
+  </template>
+  <script type="application/dart" src="elements.dart"></script>
+</polymer-element>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Using custom events`
	`2`	`+`
	`3`	`+Ports https://github.com/PolymerLabs/polymer-patterns/blob/e43f8b037203f5ea0d848ad64ee2f25d422e0093/snippets/events/using-custom-events.html`