From 9056482ddb0ce1c3011443cd808113d6ff388304 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Thu, 5 Mar 2015 17:37:09 +0200
Subject: [PATCH 1/3] Settings app update

---
 CrossPlatformModules.csproj                   |  6 +-
 .../{main-page.css => app.css}                |  0
 apps/template-settings/app.ts                 |  4 +
 apps/template-settings/main-page.ts           | 11 +--
 apps/template-settings/main-page.xml          |  2 +-
 apps/template-settings/view-model.ts          | 75 +++++++++++++++++++
 6 files changed, 83 insertions(+), 15 deletions(-)
 rename apps/template-settings/{main-page.css => app.css} (100%)

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 79200f9ac..c6db0b1f4 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -494,6 +494,7 @@
   </ItemGroup>
   <ItemGroup>
     <Content Include="apps\gallery-app\layouts\dock-layout.xml" />
+    <Content Include="apps\template-settings\app.css" />
     <Content Include="apps\tests\app\binding_tests.xml" />
     <Content Include="apps\ui-tests-app\pages\i86.xml" />
     <Content Include="apps\template-blank\app.css" />
@@ -691,9 +692,6 @@
     <Content Include="apps\gallery-app\views\text-field.xml" />
     <Content Include="apps\gallery-app\views\label.xml" />
     <Content Include="apps\gallery-app\views\button.xml" />
-    <Content Include="apps\template-settings\main-page.css">
-      <DependentUpon>main-page.xml</DependentUpon>
-    </Content>
     <Content Include="apps\template-settings\main-page.xml">
       <SubType>Designer</SubType>
     </Content>
@@ -1460,7 +1458,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>
\ No newline at end of file
diff --git a/apps/template-settings/main-page.css b/apps/template-settings/app.css
similarity index 100%
rename from apps/template-settings/main-page.css
rename to apps/template-settings/app.css
diff --git a/apps/template-settings/app.ts b/apps/template-settings/app.ts
index 83670f56b..eb622839f 100644
--- a/apps/template-settings/app.ts
+++ b/apps/template-settings/app.ts
@@ -1,3 +1,7 @@
 import application = require("application");
+
+// Remove this in the AppBuilder templates
+application.cssFile = "app/template-settings/app.css"
+
 application.mainModule = "app/main-page";
 application.start();
diff --git a/apps/template-settings/main-page.ts b/apps/template-settings/main-page.ts
index 4544b3620..f41abd3da 100644
--- a/apps/template-settings/main-page.ts
+++ b/apps/template-settings/main-page.ts
@@ -1,6 +1,5 @@
 import observable = require("data/observable");
 import pages = require("ui/page");
-import dialogs = require("ui/dialogs");
 import vmModule = require("./view-model");
 
 var viewModel = vmModule.settingsViewModel;
@@ -9,12 +8,4 @@ export function pageLoaded(args: observable.EventData) {
     // The page has loaded.
     var page = <pages.Page>args.object;
     page.bindingContext = viewModel;
-}
-
-export function promptName(args: observable.EventData) {
-    dialogs.prompt("Enter your name:", viewModel.name).then((promptResult) => {
-        if (promptResult.result) {
-            viewModel.set("name", promptResult.text);
-        }
-    });
-}
+}
\ No newline at end of file
diff --git a/apps/template-settings/main-page.xml b/apps/template-settings/main-page.xml
index dd43b0a44..3f09696ba 100644
--- a/apps/template-settings/main-page.xml
+++ b/apps/template-settings/main-page.xml
@@ -6,7 +6,7 @@
 
       <!-- Name -->
       <Label cssClass="field" text="Name"/>
-      <Button cssClass="field-dialog-button" text="{{ name }}" tap="promptName" col="1" colSpan="2"/>
+      <Button cssClass="field-dialog-button" text="{{ name }}" tap="{{ promptName }}" col="1" colSpan="2"/>
 
       <!-- Height -->
       <Label cssClass="field" text="Height" row="1"/>
diff --git a/apps/template-settings/view-model.ts b/apps/template-settings/view-model.ts
index d9aba3f72..d63a7f09c 100644
--- a/apps/template-settings/view-model.ts
+++ b/apps/template-settings/view-model.ts
@@ -1,5 +1,6 @@
 import observable = require("data/observable");
 import localSettings = require("local-settings");
+import dialogs = require("ui/dialogs");
 
 var NAME = "settings-name";
 var HEIGHT = "settings-height";
@@ -50,6 +51,80 @@ export class SettingsViewModel extends observable.Observable {
     set soundVolume(value: number) {
         localSettings.setNumber(SOUND_VOLUME, value);
     }
+
+    public promptName(args: observable.EventData) {
+        dialogs.prompt("Enter your name:", this.name).then((promptResult) => {
+            if (promptResult.result) {
+                this.set("name", promptResult.text);
+            }
+        });
+    }
 }
 
 export var settingsViewModel = new SettingsViewModel();
