Changing the user document application to use a main component

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

3 files changed, 167 insertions, 4 deletions

diff --git a/user-document-templates/montage-application-cloud/index.html b/user-document-templates/montage-application-cloud/index.html
index d1f9634d..ac0405ca 100644
--- a/user-document-templates/montage-application-cloud/index.html
+++ b/user-document-templates/montage-application-cloud/index.html
@@ -13,7 +13,7 @@
         <link href="default_html.css" id="nj-stage-stylesheet" rel="stylesheet" type="text/css" media="screen"/>
         <link href="styles.css" id="nj-default-stylesheet" rel="stylesheet" type="text/css" media="screen"/>
     
-        <script type="text/javascript" data-package="." src="../../node_modules/montage/montage.js"></script>
+        <script type="text/javascript" data-package="." src="../../node_modules/montage-user/montage.js"></script>
     
         <script type="text/javascript">
                 function getElement(x,y) {
@@ -24,8 +24,8 @@
         <script type="text/montage-serialization">
         {
             "owner": {
-                "module": "./appdelegate",
-                "name": "MyAppDelegate"
+                "module": "main.reel",
+                "name": "Main"
             }
         }
         </script>
diff --git a/user-document-templates/montage-application-cloud/main.reel/main.js b/user-document-templates/montage-application-cloud/main.reel/main.js
new file mode 100644
index 00000000..415794d8
--- /dev/null
+++ b/user-document-templates/montage-application-cloud/main.reel/main.js
@@ -0,0 +1,163 @@
+/* <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;
+
+//var Button = ("montage/ui/button.reel").Button;
+
+exports.Main = Montage.create(Component, {
+
+    hasTemplate: {
+        value: false
+    },
+
+    /**
+     * Adding window hooks to callback into this object from Ninja.
+     */
+    templateDidLoad: {
+        value: function(){
+            window.addComponent = this.addComponentToUserDocument;
+//            window.addBinding = this.addBindingToUserDocument;
+
+            // Dispatch event when this template has loaded.
+            var newEvent = document.createEvent( "CustomEvent" );
+            newEvent.initCustomEvent( "userTemplateDidLoad", false, true );
+
+            document.body.dispatchEvent( newEvent );
+
+        }
+    },
+
+    addComponentToUserDocument:{
+        value:function(containerElement, componentType){
+            var component = null;
+            switch(componentType.type){
+                case "Button":
+
+                    //var tmpFix = require("montage/ui/button.reel");
+                    //var str = "montage/ui/button.reel";
+                    var stro = componentType.path;
+
+                    var button = require(stro);
+
+                    var buttonInstance = button[componentType.name];
+
+                    buttonInstance.element = containerElement;
+                    buttonInstance.deserializedFromTemplate();
+
+                    buttonInstance.needsDraw = true;
+                    buttonInstance.label = "Button";
+
+                    return buttonInstance;
+                    break;
+                case "Checkbox":
+                    component = Checkbox.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "Condition":
+                    component = Condition.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "DynamicText":
+                    component = DynamicText.create();
+                    component.element = containerElement;
+                    component.value = "Label";
+                    component.needsDraw = true;
+                    break;
+                case "HotText":
+                    component = HotText.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "HotTextUnit":
+                    component = HotTextUnit.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "FlowController":
+                    component = FlowController.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "ImageContainer":
+                    component = ImageContainer.create();
+                    component.element = containerElement;
+                    component.element.style.width = "285px";
+                    component.element.style.height = "235px";
+                    component.src = "placeholder.jpg";
+                    component.needsDraw = true;
+                    break;
+                case "Progress":
+                    component = Progress.create();
+                    component.element = containerElement;
+                    component.loading = true;
+                    component.needsDraw = true;
+                    break;
+                case "Repetition":
+                    component = Repetition.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "Scrollview":
+                    component = Scrollview.create();
+                    component.element = containerElement;
+                    component.element.style.width = "200px";
+                    component.element.style.height = "200px";
+                    var dummyContent = document.createElement("div");
+                    dummyContent.innerHTML = "<img src='image3.jpg'/>";
+                    component.element.appendChild(dummyContent);
+                    component.needsDraw = true;
+                    break;
+                case "Slider":
+                    component = Slider.create();
+                    component.element = containerElement;
+//                    component.value = 0;
+//                    component._minValue = 0;
+//                    component._maxValue = 100;
+                    component.needsDraw = true;
+                    break;
+                case "Slot":
+                    component = Slot.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "Substitution":
+                    component = Substitution.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "TextArea":
+                    component = TextArea.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "Textfield":
+                    component = Textfield.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "Toggle":
+                    component = Toggle.create();
+                    component.element = containerElement;
+                    component.needsDraw = true;
+                    break;
+                case "ToggleButton":
+                    component = ToggleButton.create();
+                    component.element = containerElement;
+                    component.element.classList.add("text");
+                    component.needsDraw = true;
+                    break;
+                default:
+                    console.log("Unrecognized component type");
+            }
+            //console.log(component);
+            return component;
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/user-document-templates/montage-application-cloud/package.json b/user-document-templates/montage-application-cloud/package.json
index 5466b3d7..4be312d5 100644
--- a/user-document-templates/montage-application-cloud/package.json
+++ b/user-document-templates/montage-application-cloud/package.json
@@ -3,6 +3,6 @@
            "lib": ""
        },