Sideloading Windows Store Apps – Install and Configure the Key

In a previous post, I described the process of obtaining a Microsoft key to use for Windows Store apps that are sideloaded (not obtained or installed via the store).  We have taken this approach most recently with the “Magic Wall” software that we built for CNN. Now that you have the key, let’s configure a machine with that key to install and run the sideloaded application.

I was surprised to see that there is nothing to do to the application itself to enable it for sideloading.  You don’t embed your key in the app – it’s completely stand-alone.  This kind of makes sense and has a huge benefit of allowing you to use the same sideloading key for any application, even if it wasn’t originally intended to be sideloaded.  You DO still have to sign your application with a code-signing certificate.  Let’s take care of that first. 

Sign the App With Code Signing Certificate

In your WinRT application project manifest, Packaging tab, use the button to “Choose Certificate…”.  Point to your code signing cert, provide your password, and you’re good.

Sign the application

Sign the application

Now build your app, and create the app package.  You only need two files from the directory of files created by the app package tool: 

  • the .appx (application and resources bundled for installation)
  • the .appxsym (debug symbols, useful for digging through crash dumps, etc)

The appx is still not signed, it’s just built with the certificate.  Now let’s sign it.  Open a command prompt with administrative privileges, and run the following command, providing the path to the certificate and the certificate password.

SignTool sign /fd SHA256 /a /f {PathToCertificate} /p {Password} {PathToAppx}

Install Sideloading Key

Next you have to configure the machine where you want to sideload the application.  You only have to do this once for each machine, and then you can sideload any applications on it.  Again, the key is not tied to the application.  You can easily find this info online, but here it is again for reference.

From an administrative command prompt:

The command below installs the sideloading key on the machine.  Use the key that you got from the Volume License Center key manager.  You should see a success message when it completes.

slmgr /ipk {your sideloading key without curly braces}

Then run the next command, which “activates” the sideloading key.  You must be connected to the internet to run this command, as it will connect with the Microsoft licensing servers to verify the key.  Unlike the GUID above, the GUID used below is not specific to your sideloading key.  Everyone should use this same GUID. You should see a success message when it completes.

slmgr /ato ec67814b-30e6-4a50-bf7b-d55daf729d1e

Allow Trusted Applications to Install

Next, a simple registry entry allows the OS to install trusted applications (those that are signed).   Add the following key and value to the registry.  You should add the “Appx” key if it doesn’t already exist.

HKEY_LOCAL_MACHINE\Software\Policies\Microsoft\Windows\Appx\AllowAllTrustedApps = 1 (DWORD)

Install the Application

Finally, you install the application using PowerShell. Copy the .appx and .appxsym to the target machine where you have enabled sideloading from above. From a PowerShell command prompt, use the following command.

Add-AppxPackage {PathToAppx}

Now you can find the installed application on the start screen list of all apps, or through search. Pin it to the start screen or run it from there.

That’s it.  Hope that works for you.

WPF Round Table Part 2: Multi UI Threaded Control

Introduction

Click here to download code and sample project

Here are the past articles in the WPF Round Table Series:

In this series I want to express some of the knowledge I gained in WPF over the years when tackling unique situations. For today’s post though I would like to discuss something that was created quite recently after a brief discussion with coworkers about multi UI threaded controls. I always knew how to create a window on a separate UI thread, but what if you wanted a control to be part of a main window, yet have its own dispatcher message pump?

New Window UI

Well to start off we need to understand how to even spawn a new WPF supported UI thread. This article explains how to launch a window on a completely new UI thread. The creation process is actually quite simple as demonstrated in this code snippet:

Thread thread = new Thread(() =>
{
	Window1 w = new Window1();
	w.Show();
	w.Closed += (sender2, e2) =>
	w.Dispatcher.InvokeShutdown();
	System.Windows.Threading.Dispatcher.Run();
});

thread.SetApartmentState(ApartmentState.STA);
thread.Start();

Here we start by simply creating a new thread which will host our new Window. Inside the thread we create a window and make sure the Dispatcher (which will get automatically created on demand for this thread when accessed) starts the message pump. We also handle shutting down the message pump on the window’s Closed event. At the end we set the thread’s ApartmentState to be single-threaded apartment (STA) rather than multithreaded partment (MTA) since WPF UI threads cannot be multithreaded. Once we start the thread we can see our new window now runs on its own UI thread.

Non-Interacting Host

Although a new window has its benefits, what if you want a UI independent control placed inside your main window? Well this MSDN article explains how this process can occur using a HostVisual class. The greatest benefit HostVisual provides is a way to arbitrarily connect any Visual to a parent visual tree. Unfortunately, there is not a way to fully measure, arrange, and render an item through a HostVisual without a presentation source. So we create our own presentation source which simply contains and displays our HostVisual to show in our window. Here is the main components of the class:

