Css font properties

ui/enums/enums.d.ts

@@ -370,4 +370,36 @@
          */
         export var popup: string;
     }
+    
+    /**
+     * Specifies different font styles.
+     */
+    export module FontStyle {
+        /**
+         * Normal font style.
+         */
+        export var normal: string;
+        
+        /**
+         * Italic font style.
+         */
+        export var italic: string;
+    }
+    
+    
+    /**
+     * Specifies different font weights.
+     */
+    export module FontWeight {
+        /**
+         * Normal font weight.
+         */
+        export var normal: string;
+        
+        /**
+         * Bold font weight.
+         */
+        export var bold: string;
+    }
+    
 }

ui/enums/enums.ts

@@ -102,4 +102,14 @@ export module MenuItemPosition {
 export module ImageFormat {
     export var png: string = "png";
     export var jpeg: string = "jpeg";
-}
+}
+
+export module FontStyle {
+    export var normal: string = "normal";
+    export var italic: string = "italic";
+}
+
+export module FontWeight {
+    export var normal: string = "normal";
+    export var bold: string = "bold";
+}

ui/styling/font-common.ts

@@ -0,0 +1,71 @@
+import enums = require("ui/enums");
+import definitios = require("ui/styling/font");
+
+export class Font implements definitios.Font {
+    public static default = new Font(undefined, enums.FontStyle.normal, enums.FontWeight.normal);
+
+    private _fontFamily: string;
+    private _fontStyle: string;
+    private _fontWeight: string;
+
+    get fontFamily(): string {
+        return this._fontFamily;
+    }
+    set fontFamily(value: string) {
+        throw new Error("fontFamily is read-only");
+    }
+
+    get fontStyle(): string {
+        return this._fontStyle;
+    }
+    set fontStyle(value: string) {
+        throw new Error("fontStyle is read-only");
+    }
+
+    get fontWeight(): string {
+        return this._fontWeight;
+    }
+    set fontWeight(value: string) {
+        throw new Error("fontWeight is read-only");
+    }
+
+    get isBold(): boolean {
+        return this._fontWeight.toLowerCase() === enums.FontWeight.bold;;
+    }
+    set isBold(value: boolean) {
+        throw new Error("isBold is read-only");
+    }
+
+    get isItalic(): boolean {
+        return this._fontStyle.toLowerCase() === enums.FontStyle.italic;;
+    }
+    set isItalic(value: boolean) {
+        throw new Error("isItalic is read-only");
+    }
+
+    get ios(): UIFontDescriptor {
+        return undefined;
+    }
+
+    get android(): android.graphics.Typeface {
+        return undefined;
+    }
+
+    constructor(family: string, style: string, weight: string) {
+        this._fontFamily = family;
+        this._fontStyle = style;
+        this._fontWeight = weight;
+    }
+
+    public withFontFamily(family: string): Font {
+        throw new Error("This should be called on the derived class");
+    }
+
+    public withFontStyle(style: string): Font {
+        throw new Error("This should be called on the derived class");
+    }
+
+    public withFontWeight(weight: string): Font {
+        throw new Error("This should be called on the derived class");
+    }
+}

ui/styling/font.android.ts

@@ -0,0 +1,50 @@
+import enums = require("ui/enums");
+import common = require("ui/styling/font-common");
+
+//declare var exports;
+//require("utils/module-merge").merge(common, exports);
+
+export class Font extends common.Font {
+    public static default = new Font(undefined, enums.FontStyle.normal, enums.FontWeight.normal);
+
+    private _android: android.graphics.Typeface;
+    get android(): android.graphics.Typeface {
+        if (!this._android) {
+            var style: number;
+            if (this.isBold) {
+                if (this.isItalic) {
+                    style = android.graphics.Typeface.BOLD_ITALIC;
+                }
+                else {
+                    style = android.graphics.Typeface.BOLD;
+                }
+            }
+            else if (this.isItalic) {
+                style = android.graphics.Typeface.ITALIC;
+            }
+            else {
+                style = android.graphics.Typeface.NORMAL;
+            }
+
+            this._android = android.graphics.Typeface.create(this.fontFamily, style);
+        }
+        return this._android;
+    }
+
+    constructor(family: string, style: string, weight: string) {
+        super(family, style, weight);
+    }
+
+    public withFontFamily(family: string): Font {
+        return new Font(family, this.fontStyle, this.fontWeight);
+    }
+
+    public withFontStyle(style: string): Font {
+        return new Font(this.fontFamily, style, this.fontWeight);
+    }
+
+    public withFontWeight(weight: string): Font {
+        return new Font(this.fontFamily, this.fontStyle, weight);
+    }
+}
+

