{"id":634,"date":"2013-01-03T08:46:57","date_gmt":"2013-01-03T03:16:57","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=634"},"modified":"2013-01-03T08:46:57","modified_gmt":"2013-01-03T03:16:57","slug":"creating-ios-application-with-html-user-interface","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/creating-ios-application-with-html-user-interface\/","title":{"rendered":"Creating iOS Application with HTML User Interface"},"content":{"rendered":"

Last year in April, I experimented with iOS\u00a0development\u00a0for the first time. I have described details in this post<\/a>. I wanted to spend more time learning iOS application\u00a0development\u00a0then, however could not get around to actually doing that till very recently.<\/p>\n

I had written a blog post on creating Android application using HTML user interface<\/a> back in March last year. I was curious to know how to do the same in an iOS application. \u00a0In 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.<\/p>\n

<\/p>\n

First, create a new project in Xcode<\/a>;\u00a0select iOS->Single View Application \u00a0template.<\/p>\n

\"project_wizard1\"<\/a><\/p>\n

Complete the project wizard.<\/p>\n

\"project_wizard2\"<\/a><\/p>\n

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 .<\/p>\n

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.<\/p>\n

\"webview_control\"<\/a><\/p>\n

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

<\/p>\n

\n
#import <UIKit\/UIKit.h>\n@interface RKViewController : UIViewController\n{\n    IBOutlet UIWebView *webView;\n}\n@end<\/pre>\n<\/div>\n
 <\/p>\n
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.<\/p>\n
\"outlet_connection\"<\/a><\/p>\n
Unlike in other programming languages\/frameworks, Cocoa framework hides code to instantiate class associated with UI controls.<\/p>\n
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.<\/p>\n
\"link_wwwroot\"<\/a><\/p>\n
Select ‘Create folder reference for any added folder’ option.<\/p>\n
\"link_wwwroot2\"<\/a><\/p>\n
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.<\/p>\n
\"create_index_html\"<\/a><\/p>\n
Add some html code in the index.html.<\/p>\n
We can now set url of the web view to index.html that we have created. We will do this in\u00a0viewDidLoad method of the ViewController. Open ViewController.m and modify\u00a0viewDidLoad method.<\/p>\n
<\/p>\n
\n
- (void)viewDidLoad\n{\n    [super viewDidLoad];\n\n    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@\"index\" ofType:@\"html\" inDirectory:@\"wwwroot\"]];\n\n    NSURLRequest *req = [NSURLRequest requestWithURL:url];\n\n    [webView loadRequest:req];\n\n}<\/pre>\n<\/div>\n
 <\/p>\n
Run the application in iPhone\/iPad emulator and you will see the content of index.html displayed in the application.<\/p>\n
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<\/a> of this post.<\/p>\n
-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
Last year in April, I experimented with iOS\u00a0development\u00a0for the first time. I have described details in this post. I wanted to spend more time learning iOS application\u00a0development\u00a0then, 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 … <\/p>\n
Continue reading “Creating iOS Application with HTML User Interface”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Creating iOS Application with HTML User Interface http:\/\/wp.me\/p2g9O8-ae","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[15,1],"tags":[61,14,62],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-ae","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/634"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=634"}],"version-history":[{"count":1,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/634\/revisions"}],"predecessor-version":[{"id":1997,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/634\/revisions\/1997"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=634"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}