Ignite UI and NuGet

NuGet is a powerful ecosystem of tools and services. It was introduced in 2010 as an open source package manager for the Microsoft development platform including .NET.  NuGet is the easiest way to improve and automate your development practices.

When you install a package via NuGet, it copies the library files to your solution and automatically updates your project. That means adding references, changing config files, replacing old version script files, etc.

NuGet is available for Visual Studio 2010, Visual Studio 2012 and Visual Studio 2013, through the Visual Studio Extension Manager. In fact, since Visual Studio 2012, NuGet is included by default. On more information on how to install NuGet and how to get going with it, read the official Nuget documentation.

Ignite UI Trial is available to explore as a NuGet package since its introduction with version 12.2. After installing the package, you will have a project with a preconfigured sample application that you can explore and play with. You will also get a 30 day free trial of Ignite UI jQuery controls so you can create your own hybrid apps that look native on every mobile device and the desktop.

You can see the Ignite UI Trial`s page on nuget.org, where you can check the current dependencies and the version history of the package.

There are two ways to install the Ignite UI NuGet package to your project, using the GUI or using the console, and we will follow both procedures below.  All the steps and screenshots are taken in Visual Studio 2013 but if you are using Visual Studio 2010 or Visual Studio 2012, the differences are negligible. Don`t worry if you haven`t used NuGet before as this example will guide you step-by-step through the procedure.

First create a new ASP.NET Web Application project. You can name it IgniteUIProject

Select Empty project.

After your project is created, your Solution Explorer will look like this:

At the moment, your project contains only the three default nodes: Properties, References and Web.config.

Installing Ignite UI Trial via GUI

To install the Ignite UI NuGet package using the GUI, you should right-click on the project name and select Manage NuGet Packages… from the context menu.

This will open the Manage NuGet Packages dialog window. In this dialog you can see all the packages that are available for you to use in your project.

Now enter “Ignite UI” in the search field that is placed in the top right corner of the dialog window.

When you select Ignite UI Trial, you will see more information for the package in the right panel. By installing Ignite UI Trial, you guarantee that you will get the latest version of Ignite UI as this package is updated with every Service Release. In the right panel, you can also see the libraries that this package depends on. You should not worry about those – they will be automatically installed to your project with the package itself.

Click the Install button to install Ignite UI Trial. You will see a new dialog popping up, showing you the progress of the installation and what exactly is installed by the package to your project. This installation takes only a few seconds and after Ignite UI Trial is installed, you can click the Close button to close the Manage NuGet packages dialog window and return to your project.

Installing Ignite UI Trial via Package Manager Console

Here we will describe how you can add Ignite UI Trial package using the Package Manager Console. Using the Console may be a bit faster as you do not need to search for the package that you want to install.

To show the Console, navigate to Tools in the Visual Studio`s menu and after hovering NuGet Package Manager, select Package Manager Console.

The Package Manager Console will be shown at the bottom of the screen and you just need to enter “Install-Package IgniteUI.Trial” to initiate the installation.

When the installation is finished, you will see a message in the Console that Ignite UI Trial is successfully added to the project.

What Ignite UI Trial package is installing

As you can see, some new files and folders are added to your project.

Inside the Content folder are placed the css files that the framework provides and four different themes that are at your disposal. By default, the selected theme for the sample application is metro but you can choose between the iOS7 theme, infragistics theme and its popular predecessor infragistics2012 theme. The css files and the themes for mobile applications are also placed inside the Content folder. If you are developing a mobile app, you can set a specific theme based on the OS on which the app will be run. You can select between android, ios and windowsphone themes.

Inside the Images folder are placed the image files that are used in the sample application. They are all included in the Infragistics subfolder. If you want to use your own images, it would be best to place them inside the Images folder – this way your project will stay clear and well organized.

The Infragistics` JavaScripts are placed inside the Scripts folder as well as all the libraries that the package depends on.

Inside the packages.config file you can see all the installed packages and their versions.

Finally, you have the demo html file ignite-ui-demo.html. There is a Japanese version of the demo file, as well.

Now, let`s run the English version of the application sample. Right-click on the html file and select View in Browser. This will open the sample in your default browser.

So, you can explore the sample and see how Infragistics` Splitter, Tree, Map and DataChart components work. You can edit the sample or create a completely different sample from scratch, using every Ignite UI component you want.

As you saw, using the Ignite UI Trial package is the easiest way to get started with building your own web project. With Ignite UI you can create a single solution that crosses platforms and devices with an integrated project. Need one app that looks native to iPad, iPhone, Android phones and tablets, Windows Phone, the Surface and also looks great on the desktop? That's no problem with Ignite UI. Feeling excited? Give it a try right now – Inspiration is just a click away!