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

Merge pull request #770 from NativeScript/class-atribute

Browse Source 
Class atribute registered and used instead cssClass
This commit is contained in:
Vladimir Enchev
2015-09-18 17:30:22 +03:00
parent 38eaa1aee3 36036c55b1
commit 6b9a476a7c
26 changed files with 173 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/action-bar-demo/main-page.xml
View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page>
<Page.actionBar>
<ActionBar title="Title" cssClass="custom-action-bar">
<ActionBar title="Title" class="custom-action-bar">
<ActionBar.actionItems>
<ActionItem text="hi" />
</ActionBar.actionItems>

2
apps/cuteness.io/details-page.xml
View File

@ -3,7 +3,7 @@
<ScrollView>
<StackLayout>
<Image imageSource="{{ imageSource }}" stretch="aspectFill"/>
<Label text="{{ title }}" cssClass="detailsTitle" textWrap="true" />
<Label text="{{ title }}" class="detailsTitle" textWrap="true" />
</StackLayout>
</ScrollView>
<StackLayout orientation="horizontal" row="1">

8
apps/cuteness.io/main-page.xml
View File

@ -7,10 +7,10 @@
<ListView.itemTemplate>
<!-- Binding in template property of an component will use the bindingContext provided by the component. -->
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="{{ thumbnailImage }}" cssClass="thumbnail" rowSpan="2"/>
<Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" col="1" colSpan="2" minHeight="50" />
<Label text="{{ author ? 'by ' + author : '' }}" cssClass="author" col="1" row="1" />
<Label text="{{ num_comments ? num_comments + ' comments' : '' }}" cssClass="comments" col="2" row="1" />
<Image src="{{ thumbnailImage }}" class="thumbnail" rowSpan="2"/>
<Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="{{ author ? 'by ' + author : '' }}" class="author" col="1" row="1" />
<Label text="{{ num_comments ? num_comments + ' comments' : '' }}" class="comments" col="2" row="1" />
</GridLayout>
<!-- End of tempplate. -->
</ListView.itemTemplate>

2
apps/cuteness.unoptimized/details-page.xml
View File

@ -3,7 +3,7 @@
<ScrollView>
<StackLayout>
<Image imageSource="{{ imageSource }}" stretch="aspectFill"/>
<Label text="{{ title }}" cssClass="detailsTitle" textWrap="true" />
<Label text="{{ title }}" class="detailsTitle" textWrap="true" />
</StackLayout>
</ScrollView>
<StackLayout orientation="horizontal" row="1">

8
apps/cuteness.unoptimized/main-page.xml
View File

@ -7,10 +7,10 @@
<ListView.itemTemplate>
<!-- Binding in template property of an component will use the bindingContext provided by the component. -->
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="{{ thumbnailImage }}" cssClass="thumbnail" rowSpan="2"/>
<Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" col="1" colSpan="2" minHeight="50" />
<Label text="{{ author ? 'by ' + author : '' }}" cssClass="author" col="1" row="1" />
<Label text="{{ num_comments ? num_comments + ' comments' : '' }}" cssClass="comments" col="2" row="1" />
<Image src="{{ thumbnailImage }}" class="thumbnail" rowSpan="2"/>
<Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="{{ author ? 'by ' + author : '' }}" class="author" col="1" row="1" />
<Label text="{{ num_comments ? num_comments + ' comments' : '' }}" class="comments" col="2" row="1" />
</GridLayout>
<!-- End of tempplate. -->
</ListView.itemTemplate>

6
apps/gallery-app/main-page.xml
View File

