Running an Enyo 1.0 App on Android (with PhoneGap)

edited January 2012 in Packaging Apps
Compiling an Enyo app for Android in PhoneGap is easy. The hard part is tweaking the littl ebugs and accounting for different screen resolutions.

If you have done PhoneGap before, then you don't really need this guide.

If you are new, follow the instructions here to download the Android SDK, Download Eclipse, and set up your project:

http://phonegap.com/start#android

BUT WAIT, THERE'S A CATCH IN THE WALKTHROUGH!
Before you try to compile the Hello World Sample app on a device/emulator (Step 4), you need to copy the XML folder from the Phonegap \android\example\res folder into your \res folder. This folder has two files (phonegap.xml and plugins.xml) which are required.

Example App/java file:
package com.jamesharris.flashcards;

import android.os.Bundle;
import com.phonegap.*;

public class App extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.init();
        
        // Disable scrollbars 
        super.appView.setVerticalScrollBarEnabled(false);
        super.appView.setHorizontalScrollBarEnabled(false);
        
        super.setBooleanProperty("keepRunning", false); 
        
        super.loadUrl("file:///android_asset/www/index.html", 1000);
    }
    
    //--> webOS Style where exiting the app kills it. This simply restarts the app.
    protected void onResume()     {
    	super.loadUrl("file:///android_asset/www/index.html", 1000);
        super.onResume();
     } 
}
Example Manifest.xml File:

Keep in mind I removed some permissions that my app does not need. This also does not allow smaller screen sizes to see the app in the catalog.
<?xml version="1.0" encoding="utf-8"?>

	
    
    
    
    
    
    
    
    
    
    
    
        
            
                
                
            
        
		
			
			
		
    
 
Once you have your Hello World example running, you can copy over your project files into the /assets/www/ folder. You must also copy over the entire Enyo framework as well. Then, simply modify your index.html file with a few pieces:

1.) Add the phonegap.js library
2.) Change path to Enyo for local access
3.) Use the onBodyLoad function to start your app (PhoneGap style)


Example Index.html File

<!doctype html>


FlashCards

//new FC.First().renderInto(document.body); function onBodyLoad(){ document.addEventListener("deviceready", onDeviceReady, false); //--> For chrome testing //onDeviceReady(); } function onDeviceReady(){ new FC.First().renderInto(document.body); }

Compile, and run. Bada bing, all done. Well, hopefully. At this point, I started running into those "lil issues".

TIPS & NEW LEARNINGS:

1.) Change the body onload to fire onDeviceReady instead of onBodyLoad. This allows you to test in the browser. I like to create a second file without the PhoneGap requirements for quick Chrome testing.

2.) Look at the LogCat in Eclipse. This is where you can get your debugging information. Be warned, it is verbose.

3.) RichText boxes on 2.x and 3.x do not work. I am unsure about 4.x (ICS). I hope to have a work-around kind soon.

4.) The first issue you will likely run into is a is12HourFormat line. You cannot use Enyo's g11n Date, time, Number formatting. It will throw an error every time.

5.) I know that with SqlLite, readTransactions will not work. See my post about working around this: http://forums.enyojs.com/discussion/44/android-database-readtransaction

6.) If you use WebService/AJAX calls, you need to modify the /res/xml/phonegap.xml file to add the access origin allows. This example allows my API domain, but *.*.* allows all domains (and https too):

<?xml version="1.0" encoding="utf-8"?>

    
	
	
	
    


* You will likely run into some issues yourself. Don't worry, it will make your app stronger!

So those are the basics for porting your webOS Enyo app to Android. Please post your experience, gotchas, errors, etc so we can all learn from each other. I'll update this post with the nuggets of info.
«1