+
+
+// Pure JavaScript  code: 
+//var observable = require("data/observable");
+//var localSettings = require("local-settings");
+
+//var NAME = "settings-name";
+//var HEIGHT = "settings-height";
+//var WEIGHT = "settings-weight";
+//var VIBRATE = "settings-vibrate";
+//var SOUND = "settings-sound";
+//var SOUND_VOLUME = "settings-sound-value";
+
+//var settings = new observable.Observable();
+//Object.defineProperty(settings, "name", {
+//    get: function () { return localSettings.getString(NAME, "John Doe"); },
+//    set: function (value) { localSettings.setString(NAME, value); },
+//    enumerable: true,
+//    configurable: true
+//});
+
+//Object.defineProperty(settings, "height", {
+//    get: function () { return localSettings.getString(HEIGHT, "180"); },
+//    set: function (value) { localSettings.setString(HEIGHT, value); },
+//    enumerable: true,
+//    configurable: true
+//});
+
+//Object.defineProperty(settings, "weight", {
+//    get: function () { return localSettings.getString(WEIGHT, "80"); },
+//    set: function (value) { localSettings.setString(WEIGHT, value); },
+//    enumerable: true,
+//    configurable: true
+//});
+
+//Object.defineProperty(settings, "vibrateEnabled", {
+//    get: function () { return localSettings.getBoolean(VIBRATE, true); },
+//    set: function (value) { localSettings.setBoolean(VIBRATE, value); },
+//    enumerable: true,
+//    configurable: true
+//});
+
+//Object.defineProperty(settings, "soundEnabled", {
+//    get: function () { return localSettings.getBoolean(SOUND, true); },
+//    set: function (value) { localSettings.setBoolean(SOUND, value); },
+//    enumerable: true,
+//    configurable: true
+//});
+
+//Object.defineProperty(settings, "soundVolume", {
+//    get: function () { return localSettings.getNumber(SOUND_VOLUME, 100); },
+//    set: function (value) { localSettings.setNumber(SOUND_VOLUME, value); },
+//    enumerable: true,
+//    configurable: true
+//});
+
+//settings.promptName = function (args) {
+//    dialogs.prompt("Enter your name:", settings.name).then(function (promptResult) {
+//        if (promptResult.result) {
+//            settings.set("name", promptResult.text);
+//        }
+//    });
+//}
+
+//exports.settingsViewModel = settings;
+

From d699fea65f7147bdb0f6f6f9edd4a191ba26ee95 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Thu, 5 Mar 2015 18:28:05 +0200
Subject: [PATCH 2/3] Fix: binding to event does not work if there are other
 properties set in XML after the event binding

---
 ui/builder/component-builder.ts | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/ui/builder/component-builder.ts b/ui/builder/component-builder.ts
index 94bd620bc..c177dc487 100644
--- a/ui/builder/component-builder.ts
+++ b/ui/builder/component-builder.ts
@@ -74,19 +74,7 @@ export function getComponentModule(elementName: string, namespace: string, attri
 
             if (isBinding(attrValue) && instance.bind) {
                 if (isKnownEvent(attr, instanceModule)) {
-                    // Get the event handler from instance.bindingContext.
-                    var propertyChangeHandler = (args: observable.PropertyChangeData) => {
-                        if (args.propertyName === "bindingContext") {
-                            var handler = instance.bindingContext && instance.bindingContext[getBindingExpressionFromAttribute(attrValue)];
-                            // Check if the handler is function and add it to the instance for specified event name.
-                            if (types.isFunction(handler)) {
-                                instance.on(attr, handler, instance.bindingContext);
-                            }
-                            instance.off(observable.knownEvents.propertyChange, propertyChangeHandler);
-                        }
-                    };
-
-                    instance.on(observable.knownEvents.propertyChange, propertyChangeHandler);
+                    attachEventBinding(instance, attr, attrValue);
                 } else {
                     instance.bind(getBinding(instance, attr, attrValue));
                 }
@@ -147,6 +135,23 @@ export function getComponentModule(elementName: string, namespace: string, attri
     return componentModule;
 }
 
+
+function attachEventBinding(instance: view.View, eventName: string, value:string) {
+    // Get the event handler from instance.bindingContext.
+    var propertyChangeHandler = (args: observable.PropertyChangeData) => {
+        if (args.propertyName === "bindingContext") {
+            var handler = instance.bindingContext && instance.bindingContext[getBindingExpressionFromAttribute(value)];
+            // Check if the handler is function and add it to the instance for specified event name.
+            if (types.isFunction(handler)) {
+                instance.on(eventName, handler, instance.bindingContext);
+            }
+            instance.off(observable.knownEvents.propertyChange, propertyChangeHandler);
+        }
+    };
+
+    instance.on(observable.knownEvents.propertyChange, propertyChangeHandler);
+}
+
 function isGesture(name: string, instance: any): boolean {
     return gestures.fromString(name.toLowerCase()) !== undefined;
 }

From d2de35b10541019fe1d5ba7d912be21236bfd462 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Thu, 5 Mar 2015 18:34:32 +0200
Subject: [PATCH 3/3] Lint errors

---
 apps/template-settings/view-model.ts | 1 -
 ui/builder/component-builder.ts      | 1 -
 2 files changed, 2 deletions(-)

diff --git a/apps/template-settings/view-model.ts b/apps/template-settings/view-model.ts
index d63a7f09c..b70ba5788 100644
--- a/apps/template-settings/view-model.ts
+++ b/apps/template-settings/view-model.ts
@@ -63,7 +63,6 @@ export class SettingsViewModel extends observable.Observable {
 
 export var settingsViewModel = new SettingsViewModel();
 
-
 // Pure JavaScript  code: 
 //var observable = require("data/observable");
 //var localSettings = require("local-settings");
diff --git a/ui/builder/component-builder.ts b/ui/builder/component-builder.ts
index c177dc487..efe61f567 100644
--- a/ui/builder/component-builder.ts
+++ b/ui/builder/component-builder.ts
@@ -135,7 +135,6 @@ export function getComponentModule(elementName: string, namespace: string, attri
     return componentModule;
 }
 
-
 function attachEventBinding(instance: view.View, eventName: string, value:string) {
     // Get the event handler from instance.bindingContext.
     var propertyChangeHandler = (args: observable.PropertyChangeData) => {