WHAT'S NEW

This document has been updated but it is not at all complete. The basic concepts are outlined below but I will get back to this soon and make a real tutorial. MonoMobile.Views is simple to use yet very complex internally to do all of the magic that you see on screen.

Totally redesigned and redeveloped the codebase.

Released Beta 1.0

It is almost done. I have a few more things to look into like:

Add a real sample
Add more Documentation
and finish up any other bugs I find.

Robert Kozak (rkozak@gmail.com) @robertkozak - Twitter

Current Version

Beta 1.0

MonoMobile.Views

MonoMobile.Views started as adding WPF/Silverlight style binding to MonoTouch.Dialog but in doing so it required more changes than expected and so it became this project rather than just a branch from MonoTouch.Dialog.

Originally, I had retained most of the concepts of MonoTouch.Dialog but after a redesign it is no longer like MonoTouch.Dialog except maybe in spirit

MVVM, or the Model-View-ViewModel pattern is a pattern that promotes the separation between Data, Business Logic and User Interface. The Model describes the Data, the View describes the UI and the ViewModel sits between the Model and View and contains all of the business logic.

The key to the MVVM pattern is the communication between the layers.

Data binding is one way to accomplish this communication in generic manner.

MonoMobile.Views is a framework which makes it very easy to create UI on the iPhone/iPad/iDevice that is represented via Cells and UITableView. It removes the need to worry about UITableViewControllers, UINavigationControllers, and DataSources. Developers only need to create Views. (See samples below)

Project Status

MonoMobile.Views is being released as Beta 1.0. I would like feedback and I have plans to take this to MonoDroid and possibly WP7. If this works we can have a common platform for all 3 major phone/tablet OSs. If anyone wants to take on one of these projects go ahead I would love to see it.

Take a look at the samples I provide to give you an idea what can be done.

If you want to help out on this project please send me a message.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Application

Creating an application in MonoMobile.Views is very easy. You don't need to create a app delegate. In the Main method just call Run passing in a Title, the type of the view you want to display and any optional args.

namespace Samples
{
	using MonoMobile.Views;
	
	public class Application : MonoMobileApplication
	{
		static void Main(string[] args)
		{
			Run("Sample View", typeof(TestView), args);
		}	
	}
}

if you want to customize the run behavior there is an overload where you can pass in the name of your AppDelegate.

namespace Samples
{
	using MonoMobile.Views;
	
	public class Application : MonoMobileApplication
	{
		static void Main(string[] args)
		{
			Run("AppDelegate", args);
		}	
	}
}

The main Properties and Methods of MonoMobileApp are:

	public static Type[] ViewTypes { get; private set;}
	public static UIWindow Window { get; set; }
	public static UINavigationController NavigationController { get; set; }
	public static List<object> Views { get; set; }
	public static List<DialogViewController> DialogViewControllers { get; private set;}

	public static DialogViewController CurrentDialogViewController { get; }
	public static UIViewController CurrentViewController { get; } 

	public static string Title { get; set; }
	public static Action ResumeFromBackgroundAction { get; set; }

	public override bool NetworkActivityIndicatorVisible  { get; set;}


	public static bool IsSearchbarVisible();
	public static void ToggleSearchbar();

Views and ViewModels

MonoMobile.Views is an MVVM framework but doesn't have to be used as a "pure" MVVM framework. MVVM separates out the Model ViewModel and View. Model gets and sets data, ViewModel packages that data and performs all of the business logic on the data and the View renders the data. This framework concerns itself mostly with the View portion.

Take a look at this HelloWorld app:

	namespace HelloWorld
	{
	  using MonoMobile.Views;
	  
	  public class HelloView: View
	  {
	  [Section]
	    [Entry]
	    public string Name { get; set; }
	
	  [Section]
	    [Button]
	    public void Hello()
	    {
	      Alert.Show("Hello World", string.Format("Hello {0}!", Name));
	    } 
	  }
		
	  public class Application : MonoMobileApplication
	  {
		public new static void Main(string[] args)
		{
			Run("HelloWorld", typeof(HelloView), args);
		}
	  }
	}

