Tree Components - Adding the tree components

author: Eric Guzman 2012-02-06 11:43:01 -0800
committer: Eric Guzman 2012-02-06 11:43:01 -0800
commit: 984d65c818969ea3bef57ade9cbf5fc50d9a2316 (patch)
tree: 2f559127a052c98aa3a7c822f0f91d813b429240 /js/components/treeview/treeview.reel
parent: 5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 (diff)
download: ninja-984d65c818969ea3bef57ade9cbf5fc50d9a2316.tar.gz
3 files changed, 182 insertions, 0 deletions
diff --git a/js/components/treeview/treeview.reel/treeview.css b/js/components/treeview/treeview.reel/treeview.css
new file mode 100644
index 00000000..1e3965ef
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.css
@@ -0,0 +1,3 @@
+{}
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
new file mode 100644
index 00000000..3d5d75c4
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" href="treeview.css" type="text/css">
+        <script type="text/montage-serialization">
+        {
+            "owner" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : { "#" : "treeView"},
+                    "defaultBranchComponent" : { "@" : "defaultBranch"},
+                    "defaultLeafComponent" : { "@" : "defaultLeaf"},
+                    "scrollview" : { "@" : "scrollview"},
+                    "slot": {"@": "slot"}
+                }
+            },
+            "defaultBranch" : {
+                "module" : "js/components/treeview/branch.reel",
+                "name" : "Branch"
+            },
+            "defaultLeaf" : {
+                "module" : "js/components/treeview/presets-leaf.reel",
+                "name" : "Leaf"
+            },
+            "scrollview": {
+                "module": "montage/ui/scrollview.reel",
+                "name": "Scrollview",
+                "properties": {
+                    "element": {"#": "treeView"},
+                    "axis": "vertical"
+                 }
+            },
+            "slot": {
+                "module": "montage/ui/slot.reel",
+                "name": "Slot",
+                "properties": {
+                    "element": {"#": "rootBranch"}
+                }
+            }
+        }
+                </script>
+</head>
+<body>
+    <div id="treeView" class="treeView">
+        <div id="rootBranch" class="treeRoot"></div>
+    </div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/js/components/treeview/treeview.reel/treeview.js b/js/components/treeview/treeview.reel/treeview.js
new file mode 100644
index 00000000..ebbfe685
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.js
@@ -0,0 +1,129 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+exports.Treeview = Montage.create(Component, {
+    substitution      : { value : null },
+    data              : { value : null },
+    _hasBeenDeserialized: {
+        value: false,
+        enumerable: false
+    },
+    branchComponent : {
+        value: null,
+        serializable: true
+    },
+    leafComponent : {
+        value: null,
+        serializable: true
+    },
+    hasTemplate: {
+        value: true
+    },
+    templateDidLoad : {
+        value : function() {
+            this._initializeRootBranch();
+        }
+    },
+    _initializeRootBranch : {
+        value: function() {
+            var rootBranch;
+            ///// Get user-defined branch/leaf components or use defaults
+            this.branchComponent = this.branchComponent || this.defaultBranchComponent;
+            ///// Tell branch component what the label key is (defined in tree controller)
+            this.branchComponent.labelKey = this.contentController.labelKey;
+            ///// Tell branch component what the branch key is (so it can recursively generate branches)
+            this.branchComponent.branchKey = this.contentController.branchKey;
+            rootBranch = Montage.create(this.branchComponent);
+            rootBranch.hideLabel = !this.showRoot;
+            rootBranch.treeView = this;
+            this.slot.content = rootBranch;
+            rootBranch.sourceObject = this.contentController.root;
+            rootBranch.needsDraw = true;
+            this.needsDraw = true;
+        }
+    },
+    showRoot : {
+        value: null
+    },
+    _contentController: {
+        enumerable: false,
+        value: null
+    },
+    contentController: {
+        enumerable: false,
+        get: function() {
+            return this._contentController;
+        },
+        set: function(value) {
+            if (this._contentController === value) {
+                return;
+            }
+            if (this._contentController) {
+                Object.deleteBinding(this, "selectedIndexes");
+            }
+            this._contentController = value;
+            if (this._contentController) {
+                // And bind what we need from the new contentController
+                var selectedIndexesBindingDescriptor;
+                selectedIndexesBindingDescriptor = {
+                    boundObject: this._contentController,
+                    boundObjectPropertyPath: "selectedIndexes"
+                };
+                if (this._hasBeenDeserialized) {
+                    Object.defineBinding(this, "selectedIndexes", selectedIndexesBindingDescriptor);
+                } else {
+                    // otherwise we need to defer it until later; we haven't been deserialized yet
+                    if (!this._controllerBindingsToInstall) {
+                        this._controllerBindingsToInstall = {};
+                    }
+                    this._controllerBindingsToInstall.selectedIndexes = selectedIndexesBindingDescriptor;
+                }
+            }
+        }
+    },
+    deserializedFromTemplate: {
+        value: function() {
+            var controllerBindingDescriptorsToInstall = this._controllerBindingsToInstall;
+            if (controllerBindingDescriptorsToInstall) {
+                for (var key in controllerBindingDescriptorsToInstall) {
+                    Object.defineBinding(this, key, controllerBindingDescriptorsToInstall[key]);
+                }
+                delete this._controllerBindingsToInstall;
+            }
+            this._hasBeenDeserialized = true;
+        }
+    },
+    selectedIndexes: {
+        enumerable: false,
+        value: null
+    }
+});
+\ No newline at end of file
author	Eric Guzman	2012-02-06 11:43:01 -0800
committer	Eric Guzman	2012-02-06 11:43:01 -0800
commit	984d65c818969ea3bef57ade9cbf5fc50d9a2316 (patch)
tree	2f559127a052c98aa3a7c822f0f91d813b429240 /js/components/treeview/treeview.reel
parent	5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 (diff)
download	ninja-984d65c818969ea3bef57ade9cbf5fc50d9a2316.tar.gz

