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

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!