Test page and fixes

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\fonts-test.ts">
-    <TypeScriptCompile Include="apps\tests\pages\background-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>

apps/tests/pages/background-test.ts

@@ -1,15 +1,12 @@
 import observable = require("data/observable");
 import pages = require("ui/page");
-
+import view = require("ui/core/view");
-var vm = new observable.Observable();
+export function applyTap(args) {
-// Event handler for Page "loaded" event attached in main-page.xml
+    var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
-export function pageLoaded(args: observable.EventData) {
+    (<any>el).style = args.object.tag;
-    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;
 }
 
-export function applyTap(args){
+export function resetTap(args) {
-    args.object.parent.style = vm.get("style");
+    var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");
+    (<any>el).style = "";
 }

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">
+  <GridLayout rows="auto,*">
-    <TextView text="{{ style }}" backgorundColor="transparent"/>
+    <WrapLayout>
-    <Button text="apply" horizontalAlignment="center" verticalAlignment="center" tap="applyTap" row="1"/>
+      <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>

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;
 

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();

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;

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;

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;

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
+    //Background and borders methods
-    private static setBackgroundInternalProperty(view: view.View, newValue: any) {
+    private static setBackgroundBorderProperty(view: view.View, newValue: any, defaultValue: any) {
-        onBorderPropertyChanged(view);
+        onBackgroundOrBorderPropertyChanged(view);
     }
 
-    private static resetBackgroundInternalProperty(view: view.View, nativeValue: any) {
+    private static resetBackgroundBorderProperty(view: view.View, nativeValue: any) {
-        if (types.isDefined(nativeValue)) {
+        onBackgroundOrBorderPropertyChanged(view);
-            (<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
     }
 
     //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(
+        // Use the same handler for all background/border properties
-            DefaultStyler.setBorderWidthProperty,
+        // Note: There is no default value getter - the default value is handled in onBackgroundOrBorderPropertyChanged
-            DefaultStyler.resetBorderWidthProperty));
+        var borderHandler = new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBackgroundBorderProperty,
+            DefaultStyler.resetBackgroundBorderProperty);
 
-        style.registerHandler(style.borderColorProperty, new stylersCommon.StylePropertyChangedHandler(
+        style.registerHandler(style.backgroundInternalProperty, borderHandler);
-            DefaultStyler.setBorderColorProperty,
+        style.registerHandler(style.borderWidthProperty, borderHandler);
-            DefaultStyler.resetBorderColorProperty));
+        style.registerHandler(style.borderColorProperty, borderHandler);
-
+        style.registerHandler(style.borderRadiusProperty, borderHandler);
-        style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
-            DefaultStyler.setBorderRadiusProperty,
-            DefaultStyler.resetBorderRadiusProperty));
     }
 }