From 9d0f0e55167e0cb2f73dd056cb35a2e82b45340e Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 1 Feb 2012 14:36:41 -0800 Subject: Changing the user document application to use a main component Signed-off-by: Valerio Virgillito --- .../montage-application-cloud/main.reel/main.js | 163 +++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 user-document-templates/montage-application-cloud/main.reel/main.js (limited to 'user-document-templates/montage-application-cloud/main.reel') 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 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +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 = ""; + 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 -- 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 --- .../montage-application-cloud/main.reel/main.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'user-document-templates/montage-application-cloud/main.reel') 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(); -- 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. --- .../montage-application-cloud/main.reel/main.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'user-document-templates/montage-application-cloud/main.reel') 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 036d6c24..90262073 100644 --- a/user-document-templates/montage-application-cloud/main.reel/main.js +++ b/user-document-templates/montage-application-cloud/main.reel/main.js @@ -45,7 +45,14 @@ exports.Main = Montage.create(Component, { var button = require.async(stro) .then(function (button) { - callback(); + var btIns = button["Button"]; + + btIns.element = containerElement; + btIns.deserializedFromTemplate(); + + btIns.needsDraw = true; + btIns.label = "Button"; + callback(btIns, containerElement); }) .end(); -- 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 --- .../montage-application-cloud/main.reel/main.js | 32 ++++++---------------- 1 file changed, 8 insertions(+), 24 deletions(-) (limited to 'user-document-templates/montage-application-cloud/main.reel') 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 90262073..b4ed049f 100644 --- a/user-document-templates/montage-application-cloud/main.reel/main.js +++ b/user-document-templates/montage-application-cloud/main.reel/main.js @@ -37,36 +37,20 @@ exports.Main = Montage.create(Component, { switch(componentType.type){ case "Button": - //var tmpFix = ("montage/ui/button.reel"); - //var str = "montage/ui/button.reel"; - var stro = componentType.path; - -// var button = (stro); - - var button = require.async(stro) + var button = require.async(componentType.path) .then(function (button) { - var btIns = button["Button"]; + var buttonObj = button["Button"]; + var btIns = buttonObj.create(); - btIns.element = containerElement; - btIns.deserializedFromTemplate(); + btIns.element = containerElement; + btIns.deserializedFromTemplate(); - btIns.needsDraw = true; - btIns.label = "Button"; - callback(btIns, containerElement); + btIns.needsDraw = true; + btIns.label = "Button"; + callback(btIns, containerElement); }) .end(); - /* - var buttonInstance = button[componentType.name]; - - buttonInstance.element = containerElement; - buttonInstance.deserializedFromTemplate(); - - buttonInstance.needsDraw = true; - buttonInstance.label = "Button"; - - return buttonInstance; - */ break; case "Checkbox": component = Checkbox.create(); -- 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 --- .../montage-application-cloud/main.reel/main.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) (limited to 'user-document-templates/montage-application-cloud/main.reel') 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 b4ed049f..2e331cdc 100644 --- a/user-document-templates/montage-application-cloud/main.reel/main.js +++ b/user-document-templates/montage-application-cloud/main.reel/main.js @@ -52,6 +52,21 @@ exports.Main = Montage.create(Component, { .end(); break; + case "Textfield": + var tf = require.async(componentType.path) + .then(function (tf) { + var buttonObj = tf["Textfield"]; + var btIns = buttonObj.create(); + + btIns.element = containerElement; + btIns.deserializedFromTemplate(); + + btIns.needsDraw = true; + btIns.value = "Button"; + callback(btIns, containerElement); + }) + .end(); + break case "Checkbox": component = Checkbox.create(); component.element = containerElement; @@ -135,11 +150,6 @@ exports.Main = Montage.create(Component, { 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; -- 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 --- .../montage-application-cloud/main.reel/main.js | 141 ++------------------- 1 file changed, 12 insertions(+), 129 deletions(-) (limited to 'user-document-templates/montage-application-cloud/main.reel') 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 2e331cdc..86871fd3 100644 --- a/user-document-templates/montage-application-cloud/main.reel/main.js +++ b/user-document-templates/montage-application-cloud/main.reel/main.js @@ -32,140 +32,23 @@ exports.Main = Montage.create(Component, { }, addComponentToUserDocument:{ - value:function(containerElement, componentType, callback){ - var component = null; - switch(componentType.type){ - case "Button": + value:function(element, data, callback){ - var button = require.async(componentType.path) - .then(function (button) { - var buttonObj = button["Button"]; - var btIns = buttonObj.create(); + var component; - btIns.element = containerElement; - btIns.deserializedFromTemplate(); + component = require.async(data.path) + .then(function(component) { + var componentRequire = component[data.name]; + var componentInstance = componentRequire.create(); - btIns.needsDraw = true; - btIns.label = "Button"; - callback(btIns, containerElement); - }) - .end(); + componentInstance.element = element; + componentInstance.deserializedFromTemplate(); + componentInstance.needsDraw = true; - break; - case "Textfield": - var tf = require.async(componentType.path) - .then(function (tf) { - var buttonObj = tf["Textfield"]; - var btIns = buttonObj.create(); + callback(componentInstance, element); + }) + .end(); - btIns.element = containerElement; - btIns.deserializedFromTemplate(); - - btIns.needsDraw = true; - btIns.value = "Button"; - callback(btIns, containerElement); - }) - .end(); - 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 = ""; - 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 "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; } } -- cgit v1.2.3