ONOS-3263 : Initial cut of Reference App, consolidated from UI archetype overlay sample code.

Change-Id: Ifffec2ba95de0f1386c630fdc03ed48738492257
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css
new file mode 100644
index 0000000..e9f99b3
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.css
@@ -0,0 +1,48 @@
+/* css for UI Reference App custom view */
+
+#ov-ui-ref-custom {
+    padding: 20px;
+}
+.light #ov-ui-ref-custom {
+    color: navy;
+}
+.dark #ov-ui-ref-custom {
+    color: #88f;
+}
+
+#ov-ui-ref-custom .button-panel {
+    margin: 10px;
+    width: 200px;
+}
+
+.light #ov-ui-ref-custom .button-panel {
+    background-color: #ccf;
+}
+.dark #ov-ui-ref-custom .button-panel {
+    background-color: #444;
+}
+
+#ov-ui-ref-custom .my-button {
+    cursor: pointer;
+    padding: 4px;
+    text-align: center;
+}
+
+.light #ov-ui-ref-custom .my-button {
+    color: white;
+    background-color: #99d;
+}
+.dark #ov-ui-ref-custom .my-button {
+    color: black;
+    background-color: #aaa;
+}
+
+#ov-ui-ref-custom .number {
+    font-size: 140%;
+    text-align: right;
+}
+
+#ov-ui-ref-custom .quote {
+    margin: 10px 20px;
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html
new file mode 100644
index 0000000..30b32ff
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.html
@@ -0,0 +1,32 @@
+<!-- partial HTML -->
+<div id="ov-ui-ref-custom">
+    <div class="button-panel">
+        <div class="my-button" ng-click="getData()">
+            Fetch Data
+        </div>
+    </div>
+
+    <div class="data-panel">
+        <table>
+            <tr>
+                <td> Number </td>
+                <td class="number"> {{data.number}} </td>
+            </tr>
+            <tr>
+                <td> Square </td>
+                <td class="number"> {{data.square}} </td>
+            </tr>
+            <tr>
+                <td> Cube </td>
+                <td class="number"> {{data.cube}} </td>
+            </tr>
+        </table>
+
+        <p>
+            A message from our sponsors:
+        </p>
+        <p>
+            <span class="quote"> {{data.message}} </span>
+        </p>
+    </div>
+</div>
diff --git a/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js
new file mode 100644
index 0000000..025efc3
--- /dev/null
+++ b/uiref/src/main/resources/app/view/uiRefCustom/uiRefCustom.js
@@ -0,0 +1,69 @@
+// js for UI Reference App custom view
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, $scope, wss, ks;
+
+    // constants
+    var dataReq = 'uiRefCustomDataRequest',
+        dataResp = 'uiRefCustomDataResponse';
+
+    function addKeyBindings() {
+        var map = {
+            space: [getData, 'Fetch data from server'],
+
+            _helpFormat: [
+                ['space']
+            ]
+        };
+
+        ks.keyBindings(map);
+    }
+
+    function getData() {
+        wss.sendEvent(dataReq);
+    }
+
+    function respDataCb(data) {
+        $scope.data = data;
+        $scope.$apply();
+    }
+
+
+    angular.module('ovUiRefCustom', [])
+        .controller('OvUiRefCustomCtrl',
+        ['$log', '$scope', 'WebSocketService', 'KeyService',
+
+            function (_$log_, _$scope_, _wss_, _ks_) {
+                $log = _$log_;
+                $scope = _$scope_;
+                wss = _wss_;
+                ks = _ks_;
+
+                var handlers = {};
+                $scope.data = {};
+
+                // data response handler
+                handlers[dataResp] = respDataCb;
+                wss.bindHandlers(handlers);
+
+                addKeyBindings();
+
+                // custom click handler
+                $scope.getData = getData;
+
+                // get data the first time...
+                getData();
+
+                // cleanup
+                $scope.$on('$destroy', function () {
+                    wss.unbindHandlers(handlers);
+                    ks.unbindKeys();
+                    $log.log('OvUiRefCustomCtrl has been destroyed');
+                });
+
+                $log.log('OvUiRefCustomCtrl has been created');
+            }]);
+
+}());