private readonly VisualTarget _visualTarget;

public VisualTargetPresentationSource( HostVisual hostVisual )
{
	_visualTarget = new VisualTarget( hostVisual );
	AddSource();
}

public override Visual RootVisual
{
	get
	{
		return _visualTarget.RootVisual;
	}

	set
	{
		Visual oldRoot = _visualTarget.RootVisual;

		// Set the root visual of the VisualTarget.  This visual will
		// now be used to visually compose the scene.
		_visualTarget.RootVisual = value;

		// Tell the PresentationSource that the root visual has
		// changed.  This kicks off a bunch of stuff like the
		// Loaded event.
		RootChanged( oldRoot, value );

		// Kickoff layout...
		UIElement rootElement = value as UIElement;
		if ( rootElement != null )
		{
			rootElement.Measure( new Size( Double.PositiveInfinity, Double.PositiveInfinity ) );
			rootElement.Arrange( new Rect( rootElement.DesiredSize ) );
		}
	}
}

protected override CompositionTarget GetCompositionTargetCore()
{
	return _visualTarget;
}

And running the sample project you can test this by toggling the busy indicator:

toggleThe main caveat with this method is that you are unable to interact with the control, which is fine for the purpose I want for this control. But even though I was able to create a control independent of the UI I still had issues positioning the thread separated control in relation to my main window.

Decorator with Child Elements

I managed to stumble upon another article that not only addressed the issue of alignment, but goes one step further by allowing the control to have child elements as well. I’ll include a ‘Child’ property along with a ‘ContentProperty’ attribute at the header of my class so that I can create UIElements right into XAML. Here is the logic that helps display our UI content onto a separate thread:

protected virtual void CreateThreadSeparatedElement()
{
	_hostVisual = new HostVisual();

	AddLogicalChild( _hostVisual );
	AddVisualChild( _hostVisual );

	// Spin up a worker thread, and pass it the HostVisual that it
	// should be part of.
	var thread = new Thread( CreateContentOnSeparateThread )
	{
		IsBackground = true
	};
	thread.SetApartmentState( ApartmentState.STA );
	thread.Start();

	// Wait for the worker thread to spin up and create the VisualTarget.
	_resentEvent.WaitOne();

	InvalidateMeasure();
}

Since we are creating a new HostVisual we need to make sure we define the parent-child relationship between the HostVisual and our UI control by calling ‘AddLogicalChild’ and ‘AddVisualChild’. Let’s take a look at how we are creating our UI content on a separate thread:

private void CreateContentOnSeparateThread()
{
	if ( _hostVisual != null )
	{
		// Create the VisualTargetPresentationSource and then signal the
		// calling thread, so that it can continue without waiting for us.
		var visualTarget = new VisualTargetPresentationSource( _hostVisual );

		_uiContent = CreateUiContent();

		if (_uiContent == null)
		{
			throw new InvalidOperationException("Created UI Content cannot return null. Either override 'CreateUiContent()' or assign a style to 'ThreadSeparatedStyle'");
		}
		_threadSeparatedDispatcher = _uiContent.Dispatcher;

		_resentEvent.Set();

		visualTarget.RootVisual = _uiContent;

		// Run a dispatcher for this worker thread.  This is the central
		// processing loop for WPF.
		Dispatcher.Run();

		visualTarget.Dispose();
	}

}

Here we can see us using our VisualTargetPresentationSource custom class to contain the HostVisual. The ‘CreateUiContent’ method is simply a protected virtual method that creates our content for us and can be overrided by inheriting classes. To make sure both our child content and the HostVisual is represented in our control we need to override the ‘VisualChildrenCount’, ‘LogicalChildren’, and ‘GetVisualChild’ methods to take both elements into account. Although this will allow for allow our content to render, our UI separated content will have measuring issues if the Child content has limited size or merely does not exist. To fix this we are going to override the ‘Measure’ and ‘Arrange’ methods like so:

protected override Size MeasureOverride( Size constraint )
{
	var childSize = new Size();
	var uiSize = new Size();

	if ( Child != null )
	{
		Child.Measure( constraint );

		var element = Child as FrameworkElement;
		childSize.Width = element != null ? element.ActualWidth : Child.DesiredSize.Width;
		childSize.Height = element != null ? element.ActualHeight : Child.DesiredSize.Height;
	}

	if ( _uiContent != null )
	{
		_uiContent.Dispatcher.Invoke( DispatcherPriority.Background, new Action( () => _uiContent.Measure( constraint ) ) );
		uiSize.Width = _uiContent.ActualWidth;
		uiSize.Height = _uiContent.ActualHeight;
	}

	var size = new Size( Math.Max( childSize.Width, uiSize.Width), Math.Max( childSize.Height, uiSize.Height) );;
	return size;
}

