Creating Ignite UI Cloud Applications – Publishing Applications in Windows Azure (Part 2)

[Infragistics] Mihail Mateev / Monday, November 5, 2012

Introduction

Infragistics Ignite UI is a new awesome jQuery, jQuery UI & HTML5 based framework. In a series of articles will look at how we create real-world cloud applications using Ignite UI.

In the previous post: Creating Ignite UI Cloud Applications – Using Spatial Data with Windows Azure SQL Database (Part 1) , we learned how to migrate spatial data from SQL Server 2012 in Windows Azure SQL Database.

In this article we will create a new Windows Azure WEB Site and will deploy the application from this post to Windows Azure.

Why Windows Azure WEB Site?

Windows Azure Web Sites (WAWS) is a feature I have been wanting for a while. Before I was at Microsoft I was a web developer building applications on Windows Azure. Cloud Services are great for many different types of applications, but many times you don’t need or care about startup tasks, full system access, or tweaking the web server. For many projects, you just want to deploy your application to a high-scale environment that just works – this is were Windows Azure Web Sites comes in. In this post I will show you ten awesome features available with Windows Azure Web Sites.

Microsoft announced via Scott Guthrie recently that Windows Azure Web Sites now supports the .NET Framework 4.5. Some awesome ASP.NET features are now available to web developers who want to host their ASP.NET applications on Windows Azure following the web sites offering getting support for .NET 4.5. One of the awesome new features is Entity Framework Spatial support. Only available in .NET 4.5, EF Spatial 5.0 is something that gives developers who want to build data visualization applications the ability to easily save and retrieve location data without having to invent crazy solutions using SQL code.

Azure Cloud Services for now don’t support officially .NET 4.5. I had some issues to have spatial data support using Cloud Services despite that current Azure OS is already Windows Server 2012 based (by default).

There are 2 reasons to recommend Windows Azure Web Services usage:

Easy to use
.NET 4.5 support

Set up the development environment

To start, set up your development environment by installing the Windows Azure SDK for the .NET Framework.

To install the Windows Azure SDK for .NET, click the link that corresponds to the version of Visual Studio you are using. If you don't have Visual Studio installed yet, use the Visual Studio 2012 link.
Windows Azure SDK for Visual Studio 2010
Windows Azure SDK for Visual Studio 2012

We will use the project that we created in blog Creating Interactive Web Mapping Applications with Ignite UI, Entity Framework and SQL Server 2012 and data that already deployed to Azure SQL Database in this post.

Creating the Site in Windows Azure

The next step is to create the Windows Azure web site and the SQL database that your application will use.

We will use the same database from my previous post:

Creating Ignite UI Cloud Applications – Using Spatial Data with Windows Azure SQL Database (Part 1) In this sample we will use data via Entity Framework 5 from two sample databases : Northwind and SqlSpatialDemo.

The first thing Windows Azure will need to know is the URL you will want associated with my this The free Windows Azure Web Sites offer defaults to [yoursitename].azurewebsites.net, so this first step allows you to define the URL prefix associated with your site.

You can select the “Quick Create” option and to choose URL and Region where to be created your site.

Preparing for Deployment

the link labeled Download Publish Profile will download a publish settings file, which contains some XML defining how Visual Studio or WebMatrix 2 (or the Web Deploy command line) should upload the files to the server. Also contained within the publish settings file is the metadata specific to the database (if you created database associated to for this site).

Spatial Applications in Windows Azure

You need to know that you still use SQL Server functionalities via Entity Framework 5.0

The method CountryByName in the sample MVC 4 application controller calls methods that use EF types DbGeometry and DbGeography. Finally this method serializes results to JSON to be possible to use it in the view.

#region CountryByName

[OutputCache(VaryByParam = "countryName", Duration = 120)]

public JsonResult CountryByName(string countryName)

{

    switch (countryName)

    {

        case "UK":

            countryName = "United Kingdom";

            break;

        case "USA":

            countryName = "United States";

            break;

    }

    var results = spDemo.worlds.Where(x => x.CNTRY_NAME == countryName);

  

  

    List<CountryInfo> ret = new List<CountryInfo>();

    foreach (world country in results)

    {

        CountryInfo info = new CountryInfo

        {

            Id = country.ID,

            Code = country.CODE,

            CountryName = country.CNTRY_NAME,

            Population = country.POP_CNTRY,

            Extend = GetGeometryBoundary(country),

            Center = GetGeometryCentroid(country),

            ShapeData = GetGeometryPoints(country)

        };

  

        ret.Add(info);

    }

  

    var retVal = Json(ret, JsonRequestBehavior.AllowGet);

    return retVal;

}

#endregion //CountryByName

GetGeometryBoundary is a helper method used to get a list of points, representing an envelope of a DbGeometry instance.

#region GetGeometryBoundary

 public static SpatialRect GetGeometryBoundary(world country)

 {

     List<SpatialPoint> multiPoints = new List<SpatialPoint>();

     var numPoints = country.geom.Envelope.ElementAt(1).PointCount;

     

     for (int i = 1; i <= numPoints; i++)

     {

         SpatialPoint pnt = new SpatialPoint((double)(country.geom.Envelope.ElementAt(1).PointAt(i).XCoordinate), (double)(country.geom.Envelope.ElementAt(1).PointAt(i).YCoordinate));

         multiPoints.Add(pnt);

  

     }

     SpatialRect rect = multiPoints.GetBounds();

     return rect;

 }

 #endregion //GetGeometryBoundary

GetGeometryCentroid is a method used to get point representing geometric center of a DbGeometry instance.

#region GetGeometryCentroid

public static Object GetGeometryCentroid(world country)

{

    SpatialPoint center = null;

    var geometry = country.geom;

    if (geometry != null)

    {

  

        center = new SpatialPoint((double)geometry.Centroid.XCoordinate, (double)geometry.Centroid.YCoordinate);

    }

  

  

    return new  {x =  center.X, y = center.Y};

}

#endregion //GetGeometryCentroid

GetGeometryPoints is a method used to get a nested list of point representing nodes of a DbGeometry instance.

#region GetGeometryPoints

  

public static List<SpatialPoints> GetGeometryPoints(world country)

{

    List<SpatialPoints> multiPolygonPoints = new List<SpatialPoints>();

    var numElements = country.geom.ElementCount;

  

    for (int i = 1; i <= numElements; i++)

    {

        SpatialPoints spatialPoints = new SpatialPoints();

        var currElem = country.geom.ElementAt(i);

        if (null != currElem.PointCount)

        {

            spatialPoints.Points.Add(new List<object>());

            int numPoints = (int)currElem.PointCount;

  

            for (int j = 1; j <= numPoints; j++)

            {

                double x = (double)currElem.PointAt(j).XCoordinate;

                double y = (double)currElem.PointAt(j).YCoordinate;

                //SpatialPoint point = new SpatialPoint(x, y);

                spatialPoints.Points[0].Add(new { x = x, y = y });

            }

        }

  

        multiPolygonPoints.Add(spatialPoints);

  

    }

  

    return multiPolygonPoints;

}

  

#endregion GetGeometryPoints

If you just deploy this application you will have partially working application. Your Ignite UI Map control will not highlight the selected country/ The reason is because there are some missing libraries that provide SQL Server spatial functionalities.

What library(s) to use?

The spatial functionality in SQL Server comes provided courtesy of two libraries:

Microsoft.SqlServer.Types.dll – this is a (managed) .NET library that is installed in the \Program Files(x86)\Microsoft SQL Server\100\SDK\Assemblies subdirectory of a SQL Server 2008 / 2008 R2 (\Program Files(x86)\Microsoft SQL Server\110\SDK\Assemblies subdirectory of a SQL Server 2012 ) installation and is registered in the GAC of any computer on which SQL Server has been installed.

Another work around to make Entity Framework Spatial work on the first try following your deployment to Windows Azure, install the Microsoft.SqlServer.Types NuGet package into your project by typing install-package Microsoft.SqlServer.Types in the Package Manager Console or by manually finding the package in the “Manage NuGet References” dialog.

SQLServerSpatial.dll (SQL Server 2008) – this is an (unmanaged) C++ library that can be found in the \Windows\System32 directory. In SQL Server 2012, the equivalent library is called SQLServerSpatial110.dll.

You need both the managed and unmanaged libraries to use spatial features, but getting them to work on Azure can be a bit tricky. The first thing is to make sure you use the 64-bit version of the libraries (since Azure runs on a 64-bit OS). Secondly, you need to make sure that you use the correct edition of the libraries. Although both SQL Server 2008 and SQL Server 2012 x64 libraries work correctly.

Getting the Libraries

If you’ve already got a 64-bit version of either SQL Server 2008 or Denali on your machine, you can use the libraries installed with it in the locations described above. If not, the easiest way to get hold of compatible libraries is to download an x64 version of the SQL Server Feature Pack. Note that you can get hold of and use these libraries from the feature pack without ever needing to install SQL Server.

Select Project –> Add Existing Item again. This time, navigate to the \Windows\SysWOW6 directory and highlight both the msvcp110.dll and msvcr110.dll files (Visual Studio 2012) or from msvcp100.dll and msvcr100.dll (Visual Studio 2010) .

Set the properties of msvcp110.dll, msvcr110.dll and SqlServerSpatial110.dll to “Copy to Output directory = Copy always”

Deploy Ignite UI Application to the cloud (Windows Azure).

You can quick and easy it to deploy your site (in this case Ignite UI dashboard) – with databases – directly up to Windows Azure in so few, simple steps. To deploy to a site from within Visual Studio 2012, I just right-click the site and select – get this – Publish. The first dialog that opens gives me the option to import a publish settings file, which you need to download earlier after having created the site in the Windows Azure portal.

Once the file is imported, you will see the details so you have the chance to verify everything is correct.

You can check and update database connections.

When the wizard is finished you will have a ready to use deployed in Azure Web Site. Wizard will open the initial site page in your browser.

In your project you will have a folder PublishProfiles under Properties folder. There are you files with deployment settings – one for WEB Deploy and another one when you need to use FTP for deployment.

Ignite UI Cloud Application

Now you have fully functional application in the Cloud (Windows Azure). As you see it is very easy to create it.

Ignite UI for Mobile Devices

You can access this sample from your mobile devices. This is not a mobile application but the sample has responsive web design and you could enjoy the sample from your iPad or Android tablet.

For a limited time will be available a live sample : http://IgniteUIMap.azurewebsites.net

You can You can enjoy it on your PC or tablet :-)

Cheers!

You are probably thinking, how do I get my hands on Ignite UI Map? It’s easy.

Click on this image to get a fully support trial version of Infragistics Ignite UI controls:

To view all the samples and code for HTML, MVC & ASP.NET, click there:

https://ko.infragistics.com/products/ignite-ui

Follow news from Infragistics for more information about new Infragistics products.

Source code is available here. You can also download sample databases : Northwind and SqlSpatialDemo.Demo project is created with Visual Studio 2012, but you can use NetAdvantage 12.2 controls with both: Visual Studio 2012 and Visual Studio 2012. As always, you can follow us on Twitter @mihailmateev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!