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

Merge pull request #402 from NativeScript/feature/inline-style-only-from-xml

Browse Source 
Feature/inline style only from xml
This commit is contained in:
Alexander Vakrilov
2015-07-07 16:00:21 +03:00
parent c5748bf73b bf0f3217c1
commit c2288c5332
17 changed files with 137 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
CrossPlatformModules.csproj
View File

@@ -377,6 +377,9 @@
<TypeScriptCompile Include="trace\trace.ts">
<DependentUpon>trace.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\border\border.ts">
<DependentUpon>border.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\repeater\repeater.ts">
<DependentUpon>repeater.d.ts</DependentUpon>
</TypeScriptCompile>
@@ -774,15 +777,6 @@
<DependentUpon>switch.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\border\border.d.ts" />
<TypeScriptCompile Include="ui\border\border-common.ts">
<DependentUpon>border.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\border\border.android.ts">
<DependentUpon>border.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\border\border.ios.ts">
<DependentUpon>border.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\activity-indicator\activity-indicator.d.ts" />
<TypeScriptCompile Include="ui\activity-indicator\activity-indicator.android.ts">
<DependentUpon>activity-indicator.d.ts</DependentUpon>
@@ -1680,7 +1674,7 @@
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties>
</FlavorProperties>
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
<UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
</VisualStudio>
</ProjectExtensions>
</Project>

11
apps/tests/pages/background-test.ts
View File

@@ -1,10 +1,13 @@
import view = require("ui/core/view");
import pages = require("ui/page");
export function applyTap(args) {
var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
(<any>el).style = args.object.tag;
var page = <pages.Page>view.getAncestor(args.object, "Page");
var css = "#test-element { " + args.object.tag + " }";
page.css = css;
}
export function resetTap(args) {
var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
(<any>el).style = "";
var page = <pages.Page>view.getAncestor(args.object, "Page");
page.css = "";
}

2
apps/tests/ui/style/style-properties-tests.ts
View File

