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

single_view_application

Name your application html5_embedxcode_app_name

 

2. Add the Web view

First select the Storyboard file from the project explorer, then remove the existing View from the view controller scene.

view_controller

Now add the UIWebView to the View Controller scene.

webview controller

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

import_html5

 

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