ui/styling/font.d.ts

@@ -0,0 +1,21 @@
+declare module "ui/styling/font" {
+    export class Font {
+        public static default: Font;
+
+        public fontFamily: string;
+        public fontStyle: string;
+        public fontWeight: string;
+
+        public isBold: boolean;
+        public isItalic: boolean;
+
+        public ios: UIFontDescriptor;
+        public android: android.graphics.Typeface;
+
+        constructor(family: string, style: string, weight: string);
+
+        public withFontFamily(family: string): Font;
+        public withFontStyle(style: string): Font;
+        public withFontWeight(weight: string): Font;
+    }
+}

ui/styling/font.ios.ts

@@ -0,0 +1,49 @@
+import enums = require("ui/enums");
+import common = require("ui/styling/font-common");
+
+//declare var exports;
+//require("utils/module-merge").merge(common, exports);
+
+export class Font extends common.Font {
+    public static default = new Font(undefined, enums.FontStyle.normal, enums.FontWeight.normal);
+
+    private _ios: UIFontDescriptor;
+    get ios(): UIFontDescriptor {
+        if (!this._ios) {
+            this._ios = UIFontDescriptor.fontDescriptorWithNameSize(this.fontFamily, 0);
+            if (this.isBold) {
+                if (this.isItalic) {
+                    this._ios = this._ios.fontDescriptorWithSymbolicTraits(
+                        UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitItalic |
+                        UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitBold);
+                }
+                else {
+                    this._ios = this._ios.fontDescriptorWithSymbolicTraits(
+                        UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitBold);
+                }
+            }
+            else if (this.isItalic) {
+                this._ios = this._ios.fontDescriptorWithSymbolicTraits(
+                    UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitItalic);
+            }
+        }
+        return this._ios;
+    }
+
+    constructor(family: string, style: string, weight: string) {
+        super(family, style, weight);
+    }
+
+    public withFontFamily(family: string): Font {
+        return new Font(family, this.fontStyle, this.fontWeight);
+    }
+
+    public withFontStyle(style: string): Font {
+        return new Font(this.fontFamily, style, this.fontWeight);
+    }
+
+    public withFontWeight(weight: string): Font {
+        return new Font(this.fontFamily, this.fontStyle, weight);
+    }
+}
+

ui/styling/style.ts

@@ -11,6 +11,7 @@ import converters = require("ui/styling/converters");
 import enums = require("ui/enums");
 import imageSource = require("image-source");
 import utils = require("utils/utils");
+import font = require("ui/styling/font");
 
 // key is the property id and value is Dictionary<string, StylePropertyChangedHandler>;
 var _registeredHandlers = Array<Object>();
@@ -75,6 +76,27 @@ export class Style extends observable.DependencyObservable implements styling.St
         this._setValue(fontSizeProperty, value, observable.ValueSource.Local);
     }
 
+    get fontFamily(): string {
+        return this._getValue(fontFamilyProperty);
+    }
+    set fontFamily(value: string) {
+        this._setValue(fontFamilyProperty, value, observable.ValueSource.Local);
+    }
+
+    get fontStyle(): string {
+        return this._getValue(fontStyleProperty);
+    }
+    set fontStyle(value: string) {
+        this._setValue(fontStyleProperty, value, observable.ValueSource.Local);
+    }
+
+    get fontWeight(): string {
+        return this._getValue(fontWeightProperty);
+    }
+    set fontWeight(value: string) {
+        this._setValue(fontWeightProperty, value, observable.ValueSource.Local);
+    }
+
     get textAlignment(): string {
         return this._getValue(textAlignmentProperty);
     }
@@ -444,6 +466,39 @@ export var fontSizeProperty = new styleProperty.Property("fontSize", "font-size"
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.AffectsLayout | observable.PropertyMetadataSettings.Inheritable),
     converters.fontSizeConverter);
 
