{"id":1035,"date":"2014-01-02T18:36:54","date_gmt":"2014-01-02T13:06:54","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1035"},"modified":"2014-01-02T18:36:54","modified_gmt":"2014-01-02T13:06:54","slug":"framework-for-interacting-with-embedded-webview-in-ios-application","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/framework-for-interacting-with-embedded-webview-in-ios-application\/","title":{"rendered":"Framework for interacting with embedded WebView in iOS application"},"content":{"rendered":"

Last year around the same time I had written a post about\u00a0Calling Objective-C code from JavaScript in iOS applications<\/a>\u00a0. I created a simple framework for it and described how to use it in that post.<\/p>\n

Recently I was working on an application that required WebView to be embedded in the same View Controller along with other native iOS controls. I decided to use the above framework, but knew that \u00a0my ViewController class will have to extend WebViewController<\/a> class of the framework. Though I could have done that, I thought separating the functionality of UIWebViewDelegate<\/a> from the WebViewController would be a better design. So I replaced WebViewController with WebViewDelegate which implements UIWebViewDelegate protocol. I also removed\u00a0getInitialPageName method from\u00a0WebViewInterface.h<\/a>\u00a0. So here are the files in the new framework –<\/p>\n

WebViewDelegate.h<\/a>
\nWebViewDelegate.m<\/a>
\nWebViewInterface.h
\n<\/a>iosBridge.js<\/a><\/p>\n

To explain how to use this framework, I will take a simple example where a ViewController contains mix of native controls and a WebView (BTW, because delegate functionality is separated from the ViewController, you can now have multiple Web Views in the same View Controller and can still use the framework). Let’s create a ViewController that has a text box and a button (native controls) and a WebView.<\/p>\n

\"20140102_App1\"The WebView contains a combo box. There is no native combo box control in the Cocoa library, so this example might be useful to you if you want to create a combo box and don’t mind if it is created using HTML.<\/p>\n

When the view controller is loaded, it opens index.html in the web view. index.html has just one combo box and it calls a native (Objective-C) method to get the content and populates the list. If you enter text in the text box and click add button, the native code calls a method in JavaScript in index.html to add new item to the list.<\/p>\n

 <\/p>\n

\"20140102_Storyboard\"<\/a><\/p>\n

This is how the storyboard for this app looks like. Text box, add button and WebView are native iOS controls. Combo box is HTML control displayed in the WebView.<\/p>\n

 <\/p>\n

 <\/p>\n

I created a ViewController class for the above view and called it RKMainViewController.
\n<\/p>\n

\n
#import <UIKit\/UIKit.h><\/span>\n#import \"WebViewInterface.h\"<\/span>\n\n@interface<\/span> RKMainViewController<\/span> : UIViewController<\/span> <<\/span>WebViewInterface><\/span>\n@property<\/span> (weak, nonatomic) IBOutlet<\/span> UIWebView *<\/span>webView;\n\n@end<\/span><\/pre>\n<\/div>\n
So unlike the previous framework, this class does not extend WebViewController. It extends UIViewController and implements WebViewInterface<\/a> protocol of the framework. I have also created an outlet for the web view.<\/p>\n
In the implementation of this class (RKMainViewController.m), I first declare local property (for WebViewDelegate<\/a>) , action for ‘Add’ button and outlet for text box.<\/p>\n
\n
@interface<\/span> RKMainViewController<\/span> ()\n\t@property<\/span> (weak, nonatomic) IBOutlet<\/span> UITextField *<\/span>txt1;\n\t-<\/span> (IBAction<\/span>)onAdd:<\/span>(id<\/span>)sender;\n\t@property<\/span> WebViewDelegate *<\/span>webViewDelegate;\n@end<\/span><\/pre>\n<\/div>\n
Of course, you need to connect outlet and action to controls in the storyboard. In the viewLoad function of this class, I create a new instance of WebViewDelegate, disable scrolling on it and load index.html from www folder –<\/p>\n
\n
-<\/span> (void<\/span>)viewDidLoad<\/span>\n{\n    [super viewDidLoad];\n\n\tself.webViewDelegate =<\/span> [[WebViewDelegate alloc] initWithWebView:<\/span>self.webView withWebViewInterface:<\/span>self];\n\n\tself.webView.scrollView.scrollEnabled =<\/span> false<\/span>;\n\t[self.webViewDelegate loadPage:<\/span>@\"index.html\"<\/span> fromFolder:<\/span>@\"www\"<\/span>];\n}<\/pre>\n<\/div>\n
processFunctionFromJS (part of WebViewInterface<\/a> protocol. RKMainViewController implements this protocol. See the class declaration above) function is where we handle methods called from JavaScript. In this example I handle ‘loadList’ function called from JS –<\/p>\n
\n
-<\/span> (id<\/span>) processFunctionFromJS:<\/span>(NSString *<\/span>) name withArgs:<\/span>(NSArray*<\/span>) args error:<\/span>(NSError **<\/span>) error\n{\n\tif<\/span> ([name compare:<\/span>@\"loadList\"<\/span> options:<\/span>NSCaseInsensitiveSearch] ==<\/span> NSOrderedSame)\n\t{\n\t\tNSArray *<\/span>listElements =<\/span> @<\/span>[@\"Item 1\"<\/span>, @\"Item 2\"<\/span>];\n\n\t\tNSData *<\/span>jsonData =<\/span> [NSJSONSerialization dataWithJSONObject:<\/span>listElements options:0<\/span> error:<\/span>nil<\/span>];\n\n\t\tNSString *<\/span>result =<\/span> [[NSString alloc] initWithData:<\/span>jsonData encoding:<\/span>NSUTF8StringEncoding];\n\n\t\treturn<\/span> result;\n\t}\n\n\treturn<\/span> nil<\/span>;\n}<\/pre>\n<\/div>\n
I am returning two hard-coded list items in response to the call to loadList function. The result is returned as JSON string.<\/p>\n
Action handler for ‘Add’ button gets text from the text box and calls JS function ‘addToList’.<\/p>\n
\n
-<\/span> (IBAction<\/span>)onAdd:<\/span>(id<\/span>)sender<\/span> {\n\tNSDictionary *<\/span>dict =<\/span> @<\/span>{@\"newListItem\"<\/span>:<\/span>self.txt1.text};\n\n\t[self.webViewDelegate callJSFunction:<\/span>@\"addToList\"<\/span> withArgs:<\/span>dict];\n\n}<\/pre>\n<\/div>\n
Text to be added is passed in a dictionary, with key ‘newListItem’.<\/p>\n
Now, let’s look at index.html. JS code in this file \u00a0calls loadList function to populate the combo list and declares ‘addToList’ JS function, which is called from the native code, as shown in the code snippet above.<\/p>\n
\n
<script <\/span>src=<\/span>\"iosBridge.js\"<\/span>><\/script><\/span>\n\n<script><\/span>\n\tfunction<\/span> onErrorCallingNativeFunction (err)\n\t{\n\t\tif<\/span> (err)\n\t\t{\n\t\t\talert(err.message);\n\t\t}\n\t}\n\n\tfunction<\/span> onReady()\n\t{\n\t\tcalliOSFunction(\"loadList\"<\/span>, [],function<\/span>(ret){\n\t\t\tvar<\/span> listValues =<\/span> JSON.parse(ret.result);\n\t\t\tvar<\/span> selectElm =<\/span> document<\/span>.getElementById(\"select1\"<\/span>);\n\t\t\tvar<\/span> options =<\/span> \"\"<\/span>;\n\t\t\tfor<\/span> (var<\/span> i =<\/span> 0<\/span>; i <<\/span> listValues.length; i++<\/span>)\n\t\t\t{\n\t\t\t\toptions +=<\/span> \"<option value='\"<\/span> +<\/span> listValues[i] +<\/span> \"'>\"<\/span> +<\/span> listValues[i] +<\/span> \"<\/option>\"<\/span>;\n\t\t\t}\n\t\t\tselectElm.innerHTML =<\/span> options;\n\t\t}, onErrorCallingNativeFunction);\n\n\t}\n\n\tfunction<\/span> addToList(dataObj)\n\t{\n\t\tif<\/span> (dataObj !==<\/span> undefined<\/span> &&<\/span> typeof<\/span> dataObj.newListItem !==<\/span> 'undefined'<\/span>)\n\t\t{\n\t\t\tvar<\/span> selectElm =<\/span> document<\/span>.getElementById(\"select1\"<\/span>);\n\t\t\tselectElm.innerHTML +=<\/span> \"<option value='\"<\/span> +<\/span> dataObj.newListItem +<\/span> \"' selected>\"<\/span> +<\/span> dataObj.newListItem +<\/span> \"<\/option>\"<\/span>;\n\t\t}\n\t}\n\n<\/script><\/span>\n\n<body<\/span> onload=<\/span>\"onReady();\"<\/span>><\/span>\n\n<select<\/span> id=<\/span>\"select1\"<\/span> style=<\/span>\"font-size:12pt;width:100%\"<\/span>><\/span>\n<\/select><\/span>\n\n<\/body><\/span><\/pre>\n<\/div>\n
Notice that\u00a0calliOSFunction (declared in iosBridge.js<\/a>) is called from onReady function, which is called when the HTML body is loaded. The first argument to ‘calliOSFunction’ is the name of\u00a0native function to call (in this case ‘loadList’). The second argument is array of arguments to be passed to the native function and the last argument is callback function that the native code will call when result is ready.
\nResult is passed as JSON string to the callback function handler. So we first parse the string and create a JS object. In this case we know that result is an array of strings. So we iterate over the list and add items to the combo box.<\/span><\/p>\n
‘addToList’ function is called from the native code and takes JS object with the key-value pair. Expected key name is ‘newListItem’ and value is string to be added to the list.<\/p>\n
In summary, this framework has a couple of advantages over the one I had created earlier<\/a>, at the same time provides all the same functionality.<\/p>\n