Basic blur event in a Telerik Nativescript Mobile App

Question

I am writing a cross-platform mobile app using Telerik AppBuilder with NativeScript. I am going nuts trying to figure out how to get a basic \"blur\" or \"onTextChanged\" event

Answer 1

Ok, I'm not marking this as the correct solution, but it will be helpful if anyone sees this. In Telerik, NativeScript appears to have some subtle differences. You will need to learn to read the library files, such as tns_modules/data/observable/observable.js in order to figure these things out on your own. For example, to create a property change listener, this is the syntax you need to use:

    pageData.on(observableModule.knownEvents.propertyChange, function(propertyChangeData){
        if (propertyChangeData.propertyName != "debug"){
            pageData.set("debug", propertyChangeData.propertyName + " has been changed and the new value is: " + propertyChangeData.value);
        }
    });

Note that you use "observableModule.knownEvents.propertyChange" instead of "observable.Observable.propertyChangeEvent". You don't have to use the function "on" instead of "addEventListener" as I've done. The function "on" literally just turns around and calls "addEventListener".

I hope this helps someone out there.

Answer 2

In nativescript 3+ this is how I catch blur events.

The sample code is in nativescript (core)

example.js

const view = require("ui/core/view");
const textFieldModule = require("ui/text-field");

exports.pageLoaded = (args) => {
  let page = args.object;
  let myTextFieldView = view.getViewById(page, "myTextField");
  myTextFieldView.on(textFieldModule.TextField.blurEvent, function(eventData) {
      console.log('blur event triggered');
  }, this);
}

example.xml

<Page loaded="pageLoaded">
  ...
  <TextField
    id="myTextField"
    hint="My Text Field"
    text="{{ myTextField }}" />
  ...
</Page>

Answer 3

As far as I know there no blur(-like) event in NativeScript. However, you can react to when text is changed.

What you want to do is to utilize the Data Binding Mechanisms and the Observable Object in NativeScript.

Briefly, data binding will allow you to connect the user interface (most often described in your XML files) with your business model/data object. A data binding can be "one way" meaning that any changes you do in your data object will be reflected in the UI. It can also be two ways meaning that any changes you do in the UI will also be reflected back in your data object.

In your case, you want two way bindings as you want whatever happens in the UI (user input text) to be reflected in your model.

Example

xml

Let's say you have this xml:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
 <StackLayout>
   <TextField text="{{ description }}" />
 </StackLayout>
</Page>

js

I've commented inline for easier understanding.

var observable = require("data/observable");

function pageLoaded(args) {
    var page = args.object;

    /**
     * Creating a new Observable object.
     */
    var contextObj = new observable.Observable();

    /**
     * Setting the property 'description' to 'hi there'.
     * In your XML you'll attach this property to the
     * Text field as such:
     * <TextField text="{{ description }}" />
     * This means that the Text field will, by default
     * be prepopulated with 'Hi there'
     */
    contextObj.set("description", "Hi there");

    /**
     * Attaching the observable object to the
     * 'bindingContext' of the page. This is a
     * special property to which you want to attach
     * the object. By default bindings are two way.
     */
    page.bindingContext = contextObj;

    /**
     * Event listener.
     * When the user is changing the text in the UI, this gets propagated down
     * to the contextObj which will change. Here we add an event listener for
     * changes and log some information about the change that just happened.
     */
    contextObj.addEventListener(observable.Observable.propertyChangeEvent, function (event) {
        console.log('The object changed!');
        console.log('Event:        ' + event.eventName);
        console.log('propertyName: ' + event.propertyName);
        console.log('New value:     ' + event.value);
        console.log('');
    });

 }
 exports.pageLoaded = pageLoaded;

Answer 4

FYI in NativeScript 3 the blur event has been added and can be used with either TextView or TextField components.

Edit there's now also a focus event about to be merged from this pull request.