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 #394 from NativeScript/feature/CSS-background-props

Browse Source 
Feature/css background props
This commit is contained in:
Alexander Vakrilov
2015-07-06 17:59:44 +03:00
parent 3a5aa290ef 74c19099b5
commit 6b4fc789e3
32 changed files with 1162 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
CrossPlatformModules.csproj
View File

@@ -214,6 +214,9 @@
<TypeScriptCompile Include="apps\ui-tests-app\layouts\myview.ts" />
<TypeScriptCompile Include="apps\ui-tests-app\layouts\stack.ts" />
<TypeScriptCompile Include="apps\ui-tests-app\layouts\wrap.ts" />
<TypeScriptCompile Include="apps\ui-tests-app\pages\background.ts">
<DependentUpon>background.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\pages\console.ts" />
<TypeScriptCompile Include="apps\ui-tests-app\pages\i61.ts" />
<TypeScriptCompile Include="apps\ui-tests-app\pages\i73.ts" />
@@ -241,6 +244,7 @@
<TypeScriptCompile Include="image-source\image-source.ios.ts">
<DependentUpon>image-source.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="js-libs\reworkcss-value\reworkcss-value.d.ts" />
<TypeScriptCompile Include="platform\platform.ios.ts">
<DependentUpon>platform.d.ts</DependentUpon>
</TypeScriptCompile>
@@ -454,6 +458,16 @@
<TypeScriptCompile Include="ui\layouts\wrap-layout\wrap-layout.ts">
<DependentUpon>wrap-layout.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\styling\background-common.ts">
<DependentUpon>background.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\styling\background.ios.ts">
<DependentUpon>background.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\styling\background.d.ts" />
<TypeScriptCompile Include="ui\styling\background.android.ts">
<DependentUpon>background.d.ts</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="ui\styling\css-selector.d.ts" />
<TypeScriptCompile Include="ui\styling\css-selector.ts">
<DependentUpon>css-selector.d.ts</DependentUpon>
@@ -646,7 +660,12 @@
<Content Include="apps\template-master-detail\main-page.minWH600.xml" />
<Content Include="apps\template-settings\app.css" />
<Content Include="apps\tests\app\location-example.xml" />
<TypeScriptCompile Include="apps\tests\pages\fonts-test.ts" />
<TypeScriptCompile Include="apps\tests\pages\fonts-test.ts">
<DependentUpon>fonts-test.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\tests\pages\background-test.ts">
<DependentUpon>background-test.xml</DependentUpon>
</TypeScriptCompile>
<Content Include="apps\tests\pages\page-load-performance\start.xml">
<SubType>Designer</SubType>
</Content>
@@ -655,7 +674,9 @@
</Content>
<Content Include="apps\tests\pages\page-load-performance\test-small.xml" />
<Content Include="apps\tests\pages\fonts-test.xml" />
<Content Include="apps\tests\pages\background-test.xml" />
<Content Include="apps\tests\pages\page18.xml" />
<Content Include="apps\tests\pages\test2.png" />
<Content Include="apps\tests\ui\bindingContext_testPage.xml" />
<Content Include="apps\tests\ui\bindingContext_testPage1.xml" />
<Content Include="apps\tests\ui\bindingContext_testPage2.xml" />
@@ -683,6 +704,7 @@
<Content Include="apps\ui-tests-app\layouts\grid.xml" />
<Content Include="apps\ui-tests-app\layouts\stack.xml" />
<Content Include="apps\ui-tests-app\layouts\wrap.xml" />
<Content Include="apps\ui-tests-app\pages\background.xml" />
<Content Include="apps\ui-tests-app\pages\circle.xml" />
<Content Include="apps\ui-tests-app\pages\i86.xml" />
<Content Include="apps\template-blank\app.css" />
@@ -692,11 +714,13 @@
<Content Include="apps\ui-tests-app\modal-view\login-page.xml" />
<Content Include="apps\ui-tests-app\modal-view\modal-view.xml" />
<Resource Include="apps\ui-tests-app\pages\red.png" />
<Content Include="apps\ui-tests-app\pages\test2.png" />
<Content Include="apps\ui-tests-app\pages\textfield.xml" />
<Content Include="apps\ui-tests-app\pages\text\text-field.xml" />
<Content Include="apps\ui-tests-app\pages\text\text-view.xml" />
<Content Include="apps\ui-tests-app\pages\text\label.xml" />
<Content Include="apps\ui-tests-app\pages\text\button.xml" />
<Content Include="js-libs\reworkcss-value\reworkcss-value.js" />
<Content Include="ui\layouts\stack-layout\package.json">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
@@ -1586,6 +1610,9 @@
<Content Include="ui\repeater\package.json">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="js-libs\reworkcss-value\LICENSE" />
<Content Include="js-libs\reworkcss-value\package.json" />
<Content Include="js-libs\reworkcss-value\Readme.md" />
</ItemGroup>
<ItemGroup>
<None Include="build\tslint.json" />
@@ -1648,7 +1675,7 @@
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
</WebProjectProperties>
</FlavorProperties>
<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" />
<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" />
</VisualStudio>
</ProjectExtensions>
</Project>

10
apps/tests/pages/background-test.ts Normal file
View File

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

37
apps/tests/pages/background-test.xml Normal file
View File

@@ -0,0 +1,37 @@
<Page loaded="pageLoaded">
<GridLayout rows="auto,*">
<WrapLayout>
<!-- Background and Border -->
<Button width="50" height="50" text="r" tap="resetTap"/>
<Button width="50" height="50" text="1" tap="applyTap" tag="margin: 20; background-color: lightgreen;"/>
<Button width="50" height="50" text="2.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 20; border-width: 40;"/>
<Button width="50" height="50" text="2.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 40;"/>
<Button width="50" height="50" text="2.3" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 20;"/>
<!-- Repeat -->
<Button width="50" height="50" text="3.1" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png');"/>
<Button width="50" height="50" text="3.2" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-y;"/>
<Button width="50" height="50" text="3.3" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-x;"/>
<!-- Position -->
<Button width="50" height="50" text="4.1" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat;"/>
<Button width="50" height="50" text="4.2" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left top;"/>
<Button width="50" height="50" text="4.3" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center;"/>
<Button width="50" height="50" text="4.4" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: right bottom;"/>
<Button width="50" height="50" text="4.5" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
<!-- Size -->
<Button width="50" height="50" text="5.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100;"/>
<Button width="50" height="50" text="5.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
<Button width="50" height="50" text="5.3" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/>
<Button width="50" height="50" text="5.4" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/>
<Button width="50" height="50" text="5.5" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100; background-color: lightgreen;"/>
<!-- All -->
<Button width="50" height="50" text="6" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-color: lightgreen; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: lightpink;"/>
</WrapLayout>
<GridLayout id="test-element" row="1">
</GridLayout>
</GridLayout>
</Page>

BIN
apps/tests/pages/test2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 B

9
apps/tests/ui/button/button-tests-native.android.ts
View File

