Anatomy of a c# iPhone app (with MonoTouch)

Wow - it has been a long time since my last post... and with good reason ;)

Firstly I've been busily writing (along with Wally, Chris, Martin & Rory) for Wrox' upcoming Professional iPhone Programming with MonoTouch and .NET/C# which is available for pre-order on Amazon. If you are interested in developing for the iPhone using C# and the .NET Framework it should be a great addition to all the resources already out there on the web.


Secondly I've been working on an iPhone app for MIX10 in Las Vegas next week (with help from Chris, Miguel & Geoff). Whether you are heading to MIX or just curious about C# and MonoTouch on the iPhone, why not download and give it a try?

Since the MIX10.app was first 'announced' on twitter #MIX10 there have been a number of requests for the source code. Unfortunately the source isn't public at the moment, however that doesn't mean we can't talk about "how it works". To start with, the MIX10.app is based on two previous iPhone apps written in C# with MonoTouch, and whose source code is available:

• Monospace09 code is on github and is discussed on my blog (and here)
• PDC09 is on github and discussed in this post

If you have an Intel Mac (with Snow Leopard) then you can download both the Apple SDK and the MonoTouch trial version for free and get both these C# .NET examples running in the iPhone Simulator for yourself. To deploy on a real iPhone requires certificates and licences (from Apple and Novell/MonoTouch respectively).

MIX10.app
Here's the overall class diagram for the MIX10.app (with the views shown too). Even without seeing the code it's clear that the classes themselves are not overly complex (ie. few methods are required; and inheritance can be leveraged to share common functionality).


The MIX10.app also uses Miguel's MonoTouch.Dialog framwork and he's posted a snippet of code on gist.github which is responsible for this screen (on the left)




And he also posted this code which creates the 'My Schedule' view on the right. Pretty neat use of Linq, eh? I'm not sure I've seen such an expressive user-interface expressed in so few lines of code before...

public class FavoritesViewController : DialogViewController {
  public FavoritesViewController () : base (null) { }
  public override void ViewWillAppear (bool animated)
  {
    var favs = AppDelegate.UserData.GetFavoriteCodes();
    Root = new RootElement ("Favorites") {
      from s in AppDelegate.ConferenceData.Sessions
        where favs.Contains(s.Code)
        group s by s.Start into g
        orderby g.Key
        select new Section (MakeCaption ("", g.Key)) {
          from hs in g
            select (Element) new SessionElement (hs)
        }
    };
  }
}

The object model closely follows the data available from the api.visitmix.com site's OData and RSS feeds. These are plain vanilla C# objects which also run on the server to download and package the data for the iPhone - the object graph is serialized by a .NET application on Windows Server 2003, downloaded by the WebClient class on the iPhone (thanks to MonoTouch) and de-serialized ready for display. A perfect example of the cross-platform possibilities facilitated by MonoTouch and having the .NET framework available on both server and mobile device.


Finally, here's a quick overview of ALL the screens in the app.


...and if you're a Windows Phone Series 7 fan-in-the-making, it should be obvious that having a shared set of services and functionality in C# that can be deployed across iPhones with MonoTouch, and Silverlight/Windows Phone 7 with only UI code needing to be customized is a great way to achieve maximum reach for your apps. The MonoTouch Roadmap is also targetting a Q3 release of MonoDroid, so with a bit of imagination it isn't hard to see where the future of cross-mobile-device development is heading...

MonoTouch MapKit.Delegate-precated

An update to MonoTouch (1.4.4) was released today with these changes/improvements (actually 1.4.5 was released a day later). One in particular caught my eye, since I've previously blogged about MapKit in MonoTouch.

MKMapView now has C# style events

So what does that mean? Basically the crafty team at Novell have turned the Apple SDK "pattern" of using a MKMapViewDelegate class to respond to "events" on its head, and instead exposed familiar .NET events on MKMapView itself. *

Here's a comparison of the 'old' and 'new' MKMapView class:


Here are two 'example' delegate methods that work in 1.4.4 (and .5). Firstly here's an example of wiring up one of the "new" events CalloutAccessoryControlTapped. NOTE the += used to attach the delegate to the event.

Map.CalloutAccessoryControlTapped += 
      delegate(object sender, MKMapViewAccessoryTappedEventArgs e)
{
   MyAnnotation myAnn = e.View.Annotation as MyAnnotation;
   using (var alert = new UIAlertView (myAnn.Title,
     myAnn.Subtitle + " clicked", null, "OK", null))
   {
      alert.Show();
   }
};

The second example is probably the most common one - GetViewForAnnotation - which you will need to provide if you want to do any sort of customization of your pins/callouts. NOTE how it is assigned with an equals sign and has a return value!

