Skip to content

Support setting complex properties - e.x. TabViewItems #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 14, 2015
Merged

Support setting complex properties - e.x. TabViewItems #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68a35da
Support setting complex properties - e.x. TabViewItems
Dec 14, 2015
7b57827
webpack fixes
Dec 14, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ng-sample/app/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import "globals";
import "./modules";

// import "./modules";
global.registerModule("./main-page", function () { return require("./main-page"); });

import * as profiling from "./profiling";
Expand Down
47 changes: 24 additions & 23 deletions ng-sample/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
{
"name": "tns-template-hello-world",
"version": "1.2.0",
"author": "Telerik <[email protected]>",
"description": "Nativescript hello-world project template",
"license": "BSD",
"keywords": [
"telerik",
"mobile",
"nativescript",
"{N}",
"tns",
"appbuilder",
"template"
],
"repository": {
"type": "git",
"url": "git://github.com/NativeScript/template-hello-world.git"
},
"bugs": {
"url": "https://github.com/NativeScript/template-hello-world/issues"
},
"homepage": "https://github.com/NativeScript/template-hello-world"
}
"name": "tns-template-hello-world",
"main": "app.js",
"version": "1.2.0",
"author": "Telerik <[email protected]>",
"description": "Nativescript hello-world project template",
"license": "BSD",
"keywords": [
"telerik",
"mobile",
"nativescript",
"{N}",
"tns",
"appbuilder",
"template"
],
"repository": {
"type": "git",
"url": "git://github.com/NativeScript/template-hello-world.git"
},
"bugs": {
"url": "https://github.com/NativeScript/template-hello-world/issues"
},
"homepage": "https://github.com/NativeScript/template-hello-world"
}
41 changes: 27 additions & 14 deletions ng-sample/app/renderer-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,33 @@ export class TemplatedComponent {
})
@View({
directives: [NgIf, NgFor, TemplatedComponent],
template: `
<StackLayout orientation='vertical'>
<templated-component></templated-component>
<Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
<TextField #name text='John' fontSize='20' padding='20'></TextField>
<Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
<Button text='Toggle details' (tap)='onToggleDetails()'></Button>
<TextView *ng-if='showDetails' [text]='detailsText'></TextView>
<Label text='==============================' fontSize='20'></Label>
<StackLayout #more *ng-if='showDetails' orientation='vertical'>
<TextField *ng-for='#detailLine of detailLines' [text]='detailLine'></TextField>
</StackLayout>
<Label text='==============================' fontSize='20'></Label>
</StackLayout>
template: `
<TabView>
<TabView.items>
<TabViewItem title="First Tab">
<TabViewItem.view>
<StackLayout orientation='vertical'>
<templated-component></templated-component>
<Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
<TextField #name text='John' fontSize='20' padding='20'></TextField>
<Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
<Button text='Toggle details' (tap)='onToggleDetails()'></Button>
<TextView *ng-if='showDetails' [text]='detailsText'></TextView>
<Label text='==============================' fontSize='20'></Label>
<StackLayout #more *ng-if='showDetails' orientation='vertical'>
<TextField *ng-for='#detailLine of detailLines' [text]='detailLine'></TextField>
</StackLayout>
<Label text='==============================' fontSize='20'></Label>
</StackLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second Tab">
<TabViewItem.view>
<Label text="Completely different tab!"></Label>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
`,
})
export class RendererTest {
Expand Down
73 changes: 36 additions & 37 deletions ng-sample/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,38 @@
{
"compilerOptions": {
"outDir": "app",
"rootDir": "app",
"module": "commonjs",
"target": "es5",
"inlineSourceMap": true,
"experimentalDecorators": true,
"removeComments": false,
"emitDecoratorMetadata": true,
"noEmitOnError": true
},
"files": [
"app/app.ts",
"app/benchmark.ts",
"app/global.d.ts",
"app/main-page.ts",
"app/main-view-model.ts",
"app/modules.ts",
"app/nativescript-angular/application.d.ts",
"app/nativescript-angular/application.ts",
"app/nativescript-angular/dom_adapter.ts",
"app/nativescript-angular/element-registry.d.ts",
"app/nativescript-angular/element-registry.ts",
"app/nativescript-angular/polyfills/array.ts",
"app/nativescript-angular/renderer.ts",
"app/nativescript-angular/view_node.ts",
"app/nativescript-angular/xhr.ts",
"app/nativescript-angular/zone.ts",
"app/nativescript-angular/zone_patch.ts",
"app/profiling.ts",
"app/renderer-test.ts",
"node_modules/tns-core-modules/tns-core-modules.d.ts"
],
"filesGlob": [
"node_modules/tns-core-modules/tns-core-modules.d.ts",
"app/**/*.ts"
]
"compilerOptions": {
"outDir": "app",
"rootDir": "app",
"module": "commonjs",
"target": "es5",
"inlineSourceMap": true,
"experimentalDecorators": true,
"removeComments": false,
"emitDecoratorMetadata": true,
"noEmitOnError": true
},
"files": [
"app/app.ts",
"app/benchmark.ts",
"app/global.d.ts",
"app/main-page.ts",
"app/main-view-model.ts",
"app/nativescript-angular/application.d.ts",
"app/nativescript-angular/application.ts",
"app/nativescript-angular/dom_adapter.ts",
"app/nativescript-angular/element-registry.d.ts",
"app/nativescript-angular/element-registry.ts",
"app/nativescript-angular/polyfills/array.ts",
"app/nativescript-angular/renderer.ts",
"app/nativescript-angular/view_node.ts",
"app/nativescript-angular/xhr.ts",
"app/nativescript-angular/zone.ts",
"app/nativescript-angular/zone_patch.ts",
"app/profiling.ts",
"app/renderer-test.ts",
"node_modules/tns-core-modules/tns-core-modules.d.ts"
],
"filesGlob": [
"node_modules/tns-core-modules/tns-core-modules.d.ts",
"app/**/*.ts"
]
}
1 change: 1 addition & 0 deletions src/nativescript-angular/element-registry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ registerElement("Slider", () => require("ui/slider").Slider);
registerElement("StackLayout", () => require("ui/layouts/stack-layout").StackLayout);
registerElement("Switch", () => require("ui/switch").Switch);
registerElement("TabView", () => require("ui/tab-view").TabView);
registerElement("TabViewItem", () => require("ui/tab-view").TabViewItem);
registerElement("TextField", () => require("ui/text-field").TextField);
registerElement("TextView", () => require("ui/text-view").TextView);
registerElement("TimePicker", () => require("ui/time-picker").TimePicker);
Expand Down
63 changes: 56 additions & 7 deletions src/nativescript-angular/view_node.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {Switch} from 'ui/switch';
import {LayoutBase} from 'ui/layouts/layout-base';
import gestures = require("ui/gestures");
import {ViewClass, getViewClass, isKnownView} from './element-registry';
import {isString} from "utils/types";

type EventHandler = (args: EventData) => void;

Expand All @@ -28,11 +29,11 @@ export class ViewNode {
private cssClasses: Map<string, boolean> = new Map<string, boolean>();
private static whiteSpaceSplitter = /\s+/;

public children:Array<ViewNode> = [];
public children: Array<ViewNode> = [];

constructor(public parentNode: ViewNode,
public viewName: string,
attrNameAndValues: string[]) {
public viewName: string,
attrNameAndValues: string[]) {
this.setAttributeValues(attrNameAndValues);

if (this.parentNode)
Expand All @@ -57,7 +58,7 @@ export class ViewNode {
return this._parentView

if (this.parentNode) {
if(this.parentNode.viewName !== "template" && this.parentNode.nativeView) {
if (this.parentNode.viewName !== "template" && this.parentNode.nativeView) {
this._parentView = this.parentNode.nativeView;
} else {
this._parentView = this.parentNode.parentNativeView;
Expand All @@ -69,6 +70,10 @@ export class ViewNode {
return this._parentView;
}

get isComplexProperty(): boolean {
return ViewNode.isComplexProperty(this.viewName);
}

public attachToView(atIndex: number = -1) {
console.log('ViewNode.attachToView ' + this.viewName);
if (this._attachedToView) {
Expand All @@ -84,9 +89,11 @@ export class ViewNode {
this.children.forEach(child => {
child.attachToView();
});

this.postAttachUI();
}

private createUI(attachAtIndex: number) {
private createUI(attachAtIndex: number): boolean {
if (!isKnownView(this.viewName))
return;

Expand Down Expand Up @@ -118,12 +125,40 @@ export class ViewNode {
}
} else if ((<any>this.parentNativeView)._addChildFromBuilder) {
(<any>this.parentNativeView)._addChildFromBuilder(this.viewName, this.nativeView);
} else {
} else if (this.parentNode.isComplexProperty) {
// complex property - we will deal with this in postAttachUI()
}
else {
console.log('parentNativeView: ' + this.parentNativeView);
throw new Error("Parent view can't have children! " + this.parentNativeView);
}
}

private postAttachUI() {
if (this.isComplexProperty) {
let nativeParent = <any>this.parentNativeView;
if (!nativeParent) {
return;
}

let propertyName = ViewNode.getComplexPropertyName(this.viewName);
let realChildren = [];
for (let child of this.children) {
if (child.nativeView) {
realChildren.push(child.nativeView);
}
}
if (realChildren.length > 0) {
if (nativeParent._addArrayFromBuilder) {
nativeParent._addArrayFromBuilder(propertyName, realChildren);
}
else {
this.parentNode.setAttribute(propertyName, realChildren[0]);
}
}
}
}

private static propertyMaps: Map<Function, Map<string, string>> = new Map<Function, Map<string, string>>();

private static getProperties(instance: any): Map<string, string> {
Expand All @@ -142,6 +177,21 @@ export class ViewNode {
return ViewNode.propertyMaps.get(type);
}

private static isComplexProperty(name: string): boolean {
return isString(name) && name.indexOf(".") !== -1;
}

private static getComplexPropertyName(fullName: string): string {
var name: string;

if (isString(fullName)) {
var names = fullName.split(".");
name = names[names.length - 1];
}

return name;
}

private configureUI() {
if (this.attributes.size == 0)
return;
Expand Down Expand Up @@ -337,7 +387,6 @@ export class ViewNode {
this.nativeView.cssClass = classValue;
}
}

}

export class DummyViewNode extends ViewNode {
Expand Down