From c6d1a1da9e7cdf477daf32410d80691eb1e828d5 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 31 Jan 2012 13:54:35 -0800
Subject: Montage Native Widgets: Cleanup of current components

Cleaning up the current components support files:
- Clean the component tree
- Clean the app delegate and panel

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/Components/Components.xml                | 22 -------------
 .../ComponentsPanelBase.js                         | 36 +++++++++++++---------
 2 files changed, 22 insertions(+), 36 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml
index b3056330..e076602e 100644
--- a/js/panels/Components/Components.xml
+++ b/js/panels/Components/Components.xml
@@ -2,27 +2,5 @@
 <tree id="Components">
     <folder id="montageComponents" label="Montage Components">
         <leaf id="Button" label="Button" />
-        <leaf id="Checkbox" label="Checkbox" />
-        <leaf id="DynamicText" label="Dynamic Text" />
-        <leaf id="FlowController" label="FlowController" />
-        <leaf id="HotText" label="HotText" />
-        <leaf id="HotTextUnit" label="HotTextUnit" />
-        <leaf id="ImageContainer" label="Image Container" />
-        <leaf id="Progress" label="Progress" />
-        <leaf id="Scrollview" label="Scrollview" />
-        <leaf id="Slider" label="Slider" />
-        <leaf id="TextArea" label="TextArea" />
-        <leaf id="Textfield" label="Textfield" />
-        <leaf id="Toggle" label="Toggle" />
-    </folder>
-    <folder id="metaComponents" label="Meta Components">
-        <leaf id="Condition" label="Condition" />
-        <leaf id="Repetition" label="Repetition" />
-        <leaf id="Slot" label="Slot" />
-        <leaf id="Substitution" label="Substitution" />
-    </folder>
-    <folder id="htmlPresets" label="HTML Components">
-        <leaf id="html_button" label="Button" />
-        <leaf id="html_input" label="Text Input" />
     </folder>
 </tree>
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..c8624b29 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -59,15 +59,20 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     addComponentToStage:{
         value:function(componentType, dropX, dropY){
-            var compW = 100,
-                compH = 100,
-                elementType = "div",
-                componentContainer,
-                componentElement;
+//            var compW = 100,
+//                compH = 100,
+//                elementType = "div",
+//                componentContainer,
+//                componentElement;
+            var componentEl;
 
             if(componentType == "Button"){
-                compW = 118;
-                compH = 52;
+                componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"});
+                componentEl.setAttribute("type", "button");
+                componentEl.innerHTML = "Button";
+                console.log(componentEl);
+//                compW = 118;
+//                compH = 52;
             }else if(componentType == "Checkbox"){
                 compW = 53;
                 compH = 53;
@@ -117,28 +122,31 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 compH = 25;
             }
 
+
+            /*
             componentContainer = NJUtils.makeNJElement("div", componentType, "component");
             componentContainer.elementModel.isComponent = true;
-
+            */
             var styles = {
                 'position': 'absolute',
                 'top'       : dropY + 'px',
                 'left'      : dropX + 'px',
-                'width'     : compW + 'px',
-                'height'    : compH + 'px',
+//                'width'     : compW + 'px',
+//                'height'    : compH + 'px',
                 '-webkit-transform-style' : 'preserve-3d',
                 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
             };
 
 
-            componentElement = NJUtils.makeNJElement(elementType, "ComponentDiv", "block");
-
-            componentContainer.appendChild(componentElement);
+            //componentElement = NJUtils.makeNJElement(elementType, "ComponentDiv", "block");
 
-            NJevent("elementAdding", {"el": componentContainer, "data":styles});
+            //componentContainer.appendChild(componentElement);
 
+            NJevent("elementAdding", {"el": componentEl, "data":styles});
+            /*
             var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType);
             this.application.ninja.currentDocument._userComponentSet[componentContainer.uuid] = componentRef;
+            */
 
         }
     }
-- 
cgit v1.2.3


From d26a13de2aca25c36cb35f85604de1ac2b9befbb Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 1 Feb 2012 14:37:30 -0800
Subject: Simple button native widget test. Added a controller, pi and panel
 code.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.js                         | 33 ++++++++--------------
 1 file changed, 12 insertions(+), 21 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index c8624b29..58a798d8 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -27,18 +27,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             this.eventManager.addEventListener( "executeAddComponent", this, false);
     	}
     },