@@ -2,6 +2,7 @@
import colorModule = require("color");
import utilsModule = require("utils/utils");
import enums = require("ui/enums");
import background = require("ui/styling/background");
export function getNativeText(button: buttonModule.Button): string {
return button.android.getText();
@@ -17,7 +18,13 @@ export function getNativeColor(button: buttonModule.Button): colorModule.Color {
}
export function getNativeBackgroundColor(button: buttonModule.Button): colorModule.Color {
return new colorModule.Color((<any>button.android.getBackground()).backgroundColor);
var bkg = <any>button.android.getBackground();
if (bkg instanceof background.ad.BorderDrawable) {
return (<background.ad.BorderDrawable>bkg).background.color;
}
else {
return new colorModule.Color(bkg.backgroundColor)
}
}
export function getNativeTextAlignment(button: buttonModule.Button): string {

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

@@ -25,6 +25,7 @@ import textBase = require("ui/text-base");
import enums = require("ui/enums");
import labelTestsNative = require("./label-tests-native");
import fs = require("file-system");
import background = require("ui/styling/background");
export class LabelTest extends testModule.UITest<LabelModule.Label> {
@@ -32,30 +33,30 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
var label = new LabelModule.Label();
label.text = "Label";
return label;
}
}
public test_Label_Members() {
var label = new LabelModule.Label();
TKUnit.assert(types.isDefined(label.text), "Label.text is not defined");
TKUnit.assert(types.isDefined(label.textWrap), "Label.textWrap is not defined");
}
var label = new LabelModule.Label();
TKUnit.assert(types.isDefined(label.text), "Label.text is not defined");
TKUnit.assert(types.isDefined(label.textWrap), "Label.textWrap is not defined");
}
public snippet_Set_Text_TNS() {
// <snippet module="ui/label" title="Label">
// ### How to set label text content
// ``` JavaScript
var label = new LabelModule.Label();
var expectedValue = "Expected Value";
label.text = expectedValue;
// ```
// </snippet>
}
// <snippet module="ui/label" title="Label">
// ### How to set label text content
// ``` JavaScript
var label = new LabelModule.Label();
var expectedValue = "Expected Value";
label.text = expectedValue;
// ```
// </snippet>
}
public snippet_Set_TextWrap_TNS() {
// <snippet module="ui/label" title="Label">
// ### How to turn on text wrapping for a label
// ``` JavaScript
var label = new LabelModule.Label();
var label = new LabelModule.Label();
label.textWrap = true;
// ```
// </snippet>
@@ -85,15 +86,15 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
TKUnit.assertEqual(actualNative, expectedValue, "Native text not equal");
}
}
public test_measuredWidth_is_not_clipped() {
var label = this.testView;
label.horizontalAlignment = "left";
label.text = "i";
label.fontSize = 9;
label.horizontalAlignment = "left";
label.text = "i";
label.fontSize = 9;
if (label.ios) {
if (label.ios) {
this.waitUntilTestElementLayoutIsValid();
@@ -105,11 +106,11 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
public test_Set_TextWrap_TNS() {
var label = this.testView;
label.textWrap = true;
label.textWrap = true;
var actual = label._getValue(LabelModule.Label.textWrapProperty);
var actual = label._getValue(LabelModule.Label.textWrapProperty);
TKUnit.assertEqual(actual, true);
}
}
public test_Set_TextWrap_Native() {
var testLabel = this.testView;
@@ -178,40 +179,40 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
TKUnit.assertEqual(actualLinesNumber, expectedLinesNumber, "LinesNumber");
}
}
public test_SetStyleProperties_via_css_class_Native() {
var label = this.testView;
var fontSize = 14;
var color = "#ffff0000";
var backgroundColor = "#ff00ff00";
var testCss = [".title {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
var fontSize = 14;
var color = "#ffff0000";
var backgroundColor = "#ff00ff00";
var testCss = [".title {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
// <snippet module="ui/label" title="Label">
// ### How to style a label via css class
// ``` JavaScript
label.text = "The quick brown fox jumps over the lazy dog.";
label.cssClass = "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;}";
// ```
// </snippet>
// <snippet module="ui/label" title="Label">
// ### How to style a label via css class
// ``` JavaScript
label.text = "The quick brown fox jumps over the lazy dog.";
label.cssClass = "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;}";
// ```
// </snippet>
var actualTextSize;
var expSize;
var actualColors;
var expColor;
var normalColor;
var actualBackgroundColor;
var expBackgroundColor;
var actualTextSize;
var expSize;
var actualColors;
var expColor;
var normalColor;
var actualBackgroundColor;
var expBackgroundColor;
this.testPage.css = testCss;
this.waitUntilTestElementIsLoaded();
var testLabel = label;
if (testLabel.android) {
actualTextSize = testLabel.android.getTextSize();
var density = utils.layout.getDisplayDensity();
@@ -223,7 +224,8 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
normalColor = actualColors.getDefaultColor()
TKUnit.assert(normalColor, "Expected: " + expColor + ", Actual: " + normalColor);
actualBackgroundColor = (<any>testLabel.android.getBackground()).backgroundColor;
var bkg = (<background.ad.BorderDrawable>testLabel.android.getBackground());
actualBackgroundColor = bkg.background.color.android;
expBackgroundColor = android.graphics.Color.parseColor(backgroundColor);
TKUnit.assertEqual(actualBackgroundColor, expBackgroundColor);
}
@@ -244,12 +246,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
public test_SetStyleProperties_via_css_type_TNS() {
var label = this.testView;
var fontSize = 14;
var color = "#10C2B0";
var backgroundColor = "#C6C6C6";
var testCss = ["label {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
var fontSize = 14;
var color = "#10C2B0";
var backgroundColor = "#C6C6C6";
var testCss = ["label {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
this.testPage.css = testCss;
this.waitUntilTestElementIsLoaded();
@@ -277,25 +279,25 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
public test_SetStyleProperties_via_css_id() {
var label = this.testView;
var fontSize = 14;
var color = "#10C2B0";
var backgroundColor = "#C6C6C6";
var testCss = ["#testLabel {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
var fontSize = 14;
var color = "#10C2B0";
var backgroundColor = "#C6C6C6";
var testCss = ["#testLabel {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
this.testPage.css = testCss;
this.waitUntilTestElementIsLoaded();
// <snippet module="ui/label" title="Label">
// ### How to style a label via css control identifier
// ``` JavaScript
label.text = "The quick brown fox jumps over the lazy dog.";
label.id = "testLabel";
//// after that all we have to do is to set a similar css entry within parent page css property
//// label.parentPage.css = "#testLabel {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// ```
// </snippet>
// <snippet module="ui/label" title="Label">
// ### How to style a label via css control identifier
// ``` JavaScript
label.text = "The quick brown fox jumps over the lazy dog.";
label.id = "testLabel";
//// after that all we have to do is to set a similar css entry within parent page css property
//// label.parentPage.css = "#testLabel {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// ```
// </snippet>
var expectedBackgroundColor = new colorModule.Color(backgroundColor);
var actualBackgroundColor = label.style.backgroundColor;
@@ -307,27 +309,27 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
var actualFontSize = label.style.fontSize;
TKUnit.assertEqual(fontSize, actualFontSize);
}
}
public test_BindingToText() {
// <snippet module="ui/label" title="Label">
// ### How to bind text property of a label to an observable model
// ``` JavaScript
var label = new LabelModule.Label();
var expValue = "Expected Value";
var sourceModel = new observableModule.Observable();
var bindingOptions: bindable.BindingOptions = {
sourceProperty: "sourceProperty",
targetProperty: "text"
};
label.bind(bindingOptions, sourceModel);
sourceModel.set("sourceProperty", expValue);
//// console.log(label.text); --> prints: "Expected Value"
// ```
// </snippet>
// <snippet module="ui/label" title="Label">
// ### How to bind text property of a label to an observable model
// ``` JavaScript
var label = new LabelModule.Label();
var expValue = "Expected Value";
var sourceModel = new observableModule.Observable();
var bindingOptions: bindable.BindingOptions = {
sourceProperty: "sourceProperty",
targetProperty: "text"
};
label.bind(bindingOptions, sourceModel);
sourceModel.set("sourceProperty", expValue);
//// console.log(label.text); --> prints: "Expected Value"
// ```
// </snippet>
TKUnit.assertEqual(label.text, expValue);
}
}
public test_BindingToText_Native() {
var label = this.testView;
@@ -348,10 +350,10 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
else if (label.ios) {
actualNative = label.ios.text;
}
}
TKUnit.assertEqual(actualNative, expValue);
}
}
public test_BindingToText_WithBindingContext() {
var label = this.testView;
@@ -375,7 +377,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
this.testPage.bindingContext = secondSourceObject;
TKUnit.assertEqual(label.text, secondExpValue);
}
}
public test_BindingToText_BindingContext_SetingLocalValue() {
var label = this.testView;
@@ -400,7 +402,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
firstSourceObject.set("sourceProperty", "some value");
// after setting a value one way binding should be gone.
TKUnit.assertEqual(label.text, secondExpValue);
}
}
private expectedTextAlignment = enums.TextAlignment.right;
public testLocalTextAlignmentFromCss() {
@@ -408,7 +410,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
this.testPage.css = "label { text-align: " + this.expectedTextAlignment + "; }";
this.waitUntilTestElementIsLoaded();
TKUnit.assertEqual(label.style.textAlignment, this.expectedTextAlignment);
}
}
public testLocalTextAlignmentFromCssWhenAddingCss() {
var view = this.testView;
@@ -421,7 +423,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
page.addCss("label { text-align: " + enums.TextAlignment.left + "; }");
TKUnit.assertEqual(view.style.textAlignment, view.style.textAlignment);
}
}
public testLocalTextAlignmentFromCssWhenAddingCssAllSelectorsAreApplied() {
var view = this.testView;
@@ -435,7 +437,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
var actualResult = view.style.textAlignment;
// actual result is taken from #testLabel tag, because it has a greater priority (id vs type).
TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
}
}
public testLocalTextAlignmentFromCssWhenAddingCssFileAllSelectorsAreApplied() {
var view = this.testView;
@@ -450,7 +452,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
// actual result is taken from #testLabel tag, because it has a greater priority (id vs type).
TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
TKUnit.assertEqual(view.style.backgroundColor.hex, "#FF0000");
}
}
public testNativeTextAlignmentFromCss() {
var view = this.testView;
@@ -460,7 +462,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
page.css = "label { text-align: " + this.expectedTextAlignment + "; }";
var actualResult = labelTestsNative.getNativeTextAlignment(view);
TKUnit.assert(actualResult, this.expectedTextAlignment);
}
}
public testNativeTextAlignmentFromLocal() {
var view = this.testView;
@@ -470,7 +472,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
var actualResult = labelTestsNative.getNativeTextAlignment(view);
TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
}
}
public testErrorMessageWhenWrongCssIsAddedWithFile() {
var view = this.testView;
@@ -481,7 +483,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
page.addCssFile(fs.path.join(__dirname, "label-tests-wrong.css"));
TKUnit.assertNotEqual(this.errorMessage, undefined);
}
public testErrorMessageWhenWrongCssIsAdded() {
var view = this.testView;
var page = this.testPage;

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

@@ -39,8 +39,32 @@ export function test_setting_backgroundColor_property_from_CSS_is_applied_to_Sty
test_property_from_CSS_is_applied_to_style("backgroundColor", "background-color", new color.Color("#FF0000"), "#FF0000");
}
export function test_setting_fontSize_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontSize", "font-size", 32);
export function test_setting_backgroundRepeat_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundRepeat", "background-repeat", "repeat-x");
}
export function test_setting_backgroundSize_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundSize", "background-size", "10% 20%");
}
export function test_setting_backgroundPosition_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundPosition", "background-position", "left center");
}
export function test_setting_backgroundImage_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundImage", "background-image", "url('~/pages/test2.png')");
}
export function test_setting_borderWidth_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5);
}
export function test_setting_borderColor_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderColor", "border-color", new color.Color("#FF0000"), "#FF0000");
}
export function test_setting_borderRadius_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20);
}
export function test_setting_textAlignment_property_from_CSS_is_applied_to_Style() {
@@ -81,6 +105,10 @@ export function test_setting_opacity_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("opacity", "opacity", 0.5);
}
export function test_setting_fontSize_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontSize", "font-size", 32);
}
export function test_setting_fontFamily_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontFamily", "font-family", "Helvetica");
}

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