protected override Size ArrangeOverride( Size finalSize )
{
	if ( Child != null )
	{
		Child.Arrange( new Rect( finalSize ) );
	}

	if ( _uiContent != null )
	{
		_uiContent.Dispatcher.BeginInvoke( DispatcherPriority.Background, new Action( () => _uiContent.Arrange( new Rect( finalSize ) ) ) );
	}

	return finalSize;
}

As you can see I am treating our main parent control mostly like a panel where I either fill out the space given or take the max size of either my Child element or the size of the element on the separate thread.

Thread Separated Style

Although we have our ‘CreateUiContent’ method to instantiate our control from code, what if we want to create our control from a style right within XAML? Well we can create a DependencyProperty called ‘ThreadSeparatedStyle’, but the style itself must be instantiated on the new UI thread or else we’ll run into thread exceptions. In order to get around this issue we are going to recreate the style on the fly using reflection through an anonymous call. Here you can see how this occurs when the style changes:

private static void OnThreadSeparatedStyleChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
	var control = (UiThreadSeparatedControl)d;
	var style = e.NewValue as Style;
	if ( style != null )
	{
		var invokingType = style.TargetType;
		var setters = style.Setters.ToArray();

		control._createContentFromStyle = () =>
		{
			var newStyle = new Style
			{
				TargetType = invokingType,
			};
			foreach ( var setter in setters )
			{
				newStyle.Setters.Add( setter );
			}

			var contentt = (FrameworkElement)Activator.CreateInstance( newStyle.TargetType );
			contentt.Style = newStyle;

			return contentt;
		};
	}
	else
	{
		control._createContentFromStyle = null;
	}
}

Since I use the style’s target type to instantiate the control, the assigned target type in the style should not refer to a base control. I am also holding onto all the setter values for the style so they are preserved on recreation. Although I could avoid using reflection and recreating the style altogether by placing the style in a Themes defined folder Generic.xaml, by doing it this way it allows me to define the style at the same time I create the control:


<multi:UiThreadSeparatedControl IsContentShowing="{Binding ElementName=Toggle, Path=IsChecked}">
	<multi:UiThreadSeparatedControl.ThreadSeparatedStyle>
		<Style TargetType="multi:BusyIndicator">
			<Setter Property="IsBusy" Value="True"/>
		</Style>
	</multi:UiThreadSeparatedControl.ThreadSeparatedStyle>
</multi:UiThreadSeparatedControl>

The convenience of having this as an option seemed to outweigh trying to avoid reflection. Especially since it is much more intuitive to define your styles anywhere in XAML, not just UI independent resource dictionaries.

FrozenProcessControl

Now how could we use this type of control in our application? One scenario could be a case where you want to display a busy cursor if the window happens to freeze. Although it is quite a bad practice for your application to ever freeze. Usually this problem can be circumvented by offloading certain functionality onto a separate, non-UI thread. But sometimes you are left without a choice in the matter. For instance, say you are using a third party control that has become an integral part of your application and suddenly adding new, large amount of data causes the control to inefficiently load all its components on the UI thread. You may not have access to the controls source code or do not have time to replace the control. It would be a much better user experience to at least display something to the user to let it know some form of action is still happening rather than staring at a frozen screen. This is where our FrozenProcessControl comes into play.

At first we will extend our UiThreadSeparatedControl and override the ‘CreateUiContent’ method:

protected override FrameworkElement CreateUiContent()
{
	return new BusyIndicator
	{
		IsBusy = true,
		HorizontalAlignment = HorizontalAlignment.Center
	};
}

We will also have two Timers; one for polling the main window for no response, and another when the window is non-responsive for too long. Here is how our polling method is handled:

private void PollMainWindowTimerOnElapsed( object sender, ElapsedEventArgs elapsedEventArgs )
{
	_pollMainWindowTimer.Stop();
	_nonResponseTimer.Start();
	if ( _mainWindowProcess.Responding )
	{
		_nonResponseTimer.Stop();
		if ( _isContentDisplaying )
		{
			_isContentDisplaying = false;

			_threadSeparatedDispatcher.BeginInvoke( DispatcherPriority.Render, new Action( () =>
			{
				_uiContent.Visibility = Visibility.Hidden;
				_pollMainWindowTimer.Start();
			} ) );
		}
		else
		{
			_pollMainWindowTimer.Start();
		}
	}
}

As you can see we immediately start our non-responsive timer because if the main window’s process is unable to respond, accessing the process will cause the thread to freeze until activity happens again. If we do happen to gain response again and our busy indicator is displaying we need to update its visibility using its UI thread dispatcher to access the separate UI thread. Here we can see how our non-response timer is handled:

