HTML 5 + iOS - creating hybrid applications

Question

I am trying to convert my native iOS app into a hybrid app using HTML 5. After doing a research I ended up with jQuery mobile + phoneGap.

My questions are

1. Is it possible to mix html 5 and native iOS features within a single view? For example can I use html text field to get the value and use it to do some conversion using iOS picker.
2. Is it possible to navigate to a native xib from an html page?
3. And finally is there any better solution to create a hybrid app?

thanks in advance

Answer 1

1. Yes, you can mix native iOS features within a single 'view'. If you're looking to insert a native iOS picker into the web view, that's not really possible. As nhahtdh mentioned, any native iOS views you add will be placed on top of your HTML5 UIWebView. To perform tasks like this, you'll need to master communication via Javascript. See frameworks like https://github.com/diy/conduit for techniques on how to easily communicate between ObjC and Javascript to pass values back and forth between native and HTML.

2. It is possible to perform navigations from HTML pages (when clicking on links, for example), by setting up your iOS app to watch for specific URL requests, and perform some action based on them. I've used the NSURLCache for this purpose. So, if you wanted a link in your HTML to trigger a load of a xib file, you can watch for that URL to be requested via the NSURLCache, and load your xib when you see it. This link helped me master this technique.

3. It is my understanding that all of the hybrid iOS + HTML frameworks use this general technique of establishing a REST-like set of URL requests that can be parsed out by a NSURLCache-like system and trigger native events based on those URLs. While using an existing framework may save you some time, it's not that difficult to implement yourself for more simple functionality. The big frameworks might help you along with more advanced caching of the HTML resources, however.

Answer 2

May be i am late here but first two question's answer is YES you can. You can call Objective C method which has a Picker displaying codes and Navigating/pushing other Views, from your web having Javascript. You just need to track them in your native app using UIWebViewDelegate. Here's example how i did this :

// In Your Javascript file, inside the method from where you want to invoke Pickerview or want to push another native view

       var iframe = document.createElement("IFRAME");
       iframe.setAttribute("src", "js-frame:myObjectiveCFunction"; 
      document.documentElement.appendChild(iframe);
       iframe.parentNode.removeChild(iframe);
       iframe = null;

In your Native Objective - C file : include <<UIWebViewDelegate>>

- (BOOL)webView:(UIWebView *)webView  shouldStartLoadWithRequest:(NSURLRequest *)request
       navigationType:(UIWebViewNavigationType)navigationType {

if ([[[request URL] absoluteString] hasPrefix:@"js-frame:"]) {
    // Extract the selector name from the URL
    NSArray *components = [requestString componentsSeparatedByString:@":"];
    NSString *functionName = [components objectAtIndex:1];
    // Call the given selector
    [self performSelector:NSSelectorFromString(functionName)];
    // Cancel the location change
    return NO;
}
// Accept this location change
return YES;

}

- (void)myObjectiveCFunction {
    // Do whatever you want!
   // show Native picker view
   // Push another native View
}

In the same way , you can even send the parameters from HTML page to Objective c. // -----------------------------------