Merge pull request #573 from NativeScript/search-bar-font

Search bar font

CrossPlatformModules.csproj

@@ -144,6 +144,9 @@
     <TypeScriptCompile Include="apps\animations\model.ts" />
     <TypeScriptCompile Include="apps\orientation-demo\main-page.ts" />
     <TypeScriptCompile Include="apps\tests\ui\animation\animation-tests.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests-native.android.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests-native.d.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests-native.ios.ts" />
     <TypeScriptCompile Include="apps\tests\xml-declaration\inherited-base-page.ts" />
     <TypeScriptCompile Include="apps\tests\xml-declaration\inherited-page.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\pages\handlers.ts" />
@@ -1929,7 +1932,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>

apps/tests/ui/list-view/list-view-tests.ts

@@ -646,16 +646,16 @@ function loadViewWithItemNumber(args: listViewModule.ItemEventData) {
     (<labelModule.Label>args.view).text = "item " + args.index;
 }
 
-function getTextFromNativeElementAt(listView: listViewModule.ListView, index: number): any {
+function getTextFromNativeElementAt(listView: listViewModule.ListView, index: number): string {
     if (listView.android) {
         var nativeElement = listView.android.getChildAt(index);
         if (nativeElement instanceof android.view.ViewGroup) {
-            return (<android.widget.TextView>((<any>nativeElement).getChildAt(0))).getText();
+            return (<android.widget.TextView>((<any>nativeElement).getChildAt(0))).getText() + "";
         }
-        return (<android.widget.TextView>nativeElement).getText();
+        return (<android.widget.TextView>nativeElement).getText() + "";
     }
     else if (listView.ios) {
-        return listView.ios.visibleCells()[index].contentView.subviews[0].text;
+        return listView.ios.visibleCells()[index].contentView.subviews[0].text + "";
     }
 }
 

apps/tests/ui/search-bar/search-bar-tests-native.android.ts

@@ -1,5 +1,6 @@
 import colorModule = require("color");
 import searchBarModule = require("ui/search-bar");
+import utils = require("utils/utils");
 
 function getTextView(bar: android.widget.SearchView): android.widget.TextView {
     if (bar) {
@@ -20,3 +21,12 @@ export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorM
     }
     return undefined;
 }
+
+export function getNativeFontSize(searchBar: searchBarModule.SearchBar): number {
+    var textView = getTextView(searchBar.android);
+
+    if (textView) {
+        return textView.getTextSize() / utils.layout.getDisplayDensity();
+    }
+    return undefined;
+}

apps/tests/ui/search-bar/search-bar-tests-native.d.ts

@@ -3,3 +3,4 @@ import searchBarModule = require("ui/search-bar");
 import colorModule = require("color");
 
 export declare function getNativeHintColor(textView: searchBarModule.SearchBar): colorModule.Color;
+export declare function getNativeFontSize(searchBar: searchBarModule.SearchBar): number;

apps/tests/ui/search-bar/search-bar-tests-native.ios.ts

@@ -5,3 +5,12 @@ export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorM
     // TODO: This test needs to be created
     return undefined;
 }
+export function getNativeFontSize(searchBar: searchBarModule.SearchBar): number {
+    var sf = <UITextField>(<any>searchBar)._textField;
+    if (sf) {
+        return sf.font.pointSize;
+    }
+
+    return undefined;
+}
+

apps/tests/ui/search-bar/search-bar-tests.ts

@@ -58,6 +58,22 @@ export var testSearchBarHintColorAndroid = function () {
     });
 };
 
