From af937cf773dd2583258fda9a0ad57ef5f0b74906 Mon Sep 17 00:00:00 2001
From: bsmith <brian.smith@numberfour.eu>
Date: Mon, 29 May 2017 17:15:03 +0200
Subject: [PATCH] expand on n4js example

---
 examples/prism-n4js.html | 115 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 102 insertions(+), 13 deletions(-)

diff --git a/examples/prism-n4js.html b/examples/prism-n4js.html
index 20636bffd5..e6db81a8ab 100755
--- a/examples/prism-n4js.html
+++ b/examples/prism-n4js.html
@@ -1,29 +1,118 @@
 <h1>N4JS</h1>
 <p>To use this language, use the class "language-n4js".</p>
 
+
+<h2>Keywords</h2>
+<pre><code>
+class C {..}
+interface I {..}
+
+foo(c: C, i: I) {
+    c instanceof C; // ok
+    c instanceof I; // ok
+}
+</code></pre>
+
+<h2>Annotations</h2>
+<pre><code>
+// Final Methods
+@Final
+private tasks = new Map&lt;string,Task&gt;();
+
+// Redefinition of Members
+@Override
+public async size(): int {
+  …
+}
+
+// Dependency Injection
+@Binder
+@Bind(Storage,StorageInMemory)
+class InMemoryBinder {}
+
+@GenerateInjector @UseBinder(InMemoryBinder)
+export public class TaskManagerTest {
+  …
+}
+</code></pre>
+
 <h2>Full example</h2>
-<pre><code>//Creating a simple Web User Interface in HTML
+<pre><code>
+// A Web User Interface in HTML
+// NOTE: requires full example project bundled with N4JS IDE to run.
 
-import { TaskManager } from "TaskManager"
+import { TaskManager } from "TaskManager";
 import {Application, Response } from "express";
 import express from "express";
-import { Todo } from "model"
+import { Todo } from "model";
+
 
 export class WebUI {
 
-  private app: Application;
+     private app: Application;
+
+     @Inject
+     private manager: TaskManager;
+
+     public start() {
 
-  @Inject
-  private manager: TaskManager;
+          this.app = express();
 
-  public start() {
+          this.app.get('/', async (req, res) => {
+               let page = await this.renderHomePage();
+               res.send(page);
+          });
 
-    this.app = express();
+          this.app.get("/clear", async (req, res) => {
+               await this.manager.clear();
+               redirect(res, '/');
+          });
+
+          this.app.get("/create", async (req, res) => {
+               let values = req.query as ~Object with {type: string, label: string};
+               if (values && values.type === 'Todo' && values.label && values.label.length > 0) {
+                    await this.manager.createTodo(values.label);
+               }
+               redirect(res, '/');
+          });
+
+          this.app.listen(4000, '0.0.0.0', 511, function() {
+               console.log("HTML server listening on http://localhost:4000/");
+          });
+     }
+
+     protected async renderHomePage(): string {
+          let tasks = await this.manager.getTasks();
+          let todos = tasks.filter((task) => task instanceof Todo);
+          return `
+
+&lt;html&gt;
+&lt;body&gt;
+     Your to-do's:
+     &lt;ul&gt;
+     ${
+          todos.length === 0 ? '&lt;li&gt;&lt;em&gt;none&lt;/em&gt;&lt;/li&gt;\n'
+          : todos.map((task) =>
+               '&lt;li&gt;' + task.label + ' &lt;small&gt;(id: ' + task.id + ')&lt;/small&gt;&lt;/li&gt;'
+          ).join('\n')
+     }
+     &lt;/ul&gt;
+     &lt;hr/&gt;
+     &lt;form action="/create" method="get"&gt;
+     &lt;input type="hidden" name="type" value="Todo"&gt;
+     Label: &lt;input type="text" name="label"&gt;&lt;br&gt;
+     &lt;input type="submit" value="Create Todo"&gt;
+     &lt;/form&gt;
+     &lt;hr/&gt;
+     &lt;a href="/clear"&gt;[Clear All]&lt;/a&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+`;
+     }
+}
 
-    this.app.get('/', async (req, res) => {
-      let page = await this.renderHomePage();
-      res.send(page);
-    });
-  }
+function redirect(res: Response, url: string) {
+     res.header('Cache-Control', 'no-cache');
+     res.redirect(301, url);
 }
 </code></pre>