Merge pull request #139 from a14n/issue-120

fix #120 replace jsonp example
dart-archive · Jan 29, 2014 · 49a1d0d · 49a1d0d
2 parents cd7ee93 + 1b68ecf
commit 49a1d0d
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 70 deletions.
diff --git a/example/jsonp/jsonp.dart b/example/jsonp/jsonp.dart
@@ -0,0 +1,48 @@
+library jsonp_sample;
+
+import 'dart:html';
+
+import 'package:js/js.dart';
+
+const List<String> FIELDS = const ['name', 'description', 'size',
+                                   'watchers', 'forks'];
+
+TableElement table = querySelector('#repo-table');
+
+addTableHeadRow() {
+  var tr = new TableRowElement();
+  for (var field in FIELDS) {
+    tr.append(new Element.tag('th')..text = field);
+  }
+  table.querySelector('thead').append(tr);
+}
+
+addTableBodyRow(Proxy repo) {
+  var tr = new TableRowElement();
+  for (var field in FIELDS) {
+    var td = new TableCellElement();
+    if (field == 'name') {
+      td.append(new AnchorElement()
+          ..href = repo.html_url
+          ..text = repo[field]);
+    } else {
+      td.text = repo[field].toString();
+    }
+    tr.append(td);
+  }
+  table.querySelector('tbody').append(tr);
+}
+
+void main() {
+  // Create a jsObject to handle the response.
+  context.processData = (response) {
+    addTableHeadRow();
+    for (var i = 0; i < response.data.length; i++) {
+      addTableBodyRow(response.data[i]);
+    }
+  };
+
+  ScriptElement script = new Element.tag("script");
+  script.src = "https://api.github.com/users/dart-lang/repos?callback=processData";
+  document.body.children.add(script);
+}
diff --git a/example/jsonp/jsonp.html b/example/jsonp/jsonp.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
+      rel="stylesheet">
+  <title>Using JSONP with Dart</title>
+</head>
+<body>
+  <div class="container">
+    <h1>Dart Repos on Github</h1>
+
+    <table id="repo-table" class="table table-bordered table-striped">
+      <thead></thead>
+      <tbody></tbody>
+    </table>
+  </div>
+  <script type="application/dart" src="jsonp.dart"></script>
+  <script src="packages/browser/dart.js"></script>
+  <script src="packages/browser/interop.js"></script>
+</body>
+</html>
diff --git a/example/twitter/twitter.dart b/example/twitter/twitter.dart
diff --git a/example/twitter/twitter.html b/example/twitter/twitter.html
diff --git a/gh-pages-template/example/index.html b/gh-pages-template/example/index.html
@@ -90,11 +90,11 @@ <h1>Dart JavaScript Interop Samples</h1>
       class="info"><a href="https://github.com/dart-lang/js-interop/blob/master/example/google-maps/directions.dart">directions.dart</a></td></tr></table></div>
 
 <div class="app"><table><tr><td rowspan=2><a
-  href="twitter/twitter.html"><img
+  href="jsonp/jsonp.html"><img
   src="dart_32_32.gif" width=32 height=32></a></td><td
-    class="title">Twitter Search via JSONP - <a
-    href="twitter/twitter.html">twitter.html</a></td</tr><tr><td
-      class="info"><a href="https://github.com/dart-lang/js-interop/blob/master/example/twitter/twitter.dart">twitter.dart</a></td></tr></table></div>
+    class="title">Github Search via JSONP - <a
+    href="jsonp/jsonp.html">jsonp.html</a></td</tr><tr><td
+      class="info"><a href="https://github.com/dart-lang/js-interop/blob/master/example/jsonp/jsonp.dart">jsonp.dart</a></td></tr></table></div>
 
   <p class="footer"><a href="https://github.com/dart-lang/js-interop">https://github.com/dart-lang/js-interop</a></p>
 </body>