android fonts + generic fonts

apps/tests/pages/fonts-test.xml

@@ -9,6 +9,9 @@
       <Label text="Label: bold"        style="font-weight: bold"/>
       <Label text="Label: bold-italic" style="font-weight: bold; font-style: italic"/>
       <Label text="Label: times new"   style="font-family: Times New Roman"/>
+      <Label text="Label: serif"       style="font-family: serif"/>
+      <Label text="Label: sans-serif"  style="font-family: sans-serif"/>
+      <Label text="Label: monospace"   style="font-family: monospace"/>
       <Label text="Label: all in one"  style="font-family: Times New Roman; font-weight: bold; font-style: italic; font-size: 32" />
 
       <Button text="Button: normal" />
@@ -17,6 +20,9 @@
       <Button text="Button: bold"        style="font-weight: bold"/>
       <Button text="Button: bold-italic" style="font-weight: bold; font-style: italic"/>
       <Button text="Button: times new"   style="font-family: Times New Roman"/>
+      <Button text="Button: serif"       style="font-family: serif"/>
+      <Button text="Button: sans-serif"  style="font-family: sans-serif"/>
+      <Button text="Button: monospace"   style="font-family: monospace"/>
       <Button text="Button: all in one"  style="font-family: Times New Roman; font-weight: bold; font-style: italic; font-size: 32" />
 
       <TextView text="TextView: normal" />
@@ -25,6 +31,9 @@
       <TextView text="TextView: bold"        style="font-weight: bold"/>
       <TextView text="TextView: bold-italic" style="font-weight: bold; font-style: italic"/>
       <TextView text="TextView: times new"   style="font-family: Times New Roman"/>
+      <TextView text="TextView: serif"       style="font-family: serif"/>
+      <TextView text="TextView: sans-serif"  style="font-family: sans-serif"/>
+      <TextView text="TextView: monospace"   style="font-family: monospace"/>
       <TextView text="TextView: all in one"  style="font-family: Times New Roman; font-weight: bold; font-style: italic; font-size: 32" />
 
       <TextField text="TextField: normal" />
@@ -33,6 +42,9 @@
       <TextField text="TextField: bold"        style="font-weight: bold"/>
       <TextField text="TextField: bold-italic" style="font-weight: bold; font-style: italic"/>
       <TextField text="TextField: times new"   style="font-family: Times New Roman"/>
+      <TextField text="TextField: serif"       style="font-family: serif"/>
+      <TextField text="TextField: sans-serif"  style="font-family: sans-serif"/>
+      <TextField text="TextField: monospace"   style="font-family: monospace"/>
       <TextField text="TextField: all in one"  style="font-family: Times New Roman; font-weight: bold; font-style: italic; font-size: 32" />
 
 

ui/styling/font-common.ts

@@ -69,3 +69,9 @@ export class Font implements definitios.Font {
         throw new Error("This should be called on the derived class");
     }
 }
+
+export module genericFontFamilies {
+    export var serif = "serif";
+    export var sansSerif = "sans-serif";
+    export var monospace = "monospace";
+}

ui/styling/font.android.ts

@@ -1,8 +1,11 @@
 import enums = require("ui/enums");
 import common = require("ui/styling/font-common");
+import application = require("application");
+import trace = require("trace");
+import types = require("utils/types");
 
-//declare var exports;
+var typefaceCache = new Map<string, android.graphics.Typeface>();
-//require("utils/module-merge").merge(common, exports);
+var appAssets: android.content.res.AssetManager;
 
 export class Font extends common.Font {
     public static default = new Font(undefined, enums.FontStyle.normal, enums.FontWeight.normal);
@@ -26,7 +29,8 @@ export class Font extends common.Font {
                 style = android.graphics.Typeface.NORMAL;
             }
 
-            this._android = android.graphics.Typeface.create(this.fontFamily, style);
+            var typeFace = this.getTypeFace(this.fontFamily);
+            this._android = android.graphics.Typeface.create(typeFace, style);
         }
         return this._android;
     }
