Embedding HTML5 into a native IOS app using StageWebView class.
Here I will run you through how to wrap your HTML5 site or app inside a native IOS application using the Stage Web View class.
A great use for this is building a hybrid app, half HTML 5 and half native, so if you are developing an IOS application for multiple platforms you can re use the HTML 5 application code for each app you publish without having to re write it each time.
The reason you would go with a hybrid IOS application instead of a pure HTML wrapped app is there are limitations when it comes to HTML5 wrapped application.
So to display an embedded HTML 5 application is not complicated at all, lets unpack the code below.
var webView:StageWebView = new StageWebView(); webView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this .stage.stageHeight); webView.stage = this.stage; webView.loadURL( "http://dev.sgy.co.za" );
So if we look at this line
here we specify the X, Y positions as well as the width and height values. Keeping in mind that IOS devices all have different screen resolutions (no where near as bad as Android but still a few to cater for 😉 ) I prefer to use some dynamic code here, this line “this.stage.stageHeight”. This will grab the height of your device and set the stage view to be this value, same for the width.
new Rectangle( 0, 0, this.stage.stageWidth, this .stage.stageHeight);
The above code can be called and removed from the stage, so in my application I had a button that fired up my HTML 5 page within my app, then when you clicked on another tab it closed it down. The integration is seamless and the end users wont be able to tell when they are switching between HTML 5 and the native application if its done correctly.
Now we need to drop a bit of code inside the header of your HTML 5 file.
this code does 2 things, the first is it sets the web page to be the full width of you device, so in other words its fully zoomed out (width=device-width). This value can also be changed to be a fixed pixel width, but I don’t recommend doing this as you want to support as many devices as possible.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
The second is the scale (initial-scale=1.0; maximum-scale=1.0; user-scalable=0;) this sets the zoom level and then locks it so the user can no longer zoom in, something to keep in mind to build this for a retina display, you double all your designs in size then set the initial and max scale to 0.5, so this is almost a hack to double the pixel density (from 72 to 144).
Now you have integrated your HMTL5 web app into a native AIR IOS application.