javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 11:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'ui-builder-sub-props'

Browse Source
This commit is contained in:
Erjan Gavalji
2015-04-20 14:32:29 +03:00
parent 9550ebc144 ca3efb18cf
commit 118d1a56a3
3 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/tests/xml-declaration/mainPage.xml
View File

@ -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>

10
apps/tests/xml-declaration/xml-declaration-tests.ts
View File

@ -144,3 +144,13 @@ export var test_parse_ShouldParseBindingsWithObservable = function () {
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));
};

141
ui/builder/component-builder.ts
View File

@ -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 (isKnownEvent(attr, instanceModule)) {
attachEventBinding(instance, attr, attrValue);
if (attr.indexOf(".") !== -1) {
var subObj = instance;
var properties = attr.split(".");
var subPropName = properties[properties.length - 1];
var i: number;
for (i = 0; i < properties.length - 1; i++) {
if (types.isDefined(subObj)) {
subObj = subObj[properties[i]];
}
}
if (types.isDefined(subObj)) {
setPropertyValue(subObj, instanceModule, exports, subPropName, 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];
// Check if the handler is function and add it to the instance for specified event name.
if (types.isFunction(handler)) {
instance.on(attr, handler);
}
} 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;
}
}
setPropertyValue(instance, instanceModule, exports, attr, attrValue);
}
}
@ -145,6 +102,70 @@ export function getComponentModule(elementName: string, namespace: string, attri
return componentModule;
}
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) => {