webOS Submit on Enter

webOS Button widgets are cool, but they are HUGE!  In most cases, I hate sacrificing the screen real estate required to add a Button just to submit a TextField on a Scene.

So if you want to skip the button and process the input when the user hits enter, how do you make that work?  The webOS documentation doesn’t really make this clear or obvious.

I found this cool little trick on webOS 101, but the problem I ran into was that my “keyupHandler” function then did not have access to the TextField value.  “keyupHandler” is now scoped to this.controller.document and I wasn’t able to get back to this.controller.   The code below doesn’t work:

MyProgram.prototype.setup = function() {
    this.txtModel = { value: "", disabled: false };
    this.txtAttr    = { multiline: true, enterSubmits: true };
    this.controller.setupWidget('txtField',
        this.txtAttr,
        this.txtModel
    );
    this.controller.document.addEventListener("keyup",
        this.keyupHandler,
        true
    );
};

MyProgram.prototype.keyupHandler = function() {
    var text = this.txtModel.value;
};

I kept getting a “cannot get value of undefined” error. So firing the “keyup” event from this.controller.document changes the scope of the handler function? Maybe somebody with more Javascript skillz than me can comment on that…

But I knew there must be a better way… a more “webOS way”…

An itty-bitty little blurb in Frank Zammetti‘s excellent book Practical Palm Pre webOS Projects mentioning the requiresEnterKey attribute. Aha! “… will make the user have to press the Enter key… to fire the Mojo.Event.propertyChanged event”. Sweet! Now I can detect the enter key because it is the only key press that will fire an event in the TextField. The code below does the trick:

MyProgram.prototype.setup = function() {
    this.txtModel = { value: "", disabled: false };
    this.txtAttr    = {
        multiline: true,
        enterSubmits: true,
        requiresEnterKey: true
    };
    this.controller.setupWidget('txtField',
        this.txtAttr,
        this.txtModel
    );
    this.controller.listen("txtField",
        Mojo.Event.propertyChange,
        this.submitHandler.bindAsEventListener(this)
    );
};
MyProgram.prototype.submitHandler = function() {
    var text = this.txtField.value;
};