@ -2,7 +2,7 @@
<Page>
<ScrollView>
<StackLayout>
<Label cssClass="title" text="Layouts" />
<Label class="title" text="Layouts" />
<StackLayout>
<Button tag="layouts/stack-layout" text="StackLayout" tap="itemTap" />
<Button tag="layouts/grid-layout" text="GridLayout" tap="itemTap" />
@ -11,7 +11,7 @@
<Button tag="layouts/absolute-layout" text="AbsoluteLayout" tap="itemTap" />
</StackLayout>
<Label cssClass="title" text="Content" />
<Label class="title" text="Content" />
<StackLayout>
<Button tag="content/tab-view" text="TabView" tap="itemTap" />
<Button tag="content/web-view" text="WebView" tap="itemTap" />
@ -20,7 +20,7 @@
<Button tag="content/border" text="Border" tap="itemTap" />
</StackLayout>
<Label cssClass="title" text="Views" />
<Label class="title" text="Views" />
<StackLayout>
<Button tag="views/button" text="Button" tap="itemTap" />
<Button tag="views/label" text="Label" tap="itemTap" />

8
apps/paylocity/login.xml
View File

@ -2,10 +2,10 @@
<StackLayout>
<StackLayout verticalAlignment="center" horizontalAlignment="center" margin="50">
<Image loaded="imageLoaded" />
<TextField cssClass="nameField" text="Captain" margin="10" />
<TextField cssClass="familyNameField" text="America" margin="10" />
<TextField cssClass="passwordField" secure="true" hint="Password (leave empty)" margin="10" />
<Button cssClass="loginButton" text="Login" margin="10" tap="loginButtonTap" />
<TextField class="nameField" text="Captain" margin="10" />
<TextField class="familyNameField" text="America" margin="10" />
<TextField class="passwordField" secure="true" hint="Password (leave empty)" margin="10" />
<Button class="loginButton" text="Login" margin="10" tap="loginButtonTap" />
</StackLayout>
</StackLayout>
</Page>

4
apps/template-hello-world/main-page.xml
View File

@ -1,7 +1,7 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout>
<Label text="Tap the button" cssClass="title"/>
<Label text="Tap the button" class="title"/>
<Button text="TAP" tap="{{ tapAction }}" />
<Label text="{{ message }}" cssClass="message" textWrap="true"/>
<Label text="{{ message }}" class="message" textWrap="true"/>
</StackLayout>
</Page>

4
apps/template-master-detail/details-view.xml
View File

@ -1,4 +1,4 @@
<StackLayout xmlns="http://www.nativescript.org/tns.xsd">
<Label text="{{ title }}" cssClass="detail-title"/>
<Label text="{{ info }}" cssClass="info" textWrap="true"/>
<Label text="{{ title }}" class="detail-title"/>
<Label text="{{ info }}" class="info" textWrap="true"/>
</StackLayout>

4
apps/template-master-detail/main-page.minWH600.xml
View File

@ -2,11 +2,11 @@
xmlns:app="."
loaded="pageLoaded">
<GridLayout rows="auto, *" columns="300, *">
<Label text="Master Details Page" cssClass="title" colSpan="2" />
<Label text="Master Details Page" class="title" colSpan="2" />
<ListView items="{{ items }}" itemTap="listViewItemTap" row="1">
<ListView.itemTemplate>
<Label text="{{ title }}" cssClass="listItem" />
<Label text="{{ title }}" class="listItem" />
</ListView.itemTemplate>
</ListView>

4
apps/template-master-detail/main-page.xml
View File

@ -1,11 +1,11 @@
<Page xmlns="http://www.nativescript.org/tns.xsd"
loaded="pageLoaded">
<GridLayout rows="auto, *">
<Label text="Items Page" cssClass="title" />
<Label text="Items Page" class="title" />
<ListView items="{{ items }}" itemTap="listViewItemTap" row="1">
<ListView.itemTemplate>
<Label text="{{ title }}" cssClass="listItem" />
<Label text="{{ title }}" class="listItem" />
</ListView.itemTemplate>
</ListView>
</GridLayout>

34
apps/template-settings/main-page.xml
View File

