From 88c2848bd4582cc6a3fd44ae8c36a4f9d74f535b Mon Sep 17 00:00:00 2001
From: Nikolay Tsonev <tsonevn@users.noreply.github.com>
Date: Fri, 26 May 2017 14:12:47 +0300
Subject: [PATCH] example declare SearchBar component via XML (#4236)

* example declare SearchBar component via XML

* fix tslint errors

* fix error - not  found modules
---
 .../ui/search-bar/search-bar-code-snippet.ts    | 17 +++++++++++++++++
 tests/app/ui/search-bar/search-bar.md           | 12 ++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 tests/app/ui/search-bar/search-bar-code-snippet.ts

diff --git a/tests/app/ui/search-bar/search-bar-code-snippet.ts b/tests/app/ui/search-bar/search-bar-code-snippet.ts
new file mode 100644
index 000000000..0f584a4b4
--- /dev/null
+++ b/tests/app/ui/search-bar/search-bar-code-snippet.ts
@@ -0,0 +1,17 @@
+import { EventData } from 'tns-core-modules/data/observable';
+import { SearchBar } from "tns-core-modules/ui/search-bar"
+
+export function navigatingTo(args: EventData) {
+    console.log("page navigating to");
+}
+// >> searchbar-clear
+export function onClear(args){
+    console.log("clear search-bar text");
+}
+// << searchbar-clear
+// >> searchbar-submit
+export function onSubmit(args){
+    var searchbar:SearchBar = <SearchBar>args.object;
+    console.log("Search submit result: "+searchbar.text);
+}
+// << searchbar-submit
\ No newline at end of file
diff --git a/tests/app/ui/search-bar/search-bar.md b/tests/app/ui/search-bar/search-bar.md
index 676b26db1..d8fa411ff 100644
--- a/tests/app/ui/search-bar/search-bar.md
+++ b/tests/app/ui/search-bar/search-bar.md
@@ -5,6 +5,18 @@ environment: nativescript
 description: "Examples for using search-bar"
 previous_url: /ApiReference/ui/search-bar/HOW-TO
 ---
+# Declare SearchBar via XML
+```XML
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <StackLayout class="p-20">
+       <SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />
+    </StackLayout>
+</Page>
+```
+## SearchBar submit event
+{%snippet searchbar-submit%}
+## SearchBar clear event
+{%snippet searchbar-clear%}
 # SearchBar
 Using the SearchBar requires the "ui/search-bar" module.
 {%snippet article-require-searchbar-module%}