From 29ee9909b27352614349082229ce1202e126347c Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 20 Apr 2015 09:42:32 +0300 Subject: [PATCH 1/5] support for sub properties added --- ui/builder/component-builder.ts | 133 ++++++++++++++++++-------------- 1 file changed, 75 insertions(+), 58 deletions(-) diff --git a/ui/builder/component-builder.ts b/ui/builder/component-builder.ts index 5f612bf1e..081c9ab9c 100644 --- a/ui/builder/component-builder.ts +++ b/ui/builder/component-builder.ts @@ -74,68 +74,21 @@ export function getComponentModule(elementName: string, namespace: string, attri for (var attr in attributes) { - var attrValue = attributes[attr]; + var attrValue = attributes[attr]; - if (isBinding(attrValue) && instance.bind) { - if (isKnownEvent(attr, instanceModule)) { - attachEventBinding(instance, attr, attrValue); - } else { - 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]; + if (attr.indexOf(".") !== -1) { + var subObj = instance; + var properties = attr.split("."); + var subPropName = properties[properties.length - 1]; - // Check if the handler is function and add it to the instance for specified event name. - if (types.isFunction(handler)) { - instance.on(attr, handler); + var i: number; + for (i = 0; i < properties.length - 1; i++) { + 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); + setPropertyValue(subObj, instanceModule, exports, subPropName, attrValue); } else { - var attrHandled = false; - - if ((instance).applyXmlAttribute) { - attrHandled = (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; - } - } + setPropertyValue(instance, instanceModule, exports, attr, attrValue); } } @@ -145,7 +98,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 ((instance).applyXmlAttribute) { + attrHandled = (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") { From bac14bd29d5be8d0dd77fb029540e8c25933b85d Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 20 Apr 2015 09:49:54 +0300 Subject: [PATCH 2/5] is defined checked added --- ui/builder/component-builder.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/builder/component-builder.ts b/ui/builder/component-builder.ts index 081c9ab9c..7ed8c9ccf 100644 --- a/ui/builder/component-builder.ts +++ b/ui/builder/component-builder.ts @@ -86,7 +86,9 @@ export function getComponentModule(elementName: string, namespace: string, attri subObj = subObj[properties[i]]; } - setPropertyValue(subObj, instanceModule, exports, subPropName, attrValue); + if (types.isDefined(subObj)) { + setPropertyValue(subObj, instanceModule, exports, subPropName, attrValue); + } } else { setPropertyValue(instance, instanceModule, exports, attr, attrValue); } From cffd0d54f7d280e75f40bdb22c32177c795ca88d Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 20 Apr 2015 09:53:06 +0300 Subject: [PATCH 3/5] toolbar commented --- apps/tests/xml-declaration/mainPage.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/tests/xml-declaration/mainPage.xml b/apps/tests/xml-declaration/mainPage.xml index d89648edd..a6ea20df9 100644 --- a/apps/tests/xml-declaration/mainPage.xml +++ b/apps/tests/xml-declaration/mainPage.xml @@ -7,7 +7,7 @@ - + From 8b9c30f5eabb2d1ad46bf79ed08e28a70e262632 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 20 Apr 2015 13:43:56 +0300 Subject: [PATCH 4/5] more is defined checks added --- ui/builder/component-builder.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/builder/component-builder.ts b/ui/builder/component-builder.ts index 7ed8c9ccf..acf625795 100644 --- a/ui/builder/component-builder.ts +++ b/ui/builder/component-builder.ts @@ -83,7 +83,9 @@ export function getComponentModule(elementName: string, namespace: string, attri var i: number; for (i = 0; i < properties.length - 1; i++) { - subObj = subObj[properties[i]]; + if (types.isDefined(subObj)) { + subObj = subObj[properties[i]]; + } } if (types.isDefined(subObj)) { From ca3efb18cf0aa279d9d22b46a6bcc7465975b182 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 20 Apr 2015 14:02:21 +0300 Subject: [PATCH 5/5] test for sub properties added --- apps/tests/xml-declaration/xml-declaration-tests.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/apps/tests/xml-declaration/xml-declaration-tests.ts b/apps/tests/xml-declaration/xml-declaration-tests.ts index 79baf9e64..79bc65873 100644 --- a/apps/tests/xml-declaration/xml-declaration-tests.ts +++ b/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 = builder.parse(""); + var obj = new observable.Observable(); + obj.set("myProp", true); + p.bindingContext = obj; + var sw = p.content; + + TKUnit.assert(sw.visibility === "collapsed", "Expected result: collapsed; Actual result: " + sw.visibility + "; type: " + typeof (sw.visibility)); }; \ No newline at end of file