@ -1,34 +1,34 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout cssClass="content">
<StackLayout class="content">
<!-- Profile sttings -->
<Label cssClass="header" text="Profile"/>
<GridLayout cssClass="field-group" columns="auto, 50, *" rows="auto, auto, auto">
<Label class="header" text="Profile"/>
<GridLayout class="field-group" columns="auto, 50, *" rows="auto, auto, auto">
<!-- Name -->
<Label cssClass="field" text="Name"/>
<Button cssClass="field-dialog-button" text="{{ name }}" tap="{{ promptName }}" col="1" colSpan="2"/>
<Label class="field" text="Name"/>
<Button class="field-dialog-button" text="{{ name }}" tap="{{ promptName }}" col="1" colSpan="2"/>
<!-- Height -->
<Label cssClass="field" text="Height" row="1"/>
<TextField cssClass="field-value" text="{{ height }}" keyboardType="number" row="1" col="1"/>
<Label cssClass="field-unit" text="cm" col="2" row="1"/>
<Label class="field" text="Height" row="1"/>
<TextField class="field-value" text="{{ height }}" keyboardType="number" row="1" col="1"/>
<Label class="field-unit" text="cm" col="2" row="1"/>
<!-- Weight -->
<Label cssClass="field" text="Weight" row="2"/>
<TextField cssClass="field-value" text="{{ weight }}" keyboardType="number" row="2" col="1"/>
<Label cssClass="field-unit" text="kg" row="2" col="2"/>
<Label class="field" text="Weight" row="2"/>
<TextField class="field-value" text="{{ weight }}" keyboardType="number" row="2" col="1"/>
<Label class="field-unit" text="kg" row="2" col="2"/>
</GridLayout>
<!-- Notifications settings -->
<Label cssClass="header" text="Notifications"/>
<GridLayout cssClass="field-group" columns="*, auto" rows="auto, auto, auto">
<Label class="header" text="Notifications"/>
<GridLayout class="field-group" columns="*, auto" rows="auto, auto, auto">
<!-- Notifications -->
<Label cssClass="field" text="Vibrate"/>
<Switch cssClass="field-value" checked="{{ vibrateEnabled }}" col="1"/>
<Label class="field" text="Vibrate"/>
<Switch class="field-value" checked="{{ vibrateEnabled }}" col="1"/>
<!-- Notifications -->
<Label cssClass="field" text="Sound" row="1"/>
<Switch cssClass="field-value" checked="{{ soundEnabled }}" row="1" col="1"/>
<Label class="field" text="Sound" row="1"/>
<Switch class="field-value" checked="{{ soundEnabled }}" row="1" col="1"/>
<Slider maxValue="100" value="{{ soundVolume }}" isEnabled="{{ soundEnabled }}" row="2" colSpan="2"/>
</GridLayout>
</StackLayout>

8
apps/template-tab-navigation/main-page.xml
View File

@ -3,16 +3,16 @@
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<StackLayout cssClass="tab-content">
<Label text="First View" cssClass="title"/>
<StackLayout class="tab-content">
<Label text="First View" class="title"/>
<Label text="This is the content of the first tab." textWrap="true"/>
</StackLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<StackLayout cssClass="tab-content">
<Label text="Second View" cssClass="title"/>
<StackLayout class="tab-content">
<Label text="Second View" class="title"/>
<Label text="This is the content of the second tab." textWrap="true"/>
</StackLayout>
</TabViewItem.view>

2
apps/tests/pages/page8.ts
View File