private void NonResponseTimer_Elapsed( object sender, ElapsedEventArgs e )
{
	_pollMainWindowTimer.Stop();
	_nonResponseTimer.Stop();

	_isContentDisplaying = true;

	_threadSeparatedDispatcher.BeginInvoke( DispatcherPriority.Render, new Action( () =>
	{
		_uiContent.Visibility = Visibility.Visible;
	} ) );
}

This is pretty straight forward, if the poll timer is frozen from accessing the process we do not want any further events to happen until the window is active again. After that we update the visibility using the separate UI thread to show our busy indicator. Here we can see the control in action in our demo by hitting the Freeze button, viewing the busy indicator on the far right freeze, and then suddenly seeing our thread separated control run on top:

frozen

Conclusion

Overall, this is quite a useful control, but the major caveat to using this is there is no ability to accept user input. Other than that this could easily help offload the build time for certain, display-only controls.

Querying Entities from Azure Storage Tables using Javascript

After enabling the Azure storage to allow cross-origin requests using CORS. Now we are ready to query the storage entities using Javascript.

Know the URL

We start off by reading Microsoft Azure post about querying entities. According to the post, we can make a GET request to the Azure table using:

var urlPath = https://{accountName}.table.core.windows.net/{mytable}(PartitionKey='<partition-key>',RowKey='<row-key>')?$select=<comma-separated-property-names>
  • Partition key and Row key are used to query a specific entity.
  • The select query is used to filter on that specific column. (e.g.$select=timestamp will grab the entities’ timestamp).

Build the Signature

As reference, Microsoft Azure’s blog about Authentication for the Azure Storage Services, it shows what we need to construct the Signature String.
The formula to build the signature is Signature=Base64(HMAC-SHA256(UTF8(StringToSign)))

Things To Know:

  • Shared Key Lite Authentication (Table Service) has a Signature String:

    StringToSign = Date + "\n" 
                   CanonicalizedResource
    

    Shared Key Authentication (Table Service) has a Signature String:

    StringToSign = VERB + "\n" + 
                   Content-MD5 + "\n" + 
                   Content-Type + "\n" +
                   Date + "\n" +
                   CanonicalizedResource;
    
  • Canonicalized Resource has a format of: “/{accountname}/{query string}
    For example, If you want to call a GET request on:

    
    https://myaccount.table.core.windows.net/mytable()?$filter=<query-expression>&$select=<comma-separated-property-names>
    
    

    The query string is: mytable() [do not include anything after '?']. So the Canonicalized Resource will be: /myaccount/mytable()

  • Secret Key:
    Log in to your Microsoft Azure Portal -> Select the Storage account you want -> Manage Access Keys -> Primary Access Key or Secondary Access Key
  • Lastly, the most confusing of all, encrypting the Signature String and Secret Key to form the Signature
    For encryption, I used Crypto-JS.
    Basically, we need to perform SHA-256 hash to produce the signature. Using Crypto-JS, it will be:

    var signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(CryptoJS.enc.Utf8.parse(stringToSign), CryptoJS.enc.Base64.parse(secretKey)));
    

Request Headers

There are only 2 required request headers when doing a request to Microsoft Azure:

  • Authorization=”[SharedKey|SharedKeyLite] {AccountName}:{Signature}”
    (e.g. Authorization: SharedKeyLite testaccount1:uay+rilMVayH/SVI8X+a3fL8k/NxCnIePdyZSkqvydM=)
  • Date or x-ms-date – make sure it’s in UTC.

Optional:

  • x-ms-version – version of the operation for the request.
  • Accept – content type of the response payload.
    • application/atom+xml
    • application/json;odata=nometadata
    • application/json;odata=minimalmetadata
    • application/json;odata=fullmetadata

In Action…

So using JQuery ajax, we call:

$.ajax({
		url: urlPath,
		type: 'GET',
		success: function (data) {
			//do something to data
		},
		beforeSend: function (xhr) {
			xhr.setRequestHeader('Authorization', "SharedKey " + accountName + ":" + signature);
			xhr.setRequestHeader('x-ms-date', dateInUTC);
			xhr.setRequestHeader('x-ms-version', '2014-02-14');
			xhr.setRequestHeader('Accept', 'application/json;odata=nometadata');
			xhr.setRequestHeader('DataServiceVersion', '3.0;NetFx');
			xhr.setRequestHeader('MaxDataServiceVersion', '3.0;NetFx');
		},
		error: function (rcvData) {
			console.log(rcvData);
		}
	});

And you are done! Happy Coding.

NEAdNUG: Crawl, Walk, Talk – Windows Universal App Lifecycle and Cortana API

