In the post A simple bounching ball (tutorial) in javascript using HTML 5 <canvas> I’ve shown how to build a simple animation using HTML 5 <canvas>.
The above app is a very simple app, but you can consider it as a complete web app.
The following few lines will show how to embed your complete app into your native iPhone/iPad application.
The iOS SDK provides a simple way to embed your html 5 apps into your native app, you have only to add a web view into your application and then load the html 5 app into the web view.
Let’s start from the beginning.
1. Create a new Xcode project
Choose the “single view application” template
Name your application html5_embed
2. Add the Web view
First select the Storyboard file from the project explorer, then remove the existing View from the view controller scene.
Now add the UIWebView to the View Controller scene.
3. Add HTML5 app
Drag and drop the bounceBall directory (or your own app) into the Xcode project and make sure you import the sources with the following settings
4. Load the HTML5 app
Connect the UIWebView the the ViewController (using Xcode way) right click-and drag from the UIWebView to the ViewController.m source code. The final source will be the following:
//
// ViewController.m
// html5_embed
//
// Copyright (c) 2015 xappsoftware. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@property (strong, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
It’s time to load the files into the web view, simply modify the viewDidLoad method to the following one:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSBundle *mainBundle = [NSBundle mainBundle];
NSURL *homeIndexUrl = [mainBundle URLForResource:@"bounceBall/index" withExtension:@"html"];
NSURLRequest *urlReq = [NSURLRequest requestWithURL:homeIndexUrl];
[self.webView loadRequest:urlReq];
}
Now you can run your app.
Gg1