Restructuring GUI code - implementing view life-cycles.

Using sample views for now.
Still WIP.

@@ -68,7 +68,10 @@
 
     <!-- Initialize the UI...-->
     <script type="text/javascript">
-        var ONOS = $.onos({note: "config, if needed"});
+        var ONOS = $.onos({
+            comment: "configuration options",
+            trace: false
+        });
     </script>
 
     <!-- Framework module files included here -->
@@ -76,7 +79,8 @@
 
     <!-- Contributed (application) views injected here -->
     <!-- TODO: replace with template marker and inject refs server-side -->
-    <script src="temp2.js"></script>
+    <script src="sample2.js"></script>
+    <script src="sampleAlt2.js"></script>
 
     <!-- finally, build the UI-->
     <script type="text/javascript">

@@ -24,6 +24,19 @@ html, body {
     height: 100%;
 }
 
+div.onosView {
+    display: none;
+}
+
+div.onosView.currentView {
+    display: block;
+}
+
+/*
+ * ==============================================================
+ * END OF NEW ONOS.JS file
+ * ==============================================================
+ */
 
 /*
  * === DEBUGGING ======

+/*
+ * Copyright 2014 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ Alternate Sample module file to illustrate framework integration.
+
+ @author Simon Hunt
+ */
+
+(function (onos) {
+    'use strict';
+
+    var svg;
+
+
+    function sizeSvg(view) {
+        svg.attr({
+            width: view.width(),
+            height: view.height()
+        });
+    }
+
+    // NOTE: view is a view-token data structure:
+    // {
+    //     vid: 'view-id',
+    //     nid: 'nav-id',
+    //     $div: ...      // d3 selection of dom view div.
+    // }
+
+    // gets invoked only the first time the view is loaded
+    function preload(view, ctx) {
+        svg = view.$div.append('svg');
+        sizeSvg(view);
+    }
+
+    function reset(view) {
+        // clear our svg of all objects
+        svg.html('');
+    }
+
+    function load(view, ctx) {
+        var fill = 'red',
+            stroke = 'black',
+            ctxText = ctx ? 'Context is "' + ctx + '"' : 'No Context';
+
+        svg.append('circle')
+            .attr({
+                cx: view.width() / 2,
+                cy: view.height() / 2,
+                r: 30
+            })
+            .style({
+                fill: fill,
+                stroke: stroke,
+                'stroke-width': 3.5
+            });
+
+        svg.append('text')
+            .text(ctxText)
+            .attr({
+                x: 20,
+                y: '1.5em'
+            })
+            .style({
+                fill: 'darkgreen',
+                'font-size': '20pt'
+            });
+    }
+
+    function resize(view, ctx) {
+        sizeSvg(view);
+        svg.selectAll('circle')
+            .attr({
+                cx: view.width() / 2,
+                cy: view.height() / 2
+            });
+    }
+
+    // == register views here, with links to lifecycle callbacks
+
+    onos.ui.addView('sample', {
+        preload: preload,
+        reset: reset,
+        load: load,
+        resize: resize
+    });
+
+
+}(ONOS));

@@ -15,7 +15,7 @@
  */
 
 /*
- Temporary module file to test the framework integration.
+ Sample module file to illustrate framework integration.
 
  @author Simon Hunt
  */
@@ -23,35 +23,42 @@
 (function (onos) {
     'use strict';
 
-    var api = onos.api;
+    var svg;
 
-    var vid,
-        svg;
-
-    // == define your functions here.....
 
+    function sizeSvg(view) {
+        svg.attr({
+            width: view.width(),
+            height: view.height()
+        });
+    }
 
-    // NOTE: view is a data structure:
+    // NOTE: view is a view-token data structure:
     // {
-    //     id: 'view-id',
-    //     el: ...      // d3 selection of dom view div.
+    //     vid: 'view-id',
+    //     nid: 'nav-id',
+    //     $div: ...      // d3 selection of dom view div.
     // }
 
-    function load(view) {
-        vid = view.id;
-        svg = view.el.append('svg')
-            .attr({
-                width: 400,
-                height: 300
-            });
+    // gets invoked only the first time the view is loaded
+    function preload(view, ctx) {
+        svg = view.$div.append('svg');
+        sizeSvg(view);
+    }
+
+    function reset(view) {
+        // clear our svg of all objects
+        svg.html('');
+    }
 
-        var fill = (vid === 'temp1') ? 'red' : 'blue',
-            stroke = (vid === 'temp2') ? 'yellow' : 'black';
+    function load(view, ctx) {
+        var fill = 'blue',
+            stroke = 'grey';
 
         svg.append('circle')
             .attr({
-                cx: 200,
-                cy: 150,
+                cx: view.width() / 2,
+                cy: view.height() / 2,
                 r: 30
             })
             .style({
@@ -61,14 +68,22 @@
             });
     }
 
-    // == register views here, with links to lifecycle callbacks
+    function resize(view, ctx) {
+        sizeSvg(view);
+        svg.selectAll('circle')
+            .attr({
+                cx: view.width() / 2,
+                cy: view.height() / 2
+            });
+    }
 
-    api.addView('temp1', {
-        load: load
-    });
+    // == register views here, with links to lifecycle callbacks
 
-    api.addView('temp2', {
-        load: load
+    onos.ui.addView('sampleAlt', {
+        preload: preload,
+        reset: reset,
+        load: load,
+        resize: resize
     });
 
 

@@ -23,9 +23,6 @@
 (function (onos) {
     'use strict';
 
-    // reference to the framework api
-    var api = onos.api;
-
     // configuration data
     var config = {
         useLiveData: true,
@@ -1213,7 +1210,7 @@
     // ======================================================================
     // register with the UI framework
 
-    api.addView('network', {
+    onos.ui.addView('topo', {
         load: loadNetworkView
     });