Titanium Alloy Textfield on Focus

[beppo-ivel]

I want to add event listener "on focus" for the $.txtOne element. I tried different methods.

1. Via Alloy with "onFocus=filter" property but then no function is executed. The property "onChange" works as expected.
2. With Titanium by calling addEventListener function and by define my own addEventListener function. But both ways throw same error:

[ERROR] V8Exception: Exception occurred at /alloy/controllers/test.js: 100: Uncaught TypeError: $.txtOne.addEventListener is not a function

But don't understand why addEventListener is not a function, even if I defined my own function controllers/components/textfield.js? For example the definition of $.txtOne.getInputText() is working.

views/components/textfield.xml

<Alloy>
  <TextField id="customTxtField"/>
  <Label id="customLblMoveUp" visible="false"/>
  <Label id="customLblHintText"/>
</Alloy>

views/test.xml

<Alloy>
    <Window id="test" title="Test" onClose="cleanup">
      <Require src="/components/textfield" id="txtOne" customTop="80" customHintText="Test" onChange="filter" />
    </Window>
</Alloy>

controllers/test.js

(function() {
  $.txtOne.addEventListener("focus", function(e){
    Ti.API.error("onFocus");         
  });
})();

function cleanup() {
    $.destroy();
}
function filter(){
   Ti.API.error($txtOne.getInputText());
}

controllers/components/textfield.js

exports.getInputText = getInputText;
//exports.setInputText = addEventListener;

function getInputText(){
    return $.customTxtField.value;
}
/*
function addEventListener(event, callback){
  switch(event) {
    case "focus":
      $.customTxtField.addEventListener('focus', callback);
      break;
    default:

  }
}
*/

[m1ga]

If you look at the textfield.js code and change it to this:

exports.getInputText = getInputText;
exports.addEventListener = addEventListener;  // <- was missing

function getInputText() {
	return $.customTxtField.value;
}

function addEventListener(event, callback){
  switch(event) {
    case "focus":
      $.customTxtField.addEventListener('focus', callback);
      break;
    default:
  }
}

it works fine. I see the onFocus error in the logs.

[m1ga]

ok quickly had a look

$.__views["__alloyId1"].on('focus', onFocus)

it will add a "local" event that you can trigger yourself, not the event that is bound to the JAVA focus.

[beppo-ivel]

Check the generated classic JS files to see what it generates.
You mean the Resources/android/alloy/alloy.js?

[m1ga]

I use /build/android/assets/alloy/controllers/ or /Resources/android/alloy/controllers/. Think they should be the same but the first one is minified

[beppo-ivel]

ok quickly had a look

$.__views["__alloyId1"].on('focus', onFocus)

it will add a "local" event that you can trigger yourself, not the event that is bound to the JAVA focus.

Can you please describe it in more detail. There is a difference between onChange and onFocus property in <Require src="/components/textfield" id="txtOne" customTop="80" customHintText="Test" onChange="filter" onFocus="filter" /> . How to trigger onFocus in this case, if I don't want to use the export part?

[m1ga]

$.txtOne.trigger("focus") should trigger that focus. It is not the native (e.g. Java) focus event but an event in JS (https://blog.axway.com/product-insights/discontinued/titanium/global-app-events-in-titanium-using-backbone-js)
So it doesn't trigger when the native textfield is trigger the focus event.