LoveVoucher App developed in Enyo 2.0 now available for WebOS and Android

A few months back we decided to rewrite the LoveVoucher App in Enyo 2.0. We are very pleased with the results so far. After the initial effort of getting it working in Enyo 2.0, we were able to package it for Android using PhoneGap with minimal effort.

image image image

The Android version has been finally released into Google Play App Catalog.

image

The WebOS version released into WebOS BETA Feed. Hope to iron out last remaining quirks and replace the Enyo 1.0 version with this one in the next few months.

image


Anyone with Android or WebOS Device, please download the app and let us know what you think. Your feedback will be greatly appreciated. Please note so far our merchant feeds are for UK Merchants only. Hopefully we will expand to US and other countries soon.

Some lessons learnt so far
  • Use the Enyo BootCamp to setup the project, the project layout is great. We can easily work on the latest enyo branch.
  • Do not try to do much heavy lifting in the Enyo kind creation methods. It will slow down your application load time and will make your app looks frozen. We were using Panels. But it seems to instantiate every view at the creation of the Panel. Especially on WebOS Devices the app widows shows a frozen image of the last last active app until your app is fully initialised. Took a while to work out what was going on there. May be a more elegant solution would be to port the lazy loading functionality into Panel kind (like we already have for Enyo 1.0 Panel).
  • Have a separate flavour of index.html for each platform you target. We have webos.html, android.html then modified tools/deploy.sh to copy the appropriate file as index.html
  • HTML5 GPS API in Pre3 is not very accurate. So we are looking at using the webOSExt.js to tap into WebOS native API for that.

