Thursday, April 8, 2010

Three20 with Monotouch

Before I get into this I should say that I'm working with the latest build (monotouch-2.0.1+thumb+sdb.pkg) of MonoDevelop which includes some fixes to enable this to work on the iPhone - it works ok with the simulator so we're only going to go over this here. The update to MD should be available pretty soon after writing this tho as will the update to show you how to reconfigure everything to get it on the device.

Three20 is a really cool UI framework for the iPhone. From their site: "Three20 is an iPhone development library. It's the code that powers the Facebook iPhone app and many other apps in the app store".

Nice.

One of the main components in the framework that caught my attention is the tab bar. Creating tabs for the iPhone are a known PITA so having the hard work done for me is a boon. Reusing components is a good idea - if they're used by many and tested stable - it saves me having to go through all that pain. Three20 has a stack of other nice UI components and aggregate components too such as the photo browser. Plenty of excuse to get the envy.

I use Monotouch to write my client code for iPhone apps. Monotouch brings .Net to the iPhone.

Nice.

Problem being that you can't just go ahead and grab some code written in Obc C and throw it at your Monotouch project. It just wont happen.

Not nice.

So, along comes the Binding Objective-C Types tutorial. In a nutshell, we can use the btouch tool to compile C# bindings that reflect the Obj C framework we'd like to use in our .NET Monotouch projects! Woop Woop!

Nice.

As it happens, there is already a project on Google Code that has some APIs already bound. Three20 was started but not complete. In order to get the code to work there are a few steps you need to complete, you kinda have to go out of your safety zone and get your hands dirty in the XCode side of the fence.

To work with a bound API there needs to be a few things in place:
  1. The compiled contract (your C# binding file compiled using btouch).
  2. A *.a file - the compiled framework we'd like to work with (in our case libThree20.a).
  3. Some project settings and tweaks - nothing major.
So, to get the compiled contract (I'm going to work with the Three20 code in the google btouch project) we need to download the code and run btouch. So go grab the code, put it somewhere safe and then fire up terminal and run the following command:

/Developer/MonoTouch/usr/bin/btouch three20.cs -s:enum.cs

Notice that btouch doesn't need the libThree20.a in order for it to create the contract. It derives all it needs from the bindings. This command will generate a Three20.dll file which we will want to reference in our project later.

So, onto step 2. Building the libThree20.a file. Fire up the terminal and run the following:

git clone git://github.com/facebook/three20.git

Oncve you have the latest Three20 code you need to fire it up in Xcode and build it for the simulator. To do this navigate into the downloaded folder three20/src/Three20.xcodeproj

Make sure you have your build settings configured as below:




Now just select build/build

This will create the libThree20.a file needed for our binding to hook into. In Xcode, from the groups and files explorer, select products, right click the libThree20.a file and select 'Reveal In Finder'. Copy the file and paste it into the folder where you have the Three20.dll file.

Now onto the actual Monotouch project! Fire up monotouch and create a new iPhone project. before doing anything we need to add the Three20.dll as a reference. Next copy the libThree20.dll file into the root of your new project. With that done we have some final tweaks to the project to get things going. Right click on the project and select 'Options'. Next select iPhone build. Make sure you have the same settings as below for your debug/simulator configuration:


The extra arguments section needs this pasted in:

-gcc_flags "-framework QuartzCore -L${ProjectDir} -lThree20 -ObjC"

With all that done - we can start building the app using Three20!

Rather than go over a load of boiler plate stuff you can download the project from http://isit.gd/scratch2.zip

It shows the use of Three20 tabs in an iPhone app:


Once I have the project working with iPhone I'll update this post and code. 

I'll be blogging about the other great controls available in this framework and the amazing MonoTouch framework in the coming days and weeks.

w://