Existing Frameworks

A few of the existing options for cross platform UI development (that I’ve seen people use) in .NET are GTK# and Windows Forms.

I’ve seen it time and time again; someone trying to wrangle an existing Windows Forms application to work on OS X.  It looks horrible and functions even worse, which is not surprising as mono’s implementation of Windows Forms is largely unmaintained and does all of its own control rendering.

GTK# does a decent job and is fairly well supported on all platforms, however it too does not look native on OS X and cannot easily be packaged with your app on Windows or OS X.

Multiple Implementations

Another alternative to using a cross platform toolkit is to write multiple versions of your UI, and share only the back end logic of your code. This is one of the better ways of getting a real native experience on each platform, but requires a lot of work if your UI is complex or has a lot of UI-specific logic. Ideally, if your interface will be similar across platforms, you should be able to share the code.

Here is a (simple) comparison of UI Frameworks for .NET:

^{*Extra dependencies that are typically not already on each platform}

Enter: Eto.Forms

Eto.Forms, which is a new BSD licensed (commercial app friendly) open-source UI framework, provides a new way to build desktop applications in .NET.  You can write simple, clean code and then have that code run natively, with no extra dependencies that wouldn’t already be available on each platform. Instead of choosing a framework above, you can target them all! (or, well a good portion of them.) The platforms that Eto.Forms supports currently are:

• Windows using Windows Forms or WPF
• OS X using MonoMac (creates an .app bundle with no additional dependencies)
• Linux using GTK# (which come pre-installed or easily installed on popular distros such as Ubuntu and OpenSUSE)

Use Native Power! Without the headache.

A typical drawback of using a cross platform framework is that you can’t necessarily take advantage of each platform’s capabilities. Since Eto.Forms is just an abstraction layer, all of the power of each platform can still be fully utilized if need be, by way of its built-in styles mechanism, by creating your own abstracted controls, or by wrapping your Eto.Forms shared code inside of an existing native app.

What does it all mean?

Of course, no framework is the be-all end-all of frameworks.  Eto.Forms is relatively new, thus there will be use cases that it does not support yet.  Being open source you have the advantage that you can add any functionality as required, though a full compliment of typical controls are already fully functional on all platforms. This means you can create apps that look and work great on all platforms, with one set of code.

Start using & contributing!

Check out the Eto.Forms github page and wiki here: https://github.com/picoe/Eto. You can find support for Eto.Forms on google groups, or chat with other Eto.Forms developers on IRC.

Typically, the user interface would be stored in a machine/human readable format. This makes it easier to save/load the interface using tooling/designers, or to manually hand-write via a text editor. Some formats that would be good candidates would be XML (e.g. Xaml or a custom schema), or Json.

With the latest version of Eto.Forms in github, you can now design user interfaces for WinForms, WPF, GTK#, iOS/MonoTouch, and Cocoa/MonoMac with a json definition. Since Json is much less verbose yet very flexible, it was a great choice. JSON.NET is one of the best .NET libraries to handle serializing/deserializing Json data to and from .NET objects, which is what I chose to use for this purpose.

An example of using json to build UI in Eto.Forms is quite simple, yet elegant:

{
	Title: "My Form",
	Layout: {
		$type: "DynamicLayout",
		Rows: [
			{ $type: "TextBox", $name: "myTextBox" },
			null, /* expanding space */
			{ $type: "Button", Text: "Click Me!", Click: "HandleClick" }
		]
	}
}

You can easily use this json with a class like so:

public class MyForm : Form
{
	protected TextBox myTextBox;

	public MyForm ()
	{
		Eto.Json.JsonReader.Load (this);

		// use myTextBox here to set initial values or bind to a model object
	}

	protected HandleClick (object sender, EventArgs e)
	{
		MessageBox.Show ("You clicked the button!");
	}

}

This yields an interface that looks like so:

This loads the MyForm.json from the same assembly/namespace as the MyForm class. There are many other options of where and how to load the json (e.g. you can use a stream to load the json from database, external file, etc). You can also load the json without the backing class – though with the backing class, it allows you to hookup events and member variables to instances of the created controls.

An example of a more complex form can be found in the Eto.Test application here.

To try it out, clone the Eto.Forms github repository here and run the Eto.Test application.  Enjoy!

Note that Eto.Forms does indeed support xaml as well (in case you were wondering). It, however, is not as well supported on all platforms (e.g. on mobile devices or mono < 2.11).

The problem with doing this is Cocoa (and thus MonoMac) typically requires at least one xib for your main window and menu. If you do not provide one, your application actually loads the nib for Finder.app (why??), which causes problems. Thanks to some teachings from this post here, we can translate that for use in MonoMac.

Here’s a little excerpt from the Eto.Forms code that shows the magic needed to create a nibless monomac project. What this does it skip loading the nib if the filePath to the nib is empty, which is what happens when you start an app with no nib defined in NSMainNibFile.

public static class EtoBundle
{
	static IntPtr selEtoLoadNibNamed = Selector.GetHandle ("etoLoadNibNamed:owner:");
	static IntPtr selLoadNibNamed = Selector.GetHandle ("loadNibNamed:owner:");

