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://

Comments

  1. Thanks for this article, any updates yet?

    ReplyDelete
  2. Not yet - been busy on our FESTIVALstar app.

    I'm a little worried about getting an wpp through the appstore with the btouch Three20 port in it - though they do say it's completeely cosha now.

    I'm also going to look into porting route-me.

    I'll update you when I've gotten back into it. I expect that to be some time after next week :)

    ReplyDelete
  3. Can you fix the link to your sample project? I get a 404 error when clicking the link. Thank you!

    ReplyDelete
  4. Would it be possible to get the link to the example application fixed as I'm trying to get three20 working and having a bit of trouble.

    Thanks

    Nath

    ReplyDelete
  5. If anyone else is trying to get this to work there are a few changes since this blog post.

    Three20 has been split into smaller modules so when you build the xcode project you need to copy all of the libThree20*.a files to the root of your .net app.

    You then need to change the extra arguments to be

    -gcc_flags "-L${ProjectDir} -lThree20 -lThree20Core -lThree20Network -lThree20Style -lThree20UICommon -lThree20UINavigator -lThree20UI -ObjC -all_load"

    This references all of the modules from Three20 in dependancy order.

    Once this is done you're good to go. A bit of sample code for a launcher view controller.

    using System;
    using Three20;
    using MonoTouch.UIKit;
    using MonoTouch.Foundation;
    namespace Yournamespace.Application
    {
    [MonoTouch.Foundation.Register("LauncherViewController")]
    public class LauncherViewController : TTViewController
    {
    public LauncherViewController () : base()
    {
    }

    public LauncherViewController (IntPtr p) : base (p) {}

    public override void ViewDidLoad ()
    {
    base.ViewDidLoad ();

    this.Title = "Launcher View";

    TTLauncherView launcherView = new TTLauncherView();
    launcherView.Frame = this.View.Bounds;
    launcherView.BackgroundColor = UIColor.Black;

    launcherView.Pages = NSArray.FromNSObjects(NSArray.FromNSObjects(new TTLauncherItem(){Title="item 1"}));

    this.View.AddSubview(launcherView);
    }
    }
    }


    This dos pretty much nothing but will show you if your setup is working, you should get a black screen with a single launcher item.

    Hope this helps anyone looking into three20 for monotouch.

    Nath

    ReplyDelete
  6. HI Nathan

    I've been busy with Sonatribe.com so not even been looking at the replies on this site i'm afraid. Thanks for posting the update :)

    ReplyDelete
  7. Hi wayne-o
    I fail to make the three20.dll from the sources
    (/Developer/MonoTouch/usr/bin/btouch three20.cs -s:enum.cs).
    There is a kind of exception.
    And old three20.dll binary does not work well for new three20 obj-c libraries cause there are missing messages or something like this.
    Will you go on with this?
    Thanks anyway:)

    ReplyDelete
  8. Hi

    I am trying to do the same for the Google analytics for iOS.

    http://code.google.com/mobile/analytics/download.html#Google_Analytics_SDK_for_iOS

    Can you provide any help with this

    Thanks

    ReplyDelete

Post a Comment