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:
[cc lang="lua"] local image = display.newImage( “sprite.png” )
transition.to( image, { x=200, y=300, time=1000 } )
native.showWebPopup( 0, 320, 320, 160, “http://www.anscamobile.com” )[/cc]
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?
jules
This is a nice looking app but it’s achingly slow on an iPhone 4. Tap the buttons at the bottom and nothing happens for a while. Hopefully this isn’t representative of how an app like this responds.
Walter
Yes, it was, but it’s much faster in the version 1.1 update of MOAS. I asked them why the performance was slow and they told me they were making unnecessary network connectivity checks before opening a web popup.
David
Works great on an iPhone 3G running iOS 4.1!!! Very nice app.
dbonneville
Can you call local html files, like one saved in a project folder?
Tim Statler
@dbonneville, yes you can open local html files from your project folder.
sphan
@tim_statler, would you be kind enough to point me to how to open local html files within a project folder? Are there specific demos out there? Thanks in advance.
Klaus
@sphan, I think this is what you are looking for:
Taken from here:
http://developer.anscamobile.com/content/native-ui-features#Web_Popup_Options
Web Popup Options
There is an optional sixth parameter, options, that allows you to customize certain features. The parameter must be passed as a table. For example:
1
native.showWebPopup( 10, 10, 300, 300, “http://www.anscamobile.com”, {urlRequest=listener} )
You may assign the following properties in your options table:
options.baseUrl determines whether url is interpreted as a relative or absolute url. The default (nil) implies that the url is absolute. To load a local file, set the base url to one of the base directory constants, e.g. system.ResourceDirectory. Then the url parameter is relative to that base directory. For remote files, you can also specify a remote base, and the url parameter will be relative to the remote base.
Joe
Does this work with android or is it ios only?
Thanks!
-Joe