Router: add example

Author: Elmi Ahmadov

examples/router/README.md

@@ -0,0 +1,7 @@
+# Example "router"
+
+[![GitPod Logo](../../doc/run-in-gitpod.png)](https://gitpod.io/#example=listview-cells/https://github.com/eclipsesource/tabris-decorators/tree/gplink/examples/router)
+
+## Description
+
+Demonstrates the usage of the router API.

examples/router/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "router",
+  "version": "3.3.0",
+  "dependencies": {
+    "reflect-metadata": "^0.1.13"
+  },
+  "optionalDependencies": {
+    "tabris": "^3.3.0",
+    "tabris-decorators": "3.3.0"
+  },
+  "devDependencies": {
+    "typescript": "3.3.x"
+  },
+  "main": "dist/app.js",
+  "scripts": {
+    "start": "tabris serve -w -a",
+    "build": "tsc -p .",
+    "watch": "tsc -p . -w --preserveWatchOutput --inlineSourceMap",
+    "gitpod": "tabris serve -a -w --no-intro --port 8080 --external $(gp url 8080):443"
+  }
+}

examples/router/src/app.tsx

@@ -0,0 +1,64 @@
+import {NavigationView, contentView, Button, TextView, TextInput, Stack} from 'tabris';
+import {Router, Route, RoutePage} from 'tabris-decorators';
+
+const navigationView = new NavigationView({
+  layoutData: 'stretch'
+}).appendTo(contentView);
+
+class MyPage1 extends RoutePage {
+  constructor(properties?: any) {
+    super(properties);
+    this.append(
+      <Stack stretch alignment="stretchX" padding={[0, 4]}>
+        <TextInput/>
+        <Button top="prev()" text="Open" onSelect={() =>
+          router.goTo({
+            route: 'my-route-2',
+            payload: {
+              text: this.find(TextInput).only().text
+            }
+          })}
+        />
+      </Stack>
+    );
+  }
+}
+
+class MyPage2 extends RoutePage {
+  constructor(properties?: any) {
+    super(properties);
+    this.append(
+      <Stack stretch alignment="stretchX" padding={[0, 4]}>
+        <TextView alignment="centerX" height={32}/>
+        <Button text="Go back" onSelect={() => router.back()}/>
+      </Stack>
+    );
+  }
+
+  public onPayload(payload?: any) {
+    this.find(TextView).only().text = payload && payload.text ? payload.text : 'no data';
+  }
+}
+
+class MyRoute1 extends Route {
+  page = new MyPage1({title: 'foo'});
+};
+
+class MyRoute2 extends Route {
+  page = new MyPage2({title: 'bar'});
+};
+
+const router = new Router({
+  navigationView,
+  routers: [
+    {
+      name: 'my-route-1',
+      route: MyRoute1
+    },
+    {
+      name: 'my-route-2',
+      route: MyRoute2
+    }
+  ],
+  defaultRoute: { route: 'my-route-1' }
+});

examples/router/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "lib": ["es6" ],
+    "jsx": "react",
+    "jsxFactory": "JSX.createElement",
+    "outDir": "dist",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "typeRoots": ["./node_modules/@types"]
+  },
+  "include": [
+    "./src/*.ts",
+    "./src/*.tsx"
+  ]
+}