Creating iOS Application with HTML User Interface

Last year in April, I experimented with iOS development for the first time. I have described details in this post. I wanted to spend more time learning iOS application development then, however could not get around to actually doing that till very recently.

I had written a blog post on creating Android application using HTML user interface back in March last year. I was curious to know how to do the same in an iOS application.  In this post I will describe how to embed web view and set a URL in an iOS app and in the next post I would describe how to access native Objective-C code from JavaScript running in the web view control.

First, create a new project in Xcode; select iOS->Single View Application  template.

Complete the project wizard.

At the end of it, the wizard creates application delegate class, a view controller and a main file (main.m in ‘Supporting Files’ folder). It also creates a .xib file (also called nib file, because older versions of Xcode used to create this as .nib file), which contains information about UI created for the application. The application delegate class contains an instance of main window (of type UIWindow) and an instance of view controller. The application delegate class is created in the main.m .

Open .xib file, this is where the UI for the application is created. We will embed WebView in the main window. Type ‘WebView” in the lower right search box (in ‘Objects’ panel). Drag ‘WebView’ from this window and drop it in the main window.

To access instance of this web view control from the controller, you need to create an Outlet. See more information about outlet here. Open ViewController.h and add a member variable called webview –

#import <UIKit/UIKit.h>
@interface RKViewController : UIViewController
{
    IBOutlet UIWebView *webView;
}
@end

We will have to connect the above variable (webView) to the UI control in the .xib file. Open .xib file and CRL+Click ‘File’s Owner’ icon. On click and hold the plus icon next to webView under Outlet group and drag and drop on the WebView control.

Unlike in other programming languages/frameworks, Cocoa framework hides code to instantiate class associated with UI controls.

Now we can access the instance of UIWebView from the ViewController. Next step is to set URL to be displayed in the web view. Create wwwroot folder under the project folder, either using Finder or console window. Select wwwroot folder in the finder and drop it on the project window of Xcode.

Select ‘Create folder reference for any added folder’ option.

CTRL+Click on the wwwroot folder in Xcode and select ‘New File’ option. Select ‘Empty’ file option and create index.html in the wwwroot folder.

Add some html code in the index.html.

We can now set url of the web view to index.html that we have created. We will do this in viewDidLoad method of the ViewController. Open ViewController.m and modify viewDidLoad method.

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"wwwroot"]];

    NSURLRequest *req = [NSURLRequest requestWithURL:url];

    [webView loadRequest:req];

}

Run the application in iPhone/iPad emulator and you will see the content of index.html displayed in the application.

Next step is to understand how to call native Objective-C code from JavaScript in the html file. I will describe that in the next part of this post.

-Ram Kulkarni