Comments

  • Hi, my app works almost completely with Enyo 1.0 on Android (with PhoneGap).
    Any ideas why I get "Object enyo.Iframe has no method 'reloadPage'" error? It certainly works well in webOS.
  • You're using a WebView, right? On non-webOS devices, that gets replaced by an enyo.IFrame object which doesn't have all of the same methods. You might be able to locally add them by manipulating the node object of the iframe directly.
  • My webviews stay grey on android! What do I have to do to make them useable?
  • Look at using the ChildBrowser plugin if you are using PhoneGap. That has replaced WebView's for me in iOS, Android, and Blackberry.

    https://github.com/phonegap/phonegap-plugins
  • @erupnu: Didnt you mention somewhere that you have implemented an Enyo wrapper for the ChildBrowser plugin? Would be great if you could share it!
  • @MakleSoft: I do, but it's not clean, is project specific, and still has some debugging code in it. Basically, I wrote it half awake, but it works. If someone wants to clean this up, I'll attribute them and release for all...

    http://pastebin.com/jMyLx0ta

    I also have a processClick function that you can attach to any element in Enyo that has HTML. If the user clicks on a link/email in HTML, it'll process it and open the EmailComposer or ChildBrowser plugins. It's basically mimicing the webOS behavior.

    Has a handy "Like on Facebook" function too. I have a twitter version, but it's not in this.
  • FYI I already have taken the task of cleaning this up and removing the Flash Card app dependent code should have it out tonight or tomorrow.
  • edited February 2012
    Adding these two lines to onCreate might also be helpful
            super.appView.getSettings().setUseWideViewPort(true);
            super.appView.getSettings().setLoadWithOverviewMode(true);
    They ensure that webView is fully zoomed out.
  • edited February 2012
    I ran into an issue with the ChildBrowser Plugin's onLocationChange function, namely I couldn't get it to work no matter what I threw at it. Found a workaround:

    Remove:
    && typeof window.plugins.childBrowser.onLocationChange === "function"
    from the ChildBrowser.prototype._onEventfunction in childbrowser.js. Seemed to fix the issue. I was then able to get the function to work successfully as such:
    window.plugins.childBrowser.onLocationChange = enyo.bind(this, function(x){console.log(x)}
    typeof wasn't recognizing my function as, well, a function. Even without the enyo.bind it wouldn't recognize a simple function. onClose probably has the same issue.
  • I've got everything refactored and will post it up on GitHub tonight. Not all of it is tested so I will (or you can ;) ) update it as I go through it.
  • Finally got my app working. Video Required API level 14. Otherwise pretty much followed your instructions. Thanks.

    Video Clip
  • @Syntactix Where did you post it?
  • Looks like I committed it but forgot to sync. I will do that first thing when I get home tonight. It will be posted here when I do.
  • edited February 2012
    I'm confused about this line:
    new FC.First().renderInto(document.body);
    How do you convert something that normally starts as
    enyo.create({kind: "MainCalc"}).renderInto(document.body);
    into this format?
  • And does my app's depends.js file just sit in assets/www? How does the PhoneGap application know about it?
  • Enyo is what loads the depends.js, so yes, it does just sit there in assets/www

    The two lines you copied are pretty much identical.

  • @rundavidrun PhoneGap kindof acts like a webserver (hence the www folder). It knows to look for your index.html file in that folder and then processes that index file. By Enyo conventions, your depends.js file is in the same directory as your index file, so yes, you place it all there.

    As @ekdikeo said, those two lines do the exact same thing, just expressed slightly differently.
  • Drat! All I get is a blank gray screen. Surely there's something else I need to do?
  • @ekdikeo and @erupnu, is "FC" something from FlashCards or is it a JavaScript or Enyo keyword? If so, is there something else I need to do to get my program to work?
  • @rundavidrun, Yes, FC. is my prefix for all of my FlashCards kinds. Ensures nothing interferes. Make sure you get the basic PhoneGap sample working first so you know you have your project ready.
  • You can have a look at the device log using "adb logcat" to see what's going on, or attempt to load the javascript at debug.phonegap.com and see if it's working today to have a way of seeing what's going on maybe.

    Also, yes, make sure that the PhoneGapExample is working
  • @Syntactix Could you please post a link, where the ChildBrowser stuff is available? Thanks!
  • I did run through the HelloWorld tutorials with great success, but I can't get anything with Enyo. :( I posted a separate thread here to show you what I have in Eclipse: http://forums.enyojs.com/discussion/136/running-an-enyo-1-0-app-on-android-with-phonegap-help-getting-started
  • @rundavidrun Look at the LogCat, it will tell you what is erroring.
  • Putting an enyo 2 app into android... heads up on the new 1.5 version of phonegap... you have to import org.apache.cordova.* rather than import com.phonegap.*
  • I'm trying to move a partially completed Enyo1 app into an Android app. I've put everything under
    {my project dir}/assets/www:
    - enyo (folder)
    - appinfo.json
    - cordova-1.5.0.js
    - index.html
    - depends.js
    - framework_config.json

    When I load it in the browser I get:

    XMLHttpRequest cannot load file:///home/wes/IdeaProjects/ParNineGolfEnyo1/assets/www/enyo/framework/framework_config.json. Cross origin requests are only supported for HTTP.

    enyo.xhr.request() exception: Error: NETWORK_ERR: XMLHttpRequest Exception 101
    enyo.xhr.request enyo-build.js:1758
    enyo.fetchConfigFile enyo-build.js:5795
    enyo.fetchRootFrameworkConfig enyo-build.js:5838
    setupLoggingLevel enyo-build.js:6318
    enyo.kind.name enyo-build.js:6324
    (anonymous function) enyo-build.js:6325


    Why does it think I'm doing cross site scripting to get Enyo's root framework_config.json? I've debugged it and Enyo's own code is building the path as enyo/framework/build/../framework_config.json. Why does this fail?
  • If you're trying to run it in Chrome, you'll need to give --disable-web-security on the command line
  • Thanks. Sorry - I should kept searching before posting. I eventually found this post:
    http://forums.enyojs.com/discussion/comment/895#Comment_895

    Now, I start Chrome like this (on Ubuntu):
    google-chrome --allow-file-access-from-files --allow-http-access-from-files --disable-web-security --enable-file-cookies
  • edited March 2012
    Thanks for the info, starting Chrome with the above settings works great.

    What would one specify when the app (packaged) is in Chrome webstore and getting:
    enyo.xhr.request() exception: Error: NETWORK_ERR: XMLHttpRequest Exception 101
    Uncaught TypeError: Cannot read property 'status' of undefined
    Uncaught Oop.js: Failed to find a constructor for kind [PageHeader]

    The same app runs in Chrome (local) but yields a blank page in the Chrome web store upon publishing :(

    my manifest.json below:
    {
        "app" : {
            "launch" : { "local_path" : "index.html" }
        },
        "description" : "some desc",
        "name": "my app name",
        "offline_enabled": true,
        "icons" : {
            "16" : "icon16.png",
            "128" : "icon128.png"
        },
        "permissions" : [ "tabs", "http://*/*", "https://*/*" ],
        "version": "1.0.0"
    }
    
    Unzipping the file shows the following directory structure:
    \css
    \enyo (everything in 1.0)
    \mysource
    appinfo.json
    depends.js
    icon16.png
    icon128.png
    index.html
    manifest.json

    thanks in advance
Sign In or Register to comment.