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

support for custom components inside templates with tests

Browse Source
This commit is contained in:
Vladimir Enchev
2015-04-24 14:44:12 +03:00
parent e75b14f609
commit efcc0d0ddf
4 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,10 @@ import observable = require("data/observable");
import stackLayoutModule = require("ui/layouts/stack-layout");
import labelModule = require("ui/label");
import myCustomControlWithoutXml = require("./mymodule/MyControl");
import listViewModule = require("ui/list-view");
import frame = require("ui/frame");
import helper = require("../ui/helper");
import viewModule = require("ui/core/view");
export var test_load_IsDefined = function () {
TKUnit.assert(types.isFunction(builder.load), "ui/builder should have load method!");
@ -179,3 +183,31 @@ export var test_parse_ShouldParseCustomComponentWitXmlWithAttributes = function
TKUnit.assert(panel.visibility === "collapsed", "Expected result: 'collapsed'; Actual result: " + panel.visibility);
};
export function test_parse_ShouldParseCustomComponentWithoutXmlInListViewTemplate() {
var p = <page.Page>builder.parse('<Page xmlns:customControls="xml-declaration/mymodule"><ListView items="{{ items }}" itemLoading="{{ itemLoading }}"><ListView.itemTemplate><customControls:MyControl /></ListView.itemTemplate></ListView></Page>');
function testAction(views: Array<viewModule.View>) {
var ctrl;
var obj = new observable.Observable();
obj.set("items", [1]);
obj.set("itemLoading", function (args: listViewModule.ItemEventData) {
ctrl = args.view
});
p.bindingContext = obj;
TKUnit.wait(0.2);
TKUnit.assert(ctrl instanceof myCustomControlWithoutXml.MyControl, "Expected result: custom control is defined!; Actual result: " + ctrl);
};
helper.navigate(function () { return p; });
try {
testAction([p.content, p]);
}
finally {
helper.goBack();
}
}

51
ui/builder/builder.ts
View File

@ -32,10 +32,10 @@ function parseInternal(value: string, exports: any): componentBuilder.ComponentM
if (templateBuilder) {
if (args.eventType === xml.ParserEventType.StartElement) {
templateBuilder.addStartElement(args.elementName, args.attributes);
templateBuilder.addStartElement(args.prefix, args.namespace, args.elementName, args.attributes);
} else if (args.eventType === xml.ParserEventType.EndElement) {
if (templateBuilder.elementName !== args.elementName) {
templateBuilder.addEndElement(args.elementName);
templateBuilder.addEndElement(args.prefix, args.elementName);
} else {
templateBuilder.build();
templateBuilder = undefined;
@ -72,35 +72,40 @@ function parseInternal(value: string, exports: any): componentBuilder.ComponentM
var componentModule: componentBuilder.ComponentModule;
if (args.namespace) {
if (args.prefix) {
// Custom components
var xmlPath = fs.path.join(fs.knownFolders.currentApp().path, args.namespace, args.elementName) + ".xml";
if (fs.File.exists(xmlPath)) {
// Custom components with XML
var jsPath = xmlPath.replace(".xml", ".js");
var subExports;
if (fs.File.exists(jsPath)) {
// Custom components with XML and code
subExports = require(jsPath.replace(".js", ""))
}
componentModule = loadInternal(xmlPath, subExports);
var ns = args.namespace;
// Attributes will be transfered to the custom component
if (types.isDefined(componentModule) && types.isDefined(componentModule.component)) {
var attr: string;
for (attr in args.attributes) {
componentBuilder.setPropertyValue(componentModule.component, subExports, exports, attr, args.attributes[attr]);
if (ns) {
var xmlPath = fs.path.join(fs.knownFolders.currentApp().path, ns, args.elementName) + ".xml";
if (fs.File.exists(xmlPath)) {
// Custom components with XML
var jsPath = xmlPath.replace(".xml", ".js");
var subExports;
if (fs.File.exists(jsPath)) {
// Custom components with XML and code
subExports = require(jsPath.replace(".js", ""))
}
}
} else {
// Custom components without XML
componentModule = componentBuilder.getComponentModule(args.elementName, args.namespace, args.attributes, exports);
componentModule = loadInternal(xmlPath, subExports);
// Attributes will be transfered to the custom component
if (types.isDefined(componentModule) && types.isDefined(componentModule.component)) {
var attr: string;
for (attr in args.attributes) {
componentBuilder.setPropertyValue(componentModule.component, subExports, exports, attr, args.attributes[attr]);
}
}
} else {
// Custom components without XML
componentModule = componentBuilder.getComponentModule(args.elementName, ns, args.attributes, exports);
}
}
} else {
// Default components
componentModule = componentBuilder.getComponentModule(args.elementName, args.namespace, args.attributes, exports);
componentModule = componentBuilder.getComponentModule(args.elementName, ns, args.attributes, exports);
}
if (componentModule) {

4
ui/builder/template-builder.d.ts vendored
View File

@ -6,8 +6,8 @@ declare module "ui/builder/template-builder" {
constructor(templateProperty: TemplateProperty);
elementName: string;
addStartElement(elementName: string, attributes: Object);
addEndElement(elementName: string);
addStartElement(prefix: string, namespace: string, elementName: string, attributes: Object);
addEndElement(prefix: string, elementName: string);
build();
}

20
ui/builder/template-builder.ts
View File

@ -15,12 +15,16 @@ export class TemplateBuilder {
return this._templateProperty.elementName;
}
public addStartElement(elementName: string, attributes: Object) {
this._items.push("<" + elementName + (attributes ? " " + getAttributesAsString(attributes) + ">" : ">"));
public addStartElement(prefix: string, namespace: string, elementName: string, attributes: Object) {
this._items.push("<" +
getElementNameWithPrefix(prefix, elementName) +
(namespace ? " " + getNamespace(prefix, namespace) : "") +
(attributes ? " " + getAttributesAsString(attributes) : "") +
">");
}
public addEndElement(elementName: string) {
this._items.push("</" + elementName + ">");
public addEndElement(prefix: string, elementName: string) {
this._items.push("</" + getElementNameWithPrefix(prefix, elementName) + ">");
}
public build() {
@ -43,3 +47,11 @@ function getAttributesAsString(attributes: Object): string {
return result.join(" ");
}
function getElementNameWithPrefix(prefix: string, elementName: string): string {
return (prefix ? prefix + ":" : "") + elementName;
}
function getNamespace(prefix: string, namespace: string): string {
return 'xmlns:' + prefix + '="' + namespace + '"';
}