Separating Abstract UI and Concrete UI for Cross Platform Development (WinForms, Cocoa, GTK+)

5
votes

I'm currently making an application that has shared code on the backend. As presentation layers I'm using WinForms, Cocoa (MonoMac) and GTK# (Linux).

I'm looking for a way to describe my user interface in an abstract way, so that the concrete UI implementations (Cocoa, WinForms, GTK#) only need to worry about displaying and drawing.

This so I can - wire up events (button clicks, data input) from the concrete views and bind them to a function in the controller/or the abstract view handler..? - let the controller/abstract view/model update the view..?

So basically i'm trying to get a kind of IView, IController and IModel setup going.. or Model-View-Presenter, or MVVM, are there any example applications out there...? Because there's a lot of theory, but no concrete examples.

EDIT January 2017: "Electron"

For those wanting to make cross platform applications for desktop both on LINUX / WINDOWS and MAC I'd suggest also looking into Electron (electron.atom.io). It's basically Chromium+NodeJS - which means UI design for one browser with the power of Node (and npm packages). You can also hook .NET code via EdgeJS.

1
c#winformscocoamodel-view-controllermonomac

1 Answers

4
votes

EDIT January 2017: "Electron"

For those wanting to make cross platform applications for desktop both on LINUX / WINDOWS and MAC I'd suggest also looking into Electron (electron.atom.io). It's basically Chromium+NodeJS - which means UI design for one browser with the power of Node (and npm packages). You can also hook .NET code via EdgeJS.

Every project will have it's own needs, but others trying to find an answer, here's what I implemented.

I decided to investigate the Passive Model-View-Presenter design pattern. For detailed reading check the Wikipedia article, or this article by Martin Fowler. Another alternative implementation is the one by "thedersen.com" - read the article here.

Custom Implementation

I ended up making my own basic implementation of the design pattern. This for better understanding the pattern, and having more control over the implementation details. The latter one is important as the implementation would need to be able to handle multiple UI techniques other than the standard Microsoft ones. E.g.: Cocoa (MonoMac), GTK# (GTK+), etc...

The implemantation will implement the Passive View, and will keep these guidelines in mind:

  • Interaction with the model is handled exclusively by the presenter;
  • The view is updated exclusively bu the presenter;
  • The view may inform the presenter by broadcasting events;

Diagram

enter image description here

Framework Code Check this pastebin for the interfaces and base classes. http://pastebin.com/k6xhwrJ8

Example Code

The example will show a basic loading screen (bootstrapper). All code is in never expiring pastebins. Some methods (for creating and instantiating controls) are not present, as this is not the focus of the example ofcourse.

Example of how it looks on Windows. On MacOS the view will have it's native UI ofcourse.

That wraps up my basic solution. It's baisc yes, but it does help me create backend code and don't worry too much about how to link the views together.

Extension points may include:

  • Adding a presenter and view manager, so one can work the IoC way...
  • Adding more extended base views and presenters for different scenarios...