Legomaster Building and Coding

So, from part 1 with MonoMobile.MVVM we can add some controls to a screen. That has limited usefulness since rarely do you need just one page a few entry controls for any apps, even data driven apps.

Now let’s make something that’s almost useful. We won’t persist data right now, but that can be tacked on later.

We’ll have to start with a new View.

public class NotesView : View
{
	public NotesView ()
	{
		var dataModel = new NotesDataModel ();
		Notes = new ObservableCollection<NoteViewModel> ();
		foreach (var item in dataModel.Load ())
			Notes.Add (item);
	}
	[List(ViewType = typeof(NoteView))]
	public ObservableCollection<NoteViewModel> Notes { get; set; }
}

We apply the [List] attribute so that this property is the basis for this view.The constructor loads up a DataModel to generate some generic data. I wouldn’t worry about that part right now, it will change when we build in persistance later.

Just for completeness, here’s my DataModel

public class NotesDataModel
{
	public IEnumerable<NoteViewModel> Load ()
	{
		return new List<NoteViewModel> {
				new NoteViewModel { Name = "One" },
				new NoteViewModel { Name = "Two" },
				new NoteViewModel { Name = "Three" },
				new NoteViewModel { Name = "Four" },
				new NoteViewModel { Name = "Five" },
				new NoteViewModel { Name = "Six" },
				new NoteViewModel { Name = "Seven" },
				new NoteViewModel { Name = "Eight" },
				new NoteViewModel { Name = "Nine" },
				new NoteViewModel { Name = "Ten" },
				new NoteViewModel { Name = "Eleven" },
				new NoteViewModel { Name = "Dozen" }
			};
	}
}

So we need the NoteViewModel since that’s what we’re binding to the front end…

public class NoteViewModel : ViewModel
{
	public string Name {
		get { return Get (() => Name); }
		set { Set (() => Name, value); }
	}
	public string Text {
		get { return Get (() => Text); }
		set { Set (() => Text, value); }
	}

	public override string ToString ()
	{
		return Name;
	}
}

Note: See Robert’s comment below, but the Get(() => ...) and Set(() => ...) blocks are helpers for INotifyPropertyChanged implementations.

The ToString() override is important. This is what is used to define what appears in the list view for each item. Play around with the ToString() if you want to have some fun! The Get and Set overrides supports notifications between data bindings.

Last thing we need to add is the view referenced to display the actual note details

public class NoteView : View
{
	[Section]
	[Entry]
	public string Name { get; set; }

	[Section("Note")]
	[Entry]
	[Multiline]
	[Caption("")]
	public string Text { get; set; }
}

Then from our last example, you’ll need to change the starting view.

public class Application : MonoMobileApplication
{
	public static new void Main (string[] args)
	{
		Run ("Sample", typeof(NotesView), args);
	}
}

This should get you to a working example. Nothing amazing. Next time we can consider persistance!

Robert Kozak has started MonoMobile.MVVM, a MVVM framework for Mono on iOS. What this provides, is a great and easy way to work with data-driven applications on the iOS platform. I’ll walk through setting up a simple application with a few elements on it.

We’ll start with MonoDevelop, on the Mac.

When the project loads, you’ll see a couple .xib files in the project. These you can safely ignore for now. Select the project, right click, and goto options. Here you’ll see an option to set the starter .xib file for the application. Go ahead and remove that.

Next we need to add a reference to MonoMobile.MVVM. If you already have downloaded a built the project, add a reference to the project, to the location of the built MonoMoble.MVVM.dll.

Now, in Main.cs, you’ll find a small block of code.

public class Application
{
	static void Main (string[] args)
	{
		UIApplication.Main (args);
	}
}

Now replace it with the following below. Make sure you add a using MonoMobile.MVVM; so the references work.

public class Application : MonoMobileApplication
{
	public static new void Main (string[] args)
	{
		Run ("Sample", typeof(BasicView), args);
	}
}

public class BasicView : View
{
	public bool TestOnOff { get; set; }

	[Button]
	public void PressDown()
	{
	}
}

Make sure it builds, then we have a working iPhone application.

Now how is the UI built you might ask? Why from BasicView class that we pasted in. It has two elements, a boolean value and a method we applied the button attribute to. So those are the elements that appeared in the UI when we ran it. The UI is generated based upon the data elements in this View Model.

Well, that’s interesting and all, but there’s not a lot going on there. What else can we do? Lots! (Check out the ReadMe in the project for some more ideas)…

public class BasicView : View
{
	public bool TestOnOff { get; set; }

	[Caption("Why?")]
	[Entry]
	public string Why { get; set; }

	[Section("Actions")]
	[Button]
	public void PressDown()
	{
	}

	[NavbarButton]
	public void Done()
	{
	}
}