@@ -310,7 +310,7 @@ export function test_setting_font_shorthand_property() {
function test_font_shorthand_property(short: string, family: string, size: number, style: string, weight:string) {
var testView = new buttonModule.Button();
(<any>testView).style = "font: " + short;
(<any>testView.style)["font"] = short;
TKUnit.assertEqual(testView.style.fontFamily, family, "style.fontFamily");
TKUnit.assertEqual(testView.style.fontStyle, style, "style.fontStyle");

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

@@ -99,23 +99,23 @@ export function test_type_selector() {
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
// <snippet module="ui/styling" title="styling">
// ### Using type selector
// ``` JavaScript
page.css = "button { color: red; }";
// <snippet module="ui/styling" title="styling">
// ### Using type selector
// ``` JavaScript
page.css = "button { color: red; }";
//// Will be styled
//// Will be styled
btn = new buttonModule.Button();
//// Won't be styled
//// Won't be styled
label = new labelModule.Label();
// ```
// </snippet>
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(label);
stack.addChild(btn);
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(label);
stack.addChild(btn);
return page;
};
@@ -135,24 +135,24 @@ export function test_class_selector() {
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
// <snippet module="ui/styling" title="styling">
// ### Using class selector
// ``` JavaScript
page.css = ".test { color: red; }";
// <snippet module="ui/styling" title="styling">
// ### Using class selector
// ``` JavaScript
page.css = ".test { color: red; }";
//// Will be styled
//// Will be styled
btnWithClass = new buttonModule.Button();
btnWithClass.cssClass = "test";
btnWithClass.cssClass = "test";
//// Won't be styled
//// Won't be styled
btnWithNoClass = new buttonModule.Button();
// ```
// </snippet>
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithClass);
stack.addChild(btnWithNoClass);
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithClass);
stack.addChild(btnWithNoClass);
return page;
};
@@ -199,24 +199,24 @@ export function test_id_selector() {
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
// <snippet module="ui/styling" title="styling">
// ### Using id selector
// ``` JavaScript
page.css = "#myButton { color: red; }";
// <snippet module="ui/styling" title="styling">
// ### Using id selector
// ``` JavaScript
page.css = "#myButton { color: red; }";
//// Will be styled
//// Will be styled
btnWithId = new buttonModule.Button();
btnWithId.id = "myButton";
btnWithId.id = "myButton";
//// Won't be styled
//// Won't be styled
btnWithNoId = new buttonModule.Button();
// ```
// </snippet>
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithId);
stack.addChild(btnWithNoId);
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithId);
stack.addChild(btnWithNoId);
return page;
};
@@ -234,13 +234,13 @@ export function test_state_selector() {
var page: pageModule.Page;
var btn: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
// Arrange
// Arrange
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn);
page.css = ":pressed { color: red; }";
return page;
@@ -260,18 +260,18 @@ export function test_type_and_state_selector() {
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
// <snippet module="ui/styling" title="styling">
// ### Using state selector
// ``` JavaScript
page.css = "button:pressed { color: red; }";
// <snippet module="ui/styling" title="styling">
// ### Using state selector
// ``` JavaScript
page.css = "button:pressed { color: red; }";
//// Will be red when pressed
//// Will be red when pressed
btn = new buttonModule.Button();
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btn);
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btn);
return page;
};
@@ -287,14 +287,14 @@ export function test_class_and_state_selector() {
var page: pageModule.Page;
var btn: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
// Arrange
// Arrange
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
btn.cssClass = "test"
testStack.addChild(btn);
btn.cssClass = "test"
testStack.addChild(btn);
page.css = ".test:pressed { color: red; }";
return page;
@@ -337,14 +337,14 @@ export function test_id_and_state_selector() {
var page: pageModule.Page;
var btn: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
// Arrange
// Arrange
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
btn.id = "myButton";
testStack.addChild(btn);
btn.id = "myButton";
testStack.addChild(btn);
page.css = "#myButton:pressed { color: red; }";
return page;
@@ -362,16 +362,16 @@ export function test_restore_original_values_when_state_is_changed() {
var page: pageModule.Page;
var btn: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
// Arrange
// Arrange
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn);
page.css = "button { color: blue; } " +
"button:pressed { color: red; } ";
"button:pressed { color: red; } ";
return page;
};
@@ -483,7 +483,7 @@ export var test_style_is_applied_when_control_is_added_after_load = function ()
};
helper.navigate(pageFactory);
testStack.addChild(btn);
TKUnit.assert(btn.style.color, "Color property no applied correctly.");
TKUnit.assert(btn.style.color.hex === "#FF0000", "Color property no applied correctly.");
@@ -657,20 +657,20 @@ function testSelectorsPrioritiesTemplate(css: string) {
var btnWithId: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn);
btnWithClass = new buttonModule.Button();
btnWithClass.cssClass = "button-class";
testStack.addChild(btnWithClass);
btnWithClass.cssClass = "button-class";
testStack.addChild(btnWithClass);
btnWithId = new buttonModule.Button();
btnWithId.cssClass = "button-class";
btnWithId.id = "myButton"
testStack.addChild(btnWithId);
btnWithId.cssClass = "button-class";
btnWithId.id = "myButton"
testStack.addChild(btnWithId);
page.css = css;
return page;
@@ -748,19 +748,12 @@ export function test_setInlineStyle_setsLocalValues() {
});
}
export function test_setInlineStyle_resetsLocalValues() {
export function test_setStyle_throws() {
var testButton = new buttonModule.Button();
testButton.text = "Test";
testButton.style.fontSize = 10;
var stack = new stackModule.StackLayout();
stack.addChild(testButton);
helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
(<any>testButton)._applyInlineStyle("color: red;");
helper.assertViewColor(testButton, "#FF0000", dependencyObservableModule.ValueSource.Local);
TKUnit.assert(types.isUndefined(testButton.style.fontSize), "Setting inline style should reset font size");
TKUnit.assertEqual(testButton.style._getValueSource(styling.properties.fontSizeProperty), dependencyObservableModule.ValueSource.Default, "valueSource");
});
TKUnit.assertThrows(function () {
(<any>testButton).style = "background-color: red;";
}, "View.style property is read-only.");
}
export var test_CSS_isAppliedOnPage = function () {

11
apps/ui-tests-app/pages/background.ts
View File

@@ -1,10 +1,13 @@
import view = require("ui/core/view");
import pages = require("ui/page");
export function applyTap(args) {
var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
(<any>el).style = args.object.tag;
var page = <pages.Page>view.getAncestor(args.object, "Page");
var css = "#test-element { " + args.object.tag + " }";
page.css = css;
}
export function resetTap(args) {
var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
(<any>el).style = "";
var page = <pages.Page>view.getAncestor(args.object, "Page");
page.css = "";
}

6
text/span-common.ts
View File

@@ -18,7 +18,7 @@ export class Span extends bindable.Bindable implements definition.Span, view.App
private _spanModifiers: Array<any>;
private _parentFormattedString: formattedString.FormattedString;
private _isInEditMode: boolean;
get fontFamily(): string {
return this._fontFamily;
}
@@ -157,7 +157,7 @@ export class Span extends bindable.Bindable implements definition.Span, view.App
}
public updateSpanModifiers(parent: formattedString.FormattedString) {
// a virtual method overriden in platform specific implementations.
// a virtual method overridden in platform specific implementations.
if (this._isInEditMode) {
throw new Error("Cannot update span modifiers during update!");
}
@@ -180,7 +180,7 @@ export class Span extends bindable.Bindable implements definition.Span, view.App
this.updateAndNotify();
}
public applyXmlAttribute(attribute, value): boolean {
public _applyXmlAttribute(attribute, value): boolean {
if (attribute === "fontAttributes") {
if (value.indexOf(",")) {
var fontAttr = value.split(",");

51
ui/border/border.android.ts
View File

@@ -1,51 +0,0 @@
import borderCommon = require("ui/border/border-common");
import proxy = require("ui/core/proxy");
import dependencyObservable = require("ui/core/dependency-observable");
import utils = require("utils/utils");
// merge the exports of the common file with the exports of this file
declare var exports;
require("utils/module-merge").merge(borderCommon, exports);
function onBorderPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var border = <Border>data.object;
border._updateAndroidBorder();
}
(<proxy.PropertyMetadata>borderCommon.Border.cornerRadiusProperty.metadata).onSetNativeValue = onBorderPropertyChanged;
(<proxy.PropertyMetadata>borderCommon.Border.borderWidthProperty.metadata).onSetNativeValue = onBorderPropertyChanged;
(<proxy.PropertyMetadata>borderCommon.Border.borderColorProperty.metadata).onSetNativeValue = onBorderPropertyChanged;
export class Border extends borderCommon.Border {
public _updateAndroidBorder() {
if (!this._nativeView) {
return;
}
var nativeView = <android.view.ViewGroup>this._nativeView;
var backgroundDrawable = nativeView.getBackground();
if (!(backgroundDrawable instanceof android.graphics.drawable.GradientDrawable)) {
backgroundDrawable = new android.graphics.drawable.GradientDrawable();
nativeView.setBackgroundDrawable(backgroundDrawable);
}
var gd = <android.graphics.drawable.GradientDrawable>backgroundDrawable;
var density = utils.layout.getDisplayDensity();
gd.setCornerRadius(this.cornerRadius * density);
if (this.borderColor) {
gd.setStroke(this.borderWidth * density, this.borderColor.android);
}
else {
gd.setStroke(this.borderWidth * density, android.graphics.Color.TRANSPARENT);
}
if (this.backgroundColor) {
gd.setColor(this.backgroundColor.android);
}
else {
gd.setColor(android.graphics.Color.TRANSPARENT);
}
}
}

8
ui/border/border.d.ts vendored
View File

@@ -10,10 +10,6 @@ declare module "ui/border" {
* Represents a UI border component.
*/
export class Border extends contentView.ContentView {
public static cornerRadiusProperty : dependencyObservable.Property;
public static borderWidthProperty: dependencyObservable.Property;
public static borderColorProperty: dependencyObservable.Property;
/**
* Gets or sets the corner radius of the border component.
*/
@@ -28,9 +24,5 @@ declare module "ui/border" {
* Gets or sets the border color of the border component.
*/
borderColor: color.Color;
//@private
_updateAndroidBorder();
//@endprivate
}
}

48
ui/border/border.ios.ts
View File

@@ -1,48 +0,0 @@
import borderCommon = require("ui/border/border-common");
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import color = require("color");
// merge the exports of the common file with the exports of this file
declare var exports;
require("utils/module-merge").merge(borderCommon, exports);
function onCornerRadiusPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <Border>data.object;
if (!view._nativeView) {
return;
}
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.cornerRadius = data.newValue;
}
}
(<proxy.PropertyMetadata>borderCommon.Border.cornerRadiusProperty.metadata).onSetNativeValue = onCornerRadiusPropertyChanged;
function onBorderWidthPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <Border>data.object;
if (!view._nativeView) {
return;
}
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.borderWidth = data.newValue;
}
}
(<proxy.PropertyMetadata>borderCommon.Border.borderWidthProperty.metadata).onSetNativeValue = onBorderWidthPropertyChanged;
function onBorderColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var view = <Border>data.object;
if (!view._nativeView) {
return;
}
if (view._nativeView instanceof UIView && data.newValue instanceof color.Color) {
(<UIView>view._nativeView).layer.borderColor = (<color.Color>data.newValue).ios.CGColor;
}
}
(<proxy.PropertyMetadata>borderCommon.Border.borderColorProperty.metadata).onSetNativeValue = onBorderColorPropertyChanged;
export class Border extends borderCommon.Border {
//
}

