Monodroid with Sencha Touch for App Development

Selecting development tools for an app depend on several criteria, e.g.

1. Should the app run on multiple mobile/tablet/pad platforms? (e.g. Android, iOS, Windows 8 etc.)
2. Access to native features
3. Is the UI “game like” (e.g. custom graphics) or “business like” (e.g. standardized forms/input fields etc.)

Mono – the opensource version of C#/.net platform – seems like an interesting platform wrt 1. multiplatform mobile support, i.e. Monodroid for Android, Monotouch for iOS and C# for Windows 8, and regarding 2. both Monodroid and Monotouch claim full access to all native APIs. Regarding type of UI – 3. “game like” UIs seems most efficiently developed using e.g. Lua-based Corona SDK, but for “business like” UIs html 5 seems to be a productive direction, e.g. with Sencha Touch combined with Phonegap

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Graphics;
using Android.Webkit; // WebView
using Android.Widget;
using Android.OS;

namespace testulf
{
	[Activity (Label = "testulf", MainLauncher = true)]
	public class Activity1 : Activity
	{
		protected override void OnCreate (Bundle bundle)
		{
		    base.OnCreate (bundle);
		    
		    var layout = new LinearLayout(ApplicationContext);
		    var webView = new WebView(ApplicationContext);
		    layout.AddView(webView);
		    SetContentView(layout);
		    webView.Settings.JavaScriptEnabled = true;
		    webView.SetWebViewClient(new WebViewClient()); 
		    webView.SetBackgroundColor(0);
		    webView.LoadUrl("file:///android_asset/overlays/index.html");
		}
	}
}

Monodroid with Sencha Touch for App Development

But when needing other native mobile features than what Phonegap and Sencha Touch has to offer but still wants the html 5 based UIs combining Monodroid (or Monotouch) for the native features and Sencha Touch for everything else seems like a potential idea.

This shows roughly how to integrate the two:

1. Download and install Monodroid and Sencha
2. Create a new Mono for Android Application (from Monodevelop), you now get a working example that can be deployed to the Android simulator
3. Replace the content of Activity1.cs in the generated example with the C# code below (note: replace ‘testulf’ with your project name), it opens a WebVeiw with Sencha content.
4. Slightly alter the Sencha Touch overlays example (the one I tested with Sencha Touch 1.1.1) by copying sencha-touch.js and sencha-touch.css to the overlays directory and updating references to them in the of index.html
5. Add the overlays example to Assets (from Monodevelop, right click on Assets)
6. Compile and run on simulator.

Just running Sencha Touch in a browser can be useful, but even more useful is communicating from Sencha back to Monodroid, this can be done by starting a small web server from Monodroid similar to as suggested by James Hughes in “Rolling Your Own PhoneGap with MonoTouch”

Best regards,
Amund Tveit (Atbrox)

Disclaimer: our blog have mainly covered “big data” (e.g. hadoop and search), but since small (touch) screens are increasingly important as generator of and consumer of big data – and for us – we make (at least) this blog post exception.