Merge branch 'ui-builder-sub-props'

apps/tests/xml-declaration/mainPage.xml

@@ -7,7 +7,7 @@
         <TabViewItem.view>
           <StackLayout>
 
-            <ToolBar>
+            <!--<ToolBar>
               <ToolBar.items>
                 <ToolBarItem>
                   <ToolBarItem.view>
@@ -25,7 +25,7 @@
                   </ToolBarItem.view>
                 </ToolBarItem>
               </ToolBar.items>
-            </ToolBar>
+            </ToolBar>-->
 
             <SegmentedBar selectedIndex="1" style="background-color: red; color: white" selectedBackgroundColor="green">
               <SegmentedBar.items>

apps/tests/xml-declaration/xml-declaration-tests.ts

@@ -143,4 +143,14 @@ export var test_parse_ShouldParseBindingsWithObservable = function () {
     obj.set("myProp", false);
 
     TKUnit.assert(sw.checked === false, "Expected result: false; Actual result: " + sw.checked + "; type: " + typeof (sw.checked));
+};
+
+export var test_parse_ShouldParseSubProperties = function () {
+    var p = <page.Page>builder.parse("<Page><Switch style.visibility='collapsed' checked='{{ myProp }}' /></Page>");
+    var obj = new observable.Observable();
+    obj.set("myProp", true);
+    p.bindingContext = obj;
+    var sw = <switchModule.Switch>p.content;
+
+    TKUnit.assert(sw.visibility === "collapsed", "Expected result: collapsed; Actual result: " + sw.visibility + "; type: " + typeof (sw.visibility));
 };

ui/builder/component-builder.ts