Comments

  • edited January 2013
    LoveVoucher App for WebOS Version written using Enyo 2.1 (trunk) and PhoneGap 2.3 finally published into HP App Catalog.

    image


    A quick overview of using PhoneGap with Enyo 2.0 for calling native WebOS functions...

    (1) Include cordova JS file from PhoneGap\lib\webos\lib into index.html

    <script src="cordova.webos.js"></script>

    (2) Include the Phonegap signals in your main Application kind
    {kind: "enyo.Signals", ondeviceready: "deviceready"}

    (3) You can now make WebOS native calls e.g. Palm Service calls using something like...
    var request = navigator.service.Request("palm://com.palm.applicationManager",
    {
    method: 'launch',
    parameters: {
    id: "com.palm.app.maps",
    params : {query: this.postcode}
    },
    onFailure: enyo.bind(this, "gotFailure")
    });
    Some pending issues still need figuring out...

    (1) Noticed an error on PhoneGap JS library (cordova.webos.js), every time the application is launched. window.Mojo seems to be undefined.
    1054:  window.Mojo.stageActivated = function() {
    1055: console.log("stageActivated");
    1056 cordova.fireDocumentEvent("resume");
    1057: };
    Fixed it by including webOSExt.js in the package.js Not quite sure why. I can't see webOSExt.js initialization doing anything that is different to Phonegap initialization. Might be a timing thing.

    (2) Phonegap seems to subscribe to Palm native service for Internet status updates. But I haven't seen this working very well. If the phone lose the internet connection, after launch, navigator.connection.type still indicates there is a connection available.

    (3) navigator.geolocation.getCurrentPosition uses Palm's HTML5 GPS implementation. Not the one implemented in PhoneGap library. Tried calling native palm GPS service using
    var request = navigator.service.Request("palm://com.palm.location",
    {
    method: 'getCurrentPosition',
    onSuccess : enyo.bind(this, "handleGPSSuccess"),
    onFailure : enyo.bind(this, "handleGPSError")
    });
    which calls the Palm service, but the success or failure callbacks are never get called.

    (4) Back gesture in WebOS 2.x doesn't seem to be captured by Phonegap events, which would have been nice if it did like it does in Android back button.
  • (4) Back gesture in WebOS 2.x doesn't seem to be captured by Phonegap events, which would have been nice if it did like it does in Android back button.

    This is being added to Cordova, should hopefully land in 2.4.0 at the end of the month

    I'll look into the other issues, thanks for bringing them up
  • edited January 2013
    (3) This works for me
     var request = navigator.service.Request("palm://com.palm.location",
    {
    method: 'getCurrentPosition',
    parameters: {},
    onSuccess : enyo.bind(this, "handleGPSSuccess"),
    onFailure : enyo.bind(this, "handleGPSError")
    });
    Notice that i added the parameters property
  • @twtomcat - Thank You, You are right, I was missing the "parameters" property. It works now !

    Looking forward for PhoneGap 2.4 with support for back gesture !

    I think I finally figured out why using HTML5 navigator.geolocation.getCurrentPosition gives a different result to calling Palm native GPS service. Turns out HTML5 call had the wrong sign for longitude. Native call returned the correct sign.

    navigator.geolocation.getCurrentPosition: longitude":0.353071
    Palm native GPS service: longitude":-0.353071

    I am not sure if anyone else encountered this problem. Looks like a WebOS bug.

  • @roshan (1) Noticed an error on PhoneGap JS library (cordova.webos.js), every time the application is launched. window.Mojo seems to be undefined.
    Can you show me the exact error message?
  • edited February 2013
    @twtomcat - This is what I get. Happens on both Pre3 (WebOS 2.2.4) and Pre- (WebOS 1.4.5)
    [20130131-21:41:49.381256] error: exec:call plugin:NetworkStatus:getConnectionInfo, cordova.webos.js:1,022
    [20130131-21:41:49.389617] error: exec:call plugin:Device:getDeviceInfo, cordova.webos.js:1,022
    [20130131-21:41:49.554534] error: Uncaught TypeError: Cannot set property 'stageActivated' of undefined, cordova.webos.js:1,054
    My index.html loads the scripts in the following order
    <script src="cordova.webos.js"></script>
    <script src="build/enyo.js"></script>
    <script src="build/app.js"></script>
  • edited February 2013
    @twtomcat - Did the Back gesture support made it into PhoneGap 2.4 release ? I found it mentioned in the change log, but I couldn't find it the 2.4 release codebase through.

    I was using the WebOS Ports implementation from https://github.com/webOS-ports/webos-ports-lib/blob/master/source/BackGesture.js but didn't quite work on my Pre3 or Pre2. This was probably written for OpenWebOS.

    So I printed every key stroke and found that the value of the back gesture is "Back" at least on WebOS 2.x. So I modified it has follows and now it works ! Tested on both Pre3 and Pre2.
    if (ev.keyIdentifier == "U+1200001" 
    || ev.keyIdentifier == "U+001B"
    || ev.keyIdentifier == "Back") {
    enyo.Signals && enyo.Signals.send && enyo.Signals.send('onbackbutton');
    ev.preventDefault();
    return true;
    }
  • I want to use the back gesture in my Enyo2 app. Who do I implement it? Do I need Phonegap for that?
  • edited April 2013
    I use the following code (no Phonegap used):

    {kind: enyo.Signals, onkeyup: "handleKeyUp"},

    .....

    handleKeyUp: function(inSender, inEvent){
    console.error(inEvent.keyIdentifier);
    }
    This will log any keypress in Chrome. But on the Pre3 no keypress appears in the log. How can I use the back gesture?
  • Ok, I got it to get the back gesture on my Pre3:


    {kind: enyo.Signals, onkeydown: "handleKeyDown"},

    ,,,

    handleKeyDown: function(inSender, inEvent){
    //console.error("KeyDown: " + inEvent.keyIdentifier + "-" + inEvent.keyCode+".");
    var KeyCode = inEvent.keyCode;

    // Backgesture abfangen
    if (KeyCode == 27) {
    console.error(" BACK ");
    var WhichPanel = this.$.viewPanels.getIndex();
    switch (WhichPanel) {
    case 3:
    this.$.viewPanels.setIndex(2);
    break;
    case 2:
    this.$.viewPanels.setIndex(1);
    break;
    };
    inEvent.preventDefault();
    return true;
    };
    },
    It slides the panels (as it should), but it doesn't prevnt the card from being minimized :(

    Thanks for any advice!

    Marcel
  • edited April 2013
    Try to call
    inEvent.stopPropagation();
    after #preventDefault

    (in Mojo they just seem to call prototype.js's Event.stop)
  • Unfortunately didn't help either!
  • @linuxq If you could package a test app (incl. Enyo 2) I might be able to help you. (Currently don't have much time, otherwise I'd do it myself.)
  • Thanks for the offer. I found a workaround and added the option to lock panel dragging. At least that works for this app (tt-rss.org Reader)
Sign In or Register to comment.