Text View

The TextView component can be used to type larger text content in your app. The component can also be used show any content by setting the editable property to false.

Usage

<TextView loaded="onTextViewLoaded" hint="Enter Date" text="{{ viewDate }}" secure="false" keyboardType="datetime" returnKeyType="done" autocorrect="false" maxLength="10">
</TextView>

const observableModule = require("tns-core-modules/data/observable");
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("viewDate", "");

    page.bindingContext = vm;
}
function onTextViewLoaded(argsloaded) {
    const textView = argsloaded.object;
    textView.on("focus", (args) => {
        const view = args.object;
        console.log("On TextView focus");
    });
    textView.on("blur", (args) => {
        const view = args.object;
        console.log("On TextView blur");
    });
}
exports.onNavigatingTo = onNavigatingTo;
exports.onTextViewLoaded = onTextViewLoaded;

import {Observable} from "tns-core-modules/data/observable";
import {Page} from "tns-core-modules/ui/page";
import {TextView} from "tns-core-modules/ui/text-view";

export function onNavigatingTo(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    vm.set("viewDate", "");
    page.bindingContext = vm;
}
export function onTextViewLoaded(argsloaded) {
    let textView: TextView = <TextView> argsloaded.object;
    textView.on("focus", (args) => {
        let view: TextView = <TextView> args.object;
        console.log("On TextView focus");
    });
    textView.on("blur", (args) => {
        let view: TextView = <TextView> args.object;
        console.log("On TextView blur");
    });
}

Improve this document

Demo Source

Creating TextView component via Code-Behind

<StackLayout id="stackLayoutId">
    <Button text="Disable third TextView" tap="{{ onTap }}" />

</StackLayout>

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    // changing TextView editable property value on button tap
    vm.set("onTap", (btargs) => {
        const button = btargs.object;
        const thirdTextview = btargs.object.page.getViewById("thirdTextViewId");
        thirdTextview.editable = !thirdTextview.editable;
        if (thirdTextview.editable) {
            button.text = "Disable third TextView";
        } else {
            button.text = "Enable third TextView";
        }
    });
    page.bindingContext = vm;
}

function onPageLoaded(args) {
    const page = args.object;
    const vm = page.bindingContext;
    const stackLayout = page.getViewById("stackLayoutId");
    // creating new TextView and changing the hint
    const firstTextview = new textViewModule.TextView();
    firstTextview.hint = "Enter text";
    // creating new TextView and binding the text property
    const secondTextview = new textViewModule.TextView();
    const options = {
        sourceProperty: "text",
        targetProperty: "secondTextProperty"
    };
    secondTextview.bind(options, vm);
    vm.set("secondTextProperty", "Sample TextView text");
    // creating new TextView and changing the text
    const thirdTextview = new textViewModule.TextView();
    thirdTextview.id = "thirdTextViewId";
    thirdTextview.text = "Third TextView";
    // adding the newly created TextViews in a StackLayout
    stackLayout.addChild(firstTextview);
    stackLayout.addChild(secondTextview);
    stackLayout.addChild(thirdTextview);
}

exports.onNavigatingTo = onNavigatingTo;
exports.onPageLoaded = onPageLoaded;

export function onNavigatingTo(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    // changing TextView editable property value on button tap
    vm.set("onTap", (btargs) => {
        const button: Button = <Button> btargs.object;
        const thirdTextview = (<TextView>button.page.getViewById("thirdTextViewId"));
        thirdTextview.editable = !thirdTextview.editable;
        if (thirdTextview.editable) {
            button.text = "Disable third TextView";
        } else {
            button.text = "Enable third TextView";
        }
    });
    page.bindingContext = vm;
}

export function onPageLoaded(args) {
    const page: Page = <Page> args.object;
    const vm = page.bindingContext;
    const stackLayout: StackLayout = <StackLayout> page.getViewById("stackLayoutId");
    // creating new TextView and changing the hint
    const firstTextview = new TextView();
    firstTextview.hint = "Enter text";
    // creating new TextView and binding the text property
    const secondTextview = new TextView();
    const options = {
        sourceProperty: "text",
        targetProperty: "secondTextProperty"
    };
    secondTextview.bind(options, vm);
    vm.set("secondTextProperty", "Sample TextView text");
    // creating new TextView and changing the text
    const thirdTextview = new TextView();
    thirdTextview.id = "thirdTextViewId";
    thirdTextview.text = "Third TextView";
    // adding the newly created TextViews in a StackLayout
    stackLayout.addChild(firstTextview);
    stackLayout.addChild(secondTextview);
    stackLayout.addChild(thirdTextview);
}

Properties

Methods

Events

API References

Native Component