adding a componentController and callback for lazy loading.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

3 files changed, 47 insertions, 7 deletions

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"){
@@ -140,5 +155,11 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
 
         }
+    },
+
+    callback: {
+        value: function() {
+            console.log("the callback");
+        }
     }
 });
\ No newline at end of file
diff --git a/user-document-templates/montage-application-cloud/main.reel/main.js b/user-document-templates/montage-application-cloud/main.reel/main.js
index 415794d8..036d6c24 100644
--- a/user-document-templates/montage-application-cloud/main.reel/main.js
+++ b/user-document-templates/montage-application-cloud/main.reel/main.js
@@ -32,17 +32,24 @@ exports.Main = Montage.create(Component, {
     },
 
     addComponentToUserDocument:{
-        value:function(containerElement, componentType){
+        value:function(containerElement, componentType, callback){
             var component = null;
             switch(componentType.type){
                 case "Button":
 
-                    //var tmpFix = require("montage/ui/button.reel");
+                    //var tmpFix = ("montage/ui/button.reel");
                     //var str = "montage/ui/button.reel";
                     var stro = componentType.path;
 
-                    var button = require(stro);
+//                    var button = (stro);
 
+                    var button = require.async(stro)
+                    .then(function (button) {
+                       callback();
+                    })
+                    .end();
+
+                    /*
                     var buttonInstance = button[componentType.name];
 
                     buttonInstance.element = containerElement;
@@ -52,6 +59,7 @@ exports.Main = Montage.create(Component, {
                     buttonInstance.label = "Button";
 
                     return buttonInstance;
+                    */
                     break;
                 case "Checkbox":
                     component = Checkbox.create();