49
ui/border/border-common.ts → ui/border/border.ts
View File

@@ -7,54 +7,13 @@ import types = require("utils/types");
import viewModule = require("ui/core/view");
import utils = require("utils/utils");
var cornerRadiusProperty = new dependencyObservable.Property(
"cornerRadius",
"Border",
new proxy.PropertyMetadata(0, dependencyObservable.PropertyMetadataSettings.AffectsStyle)
);
var borderWidthProperty = new dependencyObservable.Property(
"borderWidth",
"Border",
new proxy.PropertyMetadata(0, dependencyObservable.PropertyMetadataSettings.AffectsStyle)
);
var borderColorProperty = new dependencyObservable.Property(
"borderColor",
"Border",
new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsStyle)
);
@Deprecated
export class Border extends contentView.ContentView implements definition.Border {
public static cornerRadiusProperty = cornerRadiusProperty;
public static borderWidthProperty = borderWidthProperty;
public static borderColorProperty = borderColorProperty;
get cornerRadius(): number {
return this._getValue(Border.cornerRadiusProperty);
return this.borderRadius;
}
set cornerRadius(value: number) {
this._setValue(Border.cornerRadiusProperty, value);
}
get borderWidth(): number {
return this._getValue(Border.borderWidthProperty);
}
set borderWidth(value: number) {
this._setValue(Border.borderWidthProperty, value);
}
get borderColor(): color.Color {
return this._getValue(Border.borderColorProperty);
}
set borderColor(value: color.Color) {
if (types.isString(value) || types.isNumber(value)) {
this._setValue(Border.borderColorProperty, new color.Color(<any>value));
} else {
this._setValue(Border.borderColorProperty, value);
}
this.borderRadius = value;
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
@@ -82,8 +41,4 @@ export class Border extends contentView.ContentView implements definition.Border
var borderSize = this.borderWidth * density;
viewModule.View.layoutChild(this, this.content, borderSize, borderSize, right - left - borderSize, bottom - top - borderSize);
}
public _updateAndroidBorder() {
// This is android specific method.
}
}

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