Always more time for firsts! This was my first time giving a remote presentation! HUGE THANKS to NEAdNUG and everyone else who attended with that group or online! It’s a strange feeling to be so immersed in tech and be able to connect with people on the other side of the country.

Crawl Walk Talk – Windows Universal App Lifecycle and Cortana API

Repo: CrawlWalkTalk

It’s always a pleasure to work with such talented people across the globe. I hope my materials were found to be relevant and helpful. Feedback and Pull Requests are always welcome. Hope to see you at the next User Group!

Sideloading Windows Store Apps – Purchase the Key

Back in April, Microsoft announced that it was making it much easier to obtain a sideloading key for deploying “internal” line of business Windows Store applications. Until then, it was ridiculously prohibitive to acquire a key, so the sideloading story was crippled.  The above link (and this one) has the details, but suffice it to say that you are now able to get a sideloading key for $100. Sounds easy, right?

I set out to buy a key for us to use at InterKnowlogy, but … I searched high and low for information on WHERE to buy such a key. We get our volume licensing via our Microsoft Gold Partnership, and that’s not one of the qualifying methods for already having a sideloading key.  WHERE can I buy the key?

After many calls, I find that the Microsoft Volume License Service Center does not sell it, but instead recommends a volume license re-seller.  (I’m not trying to buy a volume license, just a single license for unlimited sideloading.)  I assume there are lots of volume license re-sellers, but that I ended up with was Software House International (SHI).

LONG story short:  this key is being offered as part of the Open License Program, which allows you to setup an account even though you haven’t or won’t be buying LOTS of (volume) licenses.

Setup the account, purchase the “Windows Sideloading Rights” license (QTY 1), part #4UN-00005.

No good.  You must buy at least 5 items to qualify for a “volume license”.  WHAT?  I only need a single license, that gives me UNLIMITED sideloads.  Why would I need more than one?

The fix (salesman’s idea): find the cheapest thing in their catalog and buy 4 of them:  ”Microsoft DVD Playback Pack for Windows Vista Business” (QTY 4).  $4.50 each!!

Make the purchase, $111.58, and now I have some sweet DVD playback software to give away to developers as prizes!  :)  Download the key, and next blog post, I’ll show you how to use the key to sideload.

Really cool that Microsoft made it cheap to get a sideloading license, but the mechanics of the process (at least to purchase) are still pretty wonky.

(We have taken this approach most recently with the “Magic Wall” software that we built for CNN.)

WPF Round Table Part 1: Simple Pie Chart

Introduction

Click here to download code and sample project

Over the years I have been presented with many different situations while programming in WPF, which required a certain Control or class to be created to accommodate. Given all the various solutions I created throughout the years I thought it might be helpful to someone else. During this ongoing series I am going to post some of the more useful classes I have made in the past.

Simple Pie Chart

In one project I was assigned to redesign, there was data coming in that we wanted represented in the form of a pie chart. Initially, we simply displayed the information in the form of one out of many static pie chart images. A specific image would get selected based on what the percentage was closest. Although this solved our immediate needs I believed generating this with GeometryDrawing would make the chart much more accurate and should not be too difficult to create. My immediate goal was to try and represent some type of pie chart in XAML to get an idea of how it could be represented dynamically. Initial searching led to this solution involving dividing a chart into thirds. Following the example given will produce a subdivided geometric ellipse:

Pie Chart Example - 1

Programmatically Build Chart

Unfortunately, using strictly XAML will not work when attempting to create a pie chart dynamically. This is definitely a great starting point in how we could create this Control, but I needed a better understanding how to create geometric objects programmatically. Doing some more searching I came across this Code Project that describes how to create pie charts from code. My pie chart will be much simpler containing only two slices and taking in a percentage value to represent how the slices will subdivide. I still use an Image to represent how the geometry will be drawn and begin the creation of the root elements:

_pieChartImage.Width = _pieChartImage.Height = Width = Height = Size;

var di = new DrawingImage();
_pieChartImage.Source = di;

var dg = new DrawingGroup();
di.Drawing = dg;

Since I know my starting point of the pie will always be at the top I then calculate where my line segment will end (the PieSliceFillers are brushes representing the fill color):

var angle = 360 * Percentage;
var radians = ( Math.PI / 180 ) * angle;
var endPointX = Math.Sin( radians ) * Height / 2 + Height / 2;
var endPointY = Width / 2 - Math.Cos( radians ) * Width / 2;
var endPoint = new Point( endPointX, endPointY );

dg.Children.Add( CreatePathGeometry( InnerPieSliceFill, new Point( Width / 2, 0 ), endPoint, Percentage > 0.5 ) );
dg.Children.Add( CreatePathGeometry( OuterPieSliceFill, endPoint, new Point( Width / 2, 0 ), Percentage <= 0.5 ) );