	public static void Init ()
	{
		var bundleClass = ObjCExtensions.GetMetaClass ("NSBundle");
		bundleClass.AddMethod (selEtoLoadNibNamed, new Func<IntPtr, IntPtr, IntPtr, IntPtr, bool> (EtoLoadNibNamed), "B@:@@");
		bundleClass.ExchangeMethod (selLoadNibNamed, selEtoLoadNibNamed);
	}

	static bool EtoLoadNibNamed (IntPtr self, IntPtr sel, IntPtr filePath, IntPtr owner)
	{
		var str = new NSString (filePath);
		if (str.Length == 0)
			return true;
		return Messaging.bool_objc_msgSend_IntPtr_IntPtr (self, selEtoLoadNibNamed, filePath, owner);
	}
}

Note: This uses some code from ObjCExtensions to perform its magic, which are just wrappers to some objective-c functions.

Now you just call EtoBundle.Init() right after your NSApplication.Init(), and be sure to set your app delegate manually:

NSApplication.Init();
EtoBundle.Init();
NSApplication.SharedApplication.Delegate = new MyAppDelegate ();
NSApplication.Main(args);

.. and finally, in your Info.plist, just delete the Main nib file name (NSMainNibFile).

A full working sample application can be downloaded here.

Enjoy!

• Draw ANSI and ASCII with your mouse
• Load & Save 24-bit colour ANSI files
• New configurable ANSI/ASCII brush
• New Colour brush
• New text drawing tools: Pencil, Line, Circle, Box, Ink Dropper
• Many Amiga and DOS fonts added, in multiple sizes
• Bug fixes

Download it here

Screenshots

• MONO_IOMAP – case insensitivity behaviour for file i/o. (more info)
• MONO_OPTIONS –  options to pass to the mono runtime (e.g. –gc=sgen)

The way to do this is to put these into your Info.plist for you application, under an LSEnvironment dictionary key.  This is mentioned in Apple’s documentation.

Steps:

1. Open your Info.plist in MonoDevelop
2. Add a new top-level entry called “LSEnvironment”
3. Change its type to Dictionary
4. Add a child entry for each environment variable you wish to set

Update: Make sure you do a clean of your project after updating your info.plist, otherwise monodevelop won’t copy the new changes over.

Most notably, ezFeeds is now a universal application and has a beautiful new interface designed for iPad!

Other new features:

• Image caching for offline reading
• Improved accessibility support
• Feed favicons
• Many performance & memory optimizations
• Show starred, unread, and shared for folders and feeds
• Added Email Link and Copy Link/Article article actions
• Options to show/hide article actions
• Option to synchronize current feed/folder only
• Find recommended feeds based on your current subscriptions
• Can now cancel synchronization
• More enhancements
• Fixed some minor bugs

I hope you enjoy it!

Here are some screenshots of the iPad version:

Hope you all like it! It should be available in the App Store shortly!

Edit: It is now available!

What’s new?

- Updated for iOS 4 compatibility and high resolution graphics
- Support for Multitasking and synchronizing in background
- Post links to Facebook, ReadItLater, and Instapaper
- Google Mobilizer & Instapaper Mobilizer support
- Added Shared items syncing
- Improved reading visual style
- New graphical Actions menu
- Setting to specify your own Bit.ly account
- Setting for article text size
- Setting to open article/links with original, google mobilizer, or instapaper mobilizer by default
- Open links in Safari (instead of built-in browser)
- Setting to auto-sync after all articles are read
- Settings to specify how long Starred and Shared items are kept
- Option to enter descriptions for Instapaper
- Fixed a few synchronization bugs with folder order

ezFeeds has been in development for about five months, and was born to provide a fully featured Google Reader (news reader) client, opposed to a partial, slow, or read-only variation.

Some of the key goals that were taken into consideration when building ezFeeds:

• Must be FAST, even when you have subscribed to tons of feeds
• Reading must be EASY, which is why there is a ‘Next Unread’ button.  This allows you to read in the same order of your feeds.  Want to read all items chronologically?  Just tap on the Unread folder – it’ll show arrows in the bottom toolbar instead of the Next Unread button.
• Provide FULL synchronization of feeds, folders, and their order (e.g. drag and drop feed order in google reader will sync to ezFeeds and vise-versa)
• Allow users to DISCOVER feeds on the device, with global and user feeds on popular feed sources such as Google Blog Search, Google News, Twitter, eBay, Myspace, Flickr, Youtube, Blogger, del.icio.us, WordPress.com, and even specify a custom URL.

Here’s what it looks like:

Adding a feed:

Click here for a list of features, details, and more screenshots.

There are a few things that didn’t make it into the first release, since they are not needed for a great reading experience, but are coming:

• Shared & Notes (do people really use these anyway?)
• Posting to Facebook, Read It Later, and Instapaper
• Optionally Cache Images for full offline reading
• Remember last position
• Favicons
• Possible iPad / OS X Version
• More yummy tidbits that I’ll share if you’re nice!

I’m not too sure how long it’ll take to be available on the App Store, but I will let everyone know when it is!

Previously, we were using mojoPortal, which is an excellent ASP.NET based CMS, however compatibility with mono was a little lacking.

WordPress was chosen as it provides a huge community, lots of themes and plugins, and works seamlessly with OS X Server. The installation took only about 5 minutes, and was extremely straight forward (this means I didn’t read any documentation).