Table example

2016-05-14 02:21:56 -04:00 · 2016-05-14 02:21:56 -04:00 · 16365e7e95
parent 35f0b75389
commit 16365e7e95
2 changed files with 89 additions and 0 deletions
--- a/js/examples/table/index.html
+++ b/js/examples/table/index.html
@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Syndicate: Table Example</title>
+    <meta charset="utf-8">
+    <script src="../../dist/syndicatecompiler.js"></script>
+    <script src="../../dist/syndicate.js"></script>
+    <script type="text/syndicate-js" src="index.js"></script>
+  </head>
+  <body>
+    <h1>Table Example</h1>
+    <table id="the-table">
+      <tbody>
+        <tr>
+          <th data-column="0">ID</th>
+          <th data-column="1">First Name</th>
+          <th data-column="2">Last Name</th>
+          <th data-column="3">Address</th>
+          <th data-column="4">Age</th>
+        </tr>
+      </tbody>
+    </table>
+    <p>
+      Click on column headings to sort data rows.
+    </p>
+    <p>
+      Source code: <a href="index.js">index.js</a>
+    </p>
+  </body>
+</html>
--- a/js/examples/table/index.js
+++ b/js/examples/table/index.js
@ -0,0 +1,59 @@
+assertion type person(id, firstName, lastName, address, age);
+message type setSortColumn(number);
+
+function newRow(id, firstName, lastName, address, age) {
+  actor {
+    react {
+      assert person(id, firstName, lastName, address, age);
+    }
+  }
+}
+
+function spawnModel() {
+  newRow(1, 'Keith', 'Example', '94 Main St.', 44);
+  newRow(2, 'Karen', 'Fakeperson', '5504 Long Dr.', 34);
+  newRow(3, 'Angus', 'McFictional', '2B Pioneer Heights', 39);
+  newRow(4, 'Sue', 'Donnem', '1 Infinite Loop', 104);
+  newRow(5, 'Boaty', 'McBoatface', 'Arctic Ocean', 1);
+}
+
+function spawnView() {
+  actor {
+    var ui = new Syndicate.UI.Anchor();
+    var orderColumn = 2;
+
+    function cell(text) {
+      // Should escape text in a real application.
+      return '<td>' + text + '</td>';
+    }
+
+    react {
+      on message setSortColumn($c) { orderColumn = c; }
+
+      during person($id, $firstName, $lastName, $address, $age) {
+        assert ui.context(id)
+          .html('table#the-table tbody',
+                '<tr>' + [id, firstName, lastName, address, age].map(cell).join('') + '</tr>',
+                [id, firstName, lastName, address, age][orderColumn]);
+      }
+    }
+  }
+}
+
+function spawnController() {
+  actor {
+    react {
+      on message Syndicate.UI.globalEvent('table#the-table th', 'click', $e) {
+        :: setSortColumn(JSON.parse(e.target.dataset.column));
+      }
+    }
+  }
+}
+
+ground dataspace G {
+  Syndicate.UI.spawnUIDriver();
+
+  spawnModel();
+  spawnView();
+  spawnController();
+}