Map.GetViewForAnnotation = delegate (MKMapView mapView, NSObject annotation) {
   if (annotation is MKUserLocation) return null;
   MyAnnotation myAnn = annotation as MyAnnotation;
   var annView = mapView.DequeueReusableAnnotation ("pin");
   if (annView == null) {
      var pinView = new MKPinAnnotationView(myAnn, "pin");
      pinView.AnimatesDrop = true;
      pinView.CanShowCallout = true;
      annView = pinView;
   }
   else 
   {
     annView.Annotation = annotation;
   }
   return annView;
};

* imagine these are "air quotes" in this paragraph
p.s. This post has been updated since the comments below. The first two kinda don't make sense now... Thanks for the advice mdi.

iPhone OS 3.0 - Safari Geolocation

Having installed iPhone OS 3.0 today, the first thing I wanted to play with (after MMS and Copy/Paste) was the Safari Geographical Location support.

The best example code I found was this iPhone 3.0 geolocation javascript API example... however for some reason the Google 'static map' images wouldn't work for me. I'm not 100% sure why (since the blog post appears to show it working) - but Safari on the iPhone does handle http://maps.google.com URLs in a special way (at least it does if they're anchor/links, in which case it triggers the Maps application).

Anyway, since I was keen to get "something" working, I Googled a basic 'image passthrough proxy' - which seemed to fix the problem.