diff --git a/js/components/treeview/treeview.reel/treeview.css b/js/components/treeview/treeview.reel/treeview.css new file mode 100644 index 00000000..1e3965ef --- /dev/null +++ b/js/components/treeview/treeview.reel/treeview.css
@@ -0,0 +1,3 @@
	1
	2
	3	{}


diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html new file mode 100644 index 00000000..3d5d75c4 --- /dev/null +++ b/js/components/treeview/treeview.reel/treeview.html
@@ -0,0 +1,50 @@
	1	<!DOCTYPE html>
	2	<html lang="en">
	3	<head>
	4	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	5	<link rel="stylesheet" href="treeview.css" type="text/css">
	6	<script type="text/montage-serialization">
	7	{
	8	"owner" : {
	9	"module" : "js/components/treeview/treeview.reel",
	10	"name" : "Treeview",
	11	"properties" : {
	12	"element" : { "#" : "treeView"},
	13	"defaultBranchComponent" : { "@" : "defaultBranch"},
	14	"defaultLeafComponent" : { "@" : "defaultLeaf"},
	15	"scrollview" : { "@" : "scrollview"},
	16	"slot": {"@": "slot"}
	17	}
	18	},
	19	"defaultBranch" : {
	20	"module" : "js/components/treeview/branch.reel",
	21	"name" : "Branch"
	22	},
	23	"defaultLeaf" : {
	24	"module" : "js/components/treeview/presets-leaf.reel",
	25	"name" : "Leaf"
	26	},
	27	"scrollview": {
	28	"module": "montage/ui/scrollview.reel",
	29	"name": "Scrollview",
	30	"properties": {
	31	"element": {"#": "treeView"},
	32	"axis": "vertical"
	33	}
	34	},
	35	"slot": {
	36	"module": "montage/ui/slot.reel",
	37	"name": "Slot",
	38	"properties": {
	39	"element": {"#": "rootBranch"}
	40	}
	41	}
	42	}
	43	</script>
	44	</head>
	45	<body>
	46	<div id="treeView" class="treeView">
	47	<div id="rootBranch" class="treeRoot"></div>
	48	</div>
	49	</body>
	50	</html> \ No newline at end of file