@@ -74,68 +74,25 @@ export function getComponentModule(elementName: string, namespace: string, attri
 
         for (var attr in attributes) {
 
-            var attrValue = attributes[attr];
+            var attrValue = <string>attributes[attr];
 
-            if (isBinding(attrValue) && instance.bind) {
+            if (attr.indexOf(".") !== -1) {
-                if (isKnownEvent(attr, instanceModule)) {
+                var subObj = instance;
-                    attachEventBinding(instance, attr, attrValue);
+                var properties = attr.split(".");
-                } else {
+                var subPropName = properties[properties.length - 1];
-                    var bindOptions = bindingBuilder.getBindingOptions(attr, getBindingExpressionFromAttribute(attrValue));
-                    instance.bind({
-                        sourceProperty : bindOptions[bindingBuilder.bindingConstants.sourceProperty], 
-                        targetProperty: bindOptions[bindingBuilder.bindingConstants.targetProperty],
-                        expression: bindOptions[bindingBuilder.bindingConstants.expression],
-                        twoWay: bindOptions[bindingBuilder.bindingConstants.twoWay]
-                    }, bindOptions[bindingBuilder.bindingConstants.source]);
-                }
-            } else if (isKnownEvent(attr, instanceModule)) {
-                // Get the event handler from page module exports.
-                var handler = exports && exports[attrValue];
 
-                // Check if the handler is function and add it to the instance for specified event name.
+                var i: number;
-                if (types.isFunction(handler)) {
+                for (i = 0; i < properties.length - 1; i++) {
-                    instance.on(attr, handler);
+                    if (types.isDefined(subObj)) {
-                }
+                        subObj = subObj[properties[i]];
-            } else if (isGesture(attr, instance)) {
-                // Get the event handler from page module exports.
-                var gestureHandler = exports && exports[attrValue];
-
-                // Check if the handler is function and add it to the instance for specified gesture.
-                if (types.isFunction(gestureHandler)) {
-                    instance.observe(gestures.fromString(attr.toLowerCase()), gestureHandler);
-                }
-            } else if (attr === ROW) {
-                gridLayoutModule.GridLayout.setRow(instance, !isNaN(+attrValue) && +attrValue);
-            } else if (attr === COL) {
-                gridLayoutModule.GridLayout.setColumn(instance, !isNaN(+attrValue) && +attrValue);
-            } else if (attr === COL_SPAN) {
-                gridLayoutModule.GridLayout.setColumnSpan(instance, !isNaN(+attrValue) && +attrValue);
-            } else if (attr === ROW_SPAN) {
-                gridLayoutModule.GridLayout.setRowSpan(instance, !isNaN(+attrValue) && +attrValue);
-            } else if (attr === LEFT) {
-                absoluteLayoutDef.AbsoluteLayout.setLeft(instance, !isNaN(+attrValue) && +attrValue);
-            } else if (attr === TOP) {
-                absoluteLayoutDef.AbsoluteLayout.setTop(instance, !isNaN(+attrValue) && +attrValue);
-            } else if (attr === DOCK) {
-                dockLayoutDef.DockLayout.setDock(instance, attrValue);
-            } else {
-                var attrHandled = false;
-
-                if ((<any>instance).applyXmlAttribute) {
-                    attrHandled = (<any>instance).applyXmlAttribute(attr, attrValue);
-                }
-
-                if (!attrHandled) {
-                    // Try to convert value to number.
-                    var valueAsNumber = +attrValue;
-                    if (!isNaN(valueAsNumber)) {
-                        instance[attr] = valueAsNumber;
-                    } else if (attrValue && (attrValue.toLowerCase() === "true" || attrValue.toLowerCase() === "false")) {
-                        instance[attr] = attrValue.toLowerCase() === "true" ? true : false;
-                    } else {
-                        instance[attr] = attrValue;
                     }
                 }
+
+                if (types.isDefined(subObj)) {
+                    setPropertyValue(subObj, instanceModule, exports, subPropName, attrValue);
+                }
+            } else {
+                setPropertyValue(instance, instanceModule, exports, attr, attrValue);
             }
         }
 
@@ -145,7 +102,71 @@ export function getComponentModule(elementName: string, namespace: string, attri
     return componentModule;
 }
 
-function attachEventBinding(instance: view.View, eventName: string, value:string) {
+function setPropertyValue(instance: view.View, instanceModule: Object, exports: Object, propertyName: string, propertyValue: string) {
+    if (isBinding(propertyValue) && instance.bind) {
+        if (isKnownEvent(propertyName, instanceModule)) {
+            attachEventBinding(instance, propertyName, propertyValue);
+        } else {
+            var bindOptions = bindingBuilder.getBindingOptions(propertyName, getBindingExpressionFromAttribute(propertyValue));
+            instance.bind({
+                sourceProperty: bindOptions[bindingBuilder.bindingConstants.sourceProperty],
+                targetProperty: bindOptions[bindingBuilder.bindingConstants.targetProperty],
+                expression: bindOptions[bindingBuilder.bindingConstants.expression],
+                twoWay: bindOptions[bindingBuilder.bindingConstants.twoWay]
+            }, bindOptions[bindingBuilder.bindingConstants.source]);
+        }
+    } else if (isKnownEvent(propertyName, instanceModule)) {
+        // Get the event handler from page module exports.
+        var handler = exports && exports[propertyValue];
+
+        // Check if the handler is function and add it to the instance for specified event name.
+        if (types.isFunction(handler)) {
+            instance.on(propertyName, handler);
+        }
+    } else if (isGesture(propertyName, instance)) {
+        // Get the event handler from page module exports.
+        var gestureHandler = exports && exports[propertyValue];
+
+        // Check if the handler is function and add it to the instance for specified gesture.
+        if (types.isFunction(gestureHandler)) {
+            instance.observe(gestures.fromString(propertyName.toLowerCase()), gestureHandler);
+        }
+    } else if (propertyName === ROW) {
+        gridLayoutModule.GridLayout.setRow(instance, !isNaN(+propertyValue) && +propertyValue);
+    } else if (propertyName === COL) {
+        gridLayoutModule.GridLayout.setColumn(instance, !isNaN(+propertyValue) && +propertyValue);
+    } else if (propertyName === COL_SPAN) {
+        gridLayoutModule.GridLayout.setColumnSpan(instance, !isNaN(+propertyValue) && +propertyValue);
+    } else if (propertyName === ROW_SPAN) {
+        gridLayoutModule.GridLayout.setRowSpan(instance, !isNaN(+propertyValue) && +propertyValue);
+    } else if (propertyName === LEFT) {
+        absoluteLayoutDef.AbsoluteLayout.setLeft(instance, !isNaN(+propertyValue) && +propertyValue);
+    } else if (propertyName === TOP) {
+        absoluteLayoutDef.AbsoluteLayout.setTop(instance, !isNaN(+propertyValue) && +propertyValue);
+    } else if (propertyName === DOCK) {
+        dockLayoutDef.DockLayout.setDock(instance, propertyValue);
+    } else {
+        var attrHandled = false;
+
+        if ((<any>instance).applyXmlAttribute) {
+            attrHandled = (<any>instance).applyXmlAttribute(propertyName, propertyValue);
+        }
+
+        if (!attrHandled) {
+            // Try to convert value to number.
+            var valueAsNumber = +propertyValue;
+            if (!isNaN(valueAsNumber)) {
+                instance[propertyName] = valueAsNumber;
+            } else if (propertyValue && (propertyValue.toLowerCase() === "true" || propertyValue.toLowerCase() === "false")) {
+                instance[propertyName] = propertyValue.toLowerCase() === "true" ? true : false;
+            } else {
+                instance[propertyName] = propertyValue;
+            }
+        }
+    }
+}
+
+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") {