@@ -22,9 +22,10 @@ export function test_css_dataURI_is_applied_to_backgroundImageSource() {
var page = <pageModule.Page>views[1];
page.css = "StackLayout { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC;') }";
var value = stack.style._getValue(styleModule.backgroundImageSourceProperty);
var value = stack.style._getValue(styleModule.backgroundInternalProperty);
TKUnit.assert(value !== undefined, "Style background-image not loaded correctly from data URI.");
TKUnit.assert(types.isDefined(value), "Style background-image not loaded correctly from data URI.");
TKUnit.assert(types.isDefined(value.image), "Style background-image not loaded correctly from data URI.");
});
}
@@ -747,6 +748,21 @@ export function test_setInlineStyle_setsLocalValues() {
});
}
export function test_setInlineStyle_resetsLocalValues() {
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");
});
}
export var test_CSS_isAppliedOnPage = function () {
var testButton = new buttonModule.Button();
testButton.text = "Test";

9
apps/tests/ui/text-field/text-field-tests-native.android.ts
View File

@@ -2,6 +2,7 @@
import colorModule = require("color");
import utilsModule = require("utils/utils");
import enums = require("ui/enums");
import background = require("ui/styling/background");
export function getNativeText(textField: textFieldModule.TextField): string {
return textField.android.getText().toString();
@@ -26,7 +27,13 @@ export function getNativeColor(textField: textFieldModule.TextField): colorModul
}
export function getNativeBackgroundColor(textField: textFieldModule.TextField): colorModule.Color {
return new colorModule.Color((<any>textField.android.getBackground()).backgroundColor);
var bkg = <any>textField.android.getBackground();
if (bkg instanceof background.ad.BorderDrawable) {
return (<background.ad.BorderDrawable>bkg).background.color;
}
else {
return new colorModule.Color(bkg.backgroundColor)
}
}
export function getNativeTextAlignment(textField: textFieldModule.TextField): string {

9
apps/tests/ui/text-view/text-view-tests-native.android.ts
View File

@@ -2,6 +2,7 @@
import colorModule = require("color");
import utilsModule = require("utils/utils");
import enums = require("ui/enums");
import background = require("ui/styling/background");
export function getNativeText(textView: textViewModule.TextView): string {
return textView.android.getText().toString();
@@ -30,7 +31,13 @@ export function getNativeColor(textView: textViewModule.TextView): colorModule.C
}
export function getNativeBackgroundColor(textView: textViewModule.TextView): colorModule.Color {
return new colorModule.Color((<any>textView.android.getBackground()).backgroundColor);
var bkg = <any>textView.android.getBackground();
if (bkg instanceof background.ad.BorderDrawable) {
return (<background.ad.BorderDrawable>bkg).background.color;
}
else {
return new colorModule.Color(bkg.backgroundColor)
}
}
export function getNativeTextAlignment(textView: textViewModule.TextView): string {

11
apps/tests/ui/view/view-tests.android.ts
View File

@@ -6,6 +6,7 @@ import button = require("ui/button");
import types = require("utils/types");
import stack = require("ui/layouts/stack-layout");
import labelModule = require("ui/label");
import background = require("ui/styling/background");
import trace = require("trace");
// enable the trace, it is disabled by default
@@ -268,19 +269,19 @@ export function getNativeCornerRadius(v: view.View): number {
}
export function checkNativeBorderColor(v: view.View): boolean {
var bkg = <any>(<android.view.View>v.android).getBackground();
var bkg = <background.ad.BorderDrawable>(<android.view.View>v.android).getBackground();
return v.borderColor && bkg && bkg.borderColor === v.borderColor.android;
}
export function checkNativeBackgroundColor(v: view.View): boolean {
var bkg = <any>(<android.view.View>v.android).getBackground();
var bkg = <background.ad.BorderDrawable>(<android.view.View>v.android).getBackground();
return v.backgroundColor && bkg && bkg.backgroundColor === v.backgroundColor.android;
return v.backgroundColor && bkg && bkg.background && bkg.background.color.equals(v.backgroundColor);
}
export function checkNativeBackgroundImage(v: view.View): boolean {
var bkg = <any>(<android.view.View>v.android).getBackground();
var bkg = <background.ad.BorderDrawable>(<android.view.View>v.android).getBackground();
return bkg && bkg.bitmap !== undefined;
return bkg && bkg.background && !types.isNullOrUndefined(bkg.background.image);
}

10
apps/ui-tests-app/pages/background.ts Normal file
View File

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

37
apps/ui-tests-app/pages/background.xml Normal file
View File

@@ -0,0 +1,37 @@
<Page loaded="pageLoaded">
<GridLayout rows="auto,*">
<WrapLayout>
<!-- Background and Border -->
<Button width="50" height="50" text="r" tap="resetTap"/>
<Button width="50" height="50" text="1" tap="applyTap" tag="margin: 20; background-color: lightgreen;"/>
<Button width="50" height="50" text="2.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 20; border-width: 40;"/>
<Button width="50" height="50" text="2.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 40;"/>
<Button width="50" height="50" text="2.3" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 20;"/>
<!-- Repeat -->
<Button width="50" height="50" text="3.1" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png');"/>
<Button width="50" height="50" text="3.2" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-y;"/>
<Button width="50" height="50" text="3.3" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-x;"/>
<!-- Position -->
<Button width="50" height="50" text="4.1" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat;"/>
<Button width="50" height="50" text="4.2" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left top;"/>
<Button width="50" height="50" text="4.3" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center;"/>
<Button width="50" height="50" text="4.4" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: right bottom;"/>
<Button width="50" height="50" text="4.5" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
<!-- Size -->
<Button width="50" height="50" text="5.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100;"/>
<Button width="50" height="50" text="5.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
<Button width="50" height="50" text="5.3" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/>
<Button width="50" height="50" text="5.4" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/>
<Button width="50" height="50" text="5.5" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100; background-color: lightgreen;"/>
<!-- All -->
<Button width="50" height="50" text="6" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-color: lightgreen; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: lightpink;"/>
</WrapLayout>
<GridLayout id="test-element" row="1">
</GridLayout>
</GridLayout>
</Page>

BIN
apps/ui-tests-app/pages/test2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 B

9
js-libs/reworkcss-value/LICENSE Normal file
View File

@@ -0,0 +1,9 @@
(The MIT License)
Copyright (c) 2013 TJ Holowaychuk <tj@vision-media.ca>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

45
js-libs/reworkcss-value/Readme.md Normal file
View File

@@ -0,0 +1,45 @@
# css-value
WIP CSS value parser
## Example
The CSS value string "1px 0 0 5% .5px .10 1.5" yields:
```js
[
{ type: 'number', string: '1px', unit: 'px', value: 1 },
{ type: 'number', string: '0', unit: '', value: 0 },
{ type: 'number', string: '0', unit: '', value: 0 },
{ type: 'number', string: '5%', unit: '%', value: 5 },
{ type: 'number', string: '.5px', unit: 'px', value: .5 },
{ type: 'number', string: '.10', unit: '', value: .1 },
{ type: 'number', string: '1.5', unit: '', value: 1.5 }
]
```
## License
(The MIT License)
Copyright (c) 2013 TJ Holowaychuk &lt;tj@vision-media.ca&gt;
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

12
js-libs/reworkcss-value/package.json Normal file
View File

@@ -0,0 +1,12 @@
{
"name": "reworkcss-value.js",
"version": "0.0.1",
"description": "CSS value parser",
"keywords": ["css", "parser", "value"],
"author": "TJ Holowaychuk <tj@vision-media.ca>",
"repository": {
"type": "git",
"url": "git://github.com/visionmedia/css-value.git"
},
"main": "reworkcss-value.js"
}

10
js-libs/reworkcss-value/reworkcss-value.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
declare module "js-libs/reworkcss-value" {
export interface CSSValue {
type: string;
string: string;
unit: string;
value: number;
}
export function parse(cssValue: string): Array<CSSValue>;
}

113
js-libs/reworkcss-value/reworkcss-value.js Normal file
View File

@@ -0,0 +1,113 @@
module.exports.parse = parse;
function parse(str) {
return new Parser(str).parse();
}
function Parser(str) {
this.str = str;
}
Parser.prototype.skip = function(m){
this.str = this.str.slice(m[0].length);
};
Parser.prototype.comma = function(){
var m = /^, */.exec(this.str);
if (!m) return;
this.skip(m);
return { type: 'comma', string: ',' };
};
Parser.prototype.ident = function(){
var m = /^([\w-]+) */.exec(this.str);
if (!m) return;
this.skip(m);
return {
type: 'ident',
string: m[1]
}
};
Parser.prototype.int = function(){
var m = /^((\d+)(\S+)?) */.exec(this.str);
if (!m) return;
this.skip(m);
var n = ~~m[2];
var u = m[3];
return {
type: 'number',
string: m[1],
unit: u || '',
value: n
}
};
Parser.prototype.float = function(){
var m = /^(((?:\d+)?\.\d+)(\S+)?) */.exec(this.str);
if (!m) return;
this.skip(m);
var n = parseFloat(m[2]);
var u = m[3];
return {
type: 'number',
string: m[1],
unit: u || '',
value: n
}
};
Parser.prototype.number = function(){
return this.float() || this.int();
};
Parser.prototype.double = function(){
var m = /^"([^"]*)" */.exec(this.str);
if (!m) return m;
this.skip(m);
return {
type: 'string',
quote: '"',
string: '"' + m[1] + '"',
value: m[1]
}
};
Parser.prototype.single = function(){
var m = /^'([^']*)' */.exec(this.str);
if (!m) return m;
this.skip(m);
return {
type: 'string',
quote: "'",
string: "'" + m[1] + "'",
value: m[1]
}
};
Parser.prototype.string = function(){
return this.single() || this.double();
};
Parser.prototype.value = function(){
return this.number()
|| this.ident()
|| this.string()
|| this.comma();
};
Parser.prototype.parse = function(){
var vals = [];
while (this.str.length) {
var obj = this.value();
if (!obj) throw new Error('failed to parse near `' + this.str.slice(0, 10) + '...`');
vals.push(obj);
}
return vals;
};

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

@@ -761,7 +761,13 @@ export class View extends proxy.ProxyObject implements definition.View {
private _applyInlineStyle(inlineStyle) {
if (types.isString(inlineStyle)) {
styleScope.applyInlineSyle(this, <string>inlineStyle);
try {
this.style._beginUpdate();
this.style._resetLocalValues();
styleScope.applyInlineSyle(this, <string>inlineStyle);
} finally {
this.style._endUpdate();
}
}
}

9
ui/core/view.ios.ts
View File

@@ -3,6 +3,7 @@ import trace = require("trace");
import utils = require("utils/utils");
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import background = require("ui/styling/background");
// merge the exports of the common file with the exports of this file
declare var exports;
@@ -124,6 +125,7 @@ export class View extends viewCommon.View {
if (changed || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
this.onLayout(left, top, right, bottom);
this._privateFlags &= ~PFLAG_LAYOUT_REQUIRED;
this._onBoundsChanged();
}
this._privateFlags &= ~PFLAG_FORCE_LAYOUT;
}
@@ -203,6 +205,13 @@ export class View extends viewCommon.View {
return false;
}
private _onBoundsChanged() {
var bgColor = background.ios.createBackgroundUIColor(this);
if (bgColor) {
this._nativeView.backgroundColor = bgColor;
}
}
}
export class CustomLayoutView extends View {

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

@@ -402,4 +402,14 @@
export var bold: string;
}
/**
* Specifies nackground repeat.
*/
export module BackgroundRepeat {
export var repeat: string;
export var repeatX: string;
export var repeatY: string;
export var noRepeat: string;
}
}

7
ui/enums/enums.ts
View File

@@ -113,3 +113,10 @@ export module FontWeight {
export var normal: string = "normal";
export var bold: string = "bold";
}
export module BackgroundRepeat {
export var repeat: string = "repeat";
export var repeatX: string = "repeat-x";
export var repeatY: string = "repeat-y";
export var noRepeat: string = "no-repeat";
}

188
ui/styling/background-common.ts Normal file
View File

@@ -0,0 +1,188 @@
import imageSource = require("image-source");
import colorModule = require("color");
import types = require("utils/types");
import enums = require("ui/enums");
import dts = require("ui/styling/background");
import cssValue = require("js-libs/reworkcss-value");
export class Background implements dts.Background {
public static default = new Background(undefined, undefined, undefined, undefined, undefined);
color: colorModule.Color;
image: imageSource.ImageSource;
repeat: string;
position: string;
size: string;
constructor(
color: colorModule.Color,
image: imageSource.ImageSource,
repeat: string,
position: string,
size: string) {
this.color = color;
this.image = image;
this.repeat = repeat;
this.position = position;
this.size = size;
}
public withColor(value: colorModule.Color): Background {
return new Background(value, this.image, this.repeat, this.position, this.size);
}
public withImage(value: imageSource.ImageSource): Background {
return new Background(this.color, value, this.repeat, this.position, this.size);
}
public withRepeat(value: string): Background {
return new Background(this.color, this.image, value, this.position, this.size);
}
public withPosition(value: string): Background {
return new Background(this.color, this.image, this.repeat, value, this.size);
}
public withSize(value: string): Background {
return new Background(this.color, this.image, this.repeat, this.position, value);
}
public getDrawParams(width: number, height: number): dts.BackgroundDrawParams {
if (!this.image) {
return null;
}
var res: dts.BackgroundDrawParams = {
repeatX: true,
repeatY: true,
posX: 0,
posY: 0,
}
// repeat
if (this.repeat) {
switch (this.repeat.toLowerCase()) {
case enums.BackgroundRepeat.noRepeat:
res.repeatX = false;
res.repeatY = false;
break;
case enums.BackgroundRepeat.repeatX:
res.repeatY = false;
break;
case enums.BackgroundRepeat.repeatY:
res.repeatX = false;
break;
}
}
var imageWidth = this.image.width;
var imageHeight = this.image.height;
// size
if (this.size) {
let values = cssValue.parse(this.size);
if (values.length === 2) {
let vx = values[0];
let vy = values[1];
if (vx.unit === "%" && vy.unit === "%") {
imageWidth = width * vx.value / 100;
imageHeight = height * vy.value / 100;
res.sizeX = imageWidth;
res.sizeY = imageHeight;
}
else if (vx.type === "number" && vy.type === "number" &&
((vx.unit === "px" && vy.unit === "px") || (vx.unit === "" && vy.unit === ""))) {
imageWidth = vx.value;
imageHeight = vy.value;
res.sizeX = imageWidth;
res.sizeY = imageHeight;
}
}
else if (values.length === 1 && values[0].type === "ident") {
let scale = 0;
if (values[0].string === "cover") {
scale = Math.max(width / imageWidth, height / imageHeight);
}
else if (values[0].string === "contain") {
scale = Math.min(width / imageWidth, height / imageHeight);
}
if(scale > 0){
imageWidth *= scale;
imageHeight *= scale;
res.sizeX = imageWidth;
res.sizeY = imageHeight;
}
}
}
// position
if (this.position) {
let values = cssValue.parse(this.position);
let spaceX = width - imageWidth;
let spaceY = height - imageHeight;
if (values.length === 2) {
let vx = values[0];
let vy = values[1];
if (vx.unit === "%" && vy.unit === "%") {
res.posX = spaceX * vx.value / 100;
res.posY = spaceY * vy.value / 100;
}
else if (vx.type === "number" && vy.type === "number" &&
((vx.unit === "px" && vy.unit === "px") || (vx.unit === "" && vy.unit === ""))) {
res.posX = vx.value;
res.posY = vy.value;
}
else if (vx.type === "ident" && vy.type === "ident") {
if (vx.string.toLowerCase() === "center") {
res.posX = spaceX / 2;
}
else if (vx.string.toLowerCase() === "right") {
res.posX = spaceX;
}
if (vy.string.toLowerCase() === "center") {
res.posY = spaceY / 2;
}
else if (vy.string.toLowerCase() === "bottom") {
res.posY = spaceY;
}
}
}
}
return res;
}
public isEmpty(): boolean {
return types.isUndefined(this.image) && types.isUndefined(this.color);
}
public static equals(value1: Background, value2: Background): boolean {
// both values are falsy
if (!value1 && !value2) {
return true;
}
// only one is falsy
if (!value1 || !value2) {
return false;
}
return value1.image === value2.image &&
value1.position === value2.position &&
value1.repeat === value2.repeat &&
value1.size === value2.size &&
colorModule.Color.equals(value1.color, value2.color);
}
}

132
ui/styling/background.android.ts Normal file
View File

@@ -0,0 +1,132 @@
import utils = require("utils/utils");
import common = require("ui/styling/background-common");
import dts = require("ui/styling/background");
declare var exports;
require("utils/module-merge").merge(common, exports);
// We are using "ad" here to avoid namespace collision with the global android object
export module ad {
export class BorderDrawable extends android.graphics.drawable.ColorDrawable implements dts.ad.BorderDrawable {
private _density = utils.layout.getDisplayDensity();
private _borderWidth: number;
private _cornerRadius: number;
private _borderColor: number;
constructor() {
super();
return global.__native(this);
}
get borderWidth(): number {
return this._borderWidth;
}
set borderWidth(value: number) {
if (this._borderWidth !== value) {
this._borderWidth = value;
this.invalidateSelf();
}
}
get cornerRadius(): number {
return this._cornerRadius;
}
set cornerRadius(value: number) {
if (this._cornerRadius !== value) {
this._cornerRadius = value;
this.invalidateSelf();
}
}
get borderColor(): number {
return this._borderColor;
}
set borderColor(value: number) {
if (this._borderColor !== value) {
this._borderColor = value;
this.invalidateSelf();
}
}
private _background: common.Background
get background(): common.Background {
return this._background;
}
set background(value: common.Background) {
if (this._background !== value) {
this._background = value;
this.invalidateSelf();
}
}
public draw(canvas: android.graphics.Canvas): void {
var bounds = this.getBounds();
var boundsF = new android.graphics.RectF(bounds);
var boundsWidth = bounds.width();
var boundsHeight = bounds.height();
var radius = this._cornerRadius * this._density;
var stroke = this._borderWidth * this._density;
// set clip first
if (radius > 0) {
var path = new android.graphics.Path();
path.addRoundRect(boundsF, radius, radius, android.graphics.Path.Direction.CW);
canvas.clipPath(path);
}
// draw background
if (this.background.color && this.background.color.android) {
let c = this.background.color;
canvas.drawARGB(c.a, c.r, c.g, c.b);
}
// draw image
if (this.background.image) {
let bitmap = this.background.image.android;
let params = this.background.getDrawParams(boundsWidth, boundsHeight);
var matrix = new android.graphics.Matrix();
if (params.sizeX > 0 && params.sizeY > 0) {
var scaleX = params.sizeX / bitmap.getWidth();
var scaleY = params.sizeY / bitmap.getHeight();
matrix.setScale(scaleX, scaleY, 0, 0);
}
else {
params.sizeX = bitmap.getWidth();
params.sizeY = bitmap.getHeight();
}
matrix.postTranslate(params.posX, params.posY);
if (!params.repeatX && !params.repeatY) {
canvas.drawBitmap(bitmap, matrix, undefined);
}
else {
var shader = new android.graphics.BitmapShader(bitmap, android.graphics.Shader.TileMode.REPEAT, android.graphics.Shader.TileMode.REPEAT);
shader.setLocalMatrix(matrix);
var paint = new android.graphics.Paint();
paint.setShader(shader);
var w = params.repeatX ? bounds.width() : params.sizeX;
var h = params.repeatY ? bounds.height() : params.sizeY;
params.posX = params.repeatX ? 0 : params.posX;
params.posY = params.repeatY ? 0 : params.posY;
canvas.drawRect(params.posX, params.posY, params.posX + w, params.posY + h, paint);
}
}
// draw border (topmost)
if (stroke > 0 && this._borderColor && this._borderColor) {
let borderPaint = new android.graphics.Paint();
borderPaint.setStyle(android.graphics.Paint.Style.STROKE);
borderPaint.setColor(this._borderColor);
// Note: Double the stroke as the outer part will be clipped.
borderPaint.setStrokeWidth(stroke * 2);
canvas.drawRoundRect(boundsF, radius, radius, borderPaint)
}
}
}
}

59
ui/styling/background.d.ts vendored Normal file
View File

@@ -0,0 +1,59 @@
declare module "ui/styling/background" {
import imageSource = require("image-source");
import colorModule = require("color");
import viewModule = require("ui/core/view");
export interface BackgroundDrawParams {
repeatX: boolean;
repeatY: boolean;
posX: number;
posY: number;
sizeX?: number;
sizeY?: number;
}
export class Background {
static default: Background;
color: colorModule.Color;
image: imageSource.ImageSource;
repeat: string;
position: string;
size: string;
constructor(
color: colorModule.Color,
image: imageSource.ImageSource,
repeat: string,
position: string,
size: string);
public withColor(value: colorModule.Color): Background;
public withImage(value: imageSource.ImageSource): Background;
public withRepeat(value: string): Background;
public withPosition(value: string): Background;
public withSize(value: string): Background;;
public getDrawParams(width: number, height: number): BackgroundDrawParams;
public isEmpty(): boolean;
public static equals(value1: Background, value2: Background): boolean;
}
export module ios {
export function createBackgroundUIColor(view: viewModule.View): UIColor;
}
// We are using "ad" here to avoid namespace collision with the global android object
export module ad {
export class BorderDrawable extends android.graphics.drawable.ColorDrawable {
borderWidth: number;
cornerRadius: number;
borderColor: number;
background: Background;
}
}
}

63
ui/styling/background.ios.ts Normal file
View File

@@ -0,0 +1,63 @@
import viewModule = require("ui/core/view");
import style = require("ui/styling/style");
import common = require("ui/styling/background-common");
declare var exports;
require("utils/module-merge").merge(common, exports);
export module ios {
export function createBackgroundUIColor(view: viewModule.View): UIColor {
var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
var frame = (<UIView>view._nativeView).frame;
var boundsWidth = frame.size.width;
var boundsHeight = frame.size.height;
var result: UIColor;
if (background && !background.isEmpty() && boundsWidth > 0 && boundsHeight) {
if (!background.image) {
result = background.color.ios;
}
else {
var img = <UIImage>background.image.ios;
var params = background.getDrawParams(boundsWidth, boundsHeight);
if (params.sizeX > 0 && params.sizeY > 0) {
var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
UIGraphicsBeginImageContext(resizeRect.size);
img.drawInRect(resizeRect);
img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
UIGraphicsBeginImageContextWithOptions(frame.size, false, 1.0);
var context = UIGraphicsGetCurrentContext();
if (background.color && background.color.ios) {
CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
}
if (!params.repeatX && !params.repeatY) {
img.drawAtPoint(CGPointMake(params.posX, params.posY));
}
else {
var w = params.repeatX ? boundsWidth : img.size.width;
var h = params.repeatY ? boundsHeight : img.size.height;
CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
params.posX = params.repeatX ? 0 : params.posX;
params.posY = params.repeatY ? 0 : params.posY;
var patternRect = CGRectMake(params.posX, params.posY, w, h);
img.drawAsPatternInRect(patternRect);
}
var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
result = UIColor.alloc().initWithPatternImage(bkgImage);
}
return result;
}
}
}

3
ui/styling/font.ios.ts
View File

@@ -96,9 +96,6 @@ function resolveFontDescriptor(fontFamilyValue: string, symbolicTraits: number):
// This is an actual font - don't apply symbolic traits
result = UIFontDescriptor.fontDescriptorWithNameSize(fontFamily, 0);
}
else {
// TODO: Handle custom fonts when they are supported.
}
if (result) {
return result;

146
ui/styling/style.ts
View File

@@ -12,6 +12,7 @@ import enums = require("ui/enums");
import imageSource = require("image-source");
import utils = require("utils/utils");
import font = require("ui/styling/font");
import background = require("ui/styling/background");
// key is the property id and value is Dictionary<string, StylePropertyChangedHandler>;
var _registeredHandlers = Array<Object>();
@@ -48,6 +49,27 @@ export class Style extends observable.DependencyObservable implements styling.St
this._setValue(backgroundImageProperty, value, observable.ValueSource.Local);
}
get backgroundRepeat(): string {
return this._getValue(backgroundRepeatProperty);
}
set backgroundRepeat(value: string) {
this._setValue(backgroundRepeatProperty, value, observable.ValueSource.Local);
}
get backgroundSize(): string {
return this._getValue(backgroundSizeProperty);
}
set backgroundSize(value: string) {
this._setValue(backgroundSizeProperty, value, observable.ValueSource.Local);
}
get backgroundPosition(): string {
return this._getValue(backgroundPositionProperty);
}
set backgroundPosition(value: string) {
this._setValue(backgroundPositionProperty, value, observable.ValueSource.Local);
}
get borderColor(): color.Color {
return this._getValue(borderColorProperty);
}
@@ -241,7 +263,7 @@ export class Style extends observable.DependencyObservable implements styling.St
super();
this._view = parentView;
}
public _beginUpdate() {
this._inUpdate = true;
}
@@ -260,6 +282,14 @@ export class Style extends observable.DependencyObservable implements styling.St
});
}
public _resetLocalValues() {
var that = this;
this._eachSetProperty(function (property: observable.Property) {
that._resetValue(property, observable.ValueSource.Local);
return true;
});
}
public _onPropertyChanged(property: dependencyObservable.Property, oldValue: any, newValue: any) {
trace.write(
"Style._onPropertyChanged view:" + this._view +
@@ -317,7 +347,7 @@ export class Style extends observable.DependencyObservable implements styling.St
}
else {
trace.write("Found handler for property: " + property.name + ", view:" + this._view, trace.categories.Style);
var shouldReset = false;
if (property.metadata.equalityComparer) {
shouldReset = property.metadata.equalityComparer(newValue, property.metadata.defaultValue);
@@ -426,39 +456,18 @@ export var colorProperty = new styleProperty.Property("color", "color",
export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
var view: view.View = (<any>data.object)._view;
var style = <Style>data.object;
var url: string = data.newValue;
export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, undefined, color.Color.equals),
converters.colorConverter);
style._setValue(backgroundImageSourceProperty, undefined, observable.ValueSource.Local);
export var backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundRepeatPropertyChanged));
if (types.isString(data.newValue)) {
var pattern: RegExp = /url\(('|")(.*?)\1\)/;
var match = url.match(pattern);
if (match && match[2]) {
url = match[2];
}
export var backgroundSizeProperty = new styleProperty.Property("backgroundSize", "background-size",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundSizePropertyChanged));
if (utils.isDataURI(url)) {
var base64Data = url.split(",")[1];
if (types.isDefined(base64Data)) {
style._setValue(backgroundImageSourceProperty, imageSource.fromBase64(base64Data), observable.ValueSource.Local);
}
} else if (utils.isFileOrResourcePath(url)) {
style._setValue(backgroundImageSourceProperty, imageSource.fromFileOrResource(url), observable.ValueSource.Local);
} else if (url.indexOf("http") !== -1) {
if (view) {
view["_url"] = url;
}
imageSource.fromUrl(url).then(r=> {
if (view && view["_url"] === url) {
style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local);
}
});
}
}
}
export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, color.Color.equals),
@@ -470,18 +479,77 @@ export var borderWidthProperty = new styleProperty.Property("borderWidth", "bord
export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
new observable.PropertyMetadata(0, observable.PropertyMetadataSettings.AffectsLayout, null, isPaddingValid), converters.numberConverter);
export var backgroundImageSourceProperty = new styleProperty.Property("backgroundImageSource", "background-image-source",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, undefined));
export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
new observable.PropertyMetadata(background.Background.default, observable.PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, color.Color.equals),
converters.colorConverter);
function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
var style = <Style>data.object;
var url: string = data.newValue;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (types.isString(data.newValue)) {
var pattern: RegExp = /url\(('|")(.*?)\1\)/;
var match = url.match(pattern);
if (match && match[2]) {
url = match[2];
}
if (utils.isDataURI(url)) {
var base64Data = url.split(",")[1];
if (types.isDefined(base64Data)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
}
} else if (utils.isFileOrResourcePath(url)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
} else if (url.indexOf("http") !== -1) {
style["_url"] = url;
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
imageSource.fromUrl(url).then((r) => {
if (style && style["_url"] === url) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
}
});
}
}
}
function onBackgroundColorPropertyChanged(data: observable.PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (!color.Color.equals(currentBackground.color, data.newValue)) {
style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
}
}
function onBackgroundSizePropertyChanged(data: observable.PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.size) {
style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
}
}
function onBackgroundRepeatPropertyChanged(data: observable.PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.repeat) {
style._setValue(backgroundInternalProperty, currentBackground.withRepeat(data.newValue));
}
}
function onBackgroundPositionPropertyChanged(data: observable.PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.position) {
style._setValue(backgroundInternalProperty, currentBackground.withPosition(data.newValue));
}
}
export var fontProperty = new styleProperty.Property("font", "font",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onFontChanged));
export var fontSizeProperty = new styleProperty.Property("fontSize", "font-size",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontSizeChanged),converters.fontSizeConverter);
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontSizeChanged), converters.fontSizeConverter);
export var fontFamilyProperty = new styleProperty.Property("fontFamily", "font-family",
new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontFamilyChanged));
@@ -543,7 +611,7 @@ function onFontChanged(data: observable.PropertyChangeData) {
var style = <Style>data.object;
var newFont = font.Font.parse(data.newValue);
var valueSource = style._getValueSource(fontProperty);
var valueSource = style._getValueSource(fontProperty);
style._setValue(fontFamilyProperty, newFont.fontFamily, valueSource);
style._setValue(fontStyleProperty, newFont.fontStyle, valueSource);
style._setValue(fontWeightProperty, newFont.fontWeight, valueSource);

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

@@ -1,5 +1,4 @@
import types = require("utils/types");
import trace = require("trace");
import view = require("ui/core/view");
import border = require("ui/border");
import constants = require("utils/android_constants");
@@ -9,114 +8,32 @@ import stylersCommon = require("ui/styling/stylers-common");
import enums = require("ui/enums");
import utils = require("utils/utils");
import styleModule = require("ui/styling/style");
import imageSource = require("image-source");
import font = require("ui/styling/font");
import background = require("ui/styling/background");
// merge the exports of the common file with the exports of this file
declare var exports;
require("utils/module-merge").merge(stylersCommon, exports);
class BorderGradientDrawable extends android.graphics.drawable.GradientDrawable {
private _density = utils.layout.getDisplayDensity();
constructor() {
super();
return global.__native(this);
}
private _borderWidth: number;
get borderWidth(): number {
return this._borderWidth;
}
set borderWidth(value: number) {
if (this._borderWidth !== value) {
this._borderWidth = value;
this.setStroke(this._borderWidth * this._density, this._borderColor);
}
}
private _cornerRadius: number;
get cornerRadius(): number {
return this._cornerRadius;
}
set cornerRadius(value: number) {
if (this._cornerRadius !== value) {
this._cornerRadius = value;
this.setCornerRadius(this._cornerRadius * this._density);
}
}
private _borderColor: number;
get borderColor(): number {
return this._borderColor;
}
set borderColor(value: number) {
if (this._borderColor !== value) {
this._borderColor = value;
this.setStroke(this._borderWidth * this._density, this._borderColor);
}
}
private _backgroundColor: number;
get backgroundColor(): number {
return this._backgroundColor;
}
set backgroundColor(value: number) {
if (this._backgroundColor !== value) {
this._backgroundColor = value;
this.setColor(this._backgroundColor);
}
}
private _bitmap: android.graphics.Bitmap
get bitmap(): android.graphics.Bitmap {
return this._bitmap;
}
set bitmap(value: android.graphics.Bitmap) {
if (this._bitmap !== value) {
this._bitmap = value;
this.invalidateSelf();
}
}
public draw(canvas: android.graphics.Canvas): void {
super.draw(canvas);
if (this.bitmap) {
var radius = this._cornerRadius * this._density;
var stroke = this._borderWidth * this._density;
var bounds = this.getBounds();
var path = new android.graphics.Path();
path.addRoundRect(new android.graphics.RectF(stroke, stroke, bounds.right - stroke, bounds.bottom - stroke), radius, radius, android.graphics.Path.Direction.CW)
canvas.clipPath(path);
canvas.drawBitmap(this.bitmap, stroke, stroke, undefined);
}
}
}
function onBorderPropertyChanged(v: view.View) {
var _defaultBackgrounds = new Map<string, android.graphics.drawable.Drawable>();
function onBackgroundOrBorderPropertyChanged(v: view.View) {
if (!v._nativeView) {
return;
}
var value = <imageSource.ImageSource>v.style._getValue(styleModule.backgroundImageSourceProperty);
var backgroundValue = <background.Background>v.style._getValue(styleModule.backgroundInternalProperty);
if (v.borderWidth !== 0 || v.borderRadius !== 0 || !types.isNullOrUndefined(v.backgroundColor) || !types.isNullOrUndefined(value)) {
if (v.borderWidth !== 0 || v.borderRadius !== 0 || !backgroundValue.isEmpty()) {
var nativeView = <android.view.View>v._nativeView;
var bkg = <BorderGradientDrawable>nativeView.getBackground();
var bkg = <background.ad.BorderDrawable>nativeView.getBackground();
if (!(bkg instanceof background.ad.BorderDrawable)) {
bkg = new background.ad.BorderDrawable();
let viewClass = types.getClass(v);
if (!_defaultBackgrounds.has(viewClass)) {
_defaultBackgrounds.set(viewClass, nativeView.getBackground());
}
if (!(bkg instanceof BorderGradientDrawable)) {
bkg = new BorderGradientDrawable();
nativeView.setBackground(bkg);
}
@@ -127,75 +44,25 @@ function onBorderPropertyChanged(v: view.View) {
bkg.borderWidth = v.borderWidth;
bkg.cornerRadius = v.borderRadius;
bkg.borderColor = v.borderColor ? v.borderColor.android : android.graphics.Color.TRANSPARENT;
bkg.backgroundColor = v.backgroundColor ? v.backgroundColor.android : android.graphics.Color.TRANSPARENT;
bkg.bitmap = value ? value.android : undefined;
bkg.background = backgroundValue;
}
else {
// reset the value with the default native value
let viewClass = types.getClass(v);
if (_defaultBackgrounds.has(viewClass)) {
v.android.setBackgroundDrawable(_defaultBackgrounds.get(viewClass));
}
}
}
export class DefaultStyler implements definition.stylers.Styler {
//Background methods
private static setBackgroundProperty(view: view.View, newValue: any) {
onBorderPropertyChanged(view);
//Background and borders methods
private static setBackgroundBorderProperty(view: view.View, newValue: any, defaultValue: any) {
onBackgroundOrBorderPropertyChanged(view);
}
private static resetBackgroundProperty(view: view.View, nativeValue: any) {
if (types.isDefined(nativeValue)) {
(<android.view.View>view.android).setBackground(nativeValue)
}
}
private static getNativeBackgroundValue(view: view.View): any {
var drawable = view.android.getBackground();
if (drawable instanceof android.graphics.drawable.StateListDrawable) {
// StateListDrawables should not be cached as they should be created per instance of view as they contain the current state within.
trace.write("Native value of view: " + view + " is StateListDrawable. It will not be cached.", trace.categories.Style);
return undefined;
}
return drawable;
}
//Background image methods
private static setBackgroundImageSourceProperty(view: view.View, newValue: any) {
onBorderPropertyChanged(view);
}
private static resetBackgroundImageSourceProperty(view: view.View, nativeValue: any) {
if (types.isDefined(nativeValue)) {
(<android.view.View>view.android).setBackgroundDrawable(nativeValue)
}
}
private static getNativeBackgroundImageSourceValue(view: view.View): any {
return view.android.getBackground();
}
//Border width methods
private static setBorderWidthProperty(view: view.View, newValue: any) {
onBorderPropertyChanged(view);
}
private static resetBorderWidthProperty(view: view.View, nativeValue: any) {
view.borderWidth = 0;
}
//Border color methods
private static setBorderColorProperty(view: view.View, newValue: any) {
onBorderPropertyChanged(view);
}
private static resetBorderColorProperty(view: view.View, nativeValue: any) {
view.borderColor = undefined;
}
//Corner radius methods
private static setBorderRadiusProperty(view: view.View, newValue: any) {
onBorderPropertyChanged(view);
}
private static resetBorderRadiusProperty(view: view.View, nativeValue: any) {
view.borderRadius = 0;
private static resetBackgroundBorderProperty(view: view.View, nativeValue: any) {
onBackgroundOrBorderPropertyChanged(view);
}
//Visibility methods
@@ -236,16 +103,6 @@ export class DefaultStyler implements definition.stylers.Styler {
}
public static registerHandlers() {
style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundProperty,
DefaultStyler.resetBackgroundProperty,
DefaultStyler.getNativeBackgroundValue));
style.registerHandler(style.backgroundImageSourceProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundImageSourceProperty,
DefaultStyler.resetBackgroundImageSourceProperty,
DefaultStyler.getNativeBackgroundImageSourceValue));
style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setVisibilityProperty,
DefaultStyler.resetVisibilityProperty));
@@ -262,17 +119,16 @@ export class DefaultStyler implements definition.stylers.Styler {
DefaultStyler.setMinHeightProperty,
DefaultStyler.resetMinHeightProperty))
style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderWidthProperty,
DefaultStyler.resetBorderWidthProperty));
// Use the same handler for all background/border properties
// Note: There is no default value getter - the default value is handled in onBackgroundOrBorderPropertyChanged
var borderHandler = new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundBorderProperty,
DefaultStyler.resetBackgroundBorderProperty);
style.registerHandler(style.borderColorProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderColorProperty,
DefaultStyler.resetBorderColorProperty));
style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderRadiusProperty,
DefaultStyler.resetBorderRadiusProperty));
style.registerHandler(style.backgroundInternalProperty, borderHandler);
style.registerHandler(style.borderWidthProperty, borderHandler);
style.registerHandler(style.borderColorProperty, borderHandler);
style.registerHandler(style.borderRadiusProperty, borderHandler);
}
}

77
ui/styling/stylers.ios.ts
View File

@@ -4,6 +4,7 @@ import definition = require("ui/styling");
import stylersCommon = require("ui/styling/stylers-common");
import enums = require("ui/enums");
import font = require("ui/styling/font");
import background = require("ui/styling/background");
// merge the exports of the common file with the exports of this file
declare var exports;
@@ -17,44 +18,21 @@ interface TextUIView {
export class DefaultStyler implements definition.stylers.Styler {
//Background methods
private static setBackgroundProperty(view: view.View, newValue: any) {
private static setBackgroundInternalProperty(view: view.View, newValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
nativeView.backgroundColor = newValue;
nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
}
}
private static resetBackgroundProperty(view: view.View, nativeValue: any) {
private static resetBackgroundInternalProperty(view: view.View, nativeValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
nativeView.backgroundColor = nativeValue;
}
}
private static getNativeBackgroundValue(view: view.View): any {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
return nativeView.backgroundColor;
}
return undefined;
}
//Background image methods
private static setBackgroundImageSourceProperty(view: view.View, newValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
nativeView.backgroundColor = UIColor.alloc().initWithPatternImage(newValue);
}
}
private static resetBackgroundImageSourceProperty(view: view.View, nativeValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
nativeView.backgroundColor = nativeValue;
}
}
private static getNativeBackgroundImageSourceValue(view: view.View): any {
private static getNativeBackgroundInternalValue(view: view.View): any {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
return nativeView.backgroundColor;
@@ -105,6 +83,13 @@ export class DefaultStyler implements definition.stylers.Styler {
}
}
private static getBorderWidthProperty(view: view.View): any {
if (view._nativeView instanceof UIView){
return (<UIView>view._nativeView).layer.borderWidth;
}
return 0;
}
//Border color methods
private static setBorderColorProperty(view: view.View, newValue: any) {
if (view._nativeView instanceof UIView && newValue instanceof UIColor) {
@@ -114,10 +99,17 @@ export class DefaultStyler implements definition.stylers.Styler {
private static resetBorderColorProperty(view: view.View, nativeValue: any) {
if (view._nativeView instanceof UIView && nativeValue instanceof UIColor) {
(<UIView>view._nativeView).layer.borderColor = (<UIColor>nativeValue).CGColor;
(<UIView>view._nativeView).layer.borderColor = nativeValue;
}
}
private static getBorderColorProperty(view: view.View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.borderColor;
}
return undefined;
}
//Border radius methods
private static setBorderRadiusProperty(view: view.View, newValue: any) {
if (view._nativeView instanceof UIView) {
@@ -131,16 +123,18 @@ export class DefaultStyler implements definition.stylers.Styler {
}
}
public static registerHandlers() {
style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundProperty,
DefaultStyler.resetBackgroundProperty,
DefaultStyler.getNativeBackgroundValue));
private static getBorderRadiusProperty(view: view.View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.cornerRadius;
}
return 0;
}
style.registerHandler(style.backgroundImageSourceProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundImageSourceProperty,
DefaultStyler.resetBackgroundImageSourceProperty,
DefaultStyler.getNativeBackgroundImageSourceValue));
public static registerHandlers() {
style.registerHandler(style.backgroundInternalProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundInternalProperty,
DefaultStyler.resetBackgroundInternalProperty,
DefaultStyler.getNativeBackgroundInternalValue));
style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setVisibilityProperty,
@@ -152,15 +146,18 @@ export class DefaultStyler implements definition.stylers.Styler {
style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderWidthProperty,
DefaultStyler.resetBorderWidthProperty));
DefaultStyler.resetBorderWidthProperty,
DefaultStyler.getBorderWidthProperty));
style.registerHandler(style.borderColorProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderColorProperty,
DefaultStyler.resetBorderColorProperty));
DefaultStyler.resetBorderColorProperty,
DefaultStyler.getBorderColorProperty));
style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderRadiusProperty,
DefaultStyler.resetBorderRadiusProperty));
DefaultStyler.resetBorderRadiusProperty,
DefaultStyler.getBorderRadiusProperty));
}
}

20
ui/styling/styling.d.ts vendored
View File

@@ -47,6 +47,26 @@
* Gets or sets the background-color style property.
*/
backgroundColor: color.Color;
/**
* Gets or sets the background-image style property.
*/
backgroundImage: string;
/**
* Gets or sets the background-size style property.
*/
backgroundSize: string;
/**
* Gets or sets the background-position style property.
*/
backgroundPosition: string;
/**
* Gets or sets the background-repeat style property.
*/
backgroundRepeat: string;
/**
* Gets or sets font-size style property.