@@ -46,5 +50,46 @@ export class Font extends common.Font {
     public withFontWeight(weight: string): Font {
         return new Font(this.fontFamily, this.fontStyle, weight);
     }
+
+    private getTypeFace(fontFamily: string): android.graphics.Typeface {
+        if (!fontFamily) {
+            return null;
         }
 
+        switch (fontFamily.toLowerCase()) {
+            case common.genericFontFamilies.serif:
+                return android.graphics.Typeface.SERIF;
+
+            case common.genericFontFamilies.sansSerif:
+                return android.graphics.Typeface.SANS_SERIF;
+
+            case common.genericFontFamilies.monospace:
+                return android.graphics.Typeface.MONOSPACE;
+
+            default:
+                return this.loadFontFromAsset(fontFamily);
+        }
+    }
+
+    private loadFontFromAsset(fontFamily: string): android.graphics.Typeface {
+        appAssets = appAssets || application.android.context.getAssets();
+        if (!appAssets) {
+            return null;
+        }
+
+        var result = typefaceCache.get(fontFamily);
+        // Check for undefined explicitly as null mean we tried to load the font, but failed.
+        if (types.isUndefined(result)) {
+            result = null;
+            var fontAsset = "app/fonts/" + fontFamily + ".ttf";
+            try {
+                result = android.graphics.Typeface.createFromAsset(appAssets, fontAsset);
+            } catch (e) {
+                trace.write("Cannot find font asset: " + fontAsset, trace.categories.Error, trace.messageType.error);
+            }
+            typefaceCache.set(fontFamily, result);
+        }
+
+        return result;
+    }
+}

ui/styling/font.ios.ts

@@ -1,8 +1,9 @@
 import enums = require("ui/enums");
 import common = require("ui/styling/font-common");
 
-//declare var exports;
+var DEFAULT_SERIF = "Times New Roman";
-//require("utils/module-merge").merge(common, exports);
+var DEFAULT_SANS_SERIF = "Helvetica";
+var DEFAULT_MONOSPACE = "Courier New";
 
 export class Font extends common.Font {
     public static default = new Font(undefined, enums.FontStyle.normal, enums.FontWeight.normal);
@@ -10,7 +11,8 @@ export class Font extends common.Font {
     private _ios: UIFontDescriptor;
     get ios(): UIFontDescriptor {
         if (!this._ios) {
-            this._ios = UIFontDescriptor.fontDescriptorWithNameSize(this.fontFamily, 0);
+            var fontFamily = this.getFontFamilyRespectingGenericFonts(this.fontFamily);
+            this._ios = UIFontDescriptor.fontDescriptorWithNameSize(fontFamily, 0);
             if (this.isBold) {
                 if (this.isItalic) {
                     this._ios = this._ios.fontDescriptorWithSymbolicTraits(
@@ -45,5 +47,25 @@ export class Font extends common.Font {
     public withFontWeight(weight: string): Font {
         return new Font(this.fontFamily, this.fontStyle, weight);
     }
+
+    private getFontFamilyRespectingGenericFonts(fontFamily: string): string {
+        if (!fontFamily) {
+            return fontFamily;
+        }
+
+        switch (fontFamily.toLowerCase()) {
+            case common.genericFontFamilies.serif:
+                return DEFAULT_SERIF;
+
+            case common.genericFontFamilies.sansSerif:
+                return DEFAULT_SANS_SERIF;
+
+            case common.genericFontFamilies.monospace:
+                return DEFAULT_MONOSPACE;
+
+            default:
+                return fontFamily;
+        }
+    }
 }
 

ui/styling/styling.d.ts

@@ -68,7 +68,6 @@
          */
         fontWeight: string;
 
-
         /**
          * Gets or sets text-alignment style property.
          */