better content for periodic example

UIPeriodicTable/JavaScript/Resources/Components/code_table.js

@@ -1,3 +1,4 @@
+// handle the periodic table jumps
 'use strict';
 
 exports.init = function(mylayout,mylogger) {
@@ -8,7 +9,6 @@ exports.init = function(mylayout,mylogger) {
     var viewtb = mylayout.getWidget("supporttabs");
     var supporttb = mylayout.getWidget("atomictabs");
 
-// handle the periodic table jumps
     mylayout.getWidget("A1").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(0);    };
     mylayout.getWidget("A2").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(1);    };
     mylayout.getWidget("A3").onClick = function () {        maintb.setCurrentPage(1);        acttb.setCurrentPage(2);    };

UIPeriodicTable/JavaScript/Resources/Components/code_uibargraph.js

@@ -1,17 +1,22 @@
+// UIBargraph application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uibargraphcode");
     button1.onClick = function () {
-        mylogger.setText( "UIBargraph action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UIBargraph support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uibargraph.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uibargraphlayout");
     button2.onClick = function () {
-        mylogger.setText( "UIBargraph action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UIBargraph support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uibargraph.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uibutton.js

@@ -1,8 +1,12 @@
+// UIButton application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
 
     var button1 = mylayout.getWidget("demobutton");
     button1.onClick = function () {
@@ -11,33 +15,37 @@ exports.init = function(mylayout,mylogger) {
 
     var button2 = mylayout.getWidget("buttonducky");
     button2.onClick = function () {
-        mylogger.setText( "UIButton action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UIButton event : " +  button2.id + " was pressed ");
     };
 
     var button3 = mylayout.getWidget("buttonready");
     button3.onClick = function () {
-        mylogger.setText( "UIButton action : " +  button3.id + " was pressed ");
+        mylogger.setText( "UIButton event : " +  button3.id + " was pressed ");
     };
 
     var button4 = mylayout.getWidget("buttonatomic");
     button4.onClick = function () {
-        mylogger.setText( "UIButton action : " +  button4.id + " was pressed ");
+        mylogger.setText( "UIButton event : " +  button4.id + " was pressed ");
     };
 
     var button7 = mylayout.getWidget("buttongreen");
-    button7.onClick = function () {
-        mylogger.setText( "UIButton action : " +  button7.id + " was pressed ");
-    };
+     button7.subscribeToEvent( button7, "WidgetEvent", function (ev) {
+        mylogger.setText( "UIButton event : " +  button7.id + " event type = " + utils.eventReport(ev.type) );
+    });
+
+    //
+    // support functions
+    //
 
     var button5 = mylayout.getWidget("uibuttoncode");
     button5.onClick = function () {
-        mylogger.setText( "UIButton action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UIButton support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Components/code_uibutton.js", mylayout );
     };
 
     var button6 = mylayout.getWidget("uibuttonlayout");
     button6.onClick = function () {
-        mylogger.setText( "UIButton action : " +  button6.id + " was pressed ");
+        mylogger.setText( "UIButton support : " +  button6.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uibutton.ui.txt", mylayout );
     };
 };

UIPeriodicTable/JavaScript/Resources/Components/code_uicheckbox.js

@@ -1,13 +1,22 @@
+// UICheckBox application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
+
     var button1 = mylayout.getWidget("democheck");
     button1.onClick = function () {
-        mylogger.setText( "UICheckBox action : " +  button1.id + " state is " + button1.value);
+        mylogger.setText( "UICheckBox event : " +  button1.id + " state is " + button1.value);
     };
 
+    //
+    // action functions
+    //
+
     var button2 = mylayout.getWidget("checkset");
     button2.onClick = function () {
         mylayout.getWidget("democheck").value = 1;
@@ -20,6 +29,10 @@ exports.init = function(mylayout,mylogger) {
         mylogger.setText( "UICheckBox action : " +  button1.id + " set to 0");
     };
 
+    //
+    // support functions
+    //
+
     var button4 = mylayout.getWidget("uicheckboxcode");
     button4.onClick = function () {
         mylogger.setText( "UICheckBox action : " +  button4.id + " was pressed ");
@@ -34,6 +47,5 @@ exports.init = function(mylayout,mylogger) {
 
 
 
-
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiclicklabel.js

@@ -1,22 +1,36 @@
+// UIClickLabel application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
+
     var button1 = mylayout.getWidget("somecheck");
     button1.onClick = function () {
-        mylogger.setText( "UIClickLabel action : on " +  button1.id + " state is " + button1.value);
+        mylogger.setText( "UIClickLabel event : on " +  button1.id + " state is " + button1.value);
+    };
+
+    var button4 = mylayout.getWidget("someradio");
+    button4.onClick = function () {
+        mylogger.setText( "UIClickLabel event : on " +  button4.id + " state is " + button1.value);
     };
 
-    var button2 = mylayout.getWidget("uiclicklabelcode");
-    button2.onClick = function () {
-        mylogger.setText( "UIClickLabel action : " +  button2.id + " was pressed ");
+    //
+    // support functions
+    //
+
+   var button2 = mylayout.getWidget("uiclicklabelcode");
+   button2.onClick = function () {
+        mylogger.setText( "UIClickLabel support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Components/code_uiclicklabel.js", mylayout );
     };
 
     var button3 = mylayout.getWidget("uiclicklabellayout");
     button3.onClick = function () {
-        mylogger.setText( "UIClickLabel action : " +  button3.id + " was pressed ");
+        mylogger.setText( "UIClickLabel support : " +  button3.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiclicklabel.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uicolorwheel.js

@@ -1,22 +1,31 @@
+// UIColorWheel application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
+
     var cwx = mylayout.getWidget("colorwheeldemo");
     cwx.onEvent = function(ev) {
-        mylogger.setText( "UIColorWheel action : " + cwx.id +  " hue = " +cwx.getHue() + " saturation = " + cwx.getSaturation());
+        mylogger.setText( "UIColorWheel event : " + cwx.id +  " hue = " +cwx.getHue() + " saturation = " + cwx.getSaturation());
     };
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uicolorwheelcode");
     button1.onClick = function () {
-        mylogger.setText( "UIColorWheel action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UIColorWheel support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uicolorwheel.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uicolorwheellayout");
     button2.onClick = function () {
-        mylogger.setText( "UIColorWheel action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UIColorWheel support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uicolorwheel.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uicolorwidget.js

@@ -1,19 +1,12 @@
+// UIColorWidget application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
-    var button1 = mylayout.getWidget("uicolorwidgetcode");
-    button1.onClick = function () {
-        mylogger.setText( "UIColorWidget action : " +  button1.id + " was pressed ");
-        utils.viewCode ( "Components/code_uicolorwidget.js", mylayout );
-    };
-
-    var button2 = mylayout.getWidget("uicolorwidgetlayout");
-    button2.onClick = function () {
-        mylogger.setText( "UIColorWidget action : " +  button2.id + " was pressed ");
-        utils.viewCode ( "Scenes/layout_uicolorwidget.ui.txt", mylayout );
-    };
+    //
+    // action functions
+    //
 
     var button4 = mylayout.getWidget("uicolorwidgetred");
     button4.onClick = function () {
@@ -33,7 +26,21 @@ exports.init = function(mylayout,mylogger) {
         mylayout.getWidget("colorwidgetdemo").setColorString("#1111FF");
     };
 
+    //
+    // support functions
+    //
 
+    var button1 = mylayout.getWidget("uicolorwidgetcode");
+    button1.onClick = function () {
+        mylogger.setText( "UIColorWidget support : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uicolorwidget.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uicolorwidgetlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIColorWidget support : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uicolorwidget.ui.txt", mylayout );
+    };
 
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uicontainer.js

@@ -1,8 +1,13 @@
+// UIContainer application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uicontainercode");
     button1.onClick = function () {
         mylogger.setText( "UIContainer action : " +  button1.id + " was pressed ");
@@ -15,6 +20,5 @@ exports.init = function(mylayout,mylogger) {
         utils.viewCode ( "Scenes/layout_uicontainer.ui.txt", mylayout );
     };
 
-
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uieditfield.js

@@ -1,3 +1,4 @@
+// UIEditField application source code
 'use strict';
 var utils = require("Scripts/utils");
 
@@ -5,17 +6,25 @@ exports.init = function(mylayout,mylogger) {
 
     var ef1 = mylayout.getWidget("editfieldsingle");
 
+    //
+    // widget event functions
+    //
+
     // this will tell you something occured, just not what it was...
     ef1.subscribeToEvent( ef1, "WidgetEvent", function (ev) {
-        mylogger.setText( "UIEditField action : " + ef1.id + " text = `" + ef1.text + "` event type = " + ev.type);
+        mylogger.setText( "UIEditField event : " + ef1.id + " text = `" + ef1.text + "` event type = " + utils.eventReport(ev.type));
     });
 
     // insert a file into the editfield
     var ef2 = mylayout.getWidget("editfieldmulti");
     ef2.subscribeToEvent( ef2, "WidgetEvent", function (ev) {
-        mylogger.setText( "UIEditField action : " + ef2.id + " text = `" + ef2.text + "` event type = " + ev.type);
+        mylogger.setText( "UIEditField event : " + ef2.id + " text = `" + ef2.text + "` event type = " + utils.eventReport(ev.type));
     });
 
+    //
+    // action functions
+    //
+
     var button1 = mylayout.getWidget("editfieldadd");
     button1.onClick = function () {
         var filex = Atomic.cache.getFile("Scenes/layout_uieditfield.ui.txt");
@@ -30,15 +39,19 @@ exports.init = function(mylayout,mylogger) {
         mylogger.setText( "UIEditField action : cleared " + ef2.id);
     };
 
+    //
+    // support functions
+    //
+
     var button4 = mylayout.getWidget("uieditfieldcode");
     button4.onClick = function () {
-        mylogger.setText( "UIEditField action : " +  button4.id + " was pressed ");
+        mylogger.setText( "UIEditField support : " +  button4.id + " was pressed ");
         utils.viewCode ( "Components/code_uieditfield.js", mylayout );
     };
 
     var button5 = mylayout.getWidget("uieditfieldlayout");
     button5.onClick = function () {
-        mylogger.setText( "UIEditField action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UIEditField support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uieditfield.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uifinderwindow.js

@@ -1,14 +1,18 @@
+// UIFinderWindow application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger,myview) {
 
+    //
+    // widget event and action functions
+    //
     var button1 = mylayout.getWidget("filefinder");
     button1.onClick = function () {
         var finder = new Atomic.UIFinderWindow(myview, "myfinder");
         finder.findFile("Find a File", "", 0, 0, 0);
         finder.subscribeToEvent(finder, "UIFinderComplete", function (ev) {
-            mylogger.setText( "UIFinderWindow action : " + finder.id +  " the window " + ev.title + " file was " + ev.selected + ", the button pressed was " + ev.reason);
+            mylogger.setText( "UIFinderWindow event : " + finder.id +  " the window " + ev.title + " file was " + ev.selected + ", the button pressed was " + ev.reason);
         });
     };
 
@@ -17,20 +21,24 @@ exports.init = function(mylayout,mylogger,myview) {
         var finder = new Atomic.UIFinderWindow(myview, "myfinder");
         finder.findPath("Find a Folder", "", 0, 0, 0);
         finder.subscribeToEvent(finder, "UIFinderComplete", function (ev) {
-            mylogger.setText( "UIFinderWindow action : " + finder.id +  " the window " + ev.title + " folder was " + ev.selected + ", the button pressed was " + ev.reason);
+            mylogger.setText( "UIFinderWindow event : " + finder.id +  " the window " + ev.title + " folder was " + ev.selected + ", the button pressed was " + ev.reason);
 
         });
     };
 
+    //
+    // support functions
+    //
+
     var button3 = mylayout.getWidget("uifinderwindowcode");
     button3.onClick = function () {
-        mylogger.setText( "UIFinderWindow action : " +  button3.id + " was pressed ");
+        mylogger.setText( "UIFinderWindow support : " +  button3.id + " was pressed ");
         utils.viewCode ( "Components/code_uifinderwindow.js", mylayout );
     };
 
     var button4 = mylayout.getWidget("uifinderwindowlayout");
     button4.onClick = function () {
-        mylogger.setText( "UIFinderWindow action : " +  button4.id + " was pressed ");
+        mylogger.setText( "UIFinderWindow support : " +  button4.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uifinderwindow.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uifontdescription.js

@@ -1,11 +1,15 @@
+// UIFontdescription application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
-    var steps = mylayout.getWidget("fontstep");
+    //
+    // action functions
+    //
+    
+   var steps = mylayout.getWidget("fontstep");
     steps.onChanged = function(ev) {
-
         var mytext = mylayout.getWidget("changetext");
         var myfont = new Atomic.UIFontDescription();
         myfont.setSize(Math.round (steps.value));
@@ -15,16 +19,20 @@ exports.init = function(mylayout,mylogger) {
         mylogger.setText( "UIFontdescription action : " + steps.id + " step size changed to " + String (steps.value));
     };
 
-    var button5 = mylayout.getWidget("uifontdecsriptioncode");
+    //
+    // support functions
+    //
+
+    var button5 = mylayout.getWidget("uifontdescriptioncode");
     button5.onClick = function () {
-        mylogger.setText( "UIFontdescription action : " +  button5.id + " was pressed ");
-        utils.viewCode ( "Components/code_uifontdecsription.js", mylayout );
+        mylogger.setText( "UIFontdescription support : " +  button5.id + " was pressed ");
+        utils.viewCode ( "Components/code_uifontdescription.js", mylayout );
     };
 
-    var button6 = mylayout.getWidget("uifontdecsriptionlayout");
+    var button6 = mylayout.getWidget("uifontdescriptionlayout");
     button6.onClick = function () {
-        mylogger.setText( "UIFontdescription action : " +  button6.id + " was pressed ");
-        utils.viewCode ( "Scenes/layout_uifontdecsription.ui.txt", mylayout );
+        mylogger.setText( "UIFontdescription support : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uifontdescription.ui.txt", mylayout );
     };
 
 };

UIPeriodicTable/JavaScript/Resources/Components/code_uiimagewidget.js

@@ -1,8 +1,13 @@
+// UIImageWidget application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // action functions
+    //
+
     var button3 = mylayout.getWidget("imagecolor");
     button3.onClick = function () {
         mylogger.setText( "UIImageWidget action : " +  button3.id + " was pressed ");
@@ -16,15 +21,19 @@ exports.init = function(mylayout,mylogger) {
         img.setImage("Textures/newbuilddetected_header.jpg");
     };
 
+    //
+    // support functions
+    //
+
     var button5 = mylayout.getWidget("uiimagewidgetcode");
     button5.onClick = function () {
-        mylogger.setText( "UIImageWidget action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UIImageWidget support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Components/code_uiimagewidget.js", mylayout );
     };
 
     var button6 = mylayout.getWidget("uiimagewidgetlayout");
     button6.onClick = function () {
-        mylogger.setText( "UIImageWidget action : " +  button6.id + " was pressed ");
+        mylogger.setText( "UIImageWidget support : " +  button6.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiimagewidget.ui.txt", mylayout );
     };
 };

UIPeriodicTable/JavaScript/Resources/Components/code_uiinlineselect.js

@@ -1,28 +1,41 @@
+// UIInlineSelect application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
+
     var ils = mylayout.getWidget("inlineselectdemo");
     ils.onChanged = function(ev) {
-        mylogger.setText( "UIInlineSelect action : " + ils.id + " changed value to " + String (ils.value));
+        mylogger.setText( "UIInlineSelect event : " + ils.id + " changed value to " + String (ils.value));
     };
 
+    //
+    // action functions
+    //
+
     var steps = mylayout.getWidget("ilsstep");
     steps.onChanged = function(ev) {
         ils.setStepSize (steps.value);
         mylogger.setText( "UIInlineSelect action : " + steps.id + " step size changed to " + String (steps.value));
     };
 
+    //
+    // support functions
+    //
+
     var button5 = mylayout.getWidget("uiinlineselectcode");
     button5.onClick = function () {
-        mylogger.setText( "UIInlineSelect action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UIInlineSelect support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Components/code_uiinlineselect.js", mylayout );
     };
 
     var button6 = mylayout.getWidget("uiinlineselectlayout");
     button6.onClick = function () {
-        mylogger.setText( "UIInlineSelect action : " +  button6.id + " was pressed ");
+        mylogger.setText( "UIInlineSelect support : " +  button6.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiinlineselect.ui.txt", mylayout );
     };
 };

UIPeriodicTable/JavaScript/Resources/Components/code_uilayout.js

@@ -1,3 +1,4 @@
+// UILayout application source code
 'use strict';
 var utils = require("Scripts/utils");
 
@@ -5,6 +6,10 @@ exports.init = function(mylayout,mylogger,myview) {
 
     var myc = mylayout.getWidget("uilayoutcontainer"); // get the container layout
 
+    //
+    // support functions
+    //
+
     var tf0 = new Atomic.UIButton();  // the layout-o-matic spawner
     tf0.text = "LAYOUT-O-MATIC";
     tf0.id = "go_layout_config";

UIPeriodicTable/JavaScript/Resources/Components/code_uilayoutparams.js

@@ -1,17 +1,22 @@
+// UILayoutParams application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uilayoutparamscode");
     button1.onClick = function () {
-        mylogger.setText( "UILayoutParams action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UILayoutParams support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uilayoutparams.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uilayoutparamslayout");
     button2.onClick = function () {
-        mylogger.setText( "UILayoutParams action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UILayoutParams support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uilayoutparams.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uilistview.js

@@ -1,3 +1,4 @@
+//UIListView application source code
 'use strict';
 var utils = require("Scripts/utils");
 
@@ -12,6 +13,10 @@ exports.init = function(mylayout,mylogger) {
 // note : the UIListView widget does not have a corresponding Turbobadger widget, its ALL Atomic.
 // so we have to build it in source code / scripting
 
+    //
+    // action functions
+    //
+
     var myListview = new Atomic.UIListView();  // make a List...view
     myListview.id = "UIListViewDemo"; // tag it, in case we want to get it again later
 
@@ -24,46 +29,60 @@ exports.init = function(mylayout,mylogger) {
     lpx.maxHeight = 256;
     myListview.layoutParams = lpx;
 
+    var lower = mylayout.getWidget("uilistviewlower");
     var mylvc = mylayout.getWidget("listviewcontainer"); // get the container layout
-    mylvc.addChild(myListview);  // drop it in
+    mylvc.addChildBefore(myListview, lower);  // drop it in
 
 
-	// OMG what the heck was he thinking!
+    // OMG what the heck was he thinking!
    
-   	// there is no external way of converting a name to an itemLookup_ ???
+    // there is no external way of converting a name to an itemLookup_ ???
 
-	var rootsids = [];	// now fill it up
+    var rootsids = [];  // now fill it up
 
-	var id1 = myListview.addRootItem("root1", "", "root1");
-	rootsids.push(id1);
-	var id2 = myListview.addChildItem(id1, "rootish2", "", "root2");
-	rootsids.push(id2);
-	var id3 = myListview.addChildItem(id1, "rootish3", "", "root3");
-	rootsids.push(id3);
-	var id4 = myListview.addChildItem(id1, "rootish4", "", "root4");
-	rootsids.push(id4);
- 	var id5 = myListview.addChildItem(id1, "rootish5", "", "root5");
-	rootsids.push(id5);
+    var id1 = myListview.addRootItem("root1", "", "root1");
+    rootsids.push(id1);
+    var id2 = myListview.addChildItem(id1, "rootish2", "", "root2");
+    rootsids.push(id2);
+    var id3 = myListview.addChildItem(id1, "rootish3", "", "root3");
+    rootsids.push(id3);
+    var id4 = myListview.addChildItem(id1, "rootish4", "", "root4");
+    rootsids.push(id4);
+    var id5 = myListview.addChildItem(id1, "rootish5", "", "root5");
+    rootsids.push(id5);
 
-	var nn;
-	for ( nn=7; nn<55; nn++)
-		rootsids.push( myListview.addChildItem(id2, "child " + nn, "", "child " + nn ) );
+    var nn;
+    for ( nn=7; nn<55; nn++)
+        rootsids.push( myListview.addChildItem(id2, "child " + nn, "", "child " + nn ) );
 
-	myListview.setExpanded(id1,true);
-	myListview.setExpanded(id2,false);
+    myListview.setExpanded(id1,true);
+    myListview.setExpanded(id2,false);
 
-     myListview.subscribeToEvent("UIListViewSelectionChanged", function (ev) {
- 			 var selectedId = myListview.selectedItemID; /// hmmm same as the refid...
-   			 mylogger.setText( "UIListView action : " + myListview.id + "  refid=" +  ev.refid + "  selected=" +  ev.selected + " sid=" + selectedId );
-		});
+    //
+    // widget event functions
+    //
 
-/*
-	myListview.subscribeToEvent( "WidgetEvent", function (ev) {
-     	//if (  ev.target == myListview ) // ev.type == Atomic.UI_EVENT_TYPE_CLICK &&" selected entry id = " + ev.refID +
-                mylogger.setText( "UIListView action : " + myListview.id + " target= `" + ev.target.id + "` refID=`" + ev.refID + "` event type = " + ev.type);
-    });
-*/
 
+     myListview.subscribeToEvent("UIListViewSelectionChanged", function (ev) {
+             var selectedId = myListview.selectedItemID; /// hmmm same as the refid...
+             mylogger.setText( "UIListView event : " + myListview.id + "  refid=" +  ev.refid + "  selected=" +  ev.selected + " sid=" + selectedId );
+        });
+
+    //
+    // support functions
+    //
+
+    var button1 = mylayout.getWidget("uilistviewcode");
+    button1.onClick = function () {
+        mylogger.setText( "UIListView support : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uilistview.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uilistviewlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UIListView support : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uilistview.ui.txt", mylayout );
+    };
 
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uimenuitem.js

@@ -1,20 +1,99 @@
+// UIMenuItem and UIMenuItemSource application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
-    var button1 = mylayout.getWidget("uimenuitemcode");
+    //
+    // action functions
+    //
+
+    // make the MenuItemSource to use with the menu
+    var mis = new Atomic.UIMenuItemSource();  
+
+    // put in some default UIMenuItems in the MenuItemSource
+    mis.addItem( new Atomic.UIMenuItem( "UIMenuItem1", "item1" ) );
+    mis.addItem( new Atomic.UIMenuItem( "UIMenuItem2", "item2", "Ctrl+." ) );
+    mis.addItem( new Atomic.UIMenuItem( "UIMenuItem2", "item2", "", "DuckButton" ) );
+    mis.addItem( new Atomic.UIMenuItem( "UIMenuItem3", "item3", "CTrl+A", "LogoAtomic" ) );
+
+    var button1 = mylayout.getWidget("uimenuitempush");
     button1.onClick = function () {
-        mylogger.setText( "UIMenuItem action : " +  button1.id + " was pressed ");
-        utils.viewCode ( "Components/code_uimenuitem.js", mylayout );
+        mylogger.setText( "UIMenuWindow action : " +  button1.id + " was pressed ");
+
+        var mymenuwindow = new Atomic.UIMenuWindow( mylayout, "MenuItemDemo");
+
+        var xx = button1.x + (button1.width/2);
+        var yy = button1.y + (button1.height/2);
+
+        mymenuwindow.show(mis, xx, yy);   // use the existing menuitem source, show in the middle of the button, if possible
+
+    //
+    // widget event functions
+    //
+
+        mymenuwindow.subscribeToEvent( "WidgetEvent", function (ev) {
+            if ( ev.type == Atomic.UI_EVENT_TYPE_CLICK && ev.target == mymenuwindow )
+                mylogger.setText( "UIMenuItem event : " + mymenuwindow.id + " selected entry id = " + ev.refID + " event type = " + utils.eventReport(ev.type));
+            if ( ev.type == Atomic.UI_EVENT_TYPE_SHORTCUT )
+                mylogger.setText( "UIMenuItem event : " + mymenuwindow.id + " Shortcut id = " + ev.refID + " event type = " + utils.eventReport(ev.type));
+        });
+
+        mymenuwindow.subscribeToEvent( "UIShortcut", function (ev) {
+               mylogger.setText( "UIMenuItem event : " + mymenuwindow.id + " Shortcut key = " + ev.key + " qualifiers = " +  ev.qualifiers );
+        });
+
+        mymenuwindow.subscribeToEvent( "UIUnhandledShortcut", function (ev) {
+               mylogger.setText( "UIMenuItem event : " + mymenuwindow.id + " UIUnhandledShortcut id = " + ev.refid );
+        });
+
     };
 
-    var button2 = mylayout.getWidget("uimenuitemlayout");
+    var button2 = mylayout.getWidget("uimi1");
     button2.onClick = function () {
         mylogger.setText( "UIMenuItem action : " +  button2.id + " was pressed ");
-        utils.viewCode ( "Scenes/layout_uimenuitem.ui.txt", mylayout );
+        mis.addItem( new Atomic.UIMenuItem( "New UIMenuItem") );
     };
 
+    var button3 = mylayout.getWidget("uimi2");
+    button3.onClick = function () {
+        mylogger.setText( "UIMenuItem action : " +  button3.id + " was pressed ");
+        mis.addItem( new Atomic.UIMenuItem( "Newer UIMenuItem", "neweritem" ) );
+    };
+
+    var button4 = mylayout.getWidget("uimi3");
+    button4.onClick = function () {
+        mylogger.setText( "UIMenuItem action : " +  button4.id + " was pressed ");
+        mis.addItem( new Atomic.UIMenuItem( "A Duck", "aduck", "", "DuckButton" ) );
+    };
+
+    var button5 = mylayout.getWidget("uimi4");
+    button5.onClick = function () {
+        mylogger.setText( "UIMenuItem action : " +  button5.id + " was pressed ");
+        mis.addItem( new Atomic.UIMenuItem( "Atomic!", "atomic", "", "LogoAtomic" ) );
+    };
+
+    var button6 = mylayout.getWidget("uimi5");
+    button6.onClick = function () {
+        mylogger.setText( "UIMenuItem action : " +  button6.id + " was pressed ");
+        mis.clear();
+    };
+
+    //
+    // support functions
+    //
+
+    var button8 = mylayout.getWidget("uimenuitemcode");
+    button8.onClick = function () {
+        mylogger.setText( "UIMenuItem support : " +  button8.id + " was pressed ");
+        utils.viewCode ( "Components/code_uimenuitem.js", mylayout );
+    };
+
+    var button9 = mylayout.getWidget("uimenuitemlayout");
+    button9.onClick = function () {
+        mylogger.setText( "UIMenuItem support : " +  button9.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uimenuitem.ui.txt", mylayout );
+    };
 
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uimenuwindow.js

@@ -1,8 +1,13 @@
+// UIMenuWindow application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // action functions
+    //
+
     var button1 = mylayout.getWidget("uimenuwindowpush");
     button1.onClick = function () {
         mylogger.setText( "UIMenuWindow action : " +  button1.id + " was pressed ");
@@ -20,23 +25,41 @@ exports.init = function(mylayout,mylogger) {
         var yy = button1.y + (button1.height/2);
         mymenuwindow.show(mis, xx, yy);
 
+    //
+    // widget event functions
+    //
+
         mymenuwindow.subscribeToEvent( "WidgetEvent", function (ev) {
             if ( ev.type == Atomic.UI_EVENT_TYPE_CLICK && ev.target == mymenuwindow )
-                mylogger.setText( "UIMenuWindow action : " + mymenuwindow.id + " selected entry id = " + ev.refID + " event type = " + ev.type);
+                mylogger.setText( "UIMenuWindow event : " + mymenuwindow.id + " selected entry id = " + ev.refID + " event type = " + utils.eventReport(ev.type));
             if ( ev.type == Atomic.UI_EVENT_TYPE_SHORTCUT )
-                mylogger.setText( "UIMenuWindow action : " + mymenuwindow.id + " Shortcut id = " + ev.refID + " event type = " + ev.type);
+                mylogger.setText( "UIMenuWindow event : " + mymenuwindow.id + " Shortcut id = " + ev.refID + " event type = " + utils.eventReport(ev.type));
         });
+
+        mymenuwindow.subscribeToEvent( "UIShortcut", function (ev) {
+               mylogger.setText( "UIMenuWindow event : " + mymenuwindow.id + " Shortcut key = " + ev.key + " qualifiers = " +  ev.qualifiers );
+        });
+
+        mymenuwindow.subscribeToEvent( "UIUnhandledShortcut", function (ev) {
+               mylogger.setText( "UIMenuWindow event : " + mymenuwindow.id + " UIUnhandledShortcut id = " + ev.refid );
+        });
+
+
     };
 
+    //
+    // support functions
+    //
+
     var button2 = mylayout.getWidget("uimenuwindowcode");
     button2.onClick = function () {
-        mylogger.setText( "UIMenuWindow action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UIMenuWindow support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Components/code_uimenuwindow.js", mylayout );
     };
 
     var button3 = mylayout.getWidget("uimenuwindowlayout");
     button3.onClick = function () {
-        mylogger.setText( "UIMenuWindow action : " +  button3.id + " was pressed ");
+        mylogger.setText( "UIMenuWindow support : " +  button3.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uimenuwindow.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uimessagewindow.js

@@ -1,8 +1,13 @@
+// UIMessageWindow application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
+
     var button1 = mylayout.getWidget("msgnone");
     button1.onClick = function () {
         var mess1 = new Atomic.UIMessageWindow(mylayout, "mymess1");
@@ -16,7 +21,6 @@ exports.init = function(mylayout,mylogger) {
         mess2.onEvent = function (ev) {
             mylogger.setText( "UIMessageWindow action : " + mess2.id +  " was closed by " + ev.refID);
         };
-
     };
 
     var button3 = mylayout.getWidget("msgkcancel");
@@ -36,16 +40,20 @@ exports.init = function(mylayout,mylogger) {
             mylogger.setText( "UIMessageWindow action : " +mess4.id + " was closed by " + ev.refID);
         };
     };
+    
+    //
+    // support functions
+    //
 
     var button5 = mylayout.getWidget("uimessagewindowcode");
     button5.onClick = function () {
-        mylogger.setText( "UIMessageWindow action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UIMessageWindow support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Components/code_uimessagewindow.js", mylayout );
     };
 
     var button6 = mylayout.getWidget("uimessagewindowlayout");
     button6.onClick = function () {
-        mylogger.setText( "UIMessageWindow action : " +  button6.id + " was pressed ");
+        mylogger.setText( "UIMessageWindow support : " +  button6.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uimessagewindow.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uipromptwindow.js

@@ -1,31 +1,37 @@
+// UIPromptWindow application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger,myview) {
 
+    //
+    // widget event functions
+    //
+
     var button1 = mylayout.getWidget("stringfinder");
     button1.onClick = function () {
         var prompt = new Atomic.UIPromptWindow(myview, "myprompt");
         prompt.show(  "WindowTitle", "Message in window", "preset value", 0, 0, 0);
         prompt.subscribeToEvent( prompt, "UIPromptComplete", function (ev) {
-            mylogger.setText( "UIPromptWindow action : " + prompt.id + "the window `" + ev.title + "` string was `" + ev.selected + "`, the button pressed was " + ev.reason);
+            mylogger.setText( "UIPromptWindow event : " + prompt.id + "the window `" + ev.title + "` string was `" + ev.selected + "`, the button pressed was " + ev.reason);
         });
-
     };
+    
+    //
+    // support functions
+    //
 
     var button3 = mylayout.getWidget("uipromptwindowcode");
     button3.onClick = function () {
-        mylogger.setText( "UIPromptWindow action : " +  button3.id + " was pressed ");
+        mylogger.setText( "UIPromptWindow support : " +  button3.id + " was pressed ");
         utils.viewCode ( "Components/code_uipromptwindow.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uipromptwindowlayout");
     button2.onClick = function () {
-        mylogger.setText( "UIPromptWindow action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UIPromptWindow support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uipromptwindow.ui.txt", mylayout );
     };
 
-
-
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uipulldownmenu.js

@@ -1,39 +1,46 @@
+// UIPulldownMenu application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
+
     var filemenu = mylayout.getWidget("FileMenu");
     filemenu.onChanged = function () {
-        mylogger.setText( "UIPulldownMenu action : " + filemenu.id + " selected id = " + filemenu.getSelectedId());
+        mylogger.setText( "UIPulldownMenu event : " + filemenu.id + " selected id = " + filemenu.getSelectedId());
     };
 
     var editmenu = mylayout.getWidget("EditMenu");
     editmenu.onChanged = function () {
-        mylogger.setText( "UIPulldownMenu action : " + editmenu.id + " selected id = " + editmenu.getSelectedId());
+        mylogger.setText( "UIPulldownMenu event : " + editmenu.id + " selected id = " + editmenu.getSelectedId());
     };
 
     var viewmenu = mylayout.getWidget("ViewMenu");
     viewmenu.onChanged = function () {
-        mylogger.setText( "UIPulldownMenu action : " + viewmenu.id + " selected id = " + viewmenu.getSelectedId());
+        mylogger.setText( "UIPulldownMenu event : " + viewmenu.id + " selected id = " + viewmenu.getSelectedId());
     };
 
     var helpmenu = mylayout.getWidget("HelpMenu");
     helpmenu.onChanged = function () {
-        mylogger.setText( "UIPulldownMenu action : " + helpmenu.id + " selected id = " + helpmenu.getSelectedId());
+        mylogger.setText( "UIPulldownMenu event : " + helpmenu.id + " selected id = " + helpmenu.getSelectedId());
     };
 
-
+    //
+    // support functions
+    //
 
     var button1 = mylayout.getWidget("uipulldownmenucode");
     button1.onClick = function () {
-        mylogger.setText( "UIPulldownMenu action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UIPulldownMenu support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uipulldownmenu.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uipulldownmenulayout");
     button2.onClick = function () {
-        mylogger.setText( "UIPulldownMenu action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UIPulldownMenu support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uipulldownmenu.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiradiobutton.js

@@ -1,15 +1,23 @@
+// UIRadioButton application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
 
     var button1 = mylayout.getWidget("demoradio");
     button1.onClick = function () {
-        mylogger.setText( "UIRadioButton action : " +  button1.id + " state is " + button1.value);
+        mylogger.setText( "UIRadioButton event : " +  button1.id + " state is " + button1.value);
     };
 
-    var button2 = mylayout.getWidget("radioset");
+    //
+    // action functions
+    //
+
+   var button2 = mylayout.getWidget("radioset");
     button2.onClick = function () {
         mylayout.getWidget("demoradio").value = 1;
         mylogger.setText( "UIRadioButton action : " +  button1.id + " set to 1");
@@ -20,16 +28,20 @@ exports.init = function(mylayout,mylogger) {
         mylayout.getWidget("demoradio").value = 0;
         mylogger.setText( "UIRadioButton action : " +  button1.id + " set to 0");
     };
+    
+    //
+    // support functions
+    //
 
     var button5 = mylayout.getWidget("uiradiobuttoncode");
     button5.onClick = function () {
-        mylogger.setText( "UIRadioButton action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UIRadioButton support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Components/code_uiradiobutton.js", mylayout );
     };
 
     var button6 = mylayout.getWidget("uiradiobuttonlayout");
     button6.onClick = function () {
-        mylogger.setText( "UIRadioButton action : " +  button6.id + " was pressed ");
+        mylogger.setText( "UIRadioButton support : " +  button6.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiradiobutton.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uisceneview.js

@@ -1,3 +1,4 @@
+// UISceneView application source code
 // some code from UISceneview2D sample program
 'use strict';
 var utils = require("Scripts/utils");
@@ -10,6 +11,11 @@ exports.init = function(mylayout,mylogger) {
         return; // already initialized.
     }
 
+
+    //
+    // action functions
+    //
+
 // note : the UISceneView widget does not have a corresponding Turbobadger widget, its ALL Atomic.
 // so we have to build it in source code / scripting
 
@@ -25,16 +31,33 @@ exports.init = function(mylayout,mylogger) {
     } else mylogger.setText( "UISceneView: Didnt create UISceneViewDemo widget");
 
     var lpx = new Atomic.UILayoutParams();  // size it just right
-    lpx.width = 256;
-    lpx.height = 256;
-    lpx.minWidth = 256;
-    lpx.minHeight = 256;
-    lpx.maxWidth = 256;
-    lpx.maxHeight = 256;
+    lpx.width = 640;
+    lpx.height = 320;
+    lpx.minWidth = 640;
+    lpx.minHeight = 320;
+    lpx.maxWidth = 640;
+    lpx.maxHeight = 320;
     mysceneview.layoutParams = lpx;
 
+    var lower = mylayout.getWidget("uisceneviewlower");
     var mysvc = mylayout.getWidget("sceneviewcontainer"); // get the container layout
-    mysvc.addChild(mysceneview);  // drop it in
+    mysvc.addChildBefore(mysceneview, lower);  // drop it in
+
+    //
+    // support functions
+    //
+
+    var button1 = mylayout.getWidget("uisceneviewcode");
+    button1.onClick = function () {
+        mylogger.setText( "UISceneView support : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uisceneview.js", mylayout );
+    };
+
+    var button2 = mylayout.getWidget("uisceneviewlayout");
+    button2.onClick = function () {
+        mylogger.setText( "UISceneView support : " +  button2.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uisceneview.ui.txt", mylayout );
+    };
 
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiscrollbar.js

@@ -1,3 +1,4 @@
+// UIScrollBar application source code
 'use strict';
 var utils = require("Scripts/utils");
 
@@ -5,20 +6,28 @@ exports.init = function(mylayout,mylogger) {
 
     var sb = mylayout.getWidget("scrollbardemo");
 
+    //
+    // widget event functions
+    //
+
     sb.subscribeToEvent( "WidgetEvent", function (ev) {
         if ( ev.type == Atomic.UI_EVENT_TYPE_CHANGED && sb == ev.target )
-            mylogger.setText( "UIScrollBar action : " + sb.id + " changed value = `" + sb.value + "` event type = " + ev.type);
+            mylogger.setText( "UIScrollBar event : " + sb.id + " changed value = `" + sb.value + "` event type = " + utils.eventReport(ev.type));
     });
 
+    //
+    // support functions
+    //
+
     var button5 = mylayout.getWidget("uiscrollbarcode");
     button5.onClick = function () {
-        mylogger.setText( "UIScrollBar action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UIScrollBar support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Components/code_uiscrollbar.js", mylayout );
     };
 
     var button6 = mylayout.getWidget("uiscrollbarlayout");
     button6.onClick = function () {
-        mylogger.setText( "UIScrollBar action : " +  button6.id + " was pressed ");
+        mylogger.setText( "UIScrollBar support : " +  button6.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiscrollbar.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiscrollcontainer.js

@@ -1,17 +1,22 @@
+// UIScrollContainer application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uiscrollcontainercode");
     button1.onClick = function () {
-        mylogger.setText( "UIScrollContainer action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UIScrollContainer support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uiscrollcontainer.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uiscrollcontainerlayout");
     button2.onClick = function () {
-        mylogger.setText( "UIScrollContainer action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UIScrollContainer support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiscrollcontainer.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uisection.js

@@ -1,28 +1,36 @@
+// UISection application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
 
     var sec1 = mylayout.getWidget("UISectionDemo");
     sec1.subscribeToEvent( sec1, "WidgetEvent", function (ev) {
-        mylogger.setText( "UISection action : " + sec1.id + " generated event type = " + ev.type + " value = " + sec1.value);
+        mylogger.setText( "UISection event : " + sec1.id + " generated event type = " + utils.eventReport(ev.type) + " value = " + sec1.value);
     });
 
     var sec2 = mylayout.getWidget("UISection2Demo");
     sec2.subscribeToEvent( sec2, "WidgetEvent", function (ev) {
-        mylogger.setText( "UISection action : " + sec2.id + " generated event type = " + ev.type + " value = " + sec2.value);
+        mylogger.setText( "UISection event : " + sec2.id + " generated event type = " + utils.eventReport(ev.type) + " value = " + sec2.value);
     });
 
+    //
+    // support functions
+    //
+
     var button4 = mylayout.getWidget("uisectioncode");
     button4.onClick = function () {
-        mylogger.setText( "UISection action : " +  button4.id + " was pressed");
+        mylogger.setText( "UISection support : " +  button4.id + " was pressed");
         utils.viewCode ( "Components/code_uisection.js", mylayout );
     };
 
     var button5 = mylayout.getWidget("uisectionlayout");
     button5.onClick = function () {
-        mylogger.setText( "UISection action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UISection support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uisection.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiselectdropdown.js

@@ -1,3 +1,4 @@
+// UISelectDropdown application source code
 'use strict';
 var utils = require("Scripts/utils");
 
@@ -5,20 +6,28 @@ exports.init = function(mylayout,mylogger) {
 
     var dropdown = mylayout.getWidget("selectdropdowndemo");
 
+    //
+    // widget event functions
+    //
+
     dropdown.subscribeToEvent( "WidgetEvent", function (ev) {
         if ( ev.type == Atomic.UI_EVENT_TYPE_CHANGED && dropdown == ev.target )
-            mylogger.setText( "UISelectDropdown action : " + dropdown.id + " changed value to " + dropdown.text);
+            mylogger.setText( "UISelectDropdown event : " + dropdown.id + " changed value to " + dropdown.text);
     });
 
+    //
+    // support functions
+    //
+
     var button5 = mylayout.getWidget("uiselectdropdowncode");
     button5.onClick = function () {
-        mylogger.setText( "UISelectDropdown action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UISelectDropdown support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Components/code_uiselectdropdown.js", mylayout );
     };
 
     var button6 = mylayout.getWidget("uiselectdropdownlayout");
     button6.onClick = function () {
-        mylogger.setText( "UISelectDropdown action : " +  button6.id + " was pressed ");
+        mylogger.setText( "UISelectDropdown support : " +  button6.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiselectdropdown.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiselectitem.js

@@ -1,8 +1,13 @@
+// UISelectItem and UISelectItemSource application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // action functions
+    //
+
     var mylist = new Atomic.UISelectList();
     mylist.id = "UISelectItemList"; // tag it, in case we want to get it again later
 
@@ -15,8 +20,9 @@ exports.init = function(mylayout,mylogger) {
     lpx.maxHeight = 256;
     mylist.layoutParams = lpx;
 
+    var lower = mylayout.getWidget("selectitemlower"); // get the container layout
     var myc = mylayout.getWidget("selectitemlayout"); // get the container layout
-    myc.addChild(mylist);  // drop it in
+    myc.addChildBefore(mylist, lower);  // drop it in
 
     var sis = new Atomic.UISelectItemSource();  // make the selectitemsource
 
@@ -61,23 +67,31 @@ exports.init = function(mylayout,mylogger) {
         mylist.setSource(sis);
     };
 
+    //
+    // widget event functions
+    //
+
+    mylist.subscribeToEvent( mylist, "WidgetEvent", function (ev) {
+        if ( ev.type == Atomic.UI_EVENT_TYPE_CLICK)
+            mylogger.setText( "UISelectItem event : " + mylist.id + " selected entry = `" + mylist.getSelectedItemString() + "` value = " + mylist.value);
+    });
+
+    //
+    // support functions
+    //
+
     var button9 = mylayout.getWidget("uiselectitemcode");
     button9.onClick = function () {
-        mylogger.setText( "UISelectItem action : " +  button9.id + " was pressed ");
+        mylogger.setText( "UISelectItem support : " +  button9.id + " was pressed ");
         utils.viewCode ( "Components/code_uiselectitem.js", mylayout );
     };
 
     var button8 = mylayout.getWidget("uiselectitemlayout");
     button8.onClick = function () {
-        mylogger.setText( "UISelectItem action : " +  button8.id + " was pressed ");
+        mylogger.setText( "UISelectItem support : " +  button8.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiselectitem.ui.txt", mylayout );
     };
 
 
-    mylist.subscribeToEvent( mylist, "WidgetEvent", function (ev) {
-        if ( ev.type == Atomic.UI_EVENT_TYPE_CLICK)
-            mylogger.setText( "UISelectItem action : " + mylist.id + " selected entry = `" + mylist.getSelectedItemString() + "` value = " + mylist.value);
-    });
-
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiselectlist.js

@@ -1,8 +1,13 @@
+// UISelectList application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // action functions
+    //
+
     var button1 = mylayout.getWidget("selectlistadd");
     button1.onClick = function () {
         var list1 = mylayout.getWidget("UISelectListDemo");
@@ -39,21 +44,29 @@ exports.init = function(mylayout,mylogger) {
         mylogger.setText( "UISelectList action : " + list1.id + " added new list entries");
     };
 
+    //
+    // widget event functions
+    //
+
     var mylist = mylayout.getWidget("UISelectListDemo");
     mylist.subscribeToEvent( mylist, "WidgetEvent", function (ev) {
         if ( ev.type == Atomic.UI_EVENT_TYPE_CLICK)
-            mylogger.setText( "UISelectList action : " + mylist.id + " selected entry = `" + mylist.getSelectedItemString() + "` value = " + mylist.value);
+            mylogger.setText( "UISelectList event : " + mylist.id + " selected entry = `" + mylist.getSelectedItemString() + "` value = " + mylist.value);
     });
 
+    //
+    // support functions
+    //
+
     var button5 = mylayout.getWidget("uiselectlistcode");
     button5.onClick = function () {
-        mylogger.setText( "UISelectList action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UISelectList support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Components/code_uiselectlist.js", mylayout );
     };
 
     var button6 = mylayout.getWidget("uiselectlistlayout");
     button6.onClick = function () {
-        mylogger.setText( "UISelectList action : " +  button6.id + " was pressed ");
+        mylogger.setText( "UISelectList support : " +  button6.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiselectlist.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiseparator.js

@@ -1,17 +1,22 @@
+// UISeparator application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uiseparatorcode");
     button1.onClick = function () {
-        mylogger.setText( "UISeparator action : " +  button1.id + " was pressed ");
-        utils.viewCode ( "Components/code_uicontainer.js", mylayout );
+        mylogger.setText( "UISeparator support : " +  button1.id + " was pressed ");
+        utils.viewCode ( "Components/code_uiseparator.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uiseparatorlayout");
     button2.onClick = function () {
-        mylogger.setText( "UISeparator action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UISeparator support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiseparator.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiskinimage.js

@@ -1,17 +1,22 @@
+// UISkinImage application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uiskinimagecode");
     button1.onClick = function () {
-        mylogger.setText( "UISkinImage action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UISkinImage support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uiskinimage.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uiskinimagelayout");
     button2.onClick = function () {
-        mylogger.setText( "UISkinImage action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UISkinImage support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiskinimage.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uislider.js

@@ -1,22 +1,31 @@
+// UISlider application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // widget event functions
+    //
+
     var slider1 = mylayout.getWidget("sliderdemo");
     slider1.onChanged = function(ev) {
-        mylogger.setText( "UISlider action : " + slider1.id + " changed value to " +  slider1.value);
+        mylogger.setText( "UISlider event : " + slider1.id + " changed value to " +  slider1.value);
     };
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uislidercode");
     button1.onClick = function () {
-        mylogger.setText( "UISlider action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UISlider support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uislider.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uisliderlayout");
     button2.onClick = function () {
-        mylogger.setText( "UISlider action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UISlider support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uislider.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uitabcontainer.js

@@ -1,3 +1,4 @@
+// UITabContainer application source code
 'use strict';
 var utils = require("Scripts/utils");
 
@@ -6,19 +7,26 @@ exports.init = function(mylayout,mylogger) {
     var tb = mylayout.getWidget("UITabContainerDemo");
     tb.setCurrentPage(0);   // fix or it looks like crap
 
+    //
+    // widget event functions
+    //
+
     tb.subscribeToEvent( "WidgetEvent", function (ev) {
         if ( ev.type == Atomic.UI_EVENT_TYPE_TAB_CHANGED && tb == ev.target ) {
-            mylogger.setText( "UITabContainer action : " + tb.id + " UI_EVENT_TYPE_TAB_CHANGED to " + tb.getCurrentPage() + " id: " + tb.getCurrentPageWidget().id);
+            mylogger.setText( "UITabContainer event : " + tb.id + " UI_EVENT_TYPE_TAB_CHANGED to " + tb.getCurrentPage() + " id: " + tb.getCurrentPageWidget().id);
         }
     });
 
+    //
+    // action functions
+    //
+
     var button1 = mylayout.getWidget("uitabcontainerremove");
     button1.onClick = function () {
         mylogger.setText( "UITabContainer action : " +  button1.id + " was pressed ");
         var current = tb.getCurrentPage();
         tb.deletePage(current);
     };
-
     var button2 = mylayout.getWidget("uitabcontaineradd");
     button2.onClick = function () {
         mylogger.setText( "UITabContainer action : " +  button2.id + " was pressed ");
@@ -29,24 +37,55 @@ exports.init = function(mylayout,mylogger) {
     button3.onClick = function () {
         mylogger.setText( "UITabContainer action : " +  button3.id + " was pressed ");
         var lo = new Atomic.UILayout();
-        lo.setLayoutConfig ( "YACAC" );  // YACAC!
-        lo.addChild ( new Atomic.UIButton() );
-        lo.addChild ( new Atomic.UIButton() );
-        lo.addChild ( new Atomic.UIButton() );
-        lo.addChild ( new Atomic.UIButton() );
-        lo.addChild ( new Atomic.UIButton() );
-        tb.addTabPageWidget("New Code", lo );
+        lo.setLayoutConfig ( "YAGAC" );  // YACAC!
+        
+        var myeditfield = new Atomic.UIEditField();
+        myeditfield.setGravity( Atomic.UI_GRAVITY_ALL);
+        myeditfield.setMultiline(true);
+        var filex = Atomic.cache.getFile("Components/code_uitabcontainer.js");
+        var textx = filex.readText();
+        filex.close(); 
+        myeditfield.text = textx;
+
+        var myfont = new Atomic.UIFontDescription(); // put in a coder font
+        myfont.setSize(16);
+        myfont.setId("Vera");
+        myeditfield.setFontDescription (myfont);
+
+        lo.addChild (myeditfield);
+        tb.addTabPageWidget("New Code", lo);
     };
 
+    var button0 = mylayout.getWidget("uitabcontainerundock");
+    button0.onClick = function () {
+        mylogger.setText( "UITabContainer action : " +  button0.id + " was pressed ");
+        var current = tb.getCurrentPage();
+        tb.undockPage(current);
+    };
+    var button00 = mylayout.getWidget("uitabcontainerredock");
+    button00.onClick = function () {
+        mylogger.setText( "UITabContainer action : " +  button00.id + " was pressed ");
+        if ( !tb.dockWindow ( "tab1" ) )
+            if ( !tb.dockWindow ( "tab2" ) )
+                if ( !tb.dockWindow ( "tab3" ) )
+                    if ( !tb.dockWindow ( "New File" ) )
+                        if ( !tb.dockWindow ( "New Code" ) )
+                                mylogger.setText( "UITabContainer action : no more windows to dock.");
+    };
+
+    //
+    // support functions
+    //
+
     var button4 = mylayout.getWidget("uitabcontainercode");
     button4.onClick = function () {
-        mylogger.setText( "UITabContainer action : " +  button4.id + " was pressed ");
+        mylogger.setText( "UITabContainer support : " +  button4.id + " was pressed ");
         utils.viewCode ( "Components/code_uitabcontainer.js", mylayout );
     };
 
     var button5 = mylayout.getWidget("uitabcontainerlayout");
     button5.onClick = function () {
-        mylogger.setText( "UITabContainer action : " +  button5.id + " was pressed ");
+        mylogger.setText( "UITabContainer support : " +  button5.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uitabcontainer.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uitextfield.js

@@ -1,17 +1,22 @@
+// UITextField application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uitextfieldcode");
     button1.onClick = function () {
-        mylogger.setText( "UITextField action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UITextField support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uitextfield.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uitextfieldlayout");
     button2.onClick = function () {
-        mylogger.setText( "UITextField action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UITextField support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uitextfield.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uitexturewidget.js

@@ -1,8 +1,12 @@
+// UITextureWidget application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // action functions
+    //
 
     var mytexturewidget = new Atomic.UITextureWidget();  // make a widget
     mytexturewidget.id = "UITextureWidgetDemo"; // tag it, in case we want to get it again later
@@ -23,13 +27,17 @@ exports.init = function(mylayout,mylogger) {
     lpx.maxHeight = 256;
     mytexturewidget.layoutParams = lpx;
 
+	var lower = mylayout.getWidget("uitexturewidgetlower");
     var myc = mylayout.getWidget("uitwcontainer"); // get the container layout
-    myc.addChild(mytexturewidget);  // drop it in
+    myc.addChildBefore(mytexturewidget,lower);  // drop it in
+
+    var lo1 = new Atomic.UILayout();
+    myc.addChildBefore(lo1, lower);
 
     var b1 = new Atomic.UIButton();
     b1.id = "uitexturewidgetch1";
     b1.text = "Change texture to new build";
-    myc.addChild(b1);
+    lo1.addChild(b1);
     b1.onClick = function () {
         mylogger.setText( "UITextureWidget action : " +  b1.id + " was pressed ");
         var tex1 = mylayout.getWidget("UITextureWidgetDemo" );
@@ -39,7 +47,7 @@ exports.init = function(mylayout,mylogger) {
     var b2 = new Atomic.UIButton();
     b2.id = "uitexturewidgetch2";
     b2.text = "Change texture to colorwheel";
-    myc.addChild(b2);
+    lo1.addChild(b2);
     b2.onClick = function () {
         mylogger.setText( "UITextureWidget action : " +  b2.id + " was pressed ");
         var tex1 = mylayout.getWidget("UITextureWidgetDemo" );
@@ -49,12 +57,28 @@ exports.init = function(mylayout,mylogger) {
     var b3 = new Atomic.UIButton();
     b3.id = "uitexturewidgetch3";
     b3.text = "Change texture to planet";
-    myc.addChild(b3);
+    lo1.addChild(b3);
     b3.onClick = function () {
         mylogger.setText( "UITextureWidget action : " +  b3.id + " was pressed ");
         var tex1 = mylayout.getWidget("UITextureWidgetDemo" );
         tex1.setTexture(Atomic.cache.getResource("Texture2D", "Textures/planet.jpg") );
     };
 
+    //
+    // support functions
+    //
+
+    var button6 = mylayout.getWidget("uitexturewidgetcode");
+    button6.onClick = function () {
+        mylogger.setText( "UITextureWidget support : " +  button6.id + " was pressed ");
+        utils.viewCode ( "Components/code_uitexturewidget.js", mylayout );
+    };
+
+    var button7 = mylayout.getWidget("uitexturewidgetlayout");
+    button7.onClick = function () {
+        mylogger.setText( "UITextureWidget support : " +  button7.id + " was pressed ");
+        utils.viewCode ( "Scenes/layout_uitexturewidget.ui.txt", mylayout );
+    };
+
 };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiwidget.js

@@ -1,17 +1,22 @@
+// UIWidget application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger) {
 
+    //
+    // support functions
+    //
+
     var button1 = mylayout.getWidget("uiwidgetcode");
     button1.onClick = function () {
-        mylogger.setText( "UIWidget action : " +  button1.id + " was pressed ");
+        mylogger.setText( "UIWidget support : " +  button1.id + " was pressed ");
         utils.viewCode ( "Components/code_uiwidget.js", mylayout );
     };
 
     var button2 = mylayout.getWidget("uiwidgetlayout");
     button2.onClick = function () {
-        mylogger.setText( "UIWidget action : " +  button2.id + " was pressed ");
+        mylogger.setText( "UIWidget support : " +  button2.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiwidget.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Components/code_uiwindow.js

@@ -1,8 +1,13 @@
+// UIWindow application source code
 'use strict';
 var utils = require("Scripts/utils");
 
 exports.init = function(mylayout,mylogger,myview) {
 
+    //
+    // action functions
+    //
+
     var button1 = mylayout.getWidget("windowdemo");
     button1.onClick = function () {
         var window = new Atomic.UIWindow();
@@ -35,15 +40,19 @@ exports.init = function(mylayout,mylogger,myview) {
         window2.center();
     };
 
+    //
+    // support functions
+    //
+
     var button3 = mylayout.getWidget("uiwindowcode");
     button3.onClick = function () {
-        mylogger.setText( "UIWindow action : " +  button3.id + " was pressed ");
+        mylogger.setText( "UIWindow support : " +  button3.id + " was pressed ");
         utils.viewCode ( "Components/code_uiwindow.js", mylayout );
     };
 
     var button4 = mylayout.getWidget("uiwindowlayout");
     button4.onClick = function () {
-        mylogger.setText( "UIWindow action : " +  button4.id + " was pressed ");
+        mylogger.setText( "UIWindow support : " +  button4.id + " was pressed ");
         utils.viewCode ( "Scenes/layout_uiwindow.ui.txt", mylayout );
     };
 

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uibargraph.ui.txt

@@ -1,6 +1,7 @@
 # UIBargraph widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIBargraph widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIBargraph widget\nThis widget displays a value from 0-100"
 	TBContainer
 		TBBarGraph: value: 0, skin: Graph, color: #00AF34, axis: y, connection: graphit, margin: 4
 			lp: width: 32, height: 64
@@ -8,8 +9,9 @@ TBLayout: axis: y
 		TBBarGraph: value: 0, skin: background_solid, color: #AF3400, axis: x, connection: graphit
 			lp: width: 200, height: 32
 	TBContainer
-		TBBarGraph: value: 0, skin: background_solid, color: #0034AF, axis: x, connection: graphit
+		TBBarGraph: value: 0, skin: Gauge, color: #0034AF, axis: x, opacity: 0.7, connection: graphit
 			lp: width: 200, height: 32
+	TBTextField: id: spacer, text: "  "
 	TBTextField: text: "Use this slider to change the bargraph input value"
 	TBSlider: min: 0, max: 100, value: 21, connection: graphit
 		lp: width: 200

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uibutton.ui.txt

@@ -1,6 +1,8 @@
 # UIButton widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this are Examples of the UIButton widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIButton widget\nThis widget generates an event when pressed.\nThe Statusbar will display the event information."
+	TBTextField: id: spacer, text: "   "
 	TBContainer
 		TBLayout: axis: y
 			TBButton: text: "Press me!", id: demobutton

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uicheckbox.ui.txt

@@ -1,8 +1,11 @@
 # UICheckBox widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UICheckBox widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UICheckbox widget\nThis widget displays and can change a boolean state.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBContainer
 		TBCheckBox: id: democheck
+	TBTextField: id: spacer, text: "   "
 	TBButton: id: "checkset", text: "Set the Checkbox ON"
 	TBButton: id: "checkunset", text: "Set the Checkbox OFF"
 	TBTextField: id: spacer, text: "   "

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiclicklabel.ui.txt

@@ -1,10 +1,13 @@
 # UIClickLabel widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIClickLabel widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIClickLabel widget\nThis widget is a helper for the Checkbox and RadioButton.\nIt will operate those buttons by clicking on the label next to it."
 	TBContainer
 		TBLayout: axis: y
-			TBClickLabel: id: democlicklabel, text: "Click Label"
+			TBClickLabel: id: democlicklabel, text: "Click my Label"
 				TBCheckBox: id: somecheck
+			TBClickLabel: id: democlicklabel, text: "Click my Label"
+				TBRadioButton: id: someradio
 	TBTextField: id: spacer, text: "   "
 	TBLayout
 		TBButton: text: "UIClickLabel help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiclicklabel.html"

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uicolorwheel.ui.txt

@@ -1,6 +1,7 @@
 # UIColorWheel widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIColorWheel widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIColorWheel widget\nThis widget can pick an HS(V) color.\nThe Statusbar will display the results."
 	TBContainer
 		TBColorWheel: id: colorwheeldemo, skin: HSVSkin
 			lp: width: 256, height: 256

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uicolorwidget.ui.txt

@@ -1,12 +1,13 @@
 # UIColorWidget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIColorWidget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIColorWidget widget\nThis widget displays an RGB color."
 	TBContainer
 		TBColorWidget: value: 0, skin: background_solid, color: #00AF77, id: colorwidgetdemo
 			lp: width: 256, height: 64
-	TBButton: text: "Change to red", id: uicolorwidgetred
-	TBButton: text: "Change to green", id: uicolorwidgetgreen
-	TBButton: text: "Change to blue", id: uicolorwidgetblue
+	TBButton: text: "Change color to red", id: uicolorwidgetred
+	TBButton: text: "Change color to green", id: uicolorwidgetgreen
+	TBButton: text: "Change color to blue", id: uicolorwidgetblue
 	TBTextField: id: spacer, text: "   "
 	TBLayout
 		TBButton: text: "UIColorWidget help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uicolorwidget.html"

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uicontainer.ui.txt

@@ -1,6 +1,8 @@
 # UIContainer widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIContainer widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIContainer widget\nThis is a container that displays a etched line around its perimeter."
+	TBTextField: id: spacer, text: "   "
 	TBContainer
 		TBWidget
 			lp: width: 256, height: 64

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uieditfield.ui.txt

@@ -1,17 +1,17 @@
 # UIEditField widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIEditField widget"
-	TBTextField: text: "*Hint - If you want to display XML correctly, turn off Styling, like `styling: 0`"
-	TBTextField: text: "*Another Hint - there is a built-in context menu with M3, or long press on mobile."
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIEditField widget\nThis widget is used to display text, and can change the text it contains.\nThe Statusbar will display the results.\n*Hint - If you want to display XML correctly, turn off Styling, like `styling: 0`\n*Another Hint - there is a built-in context menu with M3, or long press on mobile."
 	TBContainer
 		TBEditField: id: editfieldsingle, text: "Example of a single line EditField widget"
 			lp: pref-width: 512dp
 	TBTextField: text: "Example of a multline line EditField widget"
 	TBEditField: id: editfieldmulti, multiline: 1, styling: 1, readonly: 0, adapt-to-content: 0
-		lp: pref-width: 512dp, pref-height: 256dp
-	TBButton: id: "editfieldadd", text: "Add file to Multiline UIEditField"
-	TBButton: id: "editfieldclr", text: "Clear Multiline UIEditField"
+		lp: pref-width: 512dp, pref-height: 200dp
 	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: id: "editfieldadd", text: "Add file to Multiline UIEditField"
+		TBButton: id: "editfieldclr", text: "Clear Multiline UIEditField"
 	TBLayout
 		TBButton: text: "UIEditField help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uieditfield.html"
 		TBButton: text: "UIEditField application code", id: uieditfieldcode

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uifinderwindow.ui.txt

@@ -1,6 +1,8 @@
 # UIFinderWindow widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIFinderWindow widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIFinderWindow\nThis widget is used to browse the filesystem for files or folders.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBButton: id: "filefinder", text: "Bring up a File Finder..."
 	TBButton: id: "folderfinder", text: "Bring up a Folder Finder..."
 	TBTextField: id: spacer, text: "   "

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uifontdescription.ui.txt

@@ -1,6 +1,7 @@
 # UIFontdescription object layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIFontdescription object"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIFontdescription object\nThis object is used to define a font and size attribute\nIt is then assigned to a widget to change the font displayed."
 	TBTextField: text: "UIFontdescription size 8"
 		font: size: 8dp
 	TBTextField: text: "UIFontdescription size 18"
@@ -13,6 +14,6 @@ TBLayout: axis: y
 	TBTextField: text: "Size 8", id: changetext, squeezable: true
 	TBTextField: id: spacer, text: "   "
 	TBLayout
-		TBButton: text: "UIFontdescription help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiinlineselect.html"
-		TBButton: text: "UIFontdescription application code", id: uifontdecsriptioncode
-		TBButton: text: "UIFontdescription layout code", id: uifontdecsriptionlayout
+		TBButton: text: "UIFontdescription help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uifontdescription.html"
+		TBButton: text: "UIFontdescription application code", id: uifontdescriptioncode
+		TBButton: text: "UIFontdescription layout code", id: uifontdescriptionlayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiimagewidget.ui.txt

@@ -1,6 +1,7 @@
 # UIImageWidget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIImageWidget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIImageWidget\nThis widget can display an image from a file.\n"
 	TBContainer
 		TBImageWidget: id: imagewidgetdemo, filename: "Textures/newbuilddetected_header.jpg"
 	TBButton: text: "Change image to colorwheel", id: imagecolor

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiinlineselect.ui.txt

@@ -1,7 +1,10 @@
 # UIInlineSelect widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIInlineSelect widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIInlineSelect widget\nThis widget displays and can change a value with the editfield and arrow buttons.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBInlineSelect: id: inlineselectdemo
+	TBTextField: id: spacer, text: "   "
 	TBTextField: text: "Use this slider to change the step size from .1 to 2"
 	TBSlider: min: 0.1, max: 2.0, value: 1, id: ilsstep
 		lp: width: 200

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uilayout.ui.txt

@@ -1,5 +1,6 @@
 # UILayout widget layout file
 TBLayout: id: uilayoutcontainer, config: "Y----"
-	TBTextField: text: "these are examples of the UILayout widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UILayout widget. This widget is used to contain and arrange widgets into rows and columns."
 
 

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uilayoutparams.ui.txt

@@ -1,6 +1,7 @@
 # UILayoutParams Object layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of the UILayoutParams Object"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UILayoutParams object\nThis object is used to effect sizing of items in a Layout,\nwhen the general layout rules are not sufficent."
 	TBTextField: text: ""
 	TBLayout: distribution: gravity
 		TBButton: text: "64x64", squeezable: true

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uilistview.ui.txt

@@ -1,8 +1,11 @@
 # UIListView widget layout file
 TBLayout: axis: y, id: listviewcontainer
-	TBTextField: text: "this is the Example of a UIListView widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIListView widget\nThis widget can display a tree structure.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 # there is NO TBListView widget, its entirely an Atomic Widget, well add it with code
+	TBTextField: id: "uilistviewlower", text: "   "
 	TBLayout
-		TBButton: id: "listviewhelp", text: "UIListView help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uilistview.html"
+		TBButton: text: "UIListView help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uilistview.html"
 		TBButton: text: "UIListView application code", id: uilistviewcode
 		TBButton: text: "UIListView application code", id: uilistviewlayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uimenuitem.ui.txt

@@ -1,14 +1,17 @@
 # UIMenuItem and UIMenuItemSource objects layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIMenuItem and UIMenuItemSource objects"
-	TBButton: text: "Add UIMenuItem text", id: uimi1
-	TBButton: text: "Add UIMenuItem text,id", id: uimi2
-	TBButton: text: "Add UIMenuItem text,id,icon", id: uimi3
-	TBButton: text: "Add UIMenuItem Atomic entry", id: uimi4
-	TBButton: text: "Clear UIMenuItemSource", id: uimi5
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIMenuItem and UIMenuItemSource objects\nThese objects are used to program the contents of popup menus."
 	TBTextField: id: spacer, text: "   "
 	TBButton: text: "Push for a resulting menu", id: uimenuitempush
 	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "Add UIMenuItem text", id: uimi1
+		TBButton: text: "Add UIMenuItem text,id", id: uimi2
+		TBButton: text: "Add UIMenuItem text,id,icon", id: uimi3
+		TBButton: text: "Add UIMenuItem Atomic entry", id: uimi4
+		TBButton: text: "Clear UIMenuItemSource", id: uimi5
+	TBTextField: id: spacer, text: "   "
 	TBLayout
 		TBButton: text: "UIMenuItem help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uimenuitem.html"
 		TBButton: text: "UIMenuItem application code", id: uimenuitemcode

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uimenuwindow.ui.txt

@@ -1,6 +1,8 @@
 # UIMenuWindow widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIMenuWindow widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIMenuWindow widget\nThis widget is used to create popup menus.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBButton: text: "push for a UIMenuWindow", id: uimenuwindowpush
 	TBTextField: id: spacer, text: "   "
 	TBLayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uimessagewindow.ui.txt

@@ -1,6 +1,8 @@
 # UIMessageWindow widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIMessageWindow widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIMessageWindow widget\nThis widget is used to create custom message windows.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBButton: id: "msgnone", text: "Bring up a MessageWindow..."
 	TBButton: id: "msgok", text: "Bring up an OK MessageWindow..."
 	TBButton: id: "msgkcancel", text: "Bring up an OK CANCEL MessageWindow..."

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uipromptwindow.ui.txt

@@ -1,6 +1,8 @@
 # UIPromptWindow widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIPromptWindow widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIPromptWindow widget\nThis widget is used to create a window which can return a string that is entered.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBButton: id: "stringfinder", text: "Bring up a Prompt window..."
 	TBTextField: id: spacer, text: "   "
 	TBLayout

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uipulldownmenu.ui.txt

@@ -22,7 +22,10 @@ TBLayout: axis: y, size: available, position: gravity, distribution: gravity
 			items:
 				item: text: "Help...", id: HelpHelp
 				item: text: "About this program...", id: HelpAbout
-	TBTextField: text: "^ this is the Example of a UIPulldownMenu widget"
+	TBTextField: text: "^ There are some UIPulldownMenus"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIPulldownMenu widget\nThis widget is used to create pulldown menus, which typically are in a menubar.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBWidget: gravity: all
 	TBLayout
 		TBButton: text: "UIPulldownMenu help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uipulldownmenu.html"

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiradiobutton.ui.txt

@@ -1,8 +1,11 @@
 # UIRadioButton widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIRadioButton widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIRadioButton widget\nThis widget displays and can change a boolean state.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBContainer
 		TBRadioButton: id: demoradio
+	TBTextField: id: spacer, text: "   "
 	TBButton: id: "radioset", text: "Set the Radiobutton ON"
 	TBButton: id: "radiounset", text: "Set the Radiobutton OFF"
 	TBTextField: id: spacer, text: "   "

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uisceneview.ui.txt

@@ -1,9 +1,12 @@
 # UISceneView widget layout file
 TBLayout: axis: y, id: sceneviewcontainer
-	TBTextField: text: "this is the Example of a UISceneView widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UISceneView widget\nThis widget can display an Atomic scene."
+	TBTextField: id: spacer, text: "   "
 # there is NO TBSceneView widget, its entirely an Atomic Widget, well add it with code
-	TBLayout
-		TBButton: id: "scenceviewhelp", text: "UISceneView help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uisceneview.html"
+	TBTextField: id: "uisceneviewlower", text: "   "
+	TBLayout:
+		TBButton: text: "UISceneView help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uisceneview.html"
 		TBButton: text: "UISceneView application code", id: uisceneviewcode
 		TBButton: text: "UISceneView layout code", id: uisceneviewlayout
 

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiscrollbar.ui.txt

@@ -1,6 +1,8 @@
 # UIScrollBar widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIScrollBar widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIScrollBar widget\nThis widget can display a range and value, and change the value.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBContainer
 		TBScrollBar: min: 0, max: 100, thumb: 20, value: 5, id: scrollbardemo
 			lp: width: 200dp

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiscrollcontainer.ui.txt

@@ -1,11 +1,11 @@
 # UIScrollContainer widget layout file
 TBLayout: axis: y, size: available, position: gravity, distribution: gravity
-	TBTextField: text: "this is the Example of a UIScrollContainer widget"
 	TBScrollContainer
 		gravity all
 		TBLayout: axis: y
 			TBLayout: size: available, position: gravity, distribution: available
-				TBButton: text: 1
+				TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 0, skin: "sheet_cell"
+					text: "UIScrollContainer widget\nThis widget can display other widgets\nIf they exceed the UIScrollContainer boundries, it add scrollbars to view these areas."
 					lp: pref-width: 500, pref-height: 480
 				TBButton: text: 2
 					lp: pref-width: 600, pref-height: 480

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uisection.ui.txt

@@ -1,8 +1,9 @@
 # UISection widget layout file
 TBLayout: axis: y, size: available, position: gravity, distribution: gravity
-	TBTextField: text: "this is the Example of a UISection widget"
-	TBSection: value: 0, text: "UISection 1", id: "UISectionDemo"
+	TBSection: value: 1, text: "UISection 1", id: "UISectionDemo"
 		TBLayout: axis: y
+			TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+				text: "UISection widget\nThis widget can display other widgets and collapse the viewing area\nThe Statusbar will display the results."
 			TBTextField: text: "this is UISection contents"
 			TBTextField: text: "this is UISection contents"
 			TBTextField: text: "this is UISection contents"

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiselectdropdown.ui.txt

@@ -1,6 +1,8 @@
 # UISelectDropdown widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UISelectDropdown widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UISelectDropdown widget\nThis widget can display a list of options, and can select one to make it the current value.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBSelectDropdown: id: selectdropdowndemo
 		lp: min-width: 128dp
 		items:

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiselectitem.ui.txt

@@ -1,12 +1,16 @@
 # UISelectItem and UISelectItemSource object layout file
 TBLayout: axis: y, id: selectitemlayout
-	TBTextField: text: "this is the Example of the UISelectItem and UISelectItemSource objects"
-	TBButton: text: "Add UISelectItem text", id: uisi1
-	TBButton: text: "Add UISelectItem text,id", id: uisi2
-	TBButton: text: "Add UISelectItem text,id,icon", id: uisi3
-	TBButton: text: "Add UISelectItem Atomic entry", id: uisi4
-	TBButton: text: "Clear UISelectItemSource", id: uisi5
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UISelectItem and UISelectItemSource objects\nThese objects are used to program the contents of UISelectList widgets."
 	TBTextField: id: spacer, text: "   "
+	TBTextField: id: selectitemlower, text: "   "
+	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: text: "Add UISelectItem text", id: uisi1
+		TBButton: text: "Add UISelectItem text,id", id: uisi2
+		TBButton: text: "Add UISelectItem text,id,icon", id: uisi3
+		TBButton: text: "Add UISelectItem Atomic entry", id: uisi4
+		TBButton: text: "Clear UISelectItemSource", id: uisi5
 	TBLayout
 		TBButton: text: "UISelectItem help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiselectitem.html"
 		TBButton: text: "UISelectItem application code", id: uiselectitemcode

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiselectlist.ui.txt

@@ -1,6 +1,8 @@
 # UISelectList widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UISelectList widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UISelectList widget\nThis widget can display a list of entries, which can be selected.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBContainer
 		TBSelectList: id: UISelectListDemo
 			items:
@@ -8,11 +10,12 @@ TBLayout: axis: y
 				item: text: "entry2", id: UISelectListE2
 				item: text: "-"
 				item: text: "entry3", id: UISelectListE3
-	TBButton: id: selectlistadd, text: "UISelectList add entry to list"
-	TBButton: id: selectlistdel, text: "UISelectList delete selected entry"
-	TBButton: id: selectlistdelall, text: "UISelectList delete all"
-	TBButton: id: selectlistnew, text: "UISelectList add new entry set"
 	TBTextField: id: spacer, text: "   "
+	TBLayout
+		TBButton: id: selectlistadd, text: "UISelectList add entry to list"
+		TBButton: id: selectlistdel, text: "UISelectList delete selected entry"
+		TBButton: id: selectlistdelall, text: "UISelectList delete all"
+		TBButton: id: selectlistnew, text: "UISelectList add new entry set"
 	TBLayout
 		TBButton: text: "UISelectList help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiselectlist.html"
 		TBButton: text: "UISelectList application code", id: uiselectlistcode

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiseparator.ui.txt

@@ -1,6 +1,8 @@
 # UISeparator widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UISeparator widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UISeparator widget\nThis widget can be used to draw an etched line between other widgets\nThere is a secret: if you add a `-` as a string in a UIMenuItem, it will add a separator in the menu."
+	TBTextField: id: spacer, text: "   "
 	TBContainer
 		TBLayout: axis: y
 			TBTextField: text: "        v          "

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiskinimage.ui.txt

@@ -1,6 +1,8 @@
 # UISkinImage widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UISkinImage widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UISkinImage widget\nThis widget is used to display a skinned bitmap in another widget."
+	TBTextField: id: spacer, text: "   "
 	TBContainer
 		TBLayout
 			TBButton: skin: 0

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uislider.ui.txt

@@ -1,6 +1,8 @@
 # UISlider widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UISlider widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UISlider widget\nThis widget can display and change a value.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
 	TBSlider: min: 0, max: 100, value: 50, id: sliderdemo
 		lp: width: 200dp
 	TBTextField: id: spacer, text: "   "

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uitabcontainer.ui.txt

@@ -1,6 +1,5 @@
 # UITabContainer widget layout file
 TBLayout: axis: y, size: available, position: gravity, distribution: gravity
-	TBTextField: text: "this is the Example of a UITabContainer widget"
 	TBTabContainer:
 		gravity all
 		id UITabContainerDemo
@@ -12,8 +11,8 @@ TBLayout: axis: y, size: available, position: gravity, distribution: gravity
 			TBButton
 				text tab3
 		TBLayout: axis: y, size: available, position: gravity, distribution: available, id: "TabLayout1"
-			TBButton: text: "TAB 1"
-				font: size: 80dp
+			TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 0, skin: "sheet_cell"
+				text: "UITabContainer widget\nThis widget can contain pages of information that can be accessed by tabs\nThe Statusbar will display the results."
 		TBLayout: axis: y, size: available, position: gravity, distribution: available, id: "TabLayout2"
 			TBButton: text: "TAB 2"
 				font: size: 80dp
@@ -22,10 +21,12 @@ TBLayout: axis: y, size: available, position: gravity, distribution: gravity
 				font: size: 80dp
 	TBTextField: id: spacer, text: "   "
 	TBLayout
+		TBButton: text: "Undock Current Tab", id: uitabcontainerundock
+		TBButton: text: "Dock", id: uitabcontainerredock
 		TBButton: text: "Remove Current Tab", id: uitabcontainerremove
 		TBButton: text: "Add a Tab file ", id: uitabcontaineradd
 		TBButton: text: "Add a Tab code", id: uitabcontainermake
 		TBButton: text: "UITabContainer help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uitabcontainer.html"
-		TBButton: text: "UITabContainer application code", id: uitabcontainercode
-		TBButton: text: "UITabContainer layout code", id: uitabcontainerlayout
+		TBButton: text: "Application code", id: uitabcontainercode
+		TBButton: text: "Layout code", id: uitabcontainerlayout
 

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uitextfield.ui.txt

@@ -1,8 +1,13 @@
 # UITextField widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UITextField widget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UITextField widget\nThis widget is used to display a single line of read only text"
+	TBTextField: id: spacer, text: "   "
 	TBContainer
-		TBTextField: text: "TextField widget"
+		TBLayout: axis: y
+			TBTextField: text: "UITextField widget example"
+			TBTextField: text: "UITextField widget at 48 point font"
+				font: size: 48dp
 	TBTextField: id: spacer, text: "   "
 	TBLayout
 		TBButton: text: "UITextField help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uitextfield.html"

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uitexturewidget.ui.txt

@@ -1,5 +1,12 @@
 # UITextureWidget layout file
 TBLayout: axis: y, id: uitwcontainer
-	TBTextField: text: "this is the Example of the UITextureWidget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UITextureWidget\nThis widget is used to display an Atomic Resource image."
+	TBTextField: id: spacer, text: "   "
 # there is NO TBTextureWidget, its entirely an Atomic Widget, well add it with code
+	TBTextField: id: "uitexturewidgetlower", text: "   "
+	TBLayout 
+		TBButton: text: "UITextureWidget help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uitexturewidget.html"
+		TBButton: text: "UITextureWidget application code", id: uitexturewidgetcode
+		TBButton: text: "UITextureWidget layout code", id: uitexturewidgetlayout
 

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiwidget.ui.txt

@@ -1,12 +1,12 @@
 # UIWidget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIWidget"
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIWidget\nThis widget is the base from which all other widgets are created.\nIt has a number of useful abillities, but normally has no display.\nIt can be useful for spacing though, and push visual widgets around."
+	TBTextField: id: spacer, text: "   "
 	TBTextField: text: "v"
 	TBWidget
 		lp: min-width 128dp, nim-height: 32dp
-	TBTextField: text: "^"
-	TBTextField: text: "There it is. You really cant do squat with a UIWidget, except use it as a spacer at times."
-	TBTextField: id: spacer, text: "   "
+	TBTextField: text: "^There it is, in all it`s glory."
 	TBLayout
 		TBButton: text: "UIWidget help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiwidget.html"
 		TBButton: text: "UIWidget application code", id: uiwidgetcode

UIPeriodicTable/JavaScript/Resources/Scenes/layout_uiwindow.ui.txt

@@ -1,8 +1,10 @@
 # UIWindow widget layout file
 TBLayout: axis: y
-	TBTextField: text: "this is the Example of a UIWindow widget"
-	TBButton: id: windowdemo, text: "Bring up a login UIWindow..."
-	TBButton: id: windowdemo1, text: "Bring up a table UIWindow..."
+	TBEditField: multiline: 1, styling: 1, readonly: 1, adapt-to-content: 1, skin: "sheet_cell"
+		text: "UIWindow widget\nThis widget is used to create custom windows.\nThe Statusbar will display the results."
+	TBTextField: id: spacer, text: "   "
+	TBButton: id: windowdemo, text: "Bring up a custom login UIWindow..."
+	TBButton: id: windowdemo1, text: "Bring up a custom table UIWindow..."
 	TBTextField: id: spacer, text: "   "
 	TBLayout
 		TBButton: id: "uiwindowhelp", text: "UIWindow help Document", url: "http://docs.atomicgameengine.com/api/classes/atomic.uiwindow.html"

UIPeriodicTable/JavaScript/Resources/Scenes/main_layout.ui.txt

@@ -28,6 +28,7 @@ TBTabContainer
 	TBLayout
 		id pagetable
 		axis y
+		distribution-position top
 		@file main_table.ui.txt
 	TBLayout
 		id pageprimary
@@ -49,11 +50,14 @@ TBTabContainer
 		distribution available
 		gravity all
 		@file main_atomic_layout.ui.txt
-TBLayout: axis: x, distribution-position: left right
-	lp: min-height: 32dp, max-height: 32dp
+TBLayout: axis: x, distribution-position: left right, size: available
+	lp: min-height: 32, max-height: 32, pref-height: 32
 	TBButton: id: exitapp
+		axis y
 		TBSkinImage: skin: LogoAtomic
+			gravity: all
+			lp: pref-width: 32, pref-height: 32
 		gravity: left
-		lp: pref-width: 32dp, pref-height: 32dp
+		lp: pref-width: 32, pref-height: 32
 	TBTextField: id: LogText, text: "This is the Atomic Widget Periodic Table"
 

UIPeriodicTable/JavaScript/Resources/Scenes/main_table.ui.txt

@@ -1,6 +1,7 @@
 # Atomic Widget Periodic Table layout file
-TBTextField:  text: "Atomic Widget Periodic Table", gravity: top left right
+TBTextField:  text: "Atomic Widget Periodic Table", gravity: top left right, skin: "sheet_cell"
 	font: size: 32dp
+TBTextField: id: spacer, text: "   "
 TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 2
 	TBTextField:  text: "Primary Widgets", squeezable: 1
 		lp: pref-width: 150dp

UIPeriodicTable/JavaScript/Resources/Scenes/sheet.ui.txt

@@ -7,102 +7,102 @@ TBLayout: distribution: gravity, distribution-position: left
 			position left top
 			axis y
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t0A, text: "", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t0A, text: "", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t0B, text: "", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t0B, text: "", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t0C, text: "", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t0C, text: "", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t0D, text: "UISelectItem", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t0D, text: "UISelectItem", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t1A, text: "UIWidget", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t1A, text: "UIWidget", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t1B, text: "UIWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t1B, text: "UIWindow", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t1C, text: "", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t1C, text: "", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t1D, text: "UISelectItemSource", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t1D, text: "UISelectItemSource", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t2A, text: "UIButton", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t2A, text: "UIButton", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t2B, text: "UIMessageWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t2B, text: "UIMessageWindow", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t2C, text: "UIView", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t2C, text: "UIView", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t2D, text: "UIMenuItem", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t2D, text: "UIMenuItem", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t3A, text: "UIEditField", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t3A, text: "UIEditField", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t3B, text: "UITabContainer", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t3B, text: "UITabContainer", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t3C, text: "UILayout", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t3C, text: "UILayout", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t3D, text: "UIMenuItemSource", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t3D, text: "UIMenuItemSource", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t4A, text: "UICheckBox", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t4A, text: "UICheckBox", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t4B, text: "UIListView", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t4B, text: "UIListView", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t4C, text: "UITextField", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t4C, text: "UITextField", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t4D, text: "UILayoutParams", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t4D, text: "UILayoutParams", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t5A, text: "UISelectList", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t5A, text: "UISelectList", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t5B, text: "UIMenuWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t5B, text: "UIMenuWindow", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t5C, text: "UISkinImage", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t5C, text: "UISkinImage", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t5D, text: "UIFontDescription", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t5D, text: "UIFontDescription", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t6A, text: "UIInlineSelect", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t6A, text: "UIInlineSelect", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t6B, text: "UIClickLabel", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t6B, text: "UIClickLabel", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t6C, text: "UIImageWidget", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t6C, text: "UIImageWidget", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t6D, text: "UIPreferredSize", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t6D, text: "UIPreferredSize", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t7A, text: "UISelectDropdown", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t7A, text: "UISelectDropdown", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t7B, text: "UISection", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t7B, text: "UISection", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t7C, text: "UISeparator", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t7C, text: "UISeparator", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t7D, text: "UIContainer", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t7D, text: "UIContainer", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t8A, text: "UISlider", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t8A, text: "UISlider", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t8B, text: "UISceneView", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t8B, text: "UISceneView", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t8C, text: "UITextureWidget", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t8C, text: "UITextureWidget", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t8D, text: "UIScrollContainer", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t8D, text: "UIScrollContainer", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: t9A, text: "UIColorWheel", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t9A, text: "UIColorWheel", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t9B, text: "UIPromptWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t9B, text: "UIPromptWindow", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t9C, text: "UIColorWidget", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t9C, text: "UIColorWidget", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: t9D, text: "UIDimmer", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: t9D, text: "UIDimmer", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 			TBLayout: axis: x, size: available, position: gravity, distribution: available, spacing: 1
-				TBTextField: id: tAA, text: "UIPulldownMenu", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: tAA, text: "UIPulldownMenu", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: tAB, text: "UIFinderWindow", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: tAB, text: "UIFinderWindow", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: tAC, text: "UIBargraph", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: tAC, text: "UIBargraph", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
-				TBTextField: id: tAD, text: "UIDragObject", squeezable: 1, text-align: left, skin: "uiwidget_solid"
+				TBTextField: id: tAD, text: "UIDragObject", squeezable: 1, text-align: left, skin: "sheet_cell"
 					lp: pref-width: 150dp
 

UIPeriodicTable/JavaScript/Resources/Scenes/view_code.ui.txt

@@ -1,7 +1,7 @@
 # code viewer user interface layout
 TBLayout: axis: y, size: available, position: gravity, distribution: gravity
 	lp: min-width: 800dp, min-height: 400dp
-	TBLayout: distribution: gravity, distribution-position: left
+	TBLayout: id: "undocklayout", distribution: gravity, distribution-position: left
 		TBEditField: id: "viewCodeText", multiline: 1, styling: 0, gravity: all, readonly: 1, adapt-to-content: 0, text: ""
 			font: size: 14dp
 			lp: min-width: 800dp

UIPeriodicTable/JavaScript/Resources/Scenes/view_undock.ui.txt

@@ -0,0 +1,5 @@
+# undock host user interface layout
+TBLayout: axis: y, distribution: gravity
+	lp: min-width: 800dp, min-height: 400dp
+	TBLayout: id: "undocklayout", distribution: gravity
+

UIPeriodicTable/JavaScript/Resources/Textures/desktop.tb.txt

@@ -6,6 +6,10 @@ elements
 	uiwidget_solid
 		background-color #666666
 		padding 10
+	sheet_cell
+		text-color #111111
+		background-color #f4f2d3
+		padding 10
 #inlineselect items --should be in the player default skin
 	arrowdark.left: type: Image, bitmap: arrow_left.png, min-width: 5, min-height: 10
 	arrowdark.right: type: Image, bitmap: arrow_right.png, min-width: 5, min-height: 10	
@@ -46,4 +50,6 @@ elements
 		content-ofs-y 1
 	Graph
 		bitmap graph.png
+	Gauge
+		bitmap gauge.png
 

UIPeriodicTable/JavaScript/Resources/Textures/mobile.tb.txt

@@ -9,6 +9,9 @@ elements
 	uiwidget_solid
 		background-color #666666
 		padding 10
+	sheet_cell
+		background-color #f4f2d3
+		padding 10
 #inlineselect items
 	arrowdark.left: type: Image, bitmap: arrow_left.png, min-width: 5, min-height: 10
 	arrowdark.right: type: Image, bitmap: arrow_right.png, min-width: 5, min-height: 10	
@@ -49,4 +52,6 @@ elements
 		content-ofs-y 1
 	Graph
 		bitmap graph.png
+	Gauge
+		bitmap gauge.png