Combining the power of Grial UI Kit, Prism, and Infragistics AppMap
Have you tried to use Grial UI Kit?
You probably have tried Prism Forms. But what about Infragistics AppMap?
In this post, you will learn how to use Grial UI Kit with Prism Forms and AppMap that will boost your productivity to the next level.
Grial UI Kit
There are two ways on how to use Grial UI Kit.
First is using Grial UI’s starter kit or its bare-minimum solution, which the one I am going to show you here. And the other one is using it in an existing app.
I had a difficulty implementing this. In fact, I wasn’t able to use our Grial UI Kit in an existing app. If you have managed to include Grial UI Kit in an existing app, please let me know in the comments below on how you were able to do it.
Anyway, you need to login to your account as you can see below.
Name your Application then click next. Choose the bare minimum starter kit. That’s the solution you’re going to use in your project.
You can also download the full source code of Grial UI Kit Demo app so you can see the implementations of the Grial’s demo app.
There are also 2 more downloadable packages. Both are the starter package and the full-demo package, but they are Gorilla Player ready, which means the Gorilla SDKs and its code block are already included there.
Here are the things that you will see in your bare-minimum package or the starter package.
- Helpers: Where the Grial fonts and theme helper are located
- Resx: Where you can find localization. I haven’t look what else is there.
- Themes: To change your app’s theme
- Views: Where you can see some controls and navigation
And here is the App.xaml.cs of the Grial starter or bare-minimum package.
Let’s take a look at the Nuget Packages that are included out of the box if you download the bare-minimum package.
- Airbnb Lottie: for animation
- Newstonsoft.Json: for serializing and deserializing JSON files.
- 5 UX divers’ Nuget Packages
- Android Support Libraries
- FFImage.Loading: used to create effects in images
- Xamarin TestCloud Agent: for test cloud
By the way, if you want to include Grial UI Kit in your existing application, you can get it from http://nuget.uxdivers.com/grial
Like I said earlier, I wasn’t able to use Grial into an existing app. Please comment below if you know how to do it so that others will not experience the difficulty that I had.
Here are the 4 Nuget Packages that you can download from Grial’s link that you can see above.
You know Prism right? If not, go see this cool YouTube video of Brian Lagunas explaining Prism Forms. https://www.youtube.com/watch?v=DYRLcqG2BAY&t=4s
So let’s now install Prism Forms. Go to your solution, right click on Manage Nuget Packages. Check the Project box so that the Prism Forms will be automatically installed on every project in your solution.
I prefer Unity, that’s why the sample here is in Unity. You can also use the other DI container frameworks if you want.
So click on the Prism.Unity.Forms and install it.
Edit your App.Xaml and include the namespace of your Prism.
You also have to edit your App.Xaml.Cs, otherwise it will not compile. Derive or subclass your App class from PrismApplication.
And then just comment out the default code block of Grial, while replacing it with necessary code blocks of Prism. That would include the RegisterTypes method and the IPlatformInitializer that you can see below.
And then create a folder in your PCL project and name it ViewModels because Prism will try to find this folder during the creation of your ViewModel classes.
Now your project is Grial UI and Prism Forms ready.
But wait! There’s more. Let’s make it easier for you to create a prototype mobile application by using one of my favorite tools in Xamarin, the Infragistics AppMap.
Infragistics AppMap is a free Xamarin tool created by the awesome Infragistics. Check out their UI frameworks, controls, and productivity tools for building high-performing web, mobile, and desktop apps.
Anyway, let’s see how you can use Infragistics AppMap. First, go to your Tools -> Extensions and Updates and then download Infragistics AppMap. You can also download and install it from Visual Studio Market Place. Take note, Infragistics AppMap only works on projects that have installed Prism Forms. It will not work on plain Xamarin Forms only.
This image below is Infragistics, by the way.
After installing Infragistics AppMap, click on the Views folder and add a new item.
Reminder: Ignore the name and just leave it out like that. Proceed by clicking on the Add button.
At last, this is the AppMap UI. Let’s try to drag one of its pages onto the center. Let’s try the MasterDetailPage.
Yeah! We have a Master Detail page and three detail pages. You can edit the name of your View Pages or their titles.
Click on the Generate AppMap button to see what it will do on your project that already has Grial UI and Prism Forms.
BOOM! It automatically created your MasterDetailsPage’s view pages and view models. It also instantly seamlessly wired up everything, including your startup page.
Run it to see your amazing starter project.
These are default rounded buttons for both iOS and Android by Grial UI Kit.
Instant MVVM design with Grial UI look in just a few minutes of set up.
As you can see, it is really quick for me to set up an MVVM Xamarin App with nice looking design and in MasterDetail Page.
So that’s it. If you like my article and find it useful, please help spread the word. Thank you and happy coding!