Xamarin: Getting Started With Prism 6(Part 1)

 

XamarinImageFromWired

Image Credit to Wired

 

In today’s article I will discuss about the basic requirements you need to perform for running Xamarin Forms with Prism 6 framework. So what is Prism by the way, Prism is a framework which originated as a XAML application framework mainly during the early days of WPF. It was previously maintained by the Patterns and Practices division of Microsoft prior to becoming an open source platform. Here are the following features we can get for implementing Prism in our Xamarin forms:

  • MVVM Support – Xamarin forms development approach is more on MVVM Pattern.
  • Commanding – User actions like clicking of buttons.
  • Messaging – Loosely coupled communication between a subscriber and publisher.
  • Navigation – Navigation action for pages like going forward and backward.
  • Page Dialog Service – Pop-up message in our pages for the users to interact.
  • Logging – Logging functionality for your application.
  • Dependency Injection – Reduces class coupling and improves maintainability and testability.

 Just a shout out to one of the Genius minds of Prism which is Brian Lagunas who devouts his time and effort in constantly improving Prism framework from WPF only to Windows Phones, UWP and now with Xamarin platform.

Installing Prism Template Pack

One nice feature of Prism is that there is already a template that we can use because it already sets some items like namespaces for the Prism and AutoWireViewModel locator for our View and ViewModel binding. Let’s visit the Visual Studio Market Place then search for the Prism 6 template pack as shown below:

VisualStudioMarketPlace.png

Click the download button as shown below:

Prism6Download.jpg

Just click the downloaded PrismTemplatePack.vsix file in order to install the Prism template pack to your visual studio.

Creating a New Xamarin Forms Using Prism Template

Now let’s try to create a new project using the newly installed Prism Template. Let’s open Visual Studio then click on New Project, if you have successfully installed the Prism extension you will see Prism Template as shown in the image below:

NewXamarinPrismProject.png

Select the Prism Unity App (Xamarin.Forms) project and name it XamarinPrismSample then press OK. A Prism Project Wizard will prompt and will let you select what kind of application you are working which is neat feature. Select Android and IOS or either of the two depending on which platform you are working PC or MAC as shown below:

PrismProjectWizard.png

After the successful generation of the project your Solution should contain three projects:

  • XamarinSamplePrism (Portable) – Portable class library which contains the View and the ViewModel.
  • XamarinSamplePrism.Droid – Contains the Android project.
  • XamarinSamplePrism.iOS – Contains the IOS project.

Just like that you have already a buildable and functioning Xamarin application using the Prism 6 framework.

The App Class

If you are familiar or have been working with the previous versions of Prism there is a so called BootStrapper Class which is responsible for initializing all the services that prism is using. Instead of the BootStapper the current Prism Version utilizes already the App Class which is the original initializer class for XAML technologies like WPF and Xamarin Forms. This should be the contents of your App Class as shown below:

AppClass.png

Let me discuss some of the important points in your App Class:

  • The App Class has a constructor which takes IPlatformInitializer type parameter. The IPlatformInitializer object is used when you need to register a platform specific service.
  • The OnInitialized method which calls the InitializeComponent and the Navigation to your main page.
  • The RegisterTypes method which we use to register our dependency injection container for every page and service that our application is using.

Another great thing about the Prism template is that our Name space in App.xaml file is already been modified to point on the Prism library as shown below:

AppClassXaml.png

View and ViewModel

As per Brian Lagunas the most difficult decision in MVVM is deciding on how to bind your View and ViewModel whether using code behind or in your XAML code. Well for Prism it uses the so called AutoWireViewModel property inside the View XAML  which will automatically lookup it’s corresponding ViewModel which is a neat feature. Let’s try to see the MainPage.xaml file as shown below:

MainPage

There is a catch to Prism’s AutowireViewModel, and these are the default naming conventions to be implemented in your project:

  • XAML Pages should be stored inside the Views folder
  • The ViewModel should be stored inside the ViewModels folder and should have the same name of the view or page plus the suffix ViewModel. (MainView -> MainViewModel).

Well let’s try build and run either Android or IOS project and should navigate to your main page as shown in the image below:

AndroidEmulator

Conclusion

Just to wrap things up, we have learned from this first part of the article on how to setup Prism 6 with our Xamarin Forms project. We also have learned the App Class and touch a little bit about the binding of our View and ViewModel. For the next part I’m planning to discuss more on Prism features like Messaging, Navigation, commanding and Dependency Injection.

Happy Coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s