-    willDraw: {
-    	enumerable: false,
-    	value: function() {
-
-    	}
-    },
-    draw: {
-    	enumerable: false,
-    	value: function() {
-
-    	}
-    },
 
     _loadXMLDoc: {
         value:function(dname) {
@@ -61,18 +49,17 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value:function(componentType, dropX, dropY){
 //            var compW = 100,
 //                compH = 100,
-//                elementType = "div",
-//                componentContainer,
-//                componentElement;
-            var componentEl;
+//
+            var componentEl, componentInstance;
 
             if(componentType == "Button"){
                 componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"});
                 componentEl.setAttribute("type", "button");
-                componentEl.innerHTML = "Button";
-                console.log(componentEl);
-//                compW = 118;
-//                compH = 52;
+                //componentEl.innerHTML = "Button";
+
+                componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"});
+
+
             }else if(componentType == "Checkbox"){
                 compW = 53;
                 compH = 53;
@@ -142,12 +129,16 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
             //componentContainer.appendChild(componentElement);
 
+            this.application.ninja.currentDocument.setComponentInstance(componentInstance, componentEl);
+
             NJevent("elementAdding", {"el": componentEl, "data":styles});
             /*
             var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType);
-            this.application.ninja.currentDocument._userComponentSet[componentContainer.uuid] = componentRef;
+
             */
 
+
+
         }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 7ccadc20c96539988290999982d7483e013732f9 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 2 Feb 2012 14:49:34 -0800
Subject: adding a componentController and callback for lazy loading.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.html                       | 11 ++++++++
 .../ComponentsPanelBase.js                         | 29 +++++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..1e040e35 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,6 +11,17 @@
 
         <script type="text/montage-serialization">
         {
+            "componentController": {
+                "module": "montage/ui/controller/array-controller",
+                "name": "ArrayController",
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "components"
+                    }
+                }
+            },
+
             "owner": {
                 "module": "js/panels/Components/ComponentsPanelBase.reel",
                 "name": "ComponentsPanelBase",
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 58a798d8..9b5b755c 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -11,10 +11,25 @@ var Montage = require("montage/core/core").Montage,
 var treeControlModule = require("js/components/tree.reel");
 
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
-    _hasFocus: {
-    	enumerable: false,
-    	value: false
+
+    components: {
+        value: null
+    },
+
+    didCreate: {
+        value: function() {
+            this._loadComponents();
+        }
+    },
+
+    _loadComponents: {
+        value: function() {
+            this.photos = [
+                {component: "Button", data: "montage/ui/button.reel/button.json"}
+            ];
+        }
     },
+
     prepareForDraw: {
     	enumerable: false,
     	value: function() {
@@ -57,7 +72,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 componentEl.setAttribute("type", "button");
                 //componentEl.innerHTML = "Button";
 
-                componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"});
+                componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"}, this.callback);
 
 
             }else if(componentType == "Checkbox"){
@@ -139,6 +154,12 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
 
 
+        }
+    },
+
+    callback: {
+        value: function() {
+            console.log("the callback");
         }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 197ae04f7677b7a5890a589ba572e750a229c502 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 2 Feb 2012 18:28:29 -0800
Subject: Using async to load the required component.

---
 .../ComponentsPanelBase.js                         | 93 +++++++++++++++++++---
 1 file changed, 83 insertions(+), 10 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 9b5b755c..ec092604 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -16,6 +16,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: null
     },
 
+    _testButtonJson: {
+        value: {
+            "component": "button",
+
+            "module": "montage/ui/button.reel",
+
+            "name": "Button",
+
+            "properties": [
+                {
+                    "name": "label",
+                    "type": "string",
+                    "default": "Button"
+                }
+            ]
+        }
+    },
+
     didCreate: {
         value: function() {
             this._loadComponents();
@@ -24,7 +42,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     _loadComponents: {
         value: function() {
-            this.photos = [
+            this.components = [
                 {component: "Button", data: "montage/ui/button.reel/button.json"}
             ];
         }
@@ -54,14 +72,75 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         }
     },
 
+    _stash: {
+        value: {}
+    },
+
     handleExecuteAddComponent: {
         value: function(evt) {
-            this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY)
+            //var component = evt.detail.component;
+            // Get the data from the event detail component
+            var component = this._testButtonJson;
+            this._stash.dropx = evt.detail.dropX;
+            this._stash.dropy = evt.detail.dropY;
+            this.addComponentToStage(component);// evt.detail.dropX, evt.detail.dropY);
+        }
+    },
+
+    /**
+     * Send a request to add a component to the user document and waits for a callback to continue
+     */
+    addComponentToStage: {
+        value: function(component) {
+            var that = this;
+            var element = this.makeComponent(component.component);
+            this.application.ninja.currentDocument._window.addComponent(element, {type: "Button", path: component.module, name: "Button"}, function(instance, element) {
+
+                var styles = {
+                                'position': 'absolute',
+                                'top'       : that._stash.dropx + 'px',
+                                'left'      : that._stash.dropy + 'px',
+                                '-webkit-transform-style' : 'preserve-3d',
+                                '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+                            };
+
+                that.application.ninja.currentDocument.setComponentInstance(instance, element);
+
+                NJevent("elementAdding", {"el": element, "data":styles});
+            });
+        }
+    },
+
+    callback: {
+        value: function(instance, element) {
+            console.log(instance);
+
+            var styles = {
+                'position': 'absolute',
+                'top'       : this._stash.dropx + 'px',
+                'left'      : this._stash.dropy + 'px',
+                '-webkit-transform-style' : 'preserve-3d',
+                '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+            };
+
+            this.application.ninja.currentDocument.setComponentInstance(instance, element);
+
+            NJevent("elementAdding", {"el": element, "data":styles});
+
         }
     },
 
-    addComponentToStage:{
-        value:function(componentType, dropX, dropY){
+    makeComponent: {
+        value: function(name) {
+            var el;
+            el = NJUtils.makeNJElement(name, "Button", "component");
+            el.setAttribute("type", "button");
+            return el;
+        }
+    },
+
+    ___addComponentToStage:{
+        value:function(component, dropX, dropY){
 //            var compW = 100,
 //                compH = 100,
 //
@@ -154,12 +233,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
 
 
-        }
-    },
-
-    callback: {
-        value: function() {
-            console.log("the callback");
         }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 7950424cf704bb221971f4645406b01e6979db18 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 3 Feb 2012 00:38:13 -0800
Subject: Fix the main user component to create distinct instance of component.

- Create a distinct instance of button
- Cleanup.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.reel/ComponentsPanelBase.js        | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index ec092604..8c81b3ab 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -97,12 +97,13 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             this.application.ninja.currentDocument._window.addComponent(element, {type: "Button", path: component.module, name: "Button"}, function(instance, element) {
 
                 var styles = {
-                                'position': 'absolute',
-                                'top'       : that._stash.dropx + 'px',
-                                'left'      : that._stash.dropy + 'px',
-                                '-webkit-transform-style' : 'preserve-3d',
-                                '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
-                            };
+                    'position': 'absolute',
+                    'top'       : that._stash.dropy + 'px',
+                    'left'      : that._stash.dropx + 'px',
+                    '-webkit-transform-style' : 'preserve-3d',
+                    '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+                };
+
 
                 that.application.ninja.currentDocument.setComponentInstance(instance, element);
 
@@ -134,6 +135,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: function(name) {
             var el;
             el = NJUtils.makeNJElement(name, "Button", "component");
+            //el.elementModel.pi = "buttonPi";
             el.setAttribute("type", "button");
             return el;
         }
-- 
cgit v1.2.3


From dbd3a60478db35b0b12baa2ca54a0712d880951f Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 3 Feb 2012 15:50:35 -0800
Subject: button component using json data

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.js                         | 60 +++++++++++++++++++---
 1 file changed, 52 insertions(+), 8 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 8c81b3ab..d9decd2c 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,11 +4,12 @@ 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,
-    Component = require("montage/ui/component").Component,
-    NJUtils = require("js/lib/NJUtils").NJUtils;
+var Montage     = require("montage/core/core").Montage,
+    Component   = require("montage/ui/component").Component,
+    NJUtils     = require("js/lib/NJUtils").NJUtils;
 
-var treeControlModule = require("js/components/tree.reel");
+var treeControlModule   = require("js/components/tree.reel");
+var PIData              = require("js/data/pi/pi-data").PiData;
 
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
 
@@ -29,6 +30,11 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                     "name": "label",
                     "type": "string",
                     "default": "Button"
+                },
+                {
+                    "name": "enabled",
+                    "type": "boolean",
+                    "default": "true"
                 }
             ]
         }
@@ -43,8 +49,48 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     _loadComponents: {
         value: function() {
             this.components = [
-                {component: "Button", data: "montage/ui/button.reel/button.json"}
+                {name: "Button", data: "montage/ui/button.reel/button.json"}
             ];
+
+            // Build the PI objects for each component
+            for(var i = 0, component; component = this.components[i]; i++) {
+                var piIdentifier = component.name + "Pi";
+                var piObj = [];
+                var section = {};
+
+
+                section.label = component.name + " Properties";
+                section.Section = [];
+
+                for(var j = 0, props; props = this._testButtonJson.properties[j]; j++) {
+                    var row = {};
+                    row.type = this.getControlType(props.type);
+                    row.id = props.name;
+                    row.prop = props.name;
+                    row.defaultValue = props["default"];
+                    row.label = props.name;
+
+                    section.Section.push([row]);
+                }
+
+                PIData[piIdentifier] = [];
+                PIData[piIdentifier].push(section);
+
+            }
+
+        }
+    },
+
+    getControlType: {
+        value: function(type) {
+            switch(type) {
+                case "string":
+                    return "textbox";
+                case "boolean":
+                    return "checkbox";
+                default:
+                    alert("Conversion not implemented for ", type);
+            }
         }
     },
 
@@ -135,7 +181,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: function(name) {
             var el;
             el = NJUtils.makeNJElement(name, "Button", "component");
-            //el.elementModel.pi = "buttonPi";
+            el.elementModel.pi = "ButtonPi";
             el.setAttribute("type", "button");
             return el;
         }
@@ -151,11 +197,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             if(componentType == "Button"){
                 componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"});
                 componentEl.setAttribute("type", "button");
-                //componentEl.innerHTML = "Button";
 
                 componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"}, this.callback);
 
-
             }else if(componentType == "Checkbox"){
                 compW = 53;
                 compH = 53;
-- 
cgit v1.2.3


From 08eafdff4ec25d34e2e76b386145a9fd122431dc Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 6 Feb 2012 14:32:11 -0800
Subject: Moving the data files to a separate folder for now until montage
 provides the final files.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.js                         | 28 +++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index d9decd2c..51822150 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -43,17 +43,34 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     didCreate: {
         value: function() {
             this._loadComponents();
+
+//            var req = new XMLHttpRequest();
+//            req.identifier = "searchRequest";
+//            req.open("GET", url);
+//            req.addEventListener("load", this, false);
+//            req.addEventListener("error", this, false);
+//            req.send();
+
         }
     },
 
     _loadComponents: {
         value: function() {
             this.components = [
-                {name: "Button", data: "montage/ui/button.reel/button.json"}
+                {name: "Button", data: "node_modules/components-data/button.json"},
+                {name: "Textfield", data: "node_modules/components-data/textfield.json"}
             ];
 
             // Build the PI objects for each component
             for(var i = 0, component; component = this.components[i]; i++) {
+                var req = new XMLHttpRequest();
+                //req.identifier = "searchRequest";
+                req.open("GET", component.data);
+                req.addEventListener("load", this, false);
+                req.addEventListener("error", this, false);
+                req.send();
+
+/*
                 var piIdentifier = component.name + "Pi";
                 var piObj = [];
                 var section = {};
@@ -75,12 +92,21 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
                 PIData[piIdentifier] = [];
                 PIData[piIdentifier].push(section);
+                */
 
             }
 
         }
     },
 
+    handleLoad: {
+        value: function(evt) {
+            var response = JSON.parse(evt.target.responseText);
+            console.log(response);
+
+        }
+    },
+
     getControlType: {
         value: function(type) {
             switch(type) {
-- 
cgit v1.2.3


From 22274815452d2add21b53466c7d49d07e90bfcc3 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 6 Feb 2012 17:43:58 -0800
Subject: initial integration of new tree components

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.html                       |  37 +++++-
 .../ComponentsPanelBase.js                         | 127 ++++++++++++++++-----
 2 files changed, 131 insertions(+), 33 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index 1e040e35..a9dda673 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,7 +11,7 @@
 
         <script type="text/montage-serialization">
         {
-            "componentController": {
+            "componentControllerArrayTemp": {
                 "module": "montage/ui/controller/array-controller",
                 "name": "ArrayController",
                 "bindings": {
@@ -28,6 +28,38 @@
                 "properties": {
                     "element": {"#": "components_panel"}
                 }
+            },
+
+            "componentsController" : {
+                "module": "js/components/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "text",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "data2"
+                    }
+                }
+            },
+
+            "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>
@@ -37,8 +69,9 @@
     
     	<div id="components_panel" class="components_panel">
             <div class="treeHolder">
-                <ul id="comp_tree"></ul>
+               <ul id="comp_tree"></ul>
             </div>
+           <div id="componentsContainer"></div>
     	</div>
 
     </body>
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 51822150..338e7e0d 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -11,12 +11,74 @@ var Montage     = require("montage/core/core").Montage,
 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 ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
 
     components: {
         value: null
     },
 
+    componentsToLoad: {
+        value: null
+    },
+
+    componentsLoaded: {
+        value: 0
+    },
+
+    data2: {
+            value: {
+                "text": "styles",
+                "children": [{
+                    "text": "Box Styles",
+                    "children": [
+                        {
+                            "text": "Border-Radius",
+                            "classNameBase" : "border-radius",
+                            "styles" : {
+                                "border-radius": "100px",
+                                "border" : "1px solid #333"
+                            }
+                        },
+                        {
+                            "text": "Drop Shadow",
+                            "classNameBase" : "drop-shadow",
+                            "styles" : {
+                                "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
+                                "border" : "1px solid #CCC"
+                            }
+                        },
+                        {
+                            "text": "Fancy Box",
+                            "classNameBase" : "fancy-box",
+                            "styles" : {
+                                "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
+                                "border" : "1px solid #FFF",
+                                "border-radius": "30px",
+                                "background-color": "#7db9e8",
+                                "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
+                            }
+                        }]
+                }, {
+                    "text": "Text Styles",
+                    "children": [
+                        { "text": "Italic" },
+                        { "text": "Text Shadow" },
+                        { "text": "Text Color" } ]
+                }, {
+                    "text": "Color Styles",
+                    "children": [
+                        { "text": "Background Gradient" },
+                        { "text": "Background Color" },
+                        { "text": "Text Highlight" } ]
+                }]
+            }
+        },
+
     _testButtonJson: {
         value: {
             "component": "button",
@@ -42,14 +104,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     didCreate: {
         value: function() {
-            this._loadComponents();
 
-//            var req = new XMLHttpRequest();
-//            req.identifier = "searchRequest";
-//            req.open("GET", url);
-//            req.addEventListener("load", this, false);
-//            req.addEventListener("error", this, false);
-//            req.send();
+            this._loadComponents();
 
         }
     },
@@ -61,6 +117,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 {name: "Textfield", data: "node_modules/components-data/textfield.json"}
             ];
 
+            this.componentsToLoad = this.components.length;
+
             // Build the PI objects for each component
             for(var i = 0, component; component = this.components[i]; i++) {
                 var req = new XMLHttpRequest();
@@ -70,39 +128,44 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 req.addEventListener("error", this, false);
                 req.send();
 
-/*
-                var piIdentifier = component.name + "Pi";
-                var piObj = [];
-                var section = {};
+            }
+
+        }
+    },
+
+    handleLoad: {
+        value: function(evt) {
+            var response = JSON.parse(evt.target.responseText);
 
+            var component = response.component.capitalizeFirstChar();
 
-                section.label = component.name + " Properties";
-                section.Section = [];
+            var piIdentifier = component + "Pi";
+            var piObj = [];
+            var section = {};
 
-                for(var j = 0, props; props = this._testButtonJson.properties[j]; j++) {
-                    var row = {};
-                    row.type = this.getControlType(props.type);
-                    row.id = props.name;
-                    row.prop = props.name;
-                    row.defaultValue = props["default"];
-                    row.label = props.name;
 
-                    section.Section.push([row]);
-                }
+            section.label = component + " Properties";
+            section.Section = [];
 
-                PIData[piIdentifier] = [];
-                PIData[piIdentifier].push(section);
-                */
+            for(var j = 0, props; props = response.properties[j]; j++) {
+                var row = {};
+                row.type = this.getControlType(props.type);
+                row.id = props.name;
+                row.prop = props.name;
+                row.defaultValue = props["default"];
+                row.label = props.name;
 
+                section.Section.push([row]);
             }
 
-        }
-    },
+            PIData[piIdentifier] = [];
+            PIData[piIdentifier].push(section);
 
-    handleLoad: {
-        value: function(evt) {
-            var response = JSON.parse(evt.target.responseText);
-            console.log(response);
+            this.componentsLoaded++;
+
+            if(this.componentsLoaded === this.componentsToLoad) {
+                console.log("all loaded");
+            }
 
         }
     },
@@ -123,6 +186,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     prepareForDraw: {
     	enumerable: false,
     	value: function() {
+
             var treeHolderDiv = document.getElementById("comp_tree");
             var componentsTree = treeControlModule.Tree.create();
             componentsTree.element = treeHolderDiv;
@@ -130,6 +194,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             componentsTree.needsDraw = true;
 
             this.eventManager.addEventListener( "executeAddComponent", this, false);
+
     	}
     },
 
-- 
cgit v1.2.3


From e2539230b8a297fa972af6d53fe9de3ef2ad43fa Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 9 Feb 2012 00:52:39 -0800
Subject: Switching the components panel to use the new ninja tree component.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/Components/Components.xml                |   6 -
 .../ComponentsPanelBase.html                       |  19 +--
 .../ComponentsPanelBase.js                         | 172 +++++++--------------
 3 files changed, 63 insertions(+), 134 deletions(-)
 delete mode 100644 js/panels/Components/Components.xml

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml
deleted file mode 100644
index e076602e..00000000
--- a/js/panels/Components/Components.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<tree id="Components">
-    <folder id="montageComponents" label="Montage Components">
-        <leaf id="Button" label="Button" />
-    </folder>
-</tree>
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index a9dda673..6d7c8a2c 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,22 +11,12 @@
 
         <script type="text/montage-serialization">
         {
-            "componentControllerArrayTemp": {
-                "module": "montage/ui/controller/array-controller",
-                "name": "ArrayController",
-                "bindings": {
-                    "content": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "components"
-                    }
-                }
-            },
-
             "owner": {
                 "module": "js/panels/Components/ComponentsPanelBase.reel",
                 "name": "ComponentsPanelBase",
                 "properties": {
-                    "element": {"#": "components_panel"}
+                    "element": {"#": "components_panel"},
+                    "controller": {"@": "componentsTree"}
                 }
             },
 
@@ -41,7 +31,7 @@
                 "bindings": {
                     "content": {
                         "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "data2"
+                        "boundObjectPropertyPath": "components"
                     }
                 }
             },
@@ -68,9 +58,6 @@
 	<body>
     
     	<div id="components_panel" class="components_panel">
-            <div class="treeHolder">
-               <ul id="comp_tree"></ul>
-            </div>
            <div id="componentsContainer"></div>
     	</div>
 
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 338e7e0d..4828839b 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -19,7 +19,30 @@ String.prototype.capitalizeFirstChar = function() {
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
 
     components: {
-        value: null
+        value: {
+            "text": "styles",
+            "children": [
+                {
+                    "text": "Montage Components",
+                    "children": [
+                        {
+                            "text": "Button",
+                            "dataFile" : "node_modules/components-data/button.json",
+                            "component": "button"
+                        },
+                        {
+                            "text": "Text Field",
+                            "dataFile" : "node_modules/components-data/textfield.json",
+                            "component": "textfield"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+
+    componentsData: {
+        value: {}
     },
 
     componentsToLoad: {
@@ -30,81 +53,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: 0
     },
 
-    data2: {
-            value: {
-                "text": "styles",
-                "children": [{
-                    "text": "Box Styles",
-                    "children": [
-                        {
-                            "text": "Border-Radius",
-                            "classNameBase" : "border-radius",
-                            "styles" : {
-                                "border-radius": "100px",
-                                "border" : "1px solid #333"
-                            }
-                        },
-                        {
-                            "text": "Drop Shadow",
-                            "classNameBase" : "drop-shadow",
-                            "styles" : {
-                                "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
-                                "border" : "1px solid #CCC"
-                            }
-                        },
-                        {
-                            "text": "Fancy Box",
-                            "classNameBase" : "fancy-box",
-                            "styles" : {
-                                "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
-                                "border" : "1px solid #FFF",
-                                "border-radius": "30px",
-                                "background-color": "#7db9e8",
-                                "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
-                            }
-                        }]
-                }, {
-                    "text": "Text Styles",
-                    "children": [
-                        { "text": "Italic" },
-                        { "text": "Text Shadow" },
-                        { "text": "Text Color" } ]
-                }, {
-                    "text": "Color Styles",
-                    "children": [
-                        { "text": "Background Gradient" },
-                        { "text": "Background Color" },
-                        { "text": "Text Highlight" } ]
-                }]
-            }
-        },
-
-    _testButtonJson: {
-        value: {
-            "component": "button",
-
-            "module": "montage/ui/button.reel",
-
-            "name": "Button",
-
-            "properties": [
-                {
-                    "name": "label",
-                    "type": "string",
-                    "default": "Button"
-                },
-                {
-                    "name": "enabled",
-                    "type": "boolean",
-                    "default": "true"
-                }
-            ]
-        }
-    },
-
     didCreate: {
         value: function() {
-
+            // Loop through the component and load the JSON data for them
             this._loadComponents();
 
         }
@@ -112,32 +63,30 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     _loadComponents: {
         value: function() {
-            this.components = [
-                {name: "Button", data: "node_modules/components-data/button.json"},
-                {name: "Textfield", data: "node_modules/components-data/textfield.json"}
-            ];
 
-            this.componentsToLoad = this.components.length;
+            this.componentsToLoad = this.components.children[0].children.length;
 
             // Build the PI objects for each component
-            for(var i = 0, component; component = this.components[i]; i++) {
+            for(var i = 0, component; component = this.components.children[0].children[i]; i++) {
                 var req = new XMLHttpRequest();
                 //req.identifier = "searchRequest";
-                req.open("GET", component.data);
+                req.open("GET", component.dataFile);
                 req.addEventListener("load", this, false);
                 req.addEventListener("error", this, false);
                 req.send();
 
             }
 
+
         }
     },
 
     handleLoad: {
         value: function(evt) {
-            var response = JSON.parse(evt.target.responseText);
+            var componentData = JSON.parse(evt.target.responseText);
 
-            var component = response.component.capitalizeFirstChar();
+            //var component = response.component.capitalizeFirstChar();
+            var component = componentData.name;
 
             var piIdentifier = component + "Pi";
             var piObj = [];
@@ -147,7 +96,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             section.label = component + " Properties";
             section.Section = [];
 
-            for(var j = 0, props; props = response.properties[j]; j++) {
+            for(var j = 0, props; props = componentData.properties[j]; j++) {
                 var row = {};
                 row.type = this.getControlType(props.type);
                 row.id = props.name;
@@ -161,6 +110,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             PIData[piIdentifier] = [];
             PIData[piIdentifier].push(section);
 
+            // Setup the componentsData
+            this.componentsData[componentData.component] = componentData;
+
             this.componentsLoaded++;
 
             if(this.componentsLoaded === this.componentsToLoad) {
@@ -183,29 +135,14 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         }
     },
 
-    prepareForDraw: {
-    	enumerable: false,
-    	value: function() {
+    applySelection: {
+        value: function(selection) {
+            console.log(selection);
+            console.log(this.componentsData[selection.component]);
+            this._stash.dropx = 200;
+            this._stash.dropy = 200;
+            this.addComponentToStage(this.componentsData[selection.component]);// evt.detail.dropX, evt.detail.dropY);
 
-            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);
-
-    	}
-    },
-
-    _loadXMLDoc: {
-        value:function(dname) {
-            if (window.XMLHttpRequest) {
-                xhttp = new XMLHttpRequest();
-            }
-            xhttp.open("GET", dname, false);
-            xhttp.send();
-            return xhttp.responseXML;
         }
     },
 
@@ -231,7 +168,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: function(component) {
             var that = this;
             var element = this.makeComponent(component.component);
-            this.application.ninja.currentDocument._window.addComponent(element, {type: "Button", path: component.module, name: "Button"}, function(instance, element) {
+            this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) {
 
                 var styles = {
                     'position': 'absolute',
@@ -270,11 +207,22 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     makeComponent: {
         value: function(name) {
-            var el;
-            el = NJUtils.makeNJElement(name, "Button", "component");
-            el.elementModel.pi = "ButtonPi";
-            el.setAttribute("type", "button");
-            return el;
+            switch(name) {
+                case "button":
+                    var el;
+                    el = NJUtils.makeNJElement(name, "Button", "component");
+                    el.elementModel.pi = "ButtonPi";
+                    el.setAttribute("type", "button");
+                    return el;
+                case "textfield": {
+                    var el;
+                    el = NJUtils.makeNJElement(name, "Text Field", "component");
+                    el.elementModel.pi = "TextfieldPi";
+                    el.setAttribute("type", "text");
+                    return el;
+                }
+            }
+
         }
     },
 
-- 
cgit v1.2.3


From 1857d4dde728412843c910265ea3bae20780ab54 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 9 Feb 2012 14:41:13 -0800
Subject: code cleanup, light refactor and now adding components at the center
 stage point.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.js                         | 148 +++++++--------------
 1 file changed, 48 insertions(+), 100 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 4828839b..33241d42 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -31,7 +31,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                             "component": "button"
                         },
                         {
-                            "text": "Text Field",
+                            "text": "Textfield",
                             "dataFile" : "node_modules/components-data/textfield.json",
                             "component": "textfield"
                         }
@@ -53,20 +53,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: 0
     },
 
+    centerStage: {
+        value: null
+    },
+
     didCreate: {
         value: function() {
             // Loop through the component and load the JSON data for them
             this._loadComponents();
-
         }
     },
 
+    // Load all the data files for each component
+    // TODO: Implement the error case
     _loadComponents: {
         value: function() {
 
             this.componentsToLoad = this.components.children[0].children.length;
 
-            // Build the PI objects for each component
             for(var i = 0, component; component = this.components.children[0].children[i]; i++) {
                 var req = new XMLHttpRequest();
                 //req.identifier = "searchRequest";
@@ -74,25 +78,22 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 req.addEventListener("load", this, false);
                 req.addEventListener("error", this, false);
                 req.send();
-
             }
-
-
         }
     },
 
     handleLoad: {
         value: function(evt) {
-            var componentData = JSON.parse(evt.target.responseText);
-
-            //var component = response.component.capitalizeFirstChar();
-            var component = componentData.name;
+            var componentData, component, piID, piObj, section;
 
-            var piIdentifier = component + "Pi";
-            var piObj = [];
-            var section = {};
+            componentData = JSON.parse(evt.target.responseText);
 
+            component = componentData.name;
 
+            // Build the PI data and create a new object for Ninja PI
+            piID = component + "Pi";
+            piObj = [];
+            section = {};
             section.label = component + " Properties";
             section.Section = [];
 
@@ -107,21 +108,23 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 section.Section.push([row]);
             }
 
-            PIData[piIdentifier] = [];
-            PIData[piIdentifier].push(section);
+            PIData[piID] = [];
+            PIData[piID].push(section);
 
-            // Setup the componentsData
+            // Setup the component hash object to store references to each component data
             this.componentsData[componentData.component] = componentData;
 
             this.componentsLoaded++;
 
             if(this.componentsLoaded === this.componentsToLoad) {
-                console.log("all loaded");
+                // console.log("all loaded");
+                // Here we need to stop some sort of loading animation
             }
 
         }
     },
 
+    // PI conversion method. This will convert the property type into a Ninja component
     getControlType: {
         value: function(type) {
             switch(type) {
@@ -137,27 +140,15 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     applySelection: {
         value: function(selection) {
-            console.log(selection);
-            console.log(this.componentsData[selection.component]);
-            this._stash.dropx = 200;
-            this._stash.dropy = 200;
-            this.addComponentToStage(this.componentsData[selection.component]);// evt.detail.dropX, evt.detail.dropY);
-
+            //console.log(selection);
+            //console.log(this.componentsData[selection.component]);
+            this.addComponentToStage(this.componentsData[selection.component]);
         }
     },
 
-    _stash: {
-        value: {}
-    },
-
+    // This method will be used once we handle drag and drop
     handleExecuteAddComponent: {
         value: function(evt) {
-            //var component = evt.detail.component;
-            // Get the data from the event detail component
-            var component = this._testButtonJson;
-            this._stash.dropx = evt.detail.dropX;
-            this._stash.dropy = evt.detail.dropY;
-            this.addComponentToStage(component);// evt.detail.dropX, evt.detail.dropY);
         }
     },
 
@@ -168,17 +159,19 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: function(component) {
             var that = this;
             var element = this.makeComponent(component.component);
+
             this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) {
 
+                var pos = that.getStageCenter();
+
                 var styles = {
                     'position': 'absolute',
-                    'top'       : that._stash.dropy + 'px',
-                    'left'      : that._stash.dropx + 'px',
+                    'left'      : pos[0] + 'px',
+                    'top'       : pos[1] + 'px',
                     '-webkit-transform-style' : 'preserve-3d',
                     '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
                 };
 
-
                 that.application.ninja.currentDocument.setComponentInstance(instance, element);
 
                 NJevent("elementAdding", {"el": element, "data":styles});
@@ -186,25 +179,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         }
     },
 
-    callback: {
-        value: function(instance, element) {
-            console.log(instance);
-
-            var styles = {
-                'position': 'absolute',
-                'top'       : this._stash.dropx + 'px',
-                'left'      : this._stash.dropy + 'px',
-                '-webkit-transform-style' : 'preserve-3d',
-                '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
-            };
-
-            this.application.ninja.currentDocument.setComponentInstance(instance, element);
-
-            NJevent("elementAdding", {"el": element, "data":styles});
-
-        }
-    },
-
     makeComponent: {
         value: function(name) {
             switch(name) {
@@ -216,7 +190,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                     return el;
                 case "textfield": {
                     var el;
-                    el = NJUtils.makeNJElement(name, "Text Field", "component");
+                    el = NJUtils.makeNJElement("input", "Text Field", "component");
                     el.elementModel.pi = "TextfieldPi";
                     el.setAttribute("type", "text");
                     return el;
@@ -243,52 +217,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 compW = 53;
                 compH = 53;
 //                elementType = "input";
-            }else if(componentType == "DynamicText"){
-                compW = 100;
-                compH = 20;
-            }else if(componentType == "FlowController"){
-                compW = 800;
-                compH = 320;
-            }else if(componentType == "HotText"){
-                compW = 50;
-                compH = 18;
-//                elementType = "input";
-            }else if(componentType == "HotTextUnit"){
-                compW = 45;
-                compH = 18;
-            }else if(componentType == "ImageContainer"){
-                compW = 285;
-                compH = 232;
-            }else if(componentType == "Progress"){
-                compW = 300;
-                compH = 9;
-            }else if(componentType == "Scrollview"){
-                compW = 200;
-                compH = 200;
-            }else if(componentType == "Slider"){
-                compW = 200;
-                compH = 55;
-            }else if(componentType == "TextArea"){
-                compW = 312;
-                compH = 112;
-                elementType = "textarea";
-            }else if(componentType == "Textfield"){
-                compW = 312;
-                compH = 34;
-                elementType = "input";
-            }else if(componentType == "Toggle"){
-                compW = 60;
-                compH = 22;
-                elementType = "span";
-            }else if(componentType == "ToggleButton"){
-                compW = 118;
-                compH = 52;
-            }else{
-                compW = 100;
-                compH = 25;
             }
 
-
             /*
             componentContainer = NJUtils.makeNJElement("div", componentType, "component");
             componentContainer.elementModel.isComponent = true;
@@ -318,6 +248,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
 
 
+        }
+    },
+
+    /**
+     *
+     */
+    getStageCenter: {
+        value: function() {
+            //if(!this.centerStage) {
+                var top, left;
+
+                top = ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.documentRoot, "height"))) / 2);
+                left = ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.documentRoot, "width"))) / 2);
+                //this.centerStage = [top, left];
+                return [left, top];
+            //}
+
+            //return this.centerStage;
         }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 47df0aff81c25334b129047bb227ea5015357eda Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 9 Feb 2012 16:22:03 -0800
Subject: Setting defaults and more cleanup

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.js                         | 65 +++-------------------
 1 file changed, 8 insertions(+), 57 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 33241d42..953c0484 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -160,7 +160,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             var that = this;
             var element = this.makeComponent(component.component);
 
-            this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) {
+            this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) {
 
                 var pos = that.getStageCenter();
 
@@ -181,73 +181,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     makeComponent: {
         value: function(name) {
+            var el;
+
             switch(name) {
                 case "button":
-                    var el;
                     el = NJUtils.makeNJElement(name, "Button", "component");
                     el.elementModel.pi = "ButtonPi";
                     el.setAttribute("type", "button");
-                    return el;
+                    el.innerHTML = "Button";
+                    break;
                 case "textfield": {
-                    var el;
-                    el = NJUtils.makeNJElement("input", "Text Field", "component");
+                    el = NJUtils.makeNJElement("input", "Textfield", "component");
                     el.elementModel.pi = "TextfieldPi";
                     el.setAttribute("type", "text");
-                    return el;
+                    break;
                 }
             }
 
-        }
-    },
-
-    ___addComponentToStage:{
-        value:function(component, dropX, dropY){
-//            var compW = 100,
-//                compH = 100,
-//
-            var componentEl, componentInstance;
-
-            if(componentType == "Button"){
-                componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"});
-                componentEl.setAttribute("type", "button");
-
-                componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"}, this.callback);
-
-            }else if(componentType == "Checkbox"){
-                compW = 53;
-                compH = 53;
-//                elementType = "input";
-            }
-
-            /*
-            componentContainer = NJUtils.makeNJElement("div", componentType, "component");
-            componentContainer.elementModel.isComponent = true;
-            */
-            var styles = {
-                'position': 'absolute',
-                'top'       : dropY + 'px',
-                'left'      : dropX + 'px',
-//                'width'     : compW + 'px',
-//                'height'    : compH + 'px',
-                '-webkit-transform-style' : 'preserve-3d',
-                '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
-            };
-
-
-            //componentElement = NJUtils.makeNJElement(elementType, "ComponentDiv", "block");
-
-            //componentContainer.appendChild(componentElement);
-
-            this.application.ninja.currentDocument.setComponentInstance(componentInstance, componentEl);
-
-            NJevent("elementAdding", {"el": componentEl, "data":styles});
-            /*
-            var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType);
-
-            */
-
-
-
+            return el;
         }
     },
 
-- 
cgit v1.2.3


From 0eb739ab722ea768ab0fa1c5de0ee09ed1a576ea Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 14 Feb 2012 00:25:45 -0800
Subject: Add support for drag and drop for the components.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.js                         | 63 +++++++++++++++++-----
 1 file changed, 49 insertions(+), 14 deletions(-)

(limited to 'js/panels/Components')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 953c0484..7e5a76ee 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -53,12 +53,27 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: 0
     },
 
+    dragComponent: {
+        value: null
+