My CreatePathGeometry method creates both the inner and outer pie slices using a starting point, the point where the arc will end, and a boolean for ArcSegment to determine how the arc should get drawn if greater than 180 degrees.

private GeometryDrawing CreatePathGeometry( Brush brush, Point startPoint, Point arcPoint, bool isLargeArc )
{
	var midPoint = new Point( Width / 2, Height / 2 );

	var drawing = new GeometryDrawing { Brush = brush };
	var pathGeometry = new PathGeometry();
	var pathFigure = new PathFigure { StartPoint = midPoint };

	var ls1 = new LineSegment( startPoint, false );
	var arc = new ArcSegment
	{
		SweepDirection = SweepDirection.Clockwise,
		Size = new Size( Width / 2, Height / 2 ),
		Point = arcPoint,
		IsLargeArc = isLargeArc
	};
	var ls2 = new LineSegment( midPoint, false );

	drawing.Geometry = pathGeometry;
	pathGeometry.Figures.Add( pathFigure );

	pathFigure.Segments.Add( ls1 );
	pathFigure.Segments.Add( arc );
	pathFigure.Segments.Add( ls2 );

	return drawing;
}

A better to visualize this is through a XAML representation:





And with that we are able to create quick an easy pie charts as shown here:

Pie Chart Example - 2

Multi Pie Chart

Although this is suitable for a two sided pie chart, but what if you wanted more? That process is pretty straight forward based off what we already created. By including two dependency properties to represent our collection of data and brushes, we only need to rewrite how my segments are created:

var total = DataList.Sum();
var startPoint = new Point( Width / 2, 0 );
double radians = 0;

for ( int i = 0; i < DataList.Count; i++ ) { 	var data = DataList[i]; 	var dataBrush = GetBrushFromList( i ); 	var percentage = data / total; 	Point endPoint; 	var angle = 360 * percentage; 	if ( i + 1 == DataList.Count ) 	{ 		endPoint = new Point( Width / 2, 0 ); 	} 	else 	{ 		radians += ( Math.PI / 180 ) * angle; 		var endPointX = Math.Sin( radians ) * Height / 2 + Height / 2; 		var endPointY = Width / 2 - Math.Cos( radians ) * Width / 2; 		endPoint = new Point( endPointX, endPointY ); 	} 	dg.Children.Add( CreatePathGeometry( dataBrush, startPoint, endPoint, angle > 180 ) );

	startPoint = endPoint;
}

As you can see, the main difference is now we are accumulating the radians as we traverse the list to take into account any number of data objects. The result allows us to add any number of data items to our pie chart as shown here:
Pie Chart Example - 3

Conclusion

Although I did not get as much use for this class as I would have preferred, developing this helped me gain experience in manipulating geometry objects, which does not happen often enough.

What is CORS?

There are lots of instances that an app will need to call a GET/POST request to another domain (from a different domain where the resource originated). Once the web app starts doing the request, the response will throw an “Access-Control-Allow-Origin” error. Then you ask yourself, what now?

One solution is CORS (Cross-origin resource sharing), which allows all resources (like JavaScript) to make cross origin requests.
Here is an example of how to add CORS Rule to allow a request to Azure storage tables using Azure SDK.

1. Build the connection string

string connectionString= "DefaultEndpointsProtocol=https;
AccountName={account name/storage name};
AccountKey={PrimaryKey|SecondaryKey}";

2. Create the CloudTableClient

CloudStorageAccountstorageAccount = CloudStorageAccount.Parse( connectionString);
CloudTableClient client = storageAccount.CreateCloudTableClient();

3. Add CORS Rule
* as wildcard

CorsRule = new CorsRule()
{
  AllowedHeaders = new List<string> { "*" },
  AllowedMethods = CorsHttpMethods.Connect | CorsHttpMethods.Delete | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Merge
	| CorsHttpMethods.Options | CorsHttpMethods.Post | CorsHttpMethods.Put | CorsHttpMethods.Trace, 
  //Since we'll only be calling Query Tables, let's just allow GET verb
  AllowedOrigins = new List<string> { "*" }, //This is the URL of our application.
  ExposedHeaders = new List<string> { "*" },
  MaxAgeInSeconds = 1 * 60 * 60, //Let the browswer cache it for an hour
};

4. Add rules to client

ServiceProperties serviceProperties = client.GetServiceProperties();
CorsProperties corsSettings = serviceProperties.Cors;
corsSettings.CorsRules.Add( corsRule );
//Save the rule
client.SetServiceProperties( serviceProperties );
  • After #4, there should already be cors rule connected to an account name.
    In order to double check what cors rules are there for that account name, we can use:

    ServiceProperties serviceProperties = client.GetServiceProperties();
    CorsProperties corsSettings = serviceProperties.Cors;
    

