検索バー

<StackLayout>
        <SearchBar id="searchBar" hint="Enter search term here ..." text="{{sbText}}" clear="onClear" submit="onSubmit" />
</StackLayout>

const observableModule = require("tns-core-modules/data/observable");

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("sbText", "");

    vm.on(observableModule.Observable.propertyChangeEvent, (propertyChangeData) => {
        if (propertyChangeData.propertyName === "sbText") {
            const searchBar = propertyChangeData.object;
            console.log(`Input changed! New value: ${propertyChangeData.value}`);
        }
    });
    page.bindingContext = vm;
}

function onSubmit(args) {
    const searchBar = args.object;
    console.log(`Searching for ${searchBar.text}`);
}

function onClear(args) {
    const searchBar = args.object;
    console.log("Clear event raised");
}

exports.onNavigatingTo = onNavigatingTo;
exports.onSubmit = onSubmit;
exports.onClear = onClear;

import { Observable, PropertyChangeData } from "tns-core-modules/data/observable";
import { SearchBar } from "tns-core-modules/ui/search-bar";
import { Page } from "tns-core-modules/ui/page";

export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    vm.set("sbText", "");
    vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => {
        if (propertyChangeData.propertyName === "sbText") {
            const searchBar = propertyChangeData.object as SearchBar;
            console.log(`Input changed! New value: ${propertyChangeData.value}`);
        }
    });
    page.bindingContext = vm;
}

export function onSubmit(args) {
    const searchBar = args.object as SearchBar;
    console.log(`Searching for ${searchBar.text}`);
}

export function onClear(args) {
    const searchBar = args.object as SearchBar;
    console.log(`Clear event raised`);
}

<StackLayout id="stackLayoutId">
    <Label text="{{ 'Result(text): ' + sbResult}}" textWrap="true" />

</StackLayout>

function onPageLoaded(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    const stackLayout = page.getViewById("stackLayoutId");

    vm.set("sbResult", "");
    // creating new SearchBar
    const searchBar = new searchBarModule.SearchBar();
    // set up SearchBar submit event
    searchBar.on(searchBarModule.SearchBar.submitEvent, (args) => {
        console.log("Search for ", args.object.text);
        dialogs.alert(`Search for ${args.object.text}`)
        .then(() => {
            console.log("Dialog closed!");
        });
    });
    // set up SearchBar clear event
    searchBar.on(searchBarModule.SearchBar.clearEvent, (args) => {
        console.log("Clear");
        dialogs.alert("Clear SearchBar text")
        .then(() => {
            console.log("Dialog closed!");
        });
    });

    searchBar.on("textChange", (args) => {
        vm.set("sbResult", args.object.text);
    });


    stackLayout.addChild(searchBar);

    page.bindingContext = vm;
}

exports.onPageLoaded = onPageLoaded;

export function onPageLoaded(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    const stackLayout: StackLayout = <StackLayout>page.getViewById("stackLayoutId");

    vm.set("sbResult", "");
    // creating new SearchBar
    const searchBar = new SearchBar();
    // set up SearchBar submit event
    searchBar.on(SearchBar.submitEvent, (sbargs: EventData) => {
        console.log("Search for ", (<SearchBar>sbargs.object).text);
        dialogs.alert(`Search for ${(<SearchBar>sbargs.object).text}`)
            .then(() => {
                console.log("Dialog closed!");
            });
    });
    // set up SearchBar clear event
    searchBar.on(SearchBar.clearEvent, () => {
        console.log("Clear");
        dialogs.alert("Clear SearchBar text")
            .then(() => {
                console.log("Dialog closed!");
            });
    });

    searchBar.on("textChange", (sbargs) => {
        vm.set("sbResult", (<SearchBar>sbargs.object).text);
    });


    stackLayout.addChild(searchBar);

    page.bindingContext = vm;
}