3 files changed, 350 insertions, 112 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css
index ac250c83..ac250c83 100644..100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..6d7c8a2c 100644..100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -15,8 +15,41 @@
                "module": "js/panels/Components/ComponentsPanelBase.reel",
                "name": "ComponentsPanelBase",
                "properties": {
-                    "element": {"#": "components_panel"}
+                    "element": {"#": "components_panel"},
+                    "controller": {"@": "componentsTree"}
                }
+            },
+            "componentsController" : {
+                "module": "js/components/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "text",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "components"
+                    }
+                }
+            },
+            "componentsTree" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "componentsContainer"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "componentsController"},
+                    "showRoot" : false
+                }
+            },
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
            }
        }
        </script>
@@ -25,9 +58,7 @@
        <body>
    
        <div id="components_panel" class="components_panel">
-            <div class="treeHolder">
+           <div id="componentsContainer"></div>
-                <ul id="comp_tree"></ul>
-            </div>
        </div>
    </body>
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..b4eec771 100644..100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,142 +4,349 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-var Montage = require("montage/core/core").Montage,
+var Montage     = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component,
+    Component   = require("montage/ui/component").Component,
-    NJUtils = require("js/lib/NJUtils").NJUtils;
+    NJUtils     = require("js/lib/NJUtils").NJUtils;
+var treeControlModule   = require("js/components/tree.reel");
+var PIData              = require("js/data/pi/pi-data").PiData;
+String.prototype.capitalizeFirstChar = function() {
+    return this.charAt(0).toUpperCase() + this.slice(1);
+};
-var treeControlModule = require("js/components/tree.reel");
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
-    _hasFocus: {
-        enumerable: false,
+    components: {
-        value: false
+        value: {
+            "text": "styles",
+            "children": [
+                {
+                    "text": "Montage Components",
+                    "children": [
+                        {
+                            "text": "Anchor",
+                            "dataFile" : "node_modules/components-data/anchor.json",
+                            "component": "anchor"
+                        },
+                        {
+                            "text": "Button",
+                            "dataFile" : "node_modules/components-data/button.json",
+                            "component": "button"
+                        },
+                        {
+                            "text": "Checkbox",
+                            "dataFile" : "node_modules/components-data/checkbox.json",
+                            "component": "checkbox"
+                        },
+                        {
+                            "text": "Image Component",
+                            "dataFile" : "node_modules/components-data/image.json",
+                            "component": "imageComponent"
+                        },
+                        {
+                            "text": "NumberInput",
+                            "dataFile" : "node_modules/components-data/number-input.json",
+                            "component": "numberInput"
+                        },
+                        {
+                            "text": "Select Input",
+                            "dataFile" : "node_modules/components-data/select.json",
+                            "component": "select"
+                        },
+                        {
+                            "text": "Radio Button",
+                            "dataFile" : "node_modules/components-data/radio-button.json",
+                            "component": "radioButton"
+                        },
+                        {
+                            "text": "Range Input",
+                            "dataFile" : "node_modules/components-data/range-input.json",
+                            "component": "rangeInput"
+                        },
+                        {
+                            "text": "TextArea",
+                            "dataFile" : "node_modules/components-data/textarea.json",
+                            "component": "textarea"
+                        },
+                        {
+                            "text": "Textfield",
+                            "dataFile" : "node_modules/components-data/textfield.json",
+                            "component": "textfield"
+                        },
+                        {
+                            "text": "Toogle Button",
+                            "dataFile" : "node_modules/components-data/toggle-button.json",
+                            "component": "toggleButton"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    componentsData: {
+        value: {}
+    },
+    componentsToLoad: {
+        value: null
+    },
+    componentsLoaded: {
+        value: 0
    },
-    prepareForDraw: {
-        enumerable: false,
-        value: function() {
-            var treeHolderDiv = document.getElementById("comp_tree");
-            var componentsTree = treeControlModule.Tree.create();
-            componentsTree.element = treeHolderDiv;
-            componentsTree.dataProvider = this._loadXMLDoc("js/panels/Components/Components.xml");
-            componentsTree.needsDraw = true;
-            this.eventManager.addEventListener( "executeAddComponent", this, false);
+    dragComponent: {
-        }
+        value: null
    },
-    willDraw: {
-        enumerable: false,
-        value: function() {
-        }
+    dragPosition: {
+        value: null
    },
-    draw: {
-        enumerable: false,
-        value: function() {

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css index ac250c83..ac250c83 100644..100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css


diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html index df104ecc..6d7c8a2c 100644..100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -15,8 +15,41 @@
15	"module": "js/panels/Components/ComponentsPanelBase.reel",	15	"module": "js/panels/Components/ComponentsPanelBase.reel",
16	"name": "ComponentsPanelBase",	16	"name": "ComponentsPanelBase",
17	"properties": {	17	"properties": {
18	"element": {"#": "components_panel"}	18	"element": {"#": "components_panel"},
		19	"controller": {"@": "componentsTree"}
19	}	20	}
		21	},
		22
		23	"componentsController" : {
		24	"module": "js/components/controllers/tree-controller",
		25	"name": "TreeController",
		26	"properties" : {
		27	"branchKey" : "children",
		28	"labelKey" : "text",
		29	"delegate": {"@": "owner" }
		30	},
		31	"bindings": {
		32	"content": {
		33	"boundObject": {"@": "owner"},
		34	"boundObjectPropertyPath": "components"
		35	}
		36	}
		37	},
		38
		39	"componentsTree" : {
		40	"module" : "js/components/treeview/treeview.reel",
		41	"name" : "Treeview",
		42	"properties" : {
		43	"element" : {"#": "componentsContainer"},
		44	"branchComponent" : {"@": "branch" },
		45	"contentController": {"@": "componentsController"},
		46	"showRoot" : false
		47	}
		48	},
		49
		50	"branch" : {
		51	"module" : "js/components/treeview/ninja-branch.reel",
		52	"name" : "Branch"
20	}	53	}
21	}	54	}
22	</script>	55	</script>
@@ -25,9 +58,7 @@
25	<body>	58	<body>
26		59
27	<div id="components_panel" class="components_panel">	60	<div id="components_panel" class="components_panel">
28	<div class="treeHolder">	61	<div id="componentsContainer"></div>
29	<ul id="comp_tree"></ul>
30	</div>
31	</div>	62	</div>
32		63
33	</body>	64	</body>


diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 41afefa5..b4eec771 100644..100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,142 +4,349 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */	5	</copyright> */
6		6
7	var Montage = require("montage/core/core").Montage,	7	var Montage = require("montage/core/core").Montage,
8	Component = require("montage/ui/component").Component,	8	Component = require("montage/ui/component").Component,
9	NJUtils = require("js/lib/NJUtils").NJUtils;	9	NJUtils = require("js/lib/NJUtils").NJUtils;
		10
		11	var treeControlModule = require("js/components/tree.reel");
		12	var PIData = require("js/data/pi/pi-data").PiData;
		13
		14	String.prototype.capitalizeFirstChar = function() {
		15	return this.charAt(0).toUpperCase() + this.slice(1);
		16	};
10		17
11	var treeControlModule = require("js/components/tree.reel");
12		18
13	var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {	19	var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
14	_hasFocus: {	20
15	enumerable: false,	21	components: {
16	value: false	22	value: {
		23	"text": "styles",
		24	"children": [
		25	{
		26	"text": "Montage Components",
		27	"children": [
		28	{
		29	"text": "Anchor",
		30	"dataFile" : "node_modules/components-data/anchor.json",
		31	"component": "anchor"
		32	},
		33	{
		34	"text": "Button",
		35	"dataFile" : "node_modules/components-data/button.json",
		36	"component": "button"
		37	},
		38	{
		39	"text": "Checkbox",
		40	"dataFile" : "node_modules/components-data/checkbox.json",
		41	"component": "checkbox"
		42	},
		43	{
		44	"text": "Image Component",
		45	"dataFile" : "node_modules/components-data/image.json",
		46	"component": "imageComponent"
		47	},
		48	{
		49	"text": "NumberInput",
		50	"dataFile" : "node_modules/components-data/number-input.json",
		51	"component": "numberInput"
		52	},
		53	{
		54	"text": "Select Input",
		55	"dataFile" : "node_modules/components-data/select.json",
		56	"component": "select"
		57	},
		58	{
		59	"text": "Radio Button",
		60	"dataFile" : "node_modules/components-data/radio-button.json",
		61	"component": "radioButton"
		62	},
		63	{
		64	"text": "Range Input",
		65	"dataFile" : "node_modules/components-data/range-input.json",
		66	"component": "rangeInput"
		67	},
		68	{
		69	"text": "TextArea",
		70	"dataFile" : "node_modules/components-data/textarea.json",
		71	"component": "textarea"
		72	},
		73	{
		74	"text": "Textfield",
		75	"dataFile" : "node_modules/components-data/textfield.json",
		76	"component": "textfield"
		77	},
		78	{
		79	"text": "Toogle Button",
		80	"dataFile" : "node_modules/components-data/toggle-button.json",
		81	"component": "toggleButton"
		82	}
		83	]
		84	}
		85	]
		86	}
		87	},
		88
		89	componentsData: {
		90	value: {}
		91	},
		92
		93	componentsToLoad: {
		94	value: null
		95	},
		96
		97	componentsLoaded: {
		98	value: 0
17	},	99	},
18	prepareForDraw: {
19	enumerable: false,
20	value: function() {
21	var treeHolderDiv = document.getElementById("comp_tree");
22	var componentsTree = treeControlModule.Tree.create();
23	componentsTree.element = treeHolderDiv;
24	componentsTree.dataProvider = this._loadXMLDoc("js/panels/Components/Components.xml");
25	componentsTree.needsDraw = true;
26		100
27	this.eventManager.addEventListener( "executeAddComponent", this, false);	101	dragComponent: {
28	}	102	value: null
29	},	103	},
30	willDraw: {
31	enumerable: false,
32	value: function() {
33		104
34	}	105	dragPosition: {
		106	value: null
35	},	107	},
36	draw: {
37	enumerable: false,
38	value: function() {