Embedding Cordova (PhoneGap) in MonoTouch apps

MonoPlusPhoneGapWhen it comes to writing hybrid mobile apps on iOS today, you usually get to pick between two extremes: 1) primarily use web development technologies and host them in an enhanced WebView (such as PhoneGap), or 2) write a fundamentally native application (CocoaTouch, MonoTouch) and sprinkle in WebViews from time to time and write your own ad hoc gateway between the WebView and your native code.

Today, we’re going to talk about a way to embed a Cordova1 web view in a MonoTouch application. To get a high-level overview of what we’re going to be doing, you can look at the documentation for the Xcode and CocoaTouch version of this process.

Prerequisites

FIrst things first. You’ll need to clone both of the following repositories from GitHub:

Implementation steps

I believe you’ll find it easiest to follow along with these steps if you at least skim through the Screencast that I’ve embedded below.

  1. Create a new Tabbed Application project in MonoDevelop.
  2. In your Project References, add a Reference to monotouch-bindings/Cordova/Binding/Cordova.dll (monotouch-bindings is one of the repos that you cloned during the prereqs step above).
  3. Use Cordova’s create tool in incubator-cordova-ios/bin to create a Cordova project (for example: ./create ~/src/xamarin/cordova-stub com.greenesse.cordova-stub CordovaStub)
  4. Copy Cordova.plist from your freshly created Cordova project’s cordova-stub/CordovaStub folder into the root of your MonoDevelop project. Note: be sure to set its build action to "Content" in MonoDevelop.
  5. Copy the entire contents of cordova-stub/www to a www folder in your MonoDevelop project. (I ran cp -r www ../CordovaTest/www from within the cordova-stub folder.)
    1. Be sure to set the build action for all of the files within your project’s www folder to "Content". I don’t like using multi-select in MonoDevelop for this, especially when there are crazy folder nestings and more than a dozen files, so I run the one-liner find www | awk ‘{ print "    <Content Include=\"" $0 "\" />" }’ to generate a bunch of lines for me to copy and paste into my .csproj file.
  6. In Interface Builder, delete the sample text from SecondViewControl.xib, and add a single View that takes up all of the space below the application’s toolbar.
  7. Wire the freshly added view to an outlet called bounds. Save your XIB file and return to MonoDevelop.
  8. Make the following code changes to SecondViewController.cs:


Voilà!

With that, you should be able to compile and run the application in the iOS Simulator, as well as on actual iOS hardware. You’ll notice that the second tab in the demo application does, indeed, now host a Cordova web view. You can add multiple CDVViewControllers, each pointing to a different WwwFolderPath and/or StartPage. The sky’s the limit!

Future exploration

Additional topics that we could explore in the future include:

  • Writing Cordova plug-ins entirely in MonoTouch.
  • Hosting a gallery of Cordova samples behind a native ListView.

Do you want to explore any of those? Do you have any other things we should dive deeper into?

Screencast

Embedding Cordova (PhoneGap) in a MonoTouch app from Scott Blomquist on Vimeo.

  1. If you’re like me, when you see the word “Cordova”, you should think “PhoneGap”. The name Cordova refers to the Apache open source project born from Nitobi’s PhoneGap. When Adobe acquired Nitobi, they kept PhoneGap as a trademark for their own value-added products and services that are built around the Cordova core. []

3 Comments

  1. Posted March 6, 2013 at 11:15 am | Permalink

    Hey Scott, Love the article. I’m currently working on an app that is a combination of Cordova and Monotouch, so this has been immensely helpful. Unfortunately when I tried to make the Cordova monotouch binding, and then reference that from my Project, I get an NSInvaidArgumentException unregognized selector sent to instance when I attempt to create an instance of CDVViewController. Any idea how I can get around that?

  2. Posted March 6, 2013 at 12:09 pm | Permalink

    I’ve posted my issue as a StackOverflow question, in case other people are encountering similar issues.

  3. Posted March 7, 2013 at 9:23 am | Permalink

    Apparently I forgot to attach the URL to the last comment, and I can’t edit my comment, so here it is http://stackoverflow.com/questions/15256719/trouble-with-monotouch-bindings-to-cordova-nsinvalidargumentexception

2 Trackbacks

  1. [...] found a guide that describes this scenario, so I know that this is possible, and the author has added a Cordova Binding to their fork of the [...]

  2. [...] found a guide that describes this scenario, so I know that this is possible, and the author has added a Cordova Binding to their fork of the [...]

Post a Comment

Your email is never shared. Required fields are marked *

*
*