GUI -- Added sample view to demonstrate radio buttons.

@@ -81,6 +81,7 @@
     <!-- TODO: replace with template marker and inject refs server-side -->
     <!-- TODO: replace with template marker and inject refs server-side -->
     <script src="sample2.js"></script>
     <script src="sample2.js"></script>
     <script src="sampleAlt2.js"></script>
     <script src="sampleAlt2.js"></script>
+    <script src="sampleRadio.js"></script>
 
 
     <!-- finally, build the UI-->
     <!-- finally, build the UI-->
     <script type="text/javascript">
     <script type="text/javascript">

@@ -48,12 +48,8 @@
 }
 }
 
 
 #mast span.radio {
 #mast span.radio {
-    color: darkslateblue;
     font-size: 10pt;
     font-size: 10pt;
-}
-
-#mast span.radio {
-    margin: 4px 0;
+    margin: 4px 2px;
     border: 1px dotted #222;
     border: 1px dotted #222;
     padding: 1px 6px;
     padding: 1px 6px;
     color: #eee;
     color: #eee;

@@ -51,7 +51,8 @@
             errorCount = 0;
             errorCount = 0;
 
 
         // DOM elements etc.
         // DOM elements etc.
-        var $view;
+        var $view,
+            $mastRadio;
 
 
 
 
         // ..........................................................
         // ..........................................................
@@ -204,6 +205,9 @@
             // the incoming view, then unload it...
             // the incoming view, then unload it...
             if (current.view && (current.view.vid !== view.vid)) {
             if (current.view && (current.view.vid !== view.vid)) {
                 current.view.unload();
                 current.view.unload();
+                // detach radio buttons, if they were there..
+                $('#mastRadio').children().detach();
+
             }
             }
 
 
             // cache new view and context
             // cache new view and context
@@ -223,6 +227,61 @@
             view.load(current.ctx);
             view.load(current.ctx);
         }
         }
 
 
+        // generate 'unique' id by prefixing view id
+        function uid(view, id) {
+            return view.vid + '-' + id;
+        }
+
+        // restore id by removing view id prefix
+        function unUid(view, uid) {
+            var re = new RegExp('^' + view.vid + '-');
+            return uid.replace(re, '');
+        }
+
+        function setRadioButtons(vid, btnSet, callback) {
+            var view = views[vid],
+                btnG;
+
+            // lazily create the buttons...
+            if (!(btnG = view.radioButtons)) {
+                btnG = d3.select(document.createElement('div'));
+
+                btnSet.forEach(function (btn, i) {
+                    var bid = btn.id || 'b' + i,
+                        txt = btn.text || 'Button #' + i,
+                        b = btnG.append('span')
+                        .attr({
+                            id: uid(view, bid),
+                            class: 'radio'
+                        })
+                        .text(txt);
+                    if (i === 0) {
+                        b.classed('active', true);
+                    }
+                });
+
+                btnG.selectAll('span')
+                    .on('click', function (d) {
+                        var btn = d3.select(this),
+                            bid = btn.attr('id'),
+                            act = btn.classed('active');
+
+                        if (!act) {
+                            $mastRadio.selectAll('span')
+                                .classed('active', false);
+                            btn.classed('active', true);
+
+                            callback(view.token(), unUid(view, bid));
+                        }
+                    });
+
+                view.radioButtons = btnG;
+            }
+
+            // attach the buttons to the masthead
+            $mastRadio.node().appendChild(btnG.node());
+        }
+
         function resize(e) {
         function resize(e) {
             d3.selectAll('.onosView').call(setViewDimensions);
             d3.selectAll('.onosView').call(setViewDimensions);
             // allow current view to react to resize event...
             // allow current view to react to resize event...
@@ -257,6 +316,7 @@
                 this.nid = nid;     // explicit navitem id (can be null)
                 this.nid = nid;     // explicit navitem id (can be null)
                 this.cb = $.isPlainObject(cb) ? cb : {};    // callbacks
                 this.cb = $.isPlainObject(cb) ? cb : {};    // callbacks
                 this.$div = null;               // view not yet added to DOM
                 this.$div = null;               // view not yet added to DOM
+                this.radioButtons = null;       // no radio buttons yet
                 this.ok = true;                 // valid view
                 this.ok = true;                 // valid view
             }
             }
 
 
@@ -289,7 +349,8 @@
 
 
                     // functions
                     // functions
                     width: this.width,
                     width: this.width,
-                    height: this.height
+                    height: this.height,
+                    setRadio: this.setRadio
                 }
                 }
             },
             },
 
 
@@ -368,8 +429,11 @@
 
 
             height: function () {
             height: function () {
                 return $(this.$div.node()).height();
                 return $(this.$div.node()).height();
-            }
+            },
 
 
+            setRadio: function (btnSet, cb) {
+                setRadioButtons(this.vid, btnSet, cb);
+            }
 
 
             // TODO: consider schedule, clearTimer, etc.
             // TODO: consider schedule, clearTimer, etc.
         };
         };
@@ -465,6 +529,7 @@
             built = true;
             built = true;
 
 
             $view = d3.select('#view');
             $view = d3.select('#view');
+            $mastRadio = d3.select('#mastRadio');
 
 
             $(window).on('hashchange', hash);
             $(window).on('hashchange', hash);
             $(window).on('resize', resize);
             $(window).on('resize', resize);

+/*
+ * 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.
+ */
+
+/*
+ Sample view to illustrate radio buttons.
+
+ @author Simon Hunt
+ */
+
+(function (onos) {
+    'use strict';
+
+    var data = [ 'Yo, radio button set...', 'Time to shine' ],
+        btnSet = [
+            { id: 'b1', text: 'First Button' },
+            { id: 'b2', text: 'Second Button' },
+            { id: 'b3', text: 'Third Button' }
+        ],
+        btnLookup = {};
+
+    btnSet.forEach(function (b) {
+        btnLookup[b.id] = b;
+    });
+
+    // invoked when the view is loaded
+    function load(view, ctx) {
+        view.setRadio(btnSet, doRadio);
+
+        view.$div.selectAll('p')
+            .data(data)
+            .enter()
+            .append('p')
+            .text(function (d) { return d; })
+            .style('padding', '2px 8px');
+    }
+
+    function doRadio(view, id) {
+        view.$div.append('p')
+            .text('You pressed the ' + btnLookup[id].text)
+            .style({
+                'font-size': '10pt',
+                color: 'green',
+                padding: '0 20px',
+                margin: '2px'
+            });
+    }
+
+    // == register the view here, with links to lifecycle callbacks
+
+    onos.ui.addView('sampleRadio', {
+        reset: true,    // empty the div on reset
+        load: load
+    });
+
+}(ONOS));