@ -49,7 +49,7 @@ export function createPage() {
var info = new btns.Button();
info.text = "info";
info.cssClass = "info";
info.className = "info";
info.on(btns.Button.tapEvent, function () {
info.text = "hi: " + counter++;
btn.isEnabled = true;

2
apps/tests/pages/property-bindings.ts
View File

@ -118,7 +118,7 @@ export function createPage() {
createStringPropertyUI({ name: "style.verticalAlignment", value: "stretch" });
createStringPropertyUI({ name: "margin", value: "20" });
createStringPropertyUI({ name: "cssClass", value: "testClass" });
createStringPropertyUI({ name: "className", value: "testClass" });
page.css = ".testClass { background-color: LightGreen }";
return page;

2
apps/tests/ui/label/label-tests.ts
View File

@ -195,7 +195,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
// ### How to style a label via css class
// ``` JavaScript
label.text = "The quick brown fox jumps over the lazy dog.";
label.cssClass = "title";
label.className = "title";
//// after that all we have to do is to set a similar css entry within parent page css property
//// label.parentPage.css = ".title {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// ```

2
apps/tests/ui/list-view/list-view-tests.ts
View File

@ -57,7 +57,7 @@ import labelModule = require("ui/label");
// <Page>
// {%raw%}<ListView items="{{ myItems }}">
// <ListView.itemTemplate>
// <Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" />
// <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
// </ListView.itemTemplate>
// </ListView>{%endraw%}
// </Page>

2
apps/tests/ui/repeater/repeater-tests.ts
View File

@ -32,7 +32,7 @@ import labelModule = require("ui/label");
// <Page>
// {%raw%}<Repeater items="{{ myItems }}">
// <Repeater.itemTemplate>
// <Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" />
// <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
// </Repeater.itemTemplate>
// </Repeater>{%endraw%}
// </Page>

34
apps/tests/ui/style/style-tests.ts
View File

@ -139,7 +139,7 @@ export function test_class_selector() {
//// Will be styled
btnWithClass = new buttonModule.Button();
btnWithClass.cssClass = "test";
btnWithClass.className = "test";
//// Won't be styled
btnWithNoClass = new buttonModule.Button();
@ -172,7 +172,7 @@ export function test_multiple_class_selector() {
//// Will be styled
btnWithClasses = new buttonModule.Button();
btnWithClasses.cssClass = "style1 style2";
btnWithClasses.className = "style1 style2";
var stack = new stackModule.StackLayout();
page.content = stack;
@ -290,7 +290,7 @@ export function test_class_and_state_selector() {
page.content = testStack;
btn = new buttonModule.Button();
btn.cssClass = "test"
btn.className = "test"
testStack.addChild(btn);
page.css = ".test:pressed { color: red; }";
@ -315,7 +315,7 @@ export function test_class_and_state_selector_with_multiple_classes() {
page.content = testStack;
btn = new buttonModule.Button();
btn.cssClass = "test otherClass"
btn.className = "test otherClass"
testStack.addChild(btn);
page.css = ".test:pressed { color: red; }";
@ -392,14 +392,14 @@ export function test_restore_original_values_when_state_is_changed() {
// testPage.content = testStack;
// var btnWithClass = new button.Button();
// btnWithClass.cssClass = "test";
// btnWithClass.className = "test";
// testStack.addChild(btnWithClass);
// var btnWithNoClass = new button.Button();
// testStack.addChild(btnWithNoClass);
// var lblWithClass = new label.Label();
// lblWithClass.cssClass = "test";
// lblWithClass.className = "test";
// testStack.addChild(lblWithClass);
// testPage.css = "button.test { color: red; }";
@ -431,14 +431,14 @@ export function test_restore_original_values_when_state_is_changed() {
// testPage.content = testStack;
// var btnWithClass = new button.Button();
// btnWithClass.cssClass = "test";
// btnWithClass.className = "test";
// testStack.addChild(btnWithClass);
// var btnWithNoClass = new button.Button();
// testStack.addChild(btnWithNoClass);
// var lblWithClass = new label.Label();
// lblWithClass.cssClass = "test";
// lblWithClass.className = "test";
// testStack.addChild(lblWithClass);
// testPage.css = "button.test:pressed { color: red; }";
@ -506,7 +506,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
helper.assertViewBackgroundColor(btn, "#111111");
helper.assertViewBackgroundColor(btn2, "#111111");
btn.cssClass = "button-class";
btn.className = "button-class";
helper.assertViewBackgroundColor(btn, "#222222");
helper.assertViewBackgroundColor(btn2, "#111111");
@ -518,7 +518,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
export function test_styles_are_updated_when_cssCalss_is_changed() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
btn.cssClass = "button-class";
btn.className = "button-class";
var btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
@ -527,7 +527,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
helper.assertViewBackgroundColor(btn, "#222222");
helper.assertViewBackgroundColor(btn2, "#111111");
btn.cssClass = "button-class-two";
btn.className = "button-class-two";
helper.assertViewBackgroundColor(btn, "#333333");
helper.assertViewBackgroundColor(btn2, "#111111");
@ -539,7 +539,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
export function test_styles_are_updated_when_cssCalss_is_cleared() {
var testStack = new stackModule.StackLayout();
var btn = new buttonModule.Button();
btn.cssClass = "button-class";
btn.className = "button-class";
var btn2 = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn2);
@ -548,7 +548,7 @@ export function test_styles_are_updated_when_cssCalss_is_cleared() {
helper.assertViewBackgroundColor(btn, "#222222");
helper.assertViewBackgroundColor(btn2, "#111111");
btn.cssClass = undefined;
btn.className = undefined;
helper.assertViewBackgroundColor(btn, "#111111");
helper.assertViewBackgroundColor(btn2, "#111111");
@ -661,11 +661,11 @@ function testSelectorsPrioritiesTemplate(css: string) {
testStack.addChild(btn);
btnWithClass = new buttonModule.Button();
btnWithClass.cssClass = "button-class";
btnWithClass.className = "button-class";
testStack.addChild(btnWithClass);
btnWithId = new buttonModule.Button();
btnWithId.cssClass = "button-class";
btnWithId.className = "button-class";
btnWithId.id = "myButton"
testStack.addChild(btnWithId);
@ -817,7 +817,7 @@ var invalidCSS = ".invalid { " +
export function test_set_invalid_CSS_values_dont_cause_crash() {
var testButton = new buttonModule.Button();
testButton.text = "Test";
testButton.cssClass = "invalid";
testButton.className = "invalid";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
TKUnit.assertEqual(30, testButton.style.fontSize);
@ -834,7 +834,7 @@ var casedCSS = ".cased {" +
export function test_set_mixed_CSS_cases_works() {
var testButton = new buttonModule.Button();
testButton.text = "Test";
testButton.cssClass = "cased";
testButton.className = "cased";
helper.buildUIAndRunTest(testButton, function (views: Array<viewModule.View>) {
TKUnit.assertEqual(30, testButton.style.fontSize);

6
apps/tests/ui/view/view-tests-common.ts
View File

@ -498,6 +498,10 @@ export var test_binding_cssClass = function () {
property_binding_test("cssClass", "class1", "class2");
}
export var test_binding_className = function () {
property_binding_test("className", "class1", "class2");
}
export var test_binding_style_color = function () {
property_binding_style_test("color", new color.Color("#FF0000"), new color.Color("#00FF00"));
}
@ -661,7 +665,7 @@ export var testBackgroundColor = function () {
export var testBackgroundImage = function () {
var lbl = _createLabelWithBorder();
lbl.cssClass = "myClass";
lbl.className = "myClass";
helper.buildUIAndRunTest(lbl, function (views: Array<viewModule.View>) {
var page = <page.Page>views[1];
page.css = ".myClass { background-image: url('~/logo.png') }";

2
apps/tests/xml-declaration/mymodule/MyControl.ts
View File

@ -19,6 +19,6 @@ export class MyControl extends stackLayoutModule.StackLayout {
this.addChild(lbl);
this.addChild(btn);
this.cssClass = "MyStackLayout";
this.className = "MyStackLayout";
}
}

2
apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
View File

@ -1,4 +1,4 @@
<StackLayout xmlns:customControls="xml-declaration/mymodule" cssClass="MySecondCustomStackLayout">
<StackLayout xmlns:customControls="xml-declaration/mymodule" class="MySecondCustomStackLayout">
<Label id="Label1" text="mymodulewithxml" />
<Button text="Click!" tap="buttonTap2" />
</StackLayout>

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

@ -201,7 +201,7 @@ export function test_parse_ShouldResolveExportsFromCodeFileForTemplates() {
export function test_parse_ShouldApplyCssFromCssFile() {
var newPage: Page;
var pageFactory = function (): Page {
newPage = <Page>builder.parse("<Page cssFile='~/xml-declaration/custom-css-file.css'><Label cssClass='MyClass' /></Page>");
newPage = <Page>builder.parse("<Page cssFile='~/xml-declaration/custom-css-file.css'><Label class='MyClass' /></Page>");
return newPage;
};
@ -218,7 +218,7 @@ export function test_parse_ShouldApplyCssFromCssFile() {
export function test_parse_ShouldResolveExportsFromCodeFileAndApplyCssFile() {
var newPage: Page;
var pageFactory = function (): Page {
newPage = <Page>builder.parse("<Page codeFile='~/xml-declaration/custom-code-file' cssFile='~/xml-declaration/custom-css-file.css' loaded='loaded'><Label cssClass='MyClass' /></Page>");
newPage = <Page>builder.parse("<Page codeFile='~/xml-declaration/custom-code-file' cssFile='~/xml-declaration/custom-css-file.css' loaded='loaded'><Label class='MyClass' /></Page>");
return newPage;
};
@ -245,6 +245,18 @@ export function test_parse_ShouldFindEventHandlersInExports() {
TKUnit.assert(loaded, "Parse should find event handlers in exports.");
};
export function test_parse_ShouldFindEventHandlersWithOnInExports() {
var loaded;
var page = builder.parse("<Page onloaded='myLoaded'></Page>", {
myLoaded: args => {
loaded = true;
}
});
page._emit("loaded");
TKUnit.assert(loaded, "Parse should find event handlers in exports.");
};
export function test_parse_ShouldSetGridAttachedProperties() {
var p = <Page>builder.parse("<Page><GridLayout><Label row='1' col='2' rowSpan='3' colSpan='4' /></GridLayout></Page>");
var grid = <gridLayoutModule.GridLayout>p.content;
@ -368,6 +380,18 @@ export function test_parse_ShouldParseBindingsToEvents() {
TKUnit.assert(btn.hasListeners("tap"), "Expected result: true.");
};
export function test_parse_ShouldParseBindingsToEventsWithOn() {
var p = <Page>builder.parse("<Page><Button ontap='{{ myTap }}' /></Page>");
p.bindingContext = {
myTap: function (args) {
//
}
};
var btn = <buttonModule.Button>p.content;
TKUnit.assert(btn.hasListeners("tap"), "Expected result: true.");
};
export function test_parse_ShouldParseBindingsToGestures() {
var p = <Page>builder.parse("<Page><Label tap='{{ myTap }}' /></Page>");
var context = {
@ -385,6 +409,23 @@ export function test_parse_ShouldParseBindingsToGestures() {
TKUnit.assert(observer.context === context, "Context should be equal to binding context. Actual result: " + observer.context);
};
export function test_parse_ShouldParseBindingsToGesturesWithOn() {
var p = <Page>builder.parse("<Page><Label ontap='{{ myTap }}' /></Page>");
var context = {
myTap: function (args) {
//
}
};
p.bindingContext = context;
var lbl = <Label>p.content;
var observer = (<view.View>lbl).getGestureObservers(gesturesModule.GestureTypes.tap)[0];
TKUnit.assert(observer !== undefined, "Expected result: true.");
TKUnit.assert(observer.context === context, "Context should be equal to binding context. Actual result: " + observer.context);
};
export function test_parse_ShouldParseSubProperties() {
var p = <Page>builder.parse("<Page><Switch style.visibility='collapsed' checked='{{ myProp }}' /></Page>");
var obj = new observable.Observable();

12
apps/ui-tests-app/image-view/roundimg.xml
View File

@ -1,10 +1,10 @@
<Page>
<GridLayout rows="*,*,*" columns="*,*">
<Image row="0" col="0" src="~/image-view/gravatar.png" cssClass="one"/>
<Image row="0" col="1" src="~/image-view/gravatar.png" cssClass="two"/>
<Image row="1" col="0" src="~/image-view/gravatar.png" cssClass="three"/>
<Image row="1" col="1" src="~/image-view/gravatar.png" cssClass="four"/>
<Image row="2" col="0" src="~/image-view/gravatar.png" cssClass="five"/>
<Image row="2" col="1" src="~/image-view/gravatar.png" cssClass="six"/>
<Image row="0" col="0" src="~/image-view/gravatar.png" class="one"/>
<Image row="0" col="1" src="~/image-view/gravatar.png" class="two"/>
<Image row="1" col="0" src="~/image-view/gravatar.png" class="three"/>
<Image row="1" col="1" src="~/image-view/gravatar.png" class="four"/>
<Image row="2" col="0" src="~/image-view/gravatar.png" class="five"/>
<Image row="2" col="1" src="~/image-view/gravatar.png" class="six"/>
</GridLayout>
</Page>

33
ui/core/view-common.ts
View File

@ -14,13 +14,23 @@ import utils = require("utils/utils");
import color = require("color");
import animationModule = require("ui/animation");
import observable = require("data/observable");
import {registerSpecialProperty} from "ui/builder/special-properties";
registerSpecialProperty("class", (instance: definition.View, propertyValue: string) => {
instance.className = propertyValue;
});
function getEventOrGestureName(name: string) : string {
return name.indexOf("on") === 0 ? name.substr(2, name.length - 2) : name;
}
export function isEventOrGesture(name: string, view: View): boolean {
if (types.isString(name)) {
var evt = `${name}Event`;
var eventOrGestureName = getEventOrGestureName(name);
var evt = `${eventOrGestureName}Event`;
return view.constructor && evt in view.constructor ||
gestures.fromString(name.toLowerCase()) !== undefined;
gestures.fromString(eventOrGestureName.toLowerCase()) !== undefined;
}
return false;
@ -107,7 +117,13 @@ var cssClassProperty = new dependencyObservable.Property(
"cssClass",
"View",
new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsStyle, onCssClassPropertyChanged)
);
);
var classNameProperty = new dependencyObservable.Property(
"className",
"View",
new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsStyle, onCssClassPropertyChanged)
);
var translateXProperty = new dependencyObservable.Property(
"translateX",
@ -157,6 +173,7 @@ export class View extends proxy.ProxyObject implements definition.View {
public static idProperty = idProperty;
public static cssClassProperty = cssClassProperty;
public static classNameProperty = classNameProperty;
public static translateXProperty = translateXProperty;
public static translateYProperty = translateYProperty;
public static scaleXProperty = scaleXProperty;
@ -218,6 +235,9 @@ export class View extends proxy.ProxyObject implements definition.View {
public addEventListener(arg: string | gestures.GestureTypes, callback: (data: observable.EventData) => void, thisArg?: any) {
if (types.isString(arg)) {
arg = getEventOrGestureName(<string>arg);
var gesture = gestures.fromString(<string>arg);
if (gesture && !this._isEvent(<string>arg)) {
this.observe(gesture, callback, thisArg);
@ -491,6 +511,13 @@ export class View extends proxy.ProxyObject implements definition.View {
this._setValue(View.cssClassProperty, value);
}
get className(): string {
return this._getValue(View.cssClassProperty);
}
set className(value: string) {
this._setValue(View.cssClassProperty, value);
}
get style(): style.Style {
return this._style;
}

21
ui/core/view.d.ts vendored
View File

@ -84,9 +84,14 @@ declare module "ui/core/view" {
*/
visibility?: string;
/**
* Gets or sets the CSS class of this view.
* [Deprecated. Please use className instead] Gets or sets the CSS class of this view.
*/
cssClass?: string;
/**
* Gets or sets the CSS class name of this view.
*/
className?: string;
/**
* Gets or sets the id of this view.
*/
@ -129,10 +134,15 @@ declare module "ui/core/view" {
public static idProperty: dependencyObservable.Property;
/**
* Represents the observable property backing the cssClass property of each View.
* [Deprecated. Please use className instead.] Represents the observable property backing the cssClass property of each View.
*/
public static cssClassProperty: dependencyObservable.Property;
/**
* Represents the observable property backing the className property of each View.
*/
public static classNameProperty: dependencyObservable.Property;
/**
* Represents the observable property backing the isEnabled property of each View.
*/
@ -270,10 +280,15 @@ declare module "ui/core/view" {
id: string;
/**
* Gets or sets the CSS class for this view.
* [Deprecated. Please use className instead.] Gets or sets the CSS class for this view.
*/
cssClass: string;
/**
* Gets or sets the CSS class name for this view.
*/
className: string;
/**
* Gets the style object associated to this view.
*/