Saturday, 5 March 2011

"M"osetta Stone

Some more thoughts on cross-platform mobile development (MonoTouch, MonoDroid and Windows Phone 7) from yesterday's post - a 'rosetta stone' (not this one) to translate between the three platforms (Not that each of these things is exactly equivalent - they're matched up where the concept/role/function seems similar to me).
"View"XIB (Interface Builder)Xamlaxml
UIViewControllerPhoneApplicationPage (codebehind)Activity
n/a (UIAutoResizing)StackPanelLinearLayout
UITableViewCellListBox.ItemTemplaten/a (any view)
UITableViewSourcen/a (binding, IEnumerable)BaseAdapter
Navigation "Controller"NavigationController. PushViewController()NavigationService.
n/a (object)Xaml UriIntent.SetClass()
n/a (object properties)Xaml Uri querystring paramsIntent.PutExtra() .AddFlags()
n/a (object properties)NavigationContext
Intent .GetXXXExtra()
"Model"C# .NET objects - shared thanks to Mono on iOS & Android. Also WebClient, Linq, Generics, Xml, Serialization, etc... :-)

One major difference between iOS and the other two (both in terms of coding and also UI design) is the presence of hardware buttons and the back-stack.

Hardware buttons
The most important hardware button is Back (covered next) however Android's Menu button is also significant for the impact is has on UI design compared to iOS and WP7. Both Apple and Microsoft's designers like the application menu (UITabBarController, ApplicationBar) to be permanently visible. Google, on the other hand, provides the Menu button to show the menu, meaning that most of the time it is hidden. This means your Android app UI might need to provide other visual clues so that navigation/features/options are more discoverable.

Back stack
Both Android and WindowsPhone7 devices have a hardware Back button supported by the respective SDKs via the 'back-stack' which is analogous to your web-browser History: each "View" has an "address" (a Xaml Uri in WP7, an Intent in Android) which is stored as the user navigates through your application. At any time (unless you intercept it) the hardware Back button allows the user to cycle back through previous views until they have exited your app.

iOS utilises a similar navigation metaphor in its UINavigationController - however the back button is 'soft' (displayed in the top-left corner of the screen) and the scope is limited to the set of views that the developer chose to include in that navigation context.

MonoDroid meet MonoTouch & WindowsPhone7

This post follows the previous one about building for MonoTouch and WindowsPhone7 by porting the example to Google's Android platform using MonoDroid.

Here's how it looks (no need to identify which platform is which :)

As before, the code is available on github/conceptdev/RestaurantGuide - for comparison here is a shot of the three .sln files.

A couple of observations:
  • One of the reasons the iOS/MonoTouch solution is so 'neat' is because I have not used the 'UI Designer' for that platform (ie. Interface Builder) so there are no 'markup' files for the user interface (ie. .xib files). The entire layout is done in C# for the MonoTouch example, whereas the WP7 and Android version use Xaml and axml respectively.
  • These examples 'just work' - they don't claim to be best-practice in designing an app for any of these platforms*.

* for a quite neat cross-platform design (at least across MonoDroid and WP7) see @gshackles TwitterSearcher sample

p.s. does anyone know what the Android equivalent of an "indexed list" is? Pls comment or @conceptdev... thx