Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Prism UWP for Beginners: Setup

DZone's Guide to

Prism UWP for Beginners: Setup

In this first part of this Prism for Beginners series, learn to create the shell and configure the bootstrapper for your Prism UWP app.

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

I wanted to learn Prism because it may be helpful in some future projects. To better understand how it works, I needed a target. I’d like to show you how 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 architecture 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 technology 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 Page 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. By 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 the 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.

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.

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:
mvvm ,prism ,uwp ,mobile ,mobile app development

Published at DZone with permission of Michele Ferracin. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}