An introduction to MVC in Monotouch

In our first article, we created an application on the iphone with Monotouch. We used outlet and action, understood the basic application architecture, and created a simple user interface. In this article, we're going to create another simple application, but this time we're going to learn how to use the Views (view) and view controllers (views controller) to create an application with multiple interfaces. In particular, we will use Uinavigationcontroller to navigate between the two interfaces in the application.

Before you start building your application, let's be familiar with this important design pattern used in the iphone application.

Model-View-controller (MVC) pattern

Cocoa Touch uses a modified version of the MVC pattern to handle the display of the GUI. The MVC pattern (since 1979) has been around for a long time, separating the large number of tasks required to display the user interface and handling user interactions.

As the name implies, MVC has three main parts, model, view (view), and Controller (Controller):

Model-A model is a domain-specific form of data representation. For example, we are creating a task List application. You may have a collection of Task objects, written as list<task>. You might want to save this data in a database, XML file, or even from a Web service, but MVC is less concerned about where they are/how they are persisted (and even what they are). Instead, it focuses specifically on how to display the data and handle interacting with the user.

View--View represents how the data is actually displayed. In our hypothetical task application, these tasks are displayed in a Web page (in HTML), displayed in a WPF page (in XAML), or displayed as UITableView in an iphone application. If a user clicks on a task and wants to delete it, the view usually triggers an event or a callback to the controller (Controller).

Controller-The controller is the binder between the model and the view. The purpose of the controller is to get the data in the model and tell the view to display it. The controller also listens to the events of the view, controlling the task from being removed from the model when the user selects a task to delete.

By separating the responsibilities of displaying data, persisting data, and dealing with user interaction, the MVC pattern helps create code that is easy to understand. Furthermore, it facilitates decoupling of the view and model so that the model can be reused. For example, in your application, there are two interfaces, web-based and WPF, so you can use the same model to define the code in both.

Thus, in many MVC frameworks, regardless of the way the work is done, the rationale is generally the same. However, in cocoa (and cocoa touch), or more or less, Apple uses MVC to represent views (view), view Controller (View Controller), and models (model), but in different controls, they are not exactly the same. The way it is implemented is not quite the same. We'll learn more in detail when building the sample application.

View and view controllers in Monotouch

As I said briefly before, you can only display one window in an iphone application. But it can contain many interfaces. To do this, you need to add a view and view controller for each interface.

The view actually contains all the visual elements, such as tags, buttons, and so on, while the view controller handles the actual user interaction on the view (through events) and lets you run the appropriate code when these events are triggered. To make a rough analogy, this is a somewhat similar model to asp.net or WPF, where you define the user interface through HTML or XAML, and handle events in the post code.

When you are directing another page, put the view controller on the view controller stack. In this application to build, we will use the Navigation view Controller (Navigation view Controller, Uinavigationcontroller) to handle different interfaces because it provides a way to navigate easily between interfaces, This hierarchy-based navigation bar allows your users to navigate back and forth through the view controller.

Uinavigationcontroller is visible in many of the built-in iphone apps. For example, if you click on one of the SMS listings, the top navigation bar will display a left arrow button at the top so you can go back to the view that displays the list of messages.

Hello World apps with multiple interfaces

Now that we have a conceptual understanding of how MVC works, let's actually create an application to practice.

First, create a new Monotouch iphone solution in MonoDevelop, named Example_helloworld_2 (if you forget how to do this, refer to the first article).

Next, add two view controllers (and associated views) to serve the interface in the application where we are going to perform the navigation. To complete this step, right-click on the item and select "Add:new File".