diff --git a/js/components/treeview/treeview.reel/treeview.js b/js/components/treeview/treeview.reel/treeview.js new file mode 100644 index 00000000..ebbfe685 --- /dev/null +++ b/js/components/treeview/treeview.reel/treeview.js
@@ -0,0 +1,129 @@
	1	/* <copyright>
	2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	5	</copyright> */
	6
	7	var Montage = require("montage/core/core").Montage,
	8	Component = require("montage/ui/component").Component;
	9
	10	exports.Treeview = Montage.create(Component, {
	11
	12	substitution : { value : null },
	13	data : { value : null },
	14
	15	_hasBeenDeserialized: {
	16	value: false,
	17	enumerable: false
	18	},
	19
	20	branchComponent : {
	21	value: null,
	22	serializable: true
	23	},
	24	leafComponent : {
	25	value: null,
	26	serializable: true
	27	},
	28
	29	hasTemplate: {
	30	value: true
	31	},
	32	templateDidLoad : {
	33	value : function() {
	34	this._initializeRootBranch();
	35	}
	36	},
	37	_initializeRootBranch : {
	38	value: function() {
	39	var rootBranch;
	40
	41	///// Get user-defined branch/leaf components or use defaults
	42	this.branchComponent = this.branchComponent \|\| this.defaultBranchComponent;
	43
	44	///// Tell branch component what the label key is (defined in tree controller)
	45	this.branchComponent.labelKey = this.contentController.labelKey;
	46
	47	///// Tell branch component what the branch key is (so it can recursively generate branches)
	48	this.branchComponent.branchKey = this.contentController.branchKey;
	49
	50	rootBranch = Montage.create(this.branchComponent);
	51	rootBranch.hideLabel = !this.showRoot;
	52	rootBranch.treeView = this;
	53
	54	this.slot.content = rootBranch;
	55	rootBranch.sourceObject = this.contentController.root;
	56	rootBranch.needsDraw = true;
	57	this.needsDraw = true;
	58
	59	}
	60	},
	61	showRoot : {
	62	value: null
	63	},
	64
	65	_contentController: {
	66	enumerable: false,
	67	value: null
	68	},
	69
	70	contentController: {
	71	enumerable: false,
	72	get: function() {
	73	return this._contentController;
	74	},
	75	set: function(value) {
	76	if (this._contentController === value) {
	77	return;
	78	}
	79
	80	if (this._contentController) {
	81	Object.deleteBinding(this, "selectedIndexes");
	82	}
	83
	84	this._contentController = value;
	85
	86	if (this._contentController) {
	87
	88	// And bind what we need from the new contentController
	89	var selectedIndexesBindingDescriptor;
	90
	91	selectedIndexesBindingDescriptor = {
	92	boundObject: this._contentController,
	93	boundObjectPropertyPath: "selectedIndexes"
	94	};
	95
	96	if (this._hasBeenDeserialized) {
	97	Object.defineBinding(this, "selectedIndexes", selectedIndexesBindingDescriptor);
	98	} else {
	99	// otherwise we need to defer it until later; we haven't been deserialized yet
	100	if (!this._controllerBindingsToInstall) {
	101	this._controllerBindingsToInstall = {};
	102	}
	103	this._controllerBindingsToInstall.selectedIndexes = selectedIndexesBindingDescriptor;
	104	}
	105	}
	106
	107	}
	108	},
	109
	110	deserializedFromTemplate: {
	111	value: function() {
	112	var controllerBindingDescriptorsToInstall = this._controllerBindingsToInstall;
	113
	114	if (controllerBindingDescriptorsToInstall) {
	115	for (var key in controllerBindingDescriptorsToInstall) {
	116	Object.defineBinding(this, key, controllerBindingDescriptorsToInstall[key]);
	117	}
	118	delete this._controllerBindingsToInstall;
	119	}
	120
	121	this._hasBeenDeserialized = true;
	122	}
	123	},
	124
	125	selectedIndexes: {
	126	enumerable: false,
	127	value: null
	128	}
	129	}); \ No newline at end of file