@@ -174,8 +174,8 @@ export function setPropertyValue(instance: view.View, instanceModule: Object, ex
} else {
var attrHandled = false;
if ((<any>instance).applyXmlAttribute) {
attrHandled = (<any>instance).applyXmlAttribute(propertyName, propertyValue);
if ((<any>instance)._applyXmlAttribute) {
attrHandled = (<any>instance)._applyXmlAttribute(propertyName, propertyValue);
}
if (!attrHandled) {

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

@@ -389,7 +389,7 @@ export class View extends proxy.ProxyObject implements definition.View {
return this._style;
}
set style(value) {
this._applyInlineStyle(value);
throw new Error("View.style property is read-only.");
}
get isLayoutValid(): boolean {
@@ -763,7 +763,6 @@ export class View extends proxy.ProxyObject implements definition.View {
if (types.isString(inlineStyle)) {
try {
this.style._beginUpdate();
this.style._resetLocalValues();
styleScope.applyInlineSyle(this, <string>inlineStyle);
} finally {
this.style._endUpdate();
@@ -942,6 +941,15 @@ export class View extends proxy.ProxyObject implements definition.View {
this._requestedVisualState = state;
}
public _applyXmlAttribute(attribute, value): boolean {
if (attribute === "style") {
this._applyInlineStyle(value);
return true;
}
return false;
}
public _updateLayout() {
// needed for iOS.
}

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

@@ -94,7 +94,7 @@ declare module "ui/core/view" {
* This class is the base class for all UI components.
* A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within.
*/
export class View extends proxy.ProxyObject {
export class View extends proxy.ProxyObject implements ApplyXmlAttributes {
/**
* Gets or sets the corner radius of the view.
*/
@@ -441,6 +441,8 @@ declare module "ui/core/view" {
_updateLayout(): void;
_applyXmlAttribute(attribute, value): boolean;
/**
* Called my measure method to cache measureSpecs.
*/
@@ -515,6 +517,6 @@ declare module "ui/core/view" {
* @param attrValue - the value of the attribute (bold)
* Should return true if this attribute is handled and there is no need default handler to process it.
*/
applyXmlAttribute(attributeName: string, attrValue: any): boolean;
_applyXmlAttribute(attributeName: string, attrValue: any): boolean;
}
}

2
ui/enums/enums.d.ts vendored
View File

@@ -404,7 +404,7 @@
/**
* Specifies nackground repeat.
* Specifies background repeat.
*/
export module BackgroundRepeat {
export var repeat: string;

4
ui/layouts/grid-layout/grid-layout.ts
View File

@@ -446,7 +446,7 @@ export class GridLayout extends layouts.Layout implements definition.GridLayout,
}
}
applyXmlAttribute(attributeName: string, attributeValue: any): boolean {
_applyXmlAttribute(attributeName: string, attributeValue: any): boolean {
if (attributeName === "columns") {
this.setColumns(attributeValue);
return true;
@@ -456,7 +456,7 @@ export class GridLayout extends layouts.Layout implements definition.GridLayout,
return true;
}
return false;
return super._applyXmlAttribute(attributeName, attributeValue);
}
private static parseItemSpecs(value: string): Array<ItemSpec> {

25
ui/styling/style.ts
View File

@@ -25,7 +25,7 @@ var noStylingClasses = {};
export class Style extends observable.DependencyObservable implements styling.Style {
private _view: view.View;
private _inUpdate = false;
private _updateCounter = 0;
private _nativeSetters = new Map<dependencyObservable.Property, any>();
get color(): color.Color {
@@ -265,13 +265,18 @@ export class Style extends observable.DependencyObservable implements styling.St
}
public _beginUpdate() {
this._inUpdate = true;
this._updateCounter++;
}
public _endUpdate() {
this._inUpdate = false;
this._nativeSetters.forEach((newValue, property, map) => { this._applyStyleProperty(property, newValue); });
this._nativeSetters.clear();
this._updateCounter--;
if (this._updateCounter < 0) {
throw new Error("style._endUpdate() called, but no update is in progress.");
}
if (this._updateCounter === 0) {
this._nativeSetters.forEach((newValue, property, map) => { this._applyStyleProperty(property, newValue); });
this._nativeSetters.clear();
}
}
public _resetCssValues() {
@@ -334,7 +339,7 @@ export class Style extends observable.DependencyObservable implements styling.St
}
private _applyStyleProperty(property: dependencyObservable.Property, newValue: any) {
if (this._inUpdate) {
if (this._updateCounter > 0) {
this._nativeSetters.set(property, newValue);
return;
}
@@ -486,6 +491,7 @@ function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
var style = <Style>data.object;
var url: string = data.newValue;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
var isValid = false;
if (types.isString(data.newValue)) {
var pattern: RegExp = /url\(('|")(.*?)\1\)/;
@@ -498,9 +504,11 @@ function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
var base64Data = url.split(",")[1];
if (types.isDefined(base64Data)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
isValid = true;
}
} else if (utils.isFileOrResourcePath(url)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
isValid = true;
} else if (url.indexOf("http") !== -1) {
style["_url"] = url;
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
@@ -509,8 +517,13 @@ function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
}
});
isValid = true;
}
}
if (!isValid) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
}
}
function onBackgroundColorPropertyChanged(data: observable.PropertyChangeData) {

20
ui/styling/stylers.android.ts
View File

@@ -371,25 +371,6 @@ export class SearchBarStyler implements definition.stylers.Styler {
}
}
export class BorderStyler implements definition.stylers.Styler {
//Background methods
private static setBackgroundProperty(view: view.View, newValue: any) {
var border = <border.Border>view;
border._updateAndroidBorder();
}
private static resetBackgroundProperty(view: view.View, nativeValue: any) {
var border = <border.Border>view;
border._updateAndroidBorder();
}
public static registerHandlers() {
style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
BorderStyler.setBackgroundProperty,
BorderStyler.resetBackgroundProperty), "Border");
}
}
// Register all styler at the end.
export function _registerDefaultStylers() {
style.registerNoStylingClass("Frame");
@@ -398,5 +379,4 @@ export function _registerDefaultStylers() {
ActivityIndicatorStyler.registerHandlers();
SegmentedBarStyler.registerHandlers();
SearchBarStyler.registerHandlers();
BorderStyler.registerHandlers();
}