Combine HTML and OpenGL content seamlessly in a single app

Posted by Walter

One of the big debates going around is whether a mobile developer should use HTML5 or go native.  Well, what if you didn’t have to make a choice? Even better, what if you could combine HTML inside a native app and still leverage the full power of OpenGL?

Now you can! Just check out Corona’s web popup API which lets you embed a web view right inside your app.

What this means is that you can create fluid OpenGL-based animations and combine them with HTML content, all in literally a couple of lines.  For example, here’s how you would animate an image moving diagonally across the screen, and make the bottom third of the screen open up a web page:

You can even use them to do things like integrate with Facebook Connect as I’ve discussed previously.

One of the best demonstrations of this feature is an app called MOAS made by the folks at HD Interactive.  It really shows what you can do with web popups like pulling event calendar info dynamically off the web or showing gallery tours via local content.  But the coolest part is that you can also seamlessly add transition effects to the images loaded directly by Corona’s engine.  It’s hard to tell where the HTML ends and OpenGL begins.

In short, add web content when you want and add OpenGL content when you want.  Either way, you get the best of both worlds — how often in life does that happen?