The HTML and javascript is very simple (it's repeated from here).

function handler(location) {
    var message = document.getElementById("message");
    var loc = location.coords.latitude + "," + location.coords.longitude;
    message.innerHTML = "<img src='MapImageHandler.aspx?centerPoint="+ loc +"' />";
    message.innerHTML+="<p>Longitude: " + location.coords.longitude + "<br />";
    message.innerHTML+="Latitude: " + location.coords.latitude + "<br />";
    message.innerHTML += "Accuracy: " + location.coords.accuracy + "</p>";
}
navigator.geolocation.getCurrentPosition(handler);

The MapImageHandler.aspx code is also very short (and was sourced from here).

That's about the most basic geolocation sample you could... now to find something useful to do with it! Thanks to the two authors of the code I stitched together (blog.bemoko.com and guy off CodeProject).

Using Seadragon (iPhone) with PhotoZoom content #2

Further to this post, rather than just point people to the RSS 'how-to' instructions I've uploaded a page to do the translation for you.

To access your PhotoZoom DeepZoom images in Seadragon on iPhone, go to the Add RSS Feed screen and type this Url (replacing craig with your PhotoZoom alias).

http://deepzoompublisher.com/PhotoZoom/rss.aspx?user=craig

You can read more on the DeepZoomPublisher.com website, including downloading the c# code.

Here are the iPhone screens using this url http://deepzoompublisher.com/PhotoZoom/rss.aspx?user=eflaten (from the previous post)






UPDATE: Seadragon seems to CRASH sometimes when accessing some RSS feeds. I think it is fixed now -- and was related to either (or all of) the following:
<description> tag containing linebreaks (must be all on a single line - fixed in generated RSS)
<link> tag being too long or containing unexpected characters (fixed in generated RSS)
<author> tag not appearing EXACTLY in the format user@domain (fullname) (I've put a fake email address in the generated RSS to 'fix')
Guid not being a 'real' GUID (instructions say it doesn't have to be, but maybe it does...)
Drop a comment if you experience problems with it.

Using Seadragon (iPhone) with PhotoZoom content

UPDATE: new post 29-Dec-08

I had a question (from Erland) on this post about viewing PhotoZoom images like this on the iPhone with Seadragon.

The Seadragon Use Your Own Images page says

PhotoZoom:

Enter a PhotoZoom username. The user's content will appear in the main listing, allowing you to view their albums.

However that option doesn't appear (at least on my iPhone...).


Until the PhotoZoom option is available, you can fairly easily create a 'shortcut' to one or more Deep Zoom images or collections using the RSS Feed option.

For example, from this PhotoZoom page you can View Source and extract this tag <param name="initParams" value="collectionUrl=http%3a%2f%2fphotozoom.mslivelabs.com%2fDZ%2f3%2fz8b0c8100950d45379c794efbc559f800%2f633654978975379998%2fcollection.xml" /> and this url http://photozoom.mslivelabs.com/ DZ/3/z8b0c8100950d45379c794efbc559f800/ 633654978975379998 /collection.xml which can be embedded in a custom RSS document (instructions) then viewed on the iPhone!



That short URL is a lot easier to type than those GUIDs on the PhotoZoom website; of course I've just uploaded that one as an example - you'll need to find a host to upload yours to... and here is how the image looks:




Incidentally, Seadragon Settings (in the iPhone settings area) shows a PhotoZoom option - so I'm not sure why it's missing from the application itself?

SeaDragon 'returns' - Deep Zoom on iPhone

I *love* my iPhone... and now the original Microsoft Labs codename for Deep Zoom - SeaDragon - has reappeared as the moniker for Microsoft's first iPhone application: SeaDragon Mobile!

There are some nice built-in collections to play with...


Notice the Virtual Earth Maps (Aerial, Hybrid, Roads)... SeaDragon even uses iPhone Location Services to tell me where I am! Virtual Earth on iPhone by stealth?!


It's more fun to view your own Deep Zoom images and Photosynths. Here is a collection of photos from Bhutan (created with DeepZoomPublisher) - press the [+] button in SeaDragon Mobile to Add Deep Zoom Content:




It's even easier to add a Photosynth collection (eg. CraigD)! Since there's a hook to Location Services, I wonder when I will able able to browse "Synths near me" (since Photosynth collections can be geocoded)...







You can also find or create RSS feeds of Deep Zoom images - example to come!


As Tim Heuer says, you can create your own Deep Zoom/SeaDragon images (for iPhone, and everything else) with Deep Zoom Composer too. Download SeaDragon Mobile here if you don't just search in the iPhone AppStore.

Add recipes to Notes.app (for iPhone/iPod Touch)

Following these instructions for adding data to the Notes application for iPhone, you could add your favourite iPhone/iPod Recipes for easy reference.



i.recipenow.net provides preformatted SQL to use with those instructions -- here is an example link for Sugar-grilled Banana Bagels, and how the resulting Note looks:



To 'import' any recipe as a Note, find it's ID by browing i.recipenow.net with Firefox or Safari, taking note of the URL when you find a recipe link you like

Then simply visit the link below, substituting the ID http://i.recipenow.net/i/r-note.aspx?id=ID_GOES_HERE and follow the instructions.

iPhone/iPod Touch Notes - fonts and styles

Turns out there is a lot you can do once you've got pscp to grab your notes.db, and a copy of SQLite Browser.

The basic structure of notes.db seems to be:

CREATE TABLE Note 
( creation_date INTEGER
, title TEXT
, summary TEXT)

CREATE TABLE note_bodies 
( note_id INTEGER
, data)

There doesn't appear to be a direct relationship between them, however the [Note] rows are always sorted by [creation_date] ASC, and the [note_bodies].[note_id] ascends in the same 'order'.

[summary] does not appear to be used on the iPhone/iPod Touch (Notes.app puts the first 50 chars of the note data in that column); and [creation_date] is iPhone_Unix_time (seconds since January 1st, 2001 UTC).

Anyway, without further ado, the steps to get this font-test source onto an iPhone/iPod Touch follow (for Windows):

1. Get required software

pscp (part of the PuTTY download) and
SQLite Browser

2. Download your notes.db

Create this batch file somewhere on your PC, along with a Library\Notes folder tree. Run the .BAT (entering the IP address when asked). Assuming the file downloads successfully, MAKE A BACKUP COPY of it somewhere.

DownloadNotes.bat
set IP=
set /p IP=Enter your iPod's IP address (eg: 192.168.1.101): 
pscp -r -pw alpine root@%IP%:/var/root/Library/Notes/* Library/Notes
pause

3. Open notes.db in SQLite Browser

The Database Structure tab will look something like this (additional metadata may be shown)

Go to the Execute SQL tab (like this)

Execute the following four (4) SQL statements, one after the other:

-- BACKUP YOUR notes.db FILE BEFORE YOU START

-- These queries were run using http://sqlitebrowser.sourceforge.net/

-- First, insert the 'header' for the note
-- Get the creation_date from http://i.recipenow.net/i/time/
-- The title appears on the Notes index page; the summary
-- does not appear to be used on the iPhone/Touch (for now)
INSERT INTO Note(creation_date, title, summary) VALUES(216352013, 'Html and Font Test', 'American Typewriter')

-- Now that we've added a new header, 
-- determine the new id and using it:
-- IMPORTANT : *** REPLACE the string MAX_NOTE_ID *** 
--             *** in BOTH the queries below      ***
SELECT MAX(note_id) + 1 FROM note_bodies

-- Then add the new row with that id
INSERT INTO note_bodies (note_id) VALUES ( MAX_NOTE_ID )

-- Finally, update the new row with the note body
UPDATE note_bodies SET data='Html Test<div><br class="webkit-block-placeholder"></div>
<div style="font-family:American Typewriter;">American Typewriter  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Arial;">Arial  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Courier New;">Courier New  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Georgia;">Georgia  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Helvetica;">Helvetica  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Marker Felt;">Marker Felt  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Times New Roman;">Times New Roman  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Trebuchet MS;">Trebuchet MS  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Verdana;">Verdana  <b>bold</b> <i>italic</i> <u>underline</u></div>
<div style="font-family:Zapfino;">Zapfino <b>bold</b> <i>italic</i> <u>underline</u></div>
<div><br class="webkit-block-placeholder"></div>
<div style="font-family:Helvetica;"><sup>1</sup>/<sub>2</sub> cup</div>'
WHERE note_id = MAX_NOTE_ID

4. Save notes.db

Save the changes you have just made AND QUIT SQLite Browser. You must quite the program so that the upload will work.

5. Upload your notes.db

As with step 2 (but in reverse)

UploadNotes.bat
set IP=
set /p IP=Enter your iPod's IP address (eg: 192.168.1.101): 
pscp -r -pw alpine Library/Notes/notes.db root@%IP%:/var/root/Library/Notes/
pause

6. Open Notes on your iPhone/iPod Touch

The new note should appear in your Notes application, and display with the complete set of fonts shown above


If you choose to send the note as an email, the formatting stays... so delete the text you don't want and start 'overtyping' in your favourite style for fancy email formatting

RecipeNow food site for iPhone/iPod now listed!

Google Analytics shows lots of inbounds from:

• ilounge.com food category
• appSafari food category

Just a few more features to add before submitting to Apple's webapp list (basic emailing works now).

p.s. for iPhone 'bleeding edge' developers, it doesn't get any better than Joe Hewitt, iPhone God who now works at Facebook (and built the awesome m.facebook.com version). Cool...

Backup (Preferences, Notes, etc) data from jailbroken iPod Touch

If you have jailbroken your iPod Touch (not recommended, of course...) and perhaps added iPhone applications such as Maps, Notes, Mail, etc (not legal...), you might wish to back-up the data you create on said applications (given that iTunes isn't going to offer to help you out since you aren't using an iPhone).

So how to find and copy down the data to your PC?

This modmyifone thread: How to Backup lists a few of the 'data files' used by various applications. The tip that follows simply copies ALL files from /Library/ to your local disk.

Create a Windows batch file and place it in the same directory as folder named Library and a copy of pscp.exe, iBackup.bat

set IP=
set /p IP=Enter your iPod's IP address (eg: 192.168.1.101): 
pscp -r -pw alpine root@%IP%:/var/root/Library/* Library/
pause

When you run this, the command prompt will appear and wait for you to enter your iPod's IP Address [Settings » Wi-Fi » (your net) » IP Address] . It will then download everything from your iPod's /Library/ directory, so you get the main data files and a whole pile of cache data as well - about 13Mb in all (on my device).

Points to note (based on an iPhone, of course):

• /Library/Preferences/* is probably something you'd want to keep all of, just in case


• /Library/Notes/notes.db is apparently an sqlite data file. There's an sqlite gui too (which I haven't tested yet). Hopefully it'll be possible to download/edit and upload this file.


• /Library/AddressBook/AddressBook.sqlitedb is even named as an sqlite file. iTunes will sync this for iPod owners since it's built-in


• /Library/Calendar/Calendar.sqlitedb - iTunes will sync this for iPod owners since it's built-in; in fact, it's one-way for the iPod because the Touch Calendar is read-only (for now)


• /Library/Keyboard/dynamic-text.dat is apparently a mini-key-logger! I guess it's where they keyboard 'learns' (?)


• /Library/Mail/* contains a whole pile of different bits - probably best to use IMAP and rely on your server copy for that

Please remember that I've only downloaded the data described above - I haven't had the need to upload any of it, so there's no guarantee that the copies are a perfect backup. But if you did lose your iPod for some reason, there's a chance it'd be recoverable.

I can't test on a Mac; but if you have one you can probably figure out how to use Terminal to grab the files.

UPDATE: sqlitebrowser works a treat

Recipes on your iPhone/iPod Touch (Safari)

In a little break from working with Silverlight and maps, I've added an iPhone/mobile-Safari interface to recipenow.net, at

i.recipenow.net

There is at least one other mobile-Safari recipe site (already listed on Apple's iPhone application listing) - 101 Cookbooks - iPhone edition, and I'm sure there'll be more if sites like epicurious.com decide to tackle the mobile space.







More iPhone/iPod Touch ideas to come... thanks to Joe Hewitt's iUI js/css package for iPhone development.

NOTE: to access the mobile recipes from a PC, use the Safari beta or FireFox; for the Mac, use Safari (of course!).