NOTE: If we need to put cors rule for blobs, we will just change CreateCloudTableClient():
CloudBlobClient client = storageAccount.CreateCloudBlobClient();

Observations on Xamarin Evolve 2014

Last week I had the privilege of attending Xamarin’s annual Evolve conference in Atlanta. There were great talks, great toys, and great food, and I had a blast. A few random high-level thoughts and observations on the state of the platform, the community, and Miguel’s pronunciation of popular acronyms:

  • Previously, I would have characterized Xamarin’s pitch as “You’re a C# / .NET developer? Leverage your existing knowledge to write iOS and Android apps.” Now, I’m convinced they’d like to present it more along the lines of “You want to do cross-platform mobile development? Learn C# / .NET and use our platform, because it’s the best.” The ambition and the roadmap are aggressive and impressive.
  • The new announcements were all pretty great. Sketches are like Swift’s Playgrounds for C#, Insights gives you robust cross-platform analytics for very little code overhead, and the new Android simulator is so much faster than Google’s it’s embarrassing. Add in the recently-announced Test Cloud that lets you run automated tests on actual devices over the network, and the amount this team has added to their product in the last twelve months or so is downright impressive.
  • The culture of the company and the community around it occupies a unique position at the intersection of all the different platforms and communities it supports. More corporate- and enterprise-friendly than Apple, more hip and independent than Microsoft, and less nerdy and creepy than Google. There was a pretty even split of iOS and Android phones on attendees, and almost all of the presenters used Macs (though many of those Macs were running Windows.) Eclectic, independent, high-energy, and unique.
  • The production value and logistics of the conference were phenomenal, almost on the level of WWDC/io/Build. The keynote was slick and very well-produced, and the after-hours social events throughout downtown Atlanta were a blast. And did I mention how good the food was?
  • The pace with which the engineering team has to run is intense. I was told by multiple Xamarin engineers that the road to getting full coverage of the hundreds of new APIs in iOS 8 on launch day involved many new hires and many sleepless nights. When you step back and look at the effort they’re undertaking, it’s both super-brilliant and more than a little insane. I would argue this reflects the personalities of its founders, but what do I know?
  • PCL and NuGet are properly pronounced “Pickle” and “Noojay”, respectively. Miguel said so.

Fantastic conference, great people, and I’m already busy hacking away on a project using some of the new stuff here at IK. If you’re interested in cross-platform mobile development, and especially if you have any background in Microsoft developer technologies, you owe it to yourself to check out Xamarin. And if you’re an engineer who’s ready to build awesome stuff with the latest tools like these, we’re always looking for new InterKnowlogists.

MVC Series Part 3: Miscellaneous Issues

Introduction

In my first MVC series post, I discussed how to dynamically add items to a container using an MVC controller. Afterwards, I went through the process of unit testing the AccountController. The main purpose of this series was to explain some troublesome hiccups I ran into considering I did not come from a web development background. In this post I want to highlight a few of the minor issues while developing in MVC. One of them is not even related to MVC specifically, but it still caused enough of a headache that hopefully someone reading this can be spared the confusion.

HttpContext in Unit Tests

When I first started unit testing controllers, the HttpContext would return null when attempting to be accessed. The reason for this is because the controllers never assign the class on creation. Instead, controllers are typically created by the ControllerBuilder class. In my last post about unit testing the AccountController, I described a way to mock out the HttpContext, but in the beginning I wanted to try and keep my test project as lean as possible. Since I had not approached testing the AccountController yet and did not want to include a package to mock out an object I only needed to resolve NullReferenceExceptions, I found this clever post to quickly bypass this issue. By providing the HttpContext with a simple Url I no longer received an exception and was able to test the other components of a controller. I decided to wrap this functionality inside a class:

public class TestHttpContext : IDisposable
{
	public TestHttpContext()
	{
		HttpContext.Current = new HttpContext(
			new HttpRequest( null, "http://tempuri.org", null ),
			new HttpResponse( null ) );
	}

	public void Dispose()
	{
		HttpContext.Current = null;
	}
}

Since I am creating a new controller for each test, I needed the HttpContext to be recreated and destroyed each time. So, I went ahead and placed this inside a base test class that all controller tests will inherit:

public class TestBase
{
	private TestHttpContext _testContext;

	[TestInitialize]
	public void Initialize()
	{
		_testContext = new TestHttpContext();
	}

	[TestCleanup]
	public void TestCleanup()
	{
		_testContext.Dispose();
	}
}

Mocking out the HttpContext would provide better unit testing standards, but my minimalist personality found this solution too good to pass for the time being.

DbContext Non-Thread Safe