+export var testSearchBarFontSize = function () {
+    helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
+        var searchBar = <searchBarModule.SearchBar>views[0];
+
+        searchBar.text = "";
+        searchBar.hint = "hint font-size test";
+
+        var expectedValue = 30;
+        var actualValue;
+
+        searchBar.style.fontSize = expectedValue;
+        actualValue = searchBarTestsNative.getNativeFontSize(searchBar);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+};
+
 export function test_DummyTestForSnippetOnly() {
     // <snippet module="ui/search-bar" title="search-bar">
     // ### Searching

ui/search-bar/search-bar.ios.ts

@@ -14,7 +14,7 @@ function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var bar = <SearchBar>data.object;
     if (data.newValue instanceof color.Color) {
-        var tf = getUITextField(bar.ios);
+        var tf = (<any>bar)._textField;
         if (tf) {
             tf.backgroundColor = data.newValue.ios;
         }
@@ -24,15 +24,15 @@ function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.Pr
 (<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
 
 function onTextFieldHintColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-  // This should be in a Try Catch in case Apple eliminates which ever method in the future; 
+    // This should be in a Try Catch in case Apple eliminates which ever method in the future; 
-  try {
+    try {
-		// TODO; convert this code into NativeScript Code		
+        // TODO; convert this code into NativeScript Code		
 		/* if ([textField respondsToSelector:@selector(setAttributedPlaceholder:)]) {
 			textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:textField.placeholder attributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]}];
 		} */
-  } catch (Err) {
+    } catch (Err) {
-	// Do Nothing 
+        // Do Nothing 
-  }
+    }
 }
 
 (<proxy.PropertyMetadata>common.SearchBar.textFieldHintColorProperty.metadata).onSetNativeValue = onTextFieldHintColorPropertyChanged;
@@ -52,14 +52,6 @@ function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 
 (<proxy.PropertyMetadata>common.SearchBar.hintProperty.metadata).onSetNativeValue = onHintPropertyChanged;
 
-function getUITextField(bar: UISearchBar): UITextField {
-    if (bar) {
-        return <UITextField> bar.valueForKey("_searchField");
-    }
-
-    return undefined;
-}
-
 global.moduleMerge(common, exports);
 
 class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
@@ -102,9 +94,11 @@ class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
 export class SearchBar extends common.SearchBar {
     private _ios: UISearchBar;
     private _delegate;
+    public _textField: UITextField;
 
     constructor() {
         super();
+
         this._ios = new UISearchBar();
 
         this._delegate = UISearchBarDelegateImpl.new().initWithOwner(this);
@@ -113,6 +107,7 @@ export class SearchBar extends common.SearchBar {
     public onLoaded() {
         super.onLoaded();
         this._ios.delegate = this._delegate;
+        this._textField = SearchBar.findTextField(this.ios);
     }
 
     public onUnloaded() {
@@ -123,4 +118,17 @@ export class SearchBar extends common.SearchBar {
     get ios(): UISearchBar {
         return this._ios;
     }  
+
+    private static findTextField(view: UIView) {
+        for (let i = 0, l = view.subviews.count; i < l; i++) {
+            let v: UIView = view.subviews[i];
+            if (v instanceof UITextField) {
+                return v;
+            } else if (v.subviews.count > 0) {
+                return SearchBar.findTextField(v);
+            }
+        }
+
+        return undefined;
+    }
 }

ui/styling/stylers.android.ts

@@ -475,6 +475,45 @@ export class SearchBarStyler implements definition.stylers.Styler {
         SearchBarStyler._changeSearchViewTextColor(bar, nativeValue);
     }
 
+    // font
+    private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+
+        var fontValue = <font.Font>newValue;
+
+        var typeface = fontValue.getAndroidTypeface();
+        if (typeface) {
+            textView.setTypeface(typeface);
+        }
+        else {
+            textView.setTypeface(nativeValue.typeface);
+        }
+
+        if (fontValue.fontSize) {
+            textView.setTextSize(fontValue.fontSize);
+        }
+        else {
+            textView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, nativeValue.size);
+        }
+    }
+
+    private static resetFontInternalProperty(view: view.View, nativeValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+        textView.setTypeface(nativeValue.typeface);
+        textView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, nativeValue.size);
+    }
+
+    private static getNativeFontInternalValue(view: view.View): any {
+        var bar = <android.widget.SearchView>view.android;
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+        return {
+            typeface: textView.getTypeface(),
+            size: textView.getTextSize()
+        };
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             SearchBarStyler.setBackgroundColorProperty,
@@ -485,6 +524,11 @@ export class SearchBarStyler implements definition.stylers.Styler {
             SearchBarStyler.setColorProperty,
             SearchBarStyler.resetColorProperty,
             SearchBarStyler.getColorProperty), "SearchBar");
+
+        style.registerHandler(style.fontInternalProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setFontInternalProperty,
+            SearchBarStyler.resetFontInternalProperty,
+            SearchBarStyler.getNativeFontInternalValue), "SearchBar");
     }
 
     private static _getSearchViewTextView(bar: android.widget.SearchView): android.widget.TextView {

ui/styling/stylers.ios.ts

@@ -409,9 +409,7 @@ export class SearchBarStyler implements definition.stylers.Styler {
     }
 
     private static getColorProperty(view: view.View): any {
-        var bar = <UISearchBar>view.ios;
+        var sf = <UITextField>(<any>view)._textField;
-
-        var sf = <UITextField>bar.valueForKey("_searchField");
         if (sf) {
             return sf.textColor;
         }
@@ -420,23 +418,43 @@ export class SearchBarStyler implements definition.stylers.Styler {
     }
 
     private static setColorProperty(view: view.View, newValue: any) {
-        var bar = <UISearchBar>view.ios;
+        var sf = <UITextField>(<any>view)._textField;
-
-        var sf = <UITextField>bar.valueForKey("_searchField");
         if (sf) {
             sf.textColor = newValue;
         }
     }
 
     private static resetColorProperty(view: view.View, nativeValue: any) {
-        var bar = <UISearchBar>view.ios;
+        var sf = <UITextField>(<any>view)._textField;
-
-        var sf = <UITextField>bar.valueForKey("_searchField");
         if (sf) {
             sf.textColor = nativeValue;
         }
     }
 
+    // font
+    private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) {
+        var sf = <UITextField>(<any>view)._textField;
+        if (sf) {
+            sf.font = (<font.Font>newValue).getUIFont(nativeValue);
+        }
+    }
+
+    private static resetFontInternalProperty(view: view.View, nativeValue: any) {
+        var sf = <UITextField>(<any>view)._textField;
+        if (sf) {
+            sf.font = nativeValue;
+        }
+    }
+
+    private static getNativeFontInternalValue(view: view.View): any {
+        var sf = <UITextField>(<any>view)._textField;
+        if (sf) {
+            return sf.font;
+        }
+
+        return undefined;
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             SearchBarStyler.setBackgroundColorProperty,
@@ -447,6 +465,11 @@ export class SearchBarStyler implements definition.stylers.Styler {
             SearchBarStyler.setColorProperty,
             SearchBarStyler.resetColorProperty,
             SearchBarStyler.getColorProperty), "SearchBar");
+
+        style.registerHandler(style.fontInternalProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setFontInternalProperty,
+            SearchBarStyler.resetFontInternalProperty,
+            SearchBarStyler.getNativeFontInternalValue), "SearchBar");
     }
 }