hint property implemented

apps/TelerikNEXT/main-page.xml

@@ -43,7 +43,7 @@
           </Label.formattedText>
         </Label>
 
-        <SearchBar text="{{ search }}" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="2" />
+        <SearchBar text="{{ search }}" hint="Search" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="2" />
 
         <ListView items="{{ sessions }}" row="3" separatorColor="#fac950">
           <ListView.itemTemplate>

ui/search-bar/search-bar-common.ts

@@ -11,6 +11,7 @@ export module knownEvents {
 
 export class SearchBar extends view.View implements definition.SearchBar {
     public static textFieldBackgroundColorProperty = new dependencyObservable.Property("textFieldBackgroundColor", "SearchBar", new proxy.PropertyMetadata(undefined))
+    public static hintProperty = new dependencyObservable.Property("hint", "SearchBar", new proxy.PropertyMetadata(""))
 
     public static textProperty = new dependencyObservable.Property(
         "text",
@@ -25,6 +26,13 @@ export class SearchBar extends view.View implements definition.SearchBar {
         this._setValue(SearchBar.textProperty, value);
     }
 
+    get hint(): string {
+        return this._getValue(SearchBar.hintProperty);
+    }
+    set hint(value: string) {
+        this._setValue(SearchBar.hintProperty, value);
+    }
+
     get textFieldBackgroundColor(): color.Color {
         return this._getValue(SearchBar.textFieldBackgroundColorProperty);
     }

ui/search-bar/search-bar.android.ts

@@ -2,6 +2,7 @@
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 import color = require("color");
+import types = require("utils/types");
 
 var SEARCHTEXT = "searchText";
 var QUERY = "query";
@@ -33,10 +34,38 @@ function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.Pr
 // register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
 
+function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var bar = <SearchBar>data.object;
+    if (!bar.android) {
+        return;
+    }
+
+    var newValue = data.newValue;
+
+    if (types.isString(newValue)) {
+        bar.android.setQueryHint(newValue);
+    }
+}
+
+(<proxy.PropertyMetadata>common.SearchBar.hintProperty.metadata).onSetNativeValue = onHintPropertyChanged;
+
+function getTextView(bar: android.widget.SearchView): android.widget.TextView {
+    if (bar) {
+        var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
+        if (id) {
+            return <android.widget.TextView> bar.findViewById(id);
+        }
+    }
+
+    return undefined;
+}
+
 function _changeSearchViewBackgroundColor(bar: android.widget.SearchView, color: number) {
-    var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
+    var textView = getTextView(bar);
-    var textView = <android.widget.TextView> bar.findViewById(id);
+
-    textView.setBackgroundColor(color);
+    if (textView) {
+        textView.setBackgroundColor(color);
+    }
 }
 
 // merge the exports of the common file with the exports of this file

ui/search-bar/search-bar.d.ts

@@ -51,6 +51,11 @@ declare module "ui/search-bar" {
          */
         text: string;
 
+        /**
+         * Gets or sets the text of the search bar text field hint/placeholder.
+         */
+        hint: string;
+
         /**
          * Gets or sets the TextField background color of the SearchBar component.
          */

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

@@ -2,25 +2,50 @@
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 import color = require("color");
+import types = require("utils/types");
 
 function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var bar = <SearchBar>data.object;
     bar.ios.text = data.newValue;
 }
 
-// register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
 
 function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var bar = <SearchBar>data.object;
     if (data.newValue instanceof color.Color) {
-        (<UITextField>bar.ios.valueForKey("_searchField")).backgroundColor = data.newValue.ios;
+        var tf = getUITextField(bar.ios);
+        if (tf) {
+            tf.backgroundColor = data.newValue.ios;
+        }
     }
 }
 
-// register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
 
+function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var bar = <SearchBar>data.object;
+    if (!bar.ios) {
+        return;
+    }
+
+    var newValue = data.newValue;
+
+    if (types.isString(newValue)) {
+        bar.ios.placeholder = newValue;
+    }
+}
+
+(<proxy.PropertyMetadata>common.SearchBar.hintProperty.metadata).onSetNativeValue = onHintPropertyChanged;
+
+function getUITextField(bar: UISearchBar): UITextField {
+    if (bar) {
+        return <UITextField> bar.valueForKey("_searchField");
+    }
+
+    return undefined;
+}
+
 // merge the exports of the common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(common, exports);
@@ -69,7 +94,7 @@ export class SearchBar extends common.SearchBar {
     constructor() {
         super();
         this._ios = new UISearchBar();
- 
+
         this._delegate = UISearchBarDelegateImpl.new().initWithOwner(this);
         this._ios.delegate = this._delegate;
     }