Mobile application architecture - XAM335

We're going to focus on how to properly architect your application to separate the presentation from the business logic and data that drives it. We'll be looking at three primary patterns which are popular in the mobile world: Model-View-Controller (MVC), Model-View-Presenter (MVP), and Model-View-ViewModel (MVVM).

Upon completion you will be able to:

• Embed native controls into Xamarin.Forms
• Customize a renderer for an existing control
• Create a renderer for a custom control
• Send notifications between renderer and element

Course exercise download

Exercise materials are available from GitHub. The code can be cloned through a desktop Git client or downloaded directly as a ZIP file.

If you are using Windows, try to select a location with a shorter path length to make sure you don't exceed the 260 character limit.

Lecture

Here are the lecture slides.

Exercises

1. Exercise 1: Add a native control to a Xamarin.Forms layout
   

   The primary goal of this lab is to embed a native control into Xamarin.Forms layout. Specifically, you'll add an Android Floating Action Button to a Xamarin.Forms grid. You'll start with an existing Xamarin.Forms solution with a minimal interface with no behavior defined in a shared project. You're going to use this project to create a Xamarin.Forms sketch app. You'll modify the code to replace a toolbar button with a native control when running on Android.

2. Exercise 2: Extend an existing renderer
   

   In this exercise, you'll extend the provided label renderers to create a clickable "hyperlink label" that can launch the default browser when tapped.

3. Exercise 3: Create a custom control
   

   In this exercise, you'll define a custom control to create a drawing surface that can be consumed in your shared code.

4. Exercise 4: Create a renderer for a custom control
   

   In this exercise, you'll create the platform-specific renderers for the custom drawing surface created in the previous exercise.

5. Exercise 5: Send notifications to the renderer and the element
   

   In this exercise, you'll send notifications to and from the renderer and the shared code without tightly coupling the element and the renderer.