Here we have created a View with a few CellViewTemplates to tell the framework how to render the cells. We have two Sections one has an entry type cell and the other has a Button.

In this particular case, there is no ViewModel and there is no Model. They are both optional but will probably be needed for more advanced apps.

The framework contains a ViewModel base class which implements INotifyPropertyChanged and will fire off notifications that the UI will respond to. So if you change a property of a ViewModel in code it will be reflected on the screen immediately.

The framework is smart enough to keep both the View and ViewModel in sync. So for example, if you have a PersonViewModel with a FirstName property set to "Robert" and a PersonView with the same property name FirstName the framework will make sure that both of these properties have the same value.

On a Get MonoMobile.Views will check first to see if you have a ViewModel (found in the View's DataContext property) and return that and if not then it returns the value from the View.

On a Set MonoMobile.Views will set it both in the ViewModel (if exists) and in the View, and also in the UI (via IHandleNotifyPropertyChanged) if you implemented it.

Data Binding

I've made a few changes to MonoTouch.Dialog to support data binding.

First, there is a no longer an Element type. When a View is parsed lightweight MemberData objects are created to represent the MemberInfo and is Value(s). There is a reference to the View and the ViewModel values.

Sections are created to hold a reference to these MemberData and CellViewTemplates. Cells are created for each MemberData and Cells can have multiple CellViewTemplate Types associated with them. CellViewTemplates have a DataContext (IDataContext<MemberData>) that allows access to the Values of the View and ViewModel.

For example: The EntryAttribute has a UITextField and in this case the DataContext binds to the Text property of the UITextField.

	[Entry]
	public string MovieName 
	{
		get;
		set;
	}

CellViewTemplates

CellViewTemplates are a combination of an Attribute, UIView, IValueConverter and Theme. This is a very extensible part of MonoMobile.Views framework. With a CellViewTemplate you can update, take action on a cell, bind data, change its appearance and many more things.

An associated UIView works like a controller and gives you access to Update, Selected of the cell. These features are represented via interfaces so that you can create only what you need and no more.

There are 22 interfaces you can apply to your cell's UIView:

IAccessoryView
IActivation
ICaption
ICellContent
ICellViewTemplate
ICommandButton
ICustomDraw
IDataContext
IFocusable
IHandleNotifyCollectionChanged
IHandleNotifyPropertyChanged
IInitializable
IInitializeCell
INavigatable
IRequestImage
ISearchable
ISearchBar
ISelectable
ISelectableInterceptor
ISizeable
ITableViewStyle
IThemeable
IUpdateable
IValueConvertible

There is a base UIView to use with cells called CellView which has some of these features coded by default.

public class CellView<T> : UIView, 
	IDataContext<MemberData>, 
	IInitializable, 
	IInitializeCell, 
	ICellViewTemplate, 
	IUpdateable, 
	ICaption, 
	IThemeable, 
	IHandleNotifyPropertyChanged

You can use this base class and override the methods and properties as you need.

Themes and IValueConverters are described below.

Data Conversions and Value Converters

MonoMobile.Views gets data from both the ViewModel and View which is bound via a MemberData object. As mentioned earlier on a Get the value is returned from the ViewModel and if there is no ViewModel then it is returned from the View. On a Set the ViewModel is set and then the View so both the View and ViewModel is always in sync.

Sometimes, you want to bind an integer value to a Entry CellView which has a DataContext property of type string or you want to bind a float and you want to display it as $10 rather than 10.0.

You do this with an IValueConverter. IValueConverter has Convert and Convertback methods that is part of the binding update process to automatically take care of conversions for you. Using a ValueConverter on a property or field of the view (using the ValueConverterAttribute) will convert from the ViewModel value type to the the type expected by the view.

Conversions for built in types like string, int, bool, float etc are handled automatically. Any extra conversions you want to do need tp be done by an IValueConverter.

Here is a simple example of converter that takes a float and returns a string formatted as a Percentage:

public class PercentConverter : IValueConverter
{
	public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
	{
		if