Running an Enyo 1.0 App on iOS (with PhoneGap)

edited January 2012 in Packaging Apps
Compiling an Enyo app in PhoneGap is, well, super easy. If you have done PhoneGap before, then you don't really need this. If you are new, follow the instructions on phonegap.com to setup PhoneGap and get your project going. keep going and use the Hello World example to make sure it work on your device or simulator. I recommend following the PhoneGap guide as it is detailed and has screenshots! http://phonegap.com/start#ios-x4

Once ready, you simply copy all assets into your 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)

An example index.html:
<!DOCTYPE html>
<html>
<head>
<title>FlashCards</title>
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="enyo/1.0/framework/enyo.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>

</head>
<body onLoad="onBodyLoad()">
<script type="text/javascript" charset="utf-8">
function onBodyLoad(){
//--> For browser testing:
//onDeviceReady();
//--> For devices
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){
//try{
new FC.First().renderInto(document.body);
//}catch(e){
// console.log(e);
// alert(e);
//}
}
</script>
</body>
</html>
Compile, and run. Bada bing, all done. Well, hopefully. At this point, I started running into those "lil issues".

TIPS:

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.) Uncomment the Try/Catch in onDeviceReady to see any errors. By default, the GDB doesn't log errors. You can also use weinre (http://phonegap.github.com/weinre/) for debugging.

3.) If you have a webview and it loads up the browser at run time, take out the default URL when it is created. WebViews in iOS 4.x do not work.

4.) The viewport meta tag is required. I had issues with launching the app in landscape, and when rotated to portrait, it went *big*. This meta tag fixed all that ion iOS 4.

5.) RichText boxes on iOS 4.x do not work. Work around or go 5.x only.

6.) MOST IMPORTANT: The iOS webview is much more strict than Chrome and webOS. The primary issue webOS devs have is a blank screen. If the HelloWorld worked, then it's a script error.

* JSON Objects are more strict. I once had a JSON object like this:
var foo = {
funny: "haha",
someobj: this.$.someEnyoObject
}

The name in the first item not being in " " and storing an object there it did not like. Had to work around both of those.

* WebViews do not work in iOS. You will need to work around them. I like using the ChildBrowser plugin for PhoneGap (https://github.com/phonegap/phonegap-plugins)

* Zhephree reported that having .new as a property held him up. Looks like "new" is a reserved word.

* 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 iOS. Feel free to post your experience/ideas.

Comments

  • Thanks James! Time to get porting and writing new apps..
  • Also, the iOS build of WebKit that'll be running your app is a bit more strict when it comes to JavaScript standards. For instance, I (stupidly) had a property of an object that was called "new" (i.e. item.new) and since "new" is a reserved word in JavaScript, the parser freaked out and the app wouldn't load.

    webOS, Chrome, and Safari all happily ran the app as if nothing was wrong, so it was a tough issue to find and I had to find it my deleting code one function at a time until it worked.

    So make sure you follow the rules of JavaScript closely.
  • Any thoughts on why the "ondeviceready" event might not fire?
  • edited January 2012
    the event is 'deviceready' not 'ondeviceready'.

    And will only fire if you are running in phonegap on a device, not your PC.
    You should double check that you both include the phonegap js file and that you do setup the event handler - in the example above that you call onBodyLoad from the body tag.
  • Exactly. You will see I left the commented line in for PC testing as the deviceready event will not fire in your browser.
  • I built a prototype based on your example today and i decided to create a separate debug.html as entry point for the browser. This way i don't have to care about commenting in and out the try/catch and the deviceready, i just have to call /debug.html in the address bar.
  • James, thanks SO MUCH for posting these x-platform nitty details posts.

    The webOS dev community is so reminescent of the early Mac dev community. A small band who knows they're spelunking a new and better universe, and freely shares discoveries of the pathways thru the twisty little corridors ...
  • Thanks so much!
    One question. How do you do this step:
    You must also copy over the entire Enyo framework as well.
  • This is mainly for porting from a webOS app. In webOS, the framework is already on device, so is not packed with the app. When publishing to iOS, you must therefore have the Enyo framework in your project directory. You can download the framework from this site.
  • other tips: don't bother trying to create Dashboards in webOS style on iOS or Android, it's just painful. If you have a "simple" noWindow app that primarily uses the noWindow portion just to do tasks for a main window, you may? be able to get away with just adding your entire set of source to the main depends.js, and then where you would normally call enyo.windows.activate(), call new MyApp().renderInto(document.body).
  • So are all of you saying that the enyo WebView won't work at all in iOS, or just not in iOS 4.x, but will in iOS 5.x? I just started with the porting project. In iOS 4.x and 5.x, I am getting a blank screen for the WebView component. What is the best workaround?
  • I get a blank screen for the webview on everything except webOS.
  • Arg! I hope that gets fixed - it's the same story with using enyo apps on the Pre3!
  • The blank screen might be due to the methods in WebView being different on the two platforms. On anything but webOS, a WebView is just an alias for enyo.IFrame.
  • If you run into the problem (like i did) that app loading takes quite a long time, if figured out a solution that might help you.

    I changed my index file to load enyo at domready - because most of the waiting time is caused by PhoneGap (waiting for deviceready):
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>App</title>
    <script type="text/javascript" src="lib/enyo/framework/enyo.js"></script>
    <script type="text/javascript" src="lib/phonegap/phonegap.js"></script>
    </head>
    <body>
    <script type="text/javascript">

    // initialize the application if DOM is ready
    window.addEventListener('load', function() {

    var app = new App().renderInto(document.body);

    // call deviceReady method if device (PhoneGap) is ready
    document.addEventListener('deviceready', function() {
    app.deviceReady();
    }, false);

    }, false);

    </script>
    </body>
    </html>
    This will work as long as you don't need the PhoneGap API for App start. The initialization for everything based on the API is done inside the deviceReady method. You could also listen to the deviceready event inside you app, but i like it explicit, so i put this inside the index/bootstrap file.

    Hope this helps :)
  • I don't get a device ready event on any platform with it :|
  • I just tested this on iOS 5 so far, it works on the simulator as well as on a device (iPad 1).

    How does you App kind look like?
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Twitter