Prism UWP for beginners: setup

I want to learn Prism because it may be helpful in some future projects. To better understand how it works I need a target. I’d like to create a simple UWP app that displays my Twitter timeline and the local weather based on the GPS. Prism will help me to adopt the MVVM architeture and IoC/DI concepts. The MVVM and IoC/DI topics are out of the scope of this post.

Setup

I started a new UWP project with Visual Studio 2017 and then imported the Prism.Windows and Prims.Unity NuGet packages. Prism.Windows is the “core” library for the UWP techology and Prism.Unity is the IoC/DI container.

Screenshot_1.png

Conversion to Prism

I converted the Universal app to a Prism Universal app by configuring the bootstrapper. The bootstrapper is a required procedure by the Prism framework to properly initialize all the infrastructure. In vanilla UWP, the bootstrapper is the App class. I edited the App class so that it doesn’t inherit from the native Application class but from a Prism class called PrismUnityApplication.

This is the full App.xaml file.

<prismUnity:PrismUnityApplication x:Class="IC6.Buongiorno.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prismUnity="using:Prism.Unity.Windows"
RequestedTheme="Light">

</prismUnity:PrismUnityApplication>

 

This is the full App.xaml.cs file.

using System.Threading.Tasks;
using Microsoft.Practices.Unity;
using Prism.Unity.Windows;
using Prism.Windows.AppModel;
using Windows.ApplicationModel.Activation;
using Windows.ApplicationModel.Resources;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using IC6.Buongiorno.Services.Twitter;
using IC6.Buongiorno.Services.Weather;

namespace IC6.Buongiorno
{
/// <summary>
/// Provides application-specific behavior to supplement the default Application class.
/// </summary>
public sealed partial class App : PrismUnityApplication
{


public App()
{
InitializeComponent();
}


protected override UIElement CreateShell(Frame rootFrame)
{
var shell = Container.Resolve<Shell>();
shell.SetContentFrame(rootFrame);
return shell;
}

/// <summary>
/// Logic of app initialization.
/// This is the best place to register the services in Unity container.
/// </summary>
/// <param name="args"></param>
/// <returns></returns>
protected override Task OnInitializeAsync(IActivatedEventArgs args)
{
System.Diagnostics.Debug.WriteLine(">>>>>>>>>>>>> OnInitializeAsync called.");

Container.RegisterInstance<ITwitterService>(new TwitterService());

Container.RegisterInstance<IWeatherService>(new WeatherService());

Container.RegisterInstance<IResourceLoader>(new ResourceLoaderAdapter(new ResourceLoader()));

Container.RegisterInstance(SessionStateService);

Container.RegisterInstance(NavigationService);

return base.OnInitializeAsync(args);
}



protected override Task OnLaunchApplicationAsync(LaunchActivatedEventArgs args)
{
NavigationService.Navigate(PageNames.Main.ToString(), null);

return Task.FromResult(true); //This is a little trick because this method returns a Task.
}
}
}

 

I created a Paged called Shell. The Prism definition of shell is:

The main window of an application where the primary UI content is contained.

Shell is called in the CreateShell method triggered by the Unity framework to create the main window of the application.

The OnInitializeAsync method is the place to initialize the Unity container. Here I registered my services. With registering I mean telling Unity that, for example, every time I need an ITwitterService it has to give me an instance of TwitterService. I also register the NavigationService and SessionStateService that I’ll explain in other posts.

I created the standard MVVM folders because Prism is convention based for some of its features.

image

I deleted the default MainPage.xaml file and created a new one in the Views directory as shown in the image above.

Inside OnLaunchApplicationAsync I called the NavigationService.Navigate method to navigate to the MainPage which accepts as first parameter the name of the page (the name of the View without the Page suffix): by passing as parameter the value “Main” Prism searches, in the Views folder, a page called MainPage.xaml. The second parameter is null because I didn’t have additional parameters to pass. The last statement is a little trick because this method returns a Task and I created a fake one with a constant true value.

TL;DR

I made my first steps with Prism in a UWP application: I created the shell and setup the bootstrapper.

In the next post I’ll explore other basic concepts like binding and commands.

Advertisements

One thought on “Prism UWP for beginners: setup

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