+export var fontFamilyProperty = new styleProperty.Property("fontFamily", "font-family",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontFamilyChanged));
+
+export var fontStyleProperty = new styleProperty.Property("fontStyle", "font-style",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontStyleChanged));
+
+export var fontWeightProperty = new styleProperty.Property("fontWeight", "font-weight",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontWeightChanged));
+
+function onFontFamilyChanged(data: observable.PropertyChangeData) {
+    var style = <Style>data.object;
+
+    var currentFont = <font.Font>style._getValue(fontProperty);
+    style._setValue(fontProperty, currentFont.withFontFamily(data.newValue));
+}
+
+function onFontStyleChanged(data: observable.PropertyChangeData) {
+    var style = <Style>data.object;
+
+    var currentFont = <font.Font>style._getValue(fontProperty);
+    style._setValue(fontProperty, currentFont.withFontStyle(data.newValue));
+}
+
+function onFontWeightChanged(data: observable.PropertyChangeData) {
+    var style = <Style>data.object;
+
+    var currentFont = <font.Font>style._getValue(fontProperty);
+    style._setValue(fontProperty, currentFont.withFontWeight(data.newValue));
+}
+
+export var fontProperty = new styleProperty.Property("font", "font",
+    new observable.PropertyMetadata(font.Font.default, observable.PropertyMetadataSettings.AffectsLayout));
+
 export var textAlignmentProperty = new styleProperty.Property("textAlignment", "text-align",
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.AffectsLayout | observable.PropertyMetadataSettings.Inheritable),
     converters.textAlignConverter);

ui/styling/stylers.android.ts

@@ -302,6 +302,20 @@ export class TextViewStyler implements definition.stylers.Styler {
         return (<android.widget.TextView>view.android).getTextSize();
     }
 
+    // font
+    private static setFontProperty(view: view.View, newValue: any) {
+        var typeface = <android.graphics.Typeface>newValue;
+        (<android.widget.TextView>view.android).setTypeface(typeface);
+    }
+
+    private static resetFontProperty(view: view.View, nativeValue: any) {
+        (<android.widget.TextView>view.android).setTypeface(nativeValue);
+    }
+
+    private static getNativeFontValue(view: view.View): any {
+        return (<android.widget.TextView>view.android).getTypeface();
+    }
+
     // text-align
     private static setTextAlignmentProperty(view: view.View, newValue: any) {
         var verticalGravity = view.android.getGravity() & android.view.Gravity.VERTICAL_GRAVITY_MASK;
@@ -339,6 +353,11 @@ export class TextViewStyler implements definition.stylers.Styler {
             TextViewStyler.resetFontSizeProperty,
             TextViewStyler.getNativeFontSizeValue));
 
+        style.registerHandler(style.fontProperty, new stylersCommon.StylePropertyChangedHandler(
+            TextViewStyler.setFontProperty,
+            TextViewStyler.resetFontProperty,
+            TextViewStyler.getNativeFontValue));
+
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             TextViewStyler.setTextAlignmentProperty,
             TextViewStyler.resetTextAlignmentProperty,

ui/styling/stylers.ios.ts

@@ -124,6 +124,32 @@ export class DefaultStyler implements definition.stylers.Styler {
         }
     }
 
+    // Font size
+    private static setFontSizeProperty(view: view.View, newValue: any) {
+        setFontSize(view._nativeView, newValue);
+    }
+
+    private static resetFontSizeProperty(view: view.View, nativeValue: any) {
+        setFontSize(view._nativeView, nativeValue);
+    }
+
+    private static getNativeFontSizeValue(view: view.View): any {
+        return getNativeFontSize(view._nativeView);
+    }
+
+    // Font
+    private static setFontProperty(view: view.View, newValue: any) {
+        setFont(view._nativeView, newValue);
+    }
+
+    private static resetFontProperty(view: view.View, nativeValue: any) {
+        resetFont(view._nativeView, nativeValue);
+    }
+
+    private static getNativeFontValue(view: view.View): any {
+        return getNativeFont(view._nativeView);
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setBackgroundProperty,
@@ -154,6 +180,16 @@ export class DefaultStyler implements definition.stylers.Styler {
         style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setBorderRadiusProperty,
             DefaultStyler.resetBorderRadiusProperty));
+
+        style.registerHandler(style.fontSizeProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setFontSizeProperty,
+            DefaultStyler.resetFontSizeProperty,
+            DefaultStyler.getNativeFontSizeValue));
+
+        style.registerHandler(style.fontProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setFontProperty,
+            DefaultStyler.resetFontProperty,
+            DefaultStyler.getNativeFontValue));
     }
 }
 
@@ -183,23 +219,33 @@ export class ButtonStyler implements definition.stylers.Styler {
     // Font size
     private static setFontSizeProperty(view: view.View, newValue: any) {
         var btn: UIButton = <UIButton>view._nativeView;
-        if (btn) {
-            btn.titleLabel.font = btn.titleLabel.font.fontWithSize(newValue);
-        }
+        setFontSize(btn.titleLabel, newValue);
     }
 
     private static resetFontSizeProperty(view: view.View, nativeValue: any) {
         var btn: UIButton = <UIButton>view._nativeView;
-        if (btn) {
-            btn.font = btn.titleLabel.font.fontWithSize(nativeValue);
-        }
+        setFontSize(btn.titleLabel, nativeValue);
     }
 
     private static getNativeFontSizeValue(view: view.View): any {
         var btn: UIButton = <UIButton>view._nativeView;
-        if (btn) {
-            return btn.titleLabel.font.pointSize;
-        }
+        return getNativeFontSize(btn.titleLabel);
+    }
+
+    // Font
+    private static setFontProperty(view: view.View, newValue: any) {
+        var btn: UIButton = <UIButton>view._nativeView;
+        setFont(btn.titleLabel, newValue);
+    }
+
+    private static resetFontProperty(view: view.View, nativeValue: any) {
+        var btn: UIButton = <UIButton>view._nativeView;
+        resetFont(btn.titleLabel, nativeValue);
+    }
+
+    private static getNativeFontValue(view: view.View): any {
+        var btn: UIButton = <UIButton>view._nativeView;
+        return getNativeFont(btn.titleLabel);
     }
 
     // text-align
@@ -254,6 +300,11 @@ export class ButtonStyler implements definition.stylers.Styler {
             ButtonStyler.resetFontSizeProperty,
             ButtonStyler.getNativeFontSizeValue), "Button");
 
+        style.registerHandler(style.fontProperty, new stylersCommon.StylePropertyChangedHandler(
+            ButtonStyler.setFontProperty,
+            ButtonStyler.resetFontProperty,
+            ButtonStyler.getNativeFontValue), "Button");
+
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             ButtonStyler.setTextAlignmentProperty,
             ButtonStyler.resetTextAlignmentProperty,
@@ -284,28 +335,6 @@ export class LabelStyler implements definition.stylers.Styler {
         }
     }
 
-    // Font size
-    private static setFontSizeProperty(view: view.View, newValue: any) {
-        var label: UILabel = <UILabel>view._nativeView;
-        if (label) {
-            label.font = label.font.fontWithSize(newValue);
-        }
-    }
-
-    private static resetFontSizeProperty(view: view.View, nativeValue: any) {
-        var label: UILabel = <UILabel>view._nativeView;
-        if (label) {
-            label.font = label.font.fontWithSize(nativeValue);
-        }
-    }
-
-    private static getNativeFontSizeValue(view: view.View): any {
-        var label: UILabel = <UILabel>view._nativeView;
-        if (label) {
-            return label.font.pointSize;
-        }
-    }
-
     // text-align
     private static setTextAlignmentProperty(view: view.View, newValue: any) {
         var ios: UILabel = <UILabel>view._nativeView;
@@ -346,11 +375,6 @@ export class LabelStyler implements definition.stylers.Styler {
             LabelStyler.resetColorProperty,
             LabelStyler.getNativeColorValue), "Label");
 
-        style.registerHandler(style.fontSizeProperty, new stylersCommon.StylePropertyChangedHandler(
-            LabelStyler.setFontSizeProperty,
-            LabelStyler.resetFontSizeProperty,
-            LabelStyler.getNativeFontSizeValue), "Label");
-
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             LabelStyler.setTextAlignmentProperty,
             LabelStyler.resetTextAlignmentProperty,
@@ -381,28 +405,6 @@ export class TextFieldStyler implements definition.stylers.Styler {
         }
     }
 
-    // Font size
-    private static setFontSizeProperty(view: view.View, newValue: any) {
-        var textField: UITextField = <UITextField>view._nativeView;
-        if (textField) {
-            textField.font = textField.font.fontWithSize(newValue);
-        }
-    }
-
-    private static resetFontSizeProperty(view: view.View, nativeValue: any) {
-        var textField: UITextField = <UITextField>view._nativeView;
-        if (textField) {
-            textField.font = textField.font.fontWithSize(nativeValue);
-        }
-    }
-
-    private static getNativeFontSizeValue(view: view.View): any {
-        var textField: UITextField = <UITextField>view._nativeView;
-        if (textField) {
-            return textField.font.pointSize;
-        }
-    }
-
     // text-align
     private static setTextAlignmentProperty(view: view.View, newValue: any) {
         var ios: UITextField = <UITextField>view._nativeView;
@@ -443,11 +445,6 @@ export class TextFieldStyler implements definition.stylers.Styler {
             TextFieldStyler.resetColorProperty,
             TextFieldStyler.getNativeColorValue), "TextField");
 
-        style.registerHandler(style.fontSizeProperty, new stylersCommon.StylePropertyChangedHandler(
-            TextFieldStyler.setFontSizeProperty,
-            TextFieldStyler.resetFontSizeProperty,
-            TextFieldStyler.getNativeFontSizeValue), "TextField");
-
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             TextFieldStyler.setTextAlignmentProperty,
             TextFieldStyler.resetTextAlignmentProperty,
@@ -493,28 +490,6 @@ export class TextViewStyler implements definition.stylers.Styler {
         }
     }
 
-    // Font size
-    private static setFontSizeProperty(view: view.View, newValue: any) {
-        var textView: UITextView = <UITextView>view._nativeView;
-        if (textView) {
-            textView.font = textView.font.fontWithSize(newValue);
-        }
-    }
-
-    private static resetFontSizeProperty(view: view.View, nativeValue: any) {
-        var textView: UITextView = <UITextView>view._nativeView;
-        if (textView) {
-            textView.font = textView.font.fontWithSize(nativeValue);
-        }
-    }
-
-    private static getNativeFontSizeValue(view: view.View): any {
-        var textView: UITextView = <UITextView>view._nativeView;
-        if (textView) {
-            return textView.font.pointSize;
-        }
-    }
-
     // text-align
     private static setTextAlignmentProperty(view: view.View, newValue: any) {
         var ios: UITextView = <UITextView>view._nativeView;
@@ -555,11 +530,6 @@ export class TextViewStyler implements definition.stylers.Styler {
             TextViewStyler.resetColorProperty,
             TextViewStyler.getNativeColorValue), "TextView");
 
-        style.registerHandler(style.fontSizeProperty, new stylersCommon.StylePropertyChangedHandler(
-            TextViewStyler.setFontSizeProperty,
-            TextViewStyler.resetFontSizeProperty,
-            TextViewStyler.getNativeFontSizeValue), "TextView");
-
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             TextViewStyler.setTextAlignmentProperty,
             TextViewStyler.resetTextAlignmentProperty,
@@ -659,3 +629,49 @@ export function _registerDefaultStylers() {
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();
 }
+
+interface ViewWithFont {
+    font: UIFont;
+}
+
+interface ViewWithTextAlignment {
+    font: UIFont;
+}
+
+// FontSize
+function setFontSize(view: ViewWithFont, newValue: any) {
+    var font = view.font;
+    if (font && font instanceof UIFont) {
+        view.font = view.font.fontWithSize(newValue);
+    }
+}
+
+function getNativeFontSize(view: ViewWithFont): number {
+    var font = view.font;
+    if (font && font instanceof UIFont) {
+        return view.font.pointSize;
+    }
+    else {
+        return 0;
+    }
+}
+
+// Font
+function setFont(view: ViewWithFont, newValue: UIFontDescriptor) {
+    var fontView = <ViewWithFont>(<any>view);
+    var font = fontView.font;
+    if (font && font instanceof UIFont) {
+        fontView.font = UIFont.fontWithDescriptorSize(newValue, fontView.font.pointSize);
+    }
+}
+
+function resetFont(view: ViewWithFont, newValue: UIFont) {
+    var font = view.font;
+    if (font && font instanceof UIFont) {
+        view.font = newValue;
+    }
+}
+
+function getNativeFont(view: ViewWithFont): UIFont {
+    return view.font;
+}

ui/styling/styling.d.ts

@@ -53,6 +53,22 @@
          */
         fontSize: number;
 
+        /**
+         * Gets or sets font-family style property.
+         */
+        fontFamily: string;
+
+        /**
+         * Gets or sets font-style style property.
+         */
+        fontStyle: string;
+
+        /**
+         * Gets or sets font-weight style property.
+         */
+        fontWeight: string;
+
+
         /**
          * Gets or sets text-alignment style property.
          */