After updating my project to use Unity, I decided to take better advantage of the dependency injection design pattern by making the DbContext a singleton to prevent having to constantly re-initialize the connection to our Azure database. Early on after this change it became apparent our website was very inconsistent when trying to write to the database. Since many changes were occurring during this time, I did not immediately presume the DbContext as a singleton was the cause until I ran into this post.

So it seems I could still gain a performance boost by only creating the DbContext once per thread call, but how could I do this implementation using dependency injection? “Fortunately”, a new version of Unity provides a LifetimeManager catered specifically to this called PerRequestLifetimeManager.

This solution dramatically reduced my refactoring costs to close to zero, which was very desirable at this point in the project where time constraints were becoming out of reach. Later, I did a more thorough research into DbContext and you will notice this is why I put ‘Fortunately’ in quotes. As this MSDN post mentions, PerRequestLifetimeManager is bad practice to use when dealing with the DbContext. The reason is because it can lead to hard to track bugs and goes against the MVC principle of registering objects with Unity that will remain stateless. Although our application never ran into issues after implementing this LifetimeManager, in the future it is best to simply create and destroy the DbContext every time.

Ajax Caching in IE

This last problem is not so much an MVC issue, but a cross browser bug. And it is not so much a bug as it is more of understanding there are different specifications for each browser. As I mentioned in my post for creating Dynamic Items, I was using ajax calls to dynamically modify the DOM of a container. Throughout the project though we would intermittently hear bugs when attempting to add an item and trying to save. Each time the bug would re-occur, I would view the problem area, look stupefied at the cause of the issue, check in a fix, and the problem would go away, only to show up again a week later. What was going on here? Especially since the files in this area had been untouched for weeks!

The problem? Internet Explorer and its aggressive caching. The other browsers are not this adamant about caching ajax calls, at least when it comes to developing testing. And the solution to the problem was a bit more demoralizing:

$.ajax({
	async: false,
	cache: false,
	url: '/Controller/Action',
}).success(function (partialView) {
	// do action
});

One line of code solved weeks of headache Although any fairly seasoned web developer would probably speculate the browser being at fault, as someone who only ever has to deal with one set of specifications (.NET/WCF/EF/WPF/SQL) our team and I were not use to meticulously testing each new feature on every available browser. This meant although someone would find the bug in IE, but in retesting they may have coincidentally retested the feature in Chrome. Or, even worse, republishing the test caused the caching to reset so retesting the feature would get the pass the first time, but would not realize how broken it was until days later. All this means is we need to have a different method for testing web projects and to continue our understanding of how web development can act.

Summary

Working in MVC has been a great learning experience and helped continue my growth in developing in web. Despite my complaints and the hair-splitting, alcohol consuming  problems I do enjoy the breadth and stability MVC provides to the web world. I will continue my progress in the realms of web development and hope these small roadblocks will become less frequent, at the very least for my sanity’s sake.

This Is Why You Don’t Hire Good Developers ->

Laurie Voss, CTO of npm, nailing it over on Quartz: technical interviews are seriously hard, for both sides of the table. Here at IK we’ve put a lot of time and thought into how we screen engineering candidates, and our process is constantly evolving, but a few highlights that match up with Laurie’s thoughts:

    No algorithm quizzes. Ability to memorize trivia answers, while possibly indicative of intellectual passion and capacity, just doesn’t convey enough information about useful engineering skills – and quizzes like this can make an otherwise-fantastic candidate nervous and uncomfortable.
    No on-the-spot white boarding or over-the-shoulder code sessions. Again, stress and time constraints that are artificial and don’t give you an actual picture of engineer productivity. Especially short-sighted are exercises that intentionally limit access to Google or Stack Overflow: how productive would you be on a daily basis without access to both?
    Hiring for fit: Laurie does a great job of calling out what this doesn’t mean, which is hiring for friendship. Cultural fit is hugely important and difficult to define, but it’s easy to fall into the trap of hiring people that “look like they belong”, instead of finding people who bring something new to the table – while still fitting around it.

I’ve worked on a number of engineering teams throughout my career, and happen to have been involved with interviewing on every single one of them. (It’s pure coincidence that this has frequently involved a free lunch with the candidates, I swear.) Growing your team is one of the most important – and most difficult – tasks you face as a company, as it literally reshapes who you are and how you get things done. We’re constantly working at improving our own process, but I’m proud to be a part of such an awesome team of talented folks – something that’s only possible because of how much work we put in to our engineering interview process.

Want to see for yourself just how awesome our technical interviews are? We’re always looking for smart people who get things done.

P.S. Laurie’s piece is seriously great. You should read the whole thing. -> http://qz.com/258066/this-is-why-you-dont-hire-good-developers/