Test page and fixes

2025-08-16 03:31:45 +08:00 · 2015-07-03 17:12:08 +03:00
parent 6017a208a0
commit 2b292eec7c
9 changed files with 71 additions and 107 deletions
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@ -657,8 +657,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\background-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>
@ -1665,7 +1669,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>
--- a/apps/tests/pages/background-test.ts
+++ b/apps/tests/pages/background-test.ts
@ -1,15 +1,12 @@
 import observable = require("data/observable");
 import pages = require("ui/page");
-
-var vm = new observable.Observable();
-// Event handler for Page "loaded" event attached in main-page.xml
-export function pageLoaded(args: observable.EventData) {
-    vm.set("style", "background-image: url('~/pages/test2.png'); \nborder-color: green; \nborder-radius: 20; \nborder-width: 4;");
-    // Get the event sender
-    var page = <pages.Page>args.object;
-    page.bindingContext = vm;
+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 applyTap(args){
-    args.object.parent.style = vm.get("style");
+export function resetTap(args) {
+    var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
+    (<any>el).style = "";
 }
--- a/apps/tests/pages/background-test.xml
+++ b/apps/tests/pages/background-test.xml
@ -1,6 +1,31 @@
 <Page loaded="pageLoaded">
-  <GridLayout style="background-image: url('~/pages/test2.png'); background-repeat:repeat-y; background-position: center bottom; background-color: green; background-size: 25% 50%; border-radius: 20; border-width: 4;" rows="*, auto">
-    <TextView text="{{ style }}" backgorundColor="transparent"/>
-    <Button text="apply" horizontalAlignment="center" verticalAlignment="center" tap="applyTap" row="1"/>
+  <GridLayout rows="auto,*">
+    <WrapLayout>
+      <Button width="50" height="50" text="r" tap="resetTap"/>
+      <Button width="50" height="50" text="1" tap="applyTap" tag="background-color: green;"/>
+      <Button width="50" height="50" text="2" tap="applyTap" tag="background-color: green; border-color: red; border-radius: 20; border-width: 4;"/>
+      
+      <Button width="50" height="50" text="3" tap="applyTap" tag="background-image: url('~/pages/test2.png');"/>
+      <Button width="50" height="50" text="4" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-y;"/>
+      <Button width="50" height="50" text="5" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-x;"/>
+
+
+      <Button width="50" height="50" text="6" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat;"/>
+      <Button width="50" height="50" text="7" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left top;"/>
+      <Button width="50" height="50" text="8" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center;"/>
+      <Button width="50" height="50" text="9" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: right bottom;"/>
+      <Button width="50" height="50" text="10" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
+
+      <Button width="50" height="50" text="11" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100;"/>
+      <Button width="50" height="50" text="12" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
+      <Button width="50" height="50" text="13" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/>
+      <Button width="50" height="50" text="14" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/>
+      <Button width="50" height="50" text="15" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100; background-color: green;"/>
+
+      <Button width="50" height="50" text="16" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-color: green; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: red;"/>
+    </WrapLayout>
+
+    <GridLayout id="test-element" row="1">
+    </GridLayout>
  </GridLayout>
 </Page>
--- a/ui/styling/background-common.ts
+++ b/ui/styling/background-common.ts
@ -1,11 +1,7 @@
 import imageSource = require("image-source");
 import colorModule = require("color");
-import viewModule = require("ui/core/view");
-import style = require("ui/styling/style");
 import types = require("utils/types");
-import view = require("ui/core/view");
 import enums = require("ui/enums");
-import utils = require("utils/utils");
 import dts = require("ui/styling/background");
 import cssValue = require("js-libs/reworkcss-value");

@ -64,7 +60,6 @@ export class Background implements dts.Background {
            posY: 0,
        }

-
        // repeat
        if (this.repeat) {
            switch (this.repeat.toLowerCase()) {
@ -89,7 +84,7 @@ export class Background implements dts.Background {
        // size
        if (this.size) {
            let values = cssValue.parse(this.size);
-            console.log("this.size values: " + JSON.stringify(values));
+
            if (values.length === 2) {
                let vx = values[0];
                let vy = values[1];
@ -132,8 +127,6 @@ export class Background implements dts.Background {
        // position
        if (this.position) {
            let values = cssValue.parse(this.position);
-            console.log("this.position values: " + JSON.stringify(values));
-
            let spaceX = width - imageWidth;
            let spaceY = height - imageHeight;

--- a/ui/styling/background.android.ts
+++ b/ui/styling/background.android.ts
@ -1,10 +1,3 @@
-import imageSource = require("image-source");
-import colorModule = require("color");
-import viewModule = require("ui/core/view");
-import style = require("ui/styling/style");
-import types = require("utils/types");
-import view = require("ui/core/view");
-import enums = require("ui/enums");
 import utils = require("utils/utils");
 import common = require("ui/styling/background-common");
 import dts = require("ui/styling/background");
@ -81,7 +74,6 @@ export module ad {
            if (this.background && !this.background.isEmpty() && boundsWidth > 0 && boundsHeight > 0) {
                var radius = this._cornerRadius * this._density;
                var stroke = this._borderWidth * this._density;
-                var bounds = this.getBounds();

                // TODO: check this path
                var path = new android.graphics.Path();
--- a/ui/styling/background.d.ts
+++ b/ui/styling/background.d.ts
@ -2,11 +2,6 @@ declare module "ui/styling/background" {
    import imageSource = require("image-source");
    import colorModule = require("color");
    import viewModule = require("ui/core/view");
-    import style = require("ui/styling/style");
-    import types = require("utils/types");
-    import view = require("ui/core/view");
-    import enums = require("ui/enums");
-    import utils = require("utils/utils");

    export interface BackgroundDrawParams {
        repeatX: boolean;
--- a/ui/styling/background.ios.ts
+++ b/ui/styling/background.ios.ts
@ -1,13 +1,6 @@
-import imageSource = require("image-source");
-import colorModule = require("color");
 import viewModule = require("ui/core/view");
 import style = require("ui/styling/style");
-import types = require("utils/types");
-import view = require("ui/core/view");
-import enums = require("ui/enums");
-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);
@ -19,14 +12,11 @@ export module ios {
        var result: UIColor;

        if (background && !background.isEmpty() && frame.size.width > 0 && frame.size.height) {
-            console.log("Frame: " + NSStringFromCGRect(frame));
-
            if (!background.image) {
                result = background.color.ios;
            }
            else {
                var img = <UIImage>background.image.ios;
-                console.log("ImageSize: " + NSStringFromCGSize(img.size));
                var params = background.getDrawParams(frame.size.width, frame.size.height);

                if (params.sizeX > 0 && params.sizeY > 0) {
@ -53,19 +43,16 @@ export module ios {
                    var h = params.repeatY ? frame.size.height : img.size.height;

                    CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
-                    console.log("context" + context);

                    params.posX = params.repeatX ? 0 : params.posX;
                    params.posY = params.repeatY ? 0 : params.posY;

                    var patternRect = CGRectMake(params.posX, params.posY, w, h);
-                    console.log("patternRect: " + NSStringFromCGRect(patternRect));

                    img.drawAsPatternInRect(patternRect);
                }
                var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
                UIGraphicsEndImageContext();
-                console.log("bkgImage.size: " + NSStringFromCGSize(bkgImage.size));
                result = UIColor.alloc().initWithPatternImage(bkgImage);
            }
            return result;
--- a/ui/styling/font.ios.ts
+++ b/ui/styling/font.ios.ts
@ -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;
--- a/ui/styling/stylers.android.ts
+++ b/ui/styling/stylers.android.ts
@ -15,7 +15,8 @@ import background = require("ui/styling/background");
 declare var exports;
 require("utils/module-merge").merge(stylersCommon, exports);

-function onBorderPropertyChanged(v: view.View) {
+var _defaultBackgrounds = new Map<string, android.graphics.drawable.Drawable>();
+function onBackgroundOrBorderPropertyChanged(v: view.View) {
    if (!v._nativeView) {
        return;
    }
@ -28,6 +29,11 @@ function onBorderPropertyChanged(v: view.View) {
        var bkg = <background.ad.BorderGradientDrawable>nativeView.getBackground();
        if (!(bkg instanceof background.ad.BorderGradientDrawable)) {
            bkg = new background.ad.BorderGradientDrawable();
+            let viewClass = types.getClass(view);
+            if (!_defaultBackgrounds.has(viewClass)) {
+                _defaultBackgrounds.set(viewClass, nativeView.getBackground());
+            }
+
            nativeView.setBackground(bkg);
        }

@ -40,49 +46,23 @@ function onBorderPropertyChanged(v: view.View) {
        bkg.borderColor = v.borderColor ? v.borderColor.android : android.graphics.Color.TRANSPARENT;
        bkg.background = backgroundValue;
    }
+    else {
+        // reset the value with the default native value
+        let viewClass = types.getClass(view);
+        if (_defaultBackgrounds.has(viewClass)) {
+            v.android.setBackgroundDrawable(_defaultBackgrounds.get(viewClass));
+        }
+    }
 }

 export class DefaultStyler implements definition.stylers.Styler {
-    //Background image methods
-    private static setBackgroundInternalProperty(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 resetBackgroundInternalProperty(view: view.View, nativeValue: any) {
-        if (types.isDefined(nativeValue)) {
-            (<android.view.View>view.android).setBackgroundDrawable(nativeValue)
-        }
-    }
-
-    private static getNativeBackgroundInternalProperty(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) {
-        //TODO
-    }
-
-    //Border color methods
-    private static setBorderColorProperty(view: view.View, newValue: any) {
-        onBorderPropertyChanged(view);
-    }
-
-    private static resetBorderColorProperty(view: view.View, nativeValue: any) {
-        //TODO
-    }
-
-    //Corner radius methods
-    private static setBorderRadiusProperty(view: view.View, newValue: any) {
-        onBorderPropertyChanged(view);
-    }
-
-    private static resetBorderRadiusProperty(view: view.View, nativeValue: any) {
-        //TODO
+    private static resetBackgroundBorderProperty(view: view.View, nativeValue: any) {
+        onBackgroundOrBorderPropertyChanged(view);
    }

    //Visibility methods
@ -123,11 +103,6 @@ export class DefaultStyler implements definition.stylers.Styler {
    }

    public static registerHandlers() {
-        style.registerHandler(style.backgroundInternalProperty, new stylersCommon.StylePropertyChangedHandler(
-            DefaultStyler.setBackgroundInternalProperty,
-            DefaultStyler.resetBackgroundInternalProperty,
-            DefaultStyler.getNativeBackgroundInternalProperty));
-
        style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
            DefaultStyler.setVisibilityProperty,
            DefaultStyler.resetVisibilityProperty));
@ -144,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);
    }
 }