C#er : IMage

Quick Tip: Processing HTML Content in Windows Store Apps

2013-05-20T08:12:00.001-04:00

The WebView control allows you to display content from sites in your app using a small window that renders the HTML using the same rendering engine as Internet Explorer. It does have some limitations and most likely if you are providing content in your app, your goal is to augment your app with fresh data rather than try to superimpose a full-blown web application on your own native Windows Store app.

Trying to strip down content can be quite cumbersome once you wade through the myriad RegEx expressions or other utilities available. Here’s a simple trick that will work with most content-oriented sites like blogs and online magazines. It allows you to get a more basic view of the content and present it without all of the bells and whistles you may end up pulling down with regular content.

Step 1: Be Mobile

When you are loading content, make the server believe you are mobile. This will often result in a simpler page being presented, often without the heavy script tags or headers, table of contents, and other sections included. Here’s a nice mobile user agent string that will impersonate one of the most popular mobile clients out there, an iPhone:

private const string MobileUserAgent = "Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3";

With the mobile header you can override the user agent and request the content. Instead of having the WebView control load the page directly, use the HttpClient and grab the content like this:

var handler = new HttpClientHandler { AllowAutoRedirect = true };

var client = new HttpClient(handler);

client.DefaultRequestHeaders.Add("user-agent", MobileUserAgent);

var response = await client.GetAsync(new Uri(InsertSuperAwesomeUrlHere));

response.EnsureSuccessStatusCode();

var html = await response.Content.ReadAsStringAsync();

Allowing redirects is important because many pages will auto-detect your mobile client and instead of dynamically serving content will redirect you to a new page for the mobile content. This allows the client to follow the redirect and then pull down the content that is tailored to mobile devices. At this stage you may think you have what you need, but if you pass this to the WebView control you’ll find there is often script content trying to make updates that will throw exceptions and generally cause the WebView to choke. Next you must cleanse the data.

Step 2: Cleanse the Content

Cleansing the content may be easier than you think. It turns out that you need to have clean HTML to share HTML content with other Windows Store apps. In fact, the sharing mechanism provides a nice HtmlFormatHelper class (located in the Windows.ApplicationModel.DataTransfer namespace) designed to package your HTML so it is ready for sharing. It also contains a useful GetStaticFragment method that will strip out the dynamic code so you have nice, clean content. The trick is to prep the HTML as if you were going to share it, then get the static fragment so you have the raw text you can load.

var fragment = HtmlFormatHelper.GetStaticFragment(HtmlFormatHelper.CreateHtmlFormat(html));

Now you are ready to show it to the user.

Step 3: Show it to the User

Now that you have clean HTML, you can ask the WebView control to navigate to the string like this:

WebViewControl.NavigateToString(fragment);

That’s all there is to it, and you should get a nice, clean page of data without dynamic tags.

A Fluent Approach to Windows Store Tiles

2013-05-06T20:45:00.001-04:00

Windows Store apps have a variety of tricks up their sleeve for engaging the user even when they are not running. Tiles are a perfect example because they provide at-a-glance information to the user from the start screen. Tiles can provide images, text, or a combination of both and support queuing multiple notifications.

Tiles are defined by various pre-built XML templates. The catalog of tiles is available online in the tile template catalog and can be enumerated via TileTemplateType as defined in the Windows.UI.Notifications namespace. The sample apps for Windows 8 from Microsoft include a helper that allows you to create tiles but it requires instantiating specific classes. I wanted to create a more straightforward and fluent method for defining and setting tiles.

It turns out you can get the template for any tile type by calling GetTemplateContent on the TileUpdateManager class with the TileTemplateType you are interested in. Here’s a fast way to get the XmlDocument:

this.xml = TileUpdateManager.GetTemplateContent(templateType);

With the template I can easily inspect how many lines of text and images it is capable of supporting:

this.TextLines = this.xml.GetElementsByTagName("text").Count;
this.Images = this.xml.GetElementsByTagName("image").Count;

Now I can add text and raise an exception if the amount of text the tile can hold is exceeded:

public BaseTile AddText(string text, uint id = 0)
{
     if (string.IsNullOrWhiteSpace(text))
     {
         throw new ArgumentException("text");
     }
     if (id == 0)
     {
         id = this.textIndex++;
     }
     if (id >= this.TextLines)
     {
         throw new ArgumentOutOfRangeException("id");
     }
     var elements = this.xml.GetElementsByTagName("text");
     var node = elements.Item(id);
     if (node != null)
     {
         node.AppendChild(this.xml.CreateTextNode(text));
     }
     return this;
}

Notice that the method returns the class instance itself. This sets the class up to support a fluent interface with multiple commands chained together. The same logic is used to add images. When you allow your app to provide both a wide and traditional square tile, you can update both formats with a single call. Therefore, you should be able to merge the definitions of multiple tiles:

public BaseTile WithTile(BaseTile otherTile)
{
     var otherBinding = this.xml.ImportNode(
        otherTile.xml.GetElementsByTagName("visual")[0].LastChild,
        true);
     this.xml.GetElementsByTagName("visual")[0].AppendChild(otherBinding);
     return this;
}

Now we can grab the template for a tile, specify text and images, and combine square and rectangular tiles together. The next step is to actually set the tile for the app:

public void Set()

{

    TileUpdateManager.CreateTileUpdaterForApplication().Update(

        new TileNotification(this.xml));

}

I then added an extension method that takes in the type of the tile and returns an instance of my helper class that contains all of the methods described in this post. Putting it all together, the code to set a wide and square tile for an example app I’m building that enumerates all tiles on the system to display the XML looks like this:

// set some default tiles 
TileTemplateType.TileWideText03.GetTile()

                    .AddText("Tile Explorer")

                    .WithTile(TileTemplateType.TileSquareText03.GetTile()

                        .AddText("Tile Explorer")

                        .AddText("A WinRT Example")

                        .AddText("by Jeremy Likness"))

                    .Set();

This certainly makes it easier to update tiles. A complete helper will also include similar methods for badges and notifications of course … that’s all part of the work I’m doing. Full source and examples will be available in my upcoming book and I’ll share more details when I have them.

Design-time Data for Windows Store Apps with C#

2013-04-04T08:57:00.001-04:00

One of my favorite features of XAML is the ability to provide design-time data. This feature is present in WPF, Silverlight, and of course Windows Store apps. The great thing about design-time data is that the developer can create it programmatically when needed or the designer can generate some through Blend. In this post I will share an example of generating design-time data through code. The example is a project I am working on for my upcoming book, and can be downloaded from the website (still in its very early stages) from CodePlex.

In Chapter 5 I am covering the various options for interacting with web services. A company called CDYNE Corporation provides a nice, free weather service that is useful for demonstrating how to connect to a SOAP service. Yes, I know everything today is about REST but trust me, the SOAP services are still around. I’m just glad that the committee that governs the standard was wise enough to declare it is no longer an acronym. In case you didn’t know, SOAP originally stood for “Simple Object Access Protocol” but there was really nothing simple about it. Fortunately Microsoft saw wisdom in WSDL and was kind enough to provide the ability from Visual Studio 2012 to generate a proxy for you.

The focus of this post is design-time data, not web services, so let’s focus on the problem at hand. The web service I am referring to provides two APIs I’ll be using. One will resolve a zip code to a city and provide a forecast, and the other takes various weather “types” and provides a corresponding URL so that you can show a friendly icon for “sunny” or “cloudy” etc.

The first step I take is to model the result. Although I could use the model generated by the proxy, I find it’s often better to create your own domain model with the pieces you want so you don’t have to take a dependency on the service itself. You can easily map the service model to a domain model. The main service returns a result that provides the city and state (if it was successfully resolved) and a collection of entries that represent the forecast for each day of the upcoming week.

A “forecast” generated by the service looks something like this (taken from the proxy itself):

public partial class Forecast : object, System.ComponentModel.INotifyPropertyChanged 
{
         private System.DateTime dateField;
         private short weatherIDField;
         private string desciptionField;
         private temp temperaturesField;
         private POP probabilityOfPrecipiationField;
}

I’ll model it a little differently. Some developers will cry out and gnash their teeth when they see me exposing a property to convert the date instead of using a value converter, but I say … cry away. Here is the entry:

public class ForecastEntry

{
     public DateTime Day { get; set; }
     public string DayText
     {
         get
         {
             return this.Day.Date.ToString("D");
         }
     }
     public int TypeId { get; set; }
     public string Description { get; set; }
     public string PrecipitationDay { get; set; }
     public string PrecipitationNight { get; set; }
     public string TemperatureLow { get; set; }
     public string TemperatureHigh { get; set; }
     public Uri ForecastUri { get; set; }
}

And here is the extension method to convert from the service to an instance of my domain entry:

public static ForecastEntry AsForecastEntry(this Forecast forecast)

{
     return new ForecastEntry
     {
         Day = forecast.Date,
         Description = forecast.Desciption,
         PrecipitationDay = forecast.ProbabilityOfPrecipiation.Daytime,
         PrecipitationNight = forecast.ProbabilityOfPrecipiation.Nighttime,
         TemperatureLow = forecast.Temperatures.MorningLow,
         TemperatureHigh = forecast.Temperatures.DaytimeHigh,
         TypeId = forecast.WeatherID
     };
}

That was easy enough – and would have been even easier with a tool like AutoMapper. Now we can create a simple user control that displays a single entry. Here is the XAML (keep in mind I get paid mostly for development, not design):

<Border Width="230" Height="200" Background="DarkBlue" CornerRadius="20">

<Grid d:DataContext="{Binding Source={d:DesignInstance Type=data:DesignForecastEntry, IsDesignTimeCreatable=True}}"         Margin="10"         Width="210">
     <Grid.RowDefinitions>
         <RowDefinition Height="40"/>
         <RowDefinition Height="60"/>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
     <TextBlock Text="{Binding DayText}"
                TextWrapping="Wrap"
                Style="{StaticResource BodyTextStyle}"
                HorizontalAlignment="Center"/>
     <Image Width="50" Height="50" Grid.Row="1">
         <Image.Source>
             <BitmapImage UriSource="{Binding ForecastUri}"/>
         </Image.Source>
     </Image>

     <TextBlock Text="{Binding Description}"
                 Grid.Row="2"
                 Style="{StaticResource CaptionTextStyle}"
                 HorizontalAlignment="Center"
                 Margin="5"/>
     <StackPanel Grid.Row="3"
                 HorizontalAlignment="Center"
                 Orientation="Horizontal">
         <TextBlock Text="Low:"/>
         <TextBlock Text="{Binding TemperatureLow}" Margin="10 0 0 0"/>
         <TextBlock Text=" / High:"/>
         <TextBlock Text="{Binding TemperatureHigh}" Margin="10 0 0 0"/>
     </StackPanel>
     <StackPanel Grid.Row="4" Orientation="Horizontal"
              HorizontalAlignment="Center">
         <TextBlock Text="Chance of Precipitation:"/>
         <TextBlock Text="{Binding PrecipitationDay}" Margin="10 0 0 0"/>
     </StackPanel>
</Grid>
</Border>

There is no way I would be clever enough to design that simply by tapping out XAML and I’m far too lazy to put an entry and then run the app and repeat. In fact, I like to build from the bottom up – in other words, I worked on the forecast entry first, then the entire forecast, then the page to request the forecast, so if I didn’t have design-time data it would be impossible for me to preview the app before I wired everything in! If you can eyeball that XAML and tell me what it looks like … wow. More power to you! I, on the other hand, just created a simple class:

public class DesignForecastEntry : ForecastEntry

{
     public DesignForecastEntry()
         {
             this.Day = DateTime.Now;
             this.ForecastUri = new Uri(

               http://ws.cdyne.com/WeatherWS/Images/mostlycloudy.gif, 
               UriKind.Absolute);
             this.Description = "Sample day for weather";
             this.PrecipitationDay = "50";
             this.PrecipitationNight = "20";
             this.TemperatureLow = "25";
             this.TemperatureHigh = "49";
             this.TypeId = 1;
         }
}

Now the reference in the XAML makes sense. Specifically, you can specify a d:DataContext that is a data context only used at design time. You pass the type and inform the designer that it can be instantiated, and then in design-time you get something beautiful like this:

The best part? Even with my aesthetically challenged design skills, I can tweak the XAML and see the changes reflected immediately. I’m not complaining about the end result, are you? Now there is the whole forecast that I modeled like this:

public class WeatherForecast

{
     public WeatherForecast()
     {
         this.Forecast = new List<ForecastEntry>();
     }
     public string City { get; set; }
    public string State { get; set; }
    public string Result { get; set; }
    public List<ForecastEntry> Forecast { get; private set; }
}

And the XAML for the whole forecast:

<Grid d:DataContext="{Binding Source={d:DesignInstance Type=data:DesignForecast, IsDesignTimeCreatable=True}}">
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <StackPanel Orientation="Horizontal" Margin="10">
         <TextBlock Text="{Binding City}" Style="{StaticResource HeaderTextStyle}"/>
         <TextBlock Text="," Style="{StaticResource HeaderTextStyle}"/>
         <TextBlock Text="{Binding State}" Style="{StaticResource HeaderTextStyle}" Margin="20 0 0 0"/>
     </StackPanel>
     <TextBlock Grid.Row="1"
                  Text="{Binding Result}"
                  Style="{StaticResource PageSubheaderTextStyle}"
                 Margin="10"/>
     <GridView Grid.Row="2" ItemsSource="{Binding Forecast}">
         <GridView.ItemTemplate>
             <DataTemplate>
                 <local:ForecastEntry/>
             </DataTemplate>
         </GridView.ItemTemplate>
         <GridView.ItemsPanel>
             <ItemsPanelTemplate>
                 <WrapGrid MaximumRowsOrColumns="1"/>
             </ItemsPanelTemplate>
         </GridView.ItemsPanel>
     </GridView>
 </Grid>

The design-time model for the forecast is kind enough to offer some variety and generate several days of entries.

public class DesignForecast : WeatherForecast

{
     private readonly Uri[] testUris = new[]
      { 
          new Uri("http://ws.cdyne.com/WeatherWS/Images/mostlycloudy.gif",
                   UriKind.Absolute),
          new Uri(http://ws.cdyne.com/WeatherWS/Images/sunny.gif,
              UriKind.Absolute)
        };
     public DesignForecast()
     {
         this.City = "Woodstock";
         this.State = "GA";
         this.Result = "Design-mode data";
         for (var x = 0; x < 7; x++)
         {
             var offset = 7 - x;
             var entry = new ForecastEntry
             {
                 Day = DateTime.Now.AddDays(-1 * offset),
                 ForecastUri = this.testUris[x % 2],
                 Description = string.Format("Rainy {0}", x),
                 PrecipitationDay = "50",
                 PrecipitationNight = "20",
                 TemperatureLow = "25",
                 TemperatureHigh = "49",
                 TypeId = x
             };
             this.Forecast.Add(entry);
         }
     }
}

And this is what I see in the designer:

How cool is that? Now I have what I need. The view model exposes a zip code for the user to enter and an instance of the forecast. The view model I instantiate directly but in the constructor detect design mode and set the forecast property to a design version:

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)

{
     this.currentForecast = new DesignForecast();
     this.zipCode = "30189";
     return;
}

(Here’s a tip – I usually set the field values in design mode so the property change notification isn’t fired – when it’s done in the constructor it will be there in time for binding to the design view).

Now I have the whole app assembled, and even with a “real” instance of the view model in the designer, I’m able to see what the app will look like.

The individual design instances let me compose the UI with design-time data, while the view model can then instantiate a design instance or “go live” and actually call the service to provide a “real” weather forecast. Here’s what the runtime looks like … not too much different from the design-time view!

Thank goodness for XAML and the ability to easily create design-time data for our apps.

Asynchronous Commands in Windows Store Apps

2013-03-10T13:46:00.001-04:00

The Model-View-View Model (MVVM) pattern is more popular than ever and is built into the Visual Studio templates for creating Windows Store apps. Developers familiar with Silverlight already encountered the platform shift to using asynchronous operations because it was impossible to generate a WCF client with synchronous methods. The Windows Runtime (WinRT) takes this further by dictating any operation that may potentially take longer than 50ms to complete should be asynchronous.

How does the MVVM pattern handle asynchronous operations, when the command interface ICommand only exposes synchronous methods?

namespace System.Windows.Input
{
     public interface ICommand
     {
         event EventHandler CanExecuteChanged;
         bool CanExecute(object parameter);
         void Execute(object parameter);
     }
}

Now consider a simple implementation of a command we’ll call an ActionCommand because it allows you to specify a delegate to perform and action when it is invoked. It also provides a predicate to condition the command and a public method to notify the command when the conditions for the predicate have changed.

namespace MyApp.Common
{
     using System;
     using System.Windows.Input;
     public class ActionCommand : ICommand
      {
         private readonly Action action;
         private readonly Func<bool> condition;

         public ActionCommand()
         {
             this.action = delegate { };
             this.condition = () => true;
         }
         public ActionCommand(Action action)
         {
             this.action = action;
             this.condition = () => true;
         }




         public ActionCommand(Action action, Func<bool> condition)
         {
             this.action = action;
             this.condition = condition;
         }
         

         public event EventHandler CanExecuteChanged = delegate { };
         public void RaiseExecuteChanged()
         {
             this.CanExecuteChanged(this, EventArgs.Empty);
         }
         public bool CanExecute(object parameter)
         {
             return this.condition();
         }
         public void Execute(object parameter)
         {
             this.action();
         }
     }
}

As you can see, there is no Task in the implementation of ICommand, nor any asynchronous code. As you are also aware, WinRT requires asynchronous code when you are performing various operations including a dialog. Here is an example of code that copies text and HTML to the clipboard and then shows a dialog to the end user they must confirm to acknowledge the copy was successful. The method is asynchronous.

private async Task Copy()
{
     var package = new DataPackage();
     package.SetText(this.DataManager.CurrentPage.Text);
     package.SetHtmlFormat(HtmlFormatHelper.CreateHtmlFormat
        (this.DataManager.CurrentPage.Html));
     Clipboard.SetContent(package);
     var dialog = new MessageDialog(
        "The web page was successfully copied to the clipboard.");
     await dialog.ShowAsync();
}

Now you have to wire it to the command implementation that is not asynchronous. How can you? Fortunately, the magic that is asynchronous code is able to combine forces with lambda expressions to enable you to handle asynchronous code “on the fly.” Here is the code to wire-up the command to call the Copy method asynchronously:

this.CopyCommand = new ActionCommand(
     async () => await this.Copy(),
     () => this.CopyEnabled);

That’s it. The action itself may be implemented as an asynchronous operation simply by invoking the async keyword and using the await operator. That’s how easy it is! While you should typically declare your interface consistently – for example, declaring them to return a Task when they should be implemented asynchronously – using this technique you can apply an asynchronous operation to the existing contract when needed. This means your commands can be asynchronous if and when needed, in full compliance with the WinRT guidelines.

Windows Store Apps, SVG, and HTML Interoperability

2013-02-28T08:05:00.001-05:00

There are several reasons you may wish to show HTML content in your Windows Store app. You may have information that is updated frequently and makes the most sense to consume as HTML data. Your app may aggregate feeds that contain HTML content. In some cases you may be creating a native client that accesses an existing web-based application that you need to interoperate with. Fortunately, the WinRT has a control that addresses these needs: the WebView control.

It is important to understand what the purpose of the control is and how that may impact how you architect your app. The control itself is not intended to be a complete replacement for a browser. Indeed, Microsoft has made it clear that if you try to get an app approved in the store that tries to solely interact with a web-based app or simply act as a web browser, it will be rejected [1-Ten Things You Need to Know about WebView]. There are several limitations built into the control that prevents many scenarios.

The control uses the Internet Explorer 10 engine. It does not support advanced features in HTML5 including caching, indexed databases, programmatic access to the clipboard, or geo location. It supports the same version of the Document Object Model (DOM) that is used by Windows Store apps written in JavaScript [2 - Document Object Model (DOM) (Windows)]. There is no support for any type of plug-in or ActiveX extension, including Flash, Silverlight, or embedded PDF documents.

There is full support for enhanced protocol handling [3 - Auto-launching with file and URI associations]. This provides support for things like custom protocols that allow you to access resources embedded in your app as well as links that will automatically launch the program associated with them. You can generate a web page that, when viewed, not only provides content served from within your app, but also allows the user to open those resources using their preferred app (for example, a resource with a .pdf extension will open with the preferred reader app).

The control is also unique because it cannot be covered by other controls. It completely takes over the pixels defined for its area. Any controls that you attempt to place in front of the WebView control will be cropped. If you must overlay the page with controls, you can capture the current view using a special WebViewBrush and use that brush to render a surface.

The final and perhaps most important feature of the WebView control is the ability to interoperate with your Windows Store app. Your app can communicate with the web page by invoking JavaScript functions and passing in parameters. The page can also interact with your app by calling a method on an object that WinRT creates in the DOM. This allows you to create some truly interactive experiences between web content and your Windows Store app.

The WebViewExamples project contains several examples of working with HTML and JavaScript. MainPage.xaml defines a WebView control named WebViewControl and a brush named WebBrush. When the page is loaded, a handler is registered to the LoadCompleted event on the WebView. This will fire any time a new resource (whether it is a string literal or a web page) is loaded. It will force the brush to refresh and show a dialog indicating the content that was loaded.

private async void WebViewControlLoadCompleted(object sender, NavigationEventArgs e)
{     
     WebBrush.Redraw();
     var url = e.Uri != null ? e.Uri.ToString() : "Text Content";
     var popup = new MessageDialog(url, "Content Loaded.");
     await popup.ShowAsync();

}

The first button triggers a straightforward page load.

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
     this.WebViewControl.Navigate(new Uri(JeremyBlog));
}

The page is my main blog page. You’ll find it loads and renders fine. You can also click on links and navigate just as if you pulled the page up in a web browser. There are no forward or backwards buttons and there is no place to enter a new address so you are stuck following the links provided by the control. Notice that the dialog fires every time you navigate to a new page – you could easily use this feature to inspect where the user ended up and hide the control or reset it if needed.

The second button invokes a specific page as a mobile client by writing a user agent that mimics an iPhone. My blog will detect that a mobile device is accessing the page and redirect to a mobile-friendly page. In this mode you may see several errors thrown by the debugger. This is because the WebView control will throw an error any time it encounters a JavaScript error or an issue parsing the DOM. You can turn off the JavaScript errors by going into the debugger settings and un-checking Script under the Just-In-Time tab. Other errors you have to muscle through and just select No – on my machine the mobile page generates four errors I must acknowledge before accessing the page. If you run the app outside of the debugger, it will swallow these errors and run normally.

The only way to update the user agent that the WebView control uses is to use some hacks that will prevent your app from making it into the app store. For those hackers in the audience, you’ll need to p/Invoke urlmon.dll and call UrlMkSetSessionOption with option 0x10000001 and your user agent string prior to navigating with the control. A more direct approach is to download the page yourself and pass it to the control as text. The steps are shown below.

private async void ViewMobile_OnClick(object sender, RoutedEventArgs e)
{
     var handler = new HttpClientHandler { AllowAutoRedirect = true };
     var client = new HttpClient(handler);
     client.DefaultRequestHeaders.Add("user-agent", MobileUserAgent);
     var response = await client.GetAsync(new Uri(JeremyYogaPost));    
     response.EnsureSuccessStatusCode();
     var html = await response.Content.ReadAsStringAsync();
     this.WebViewControl.NavigateToString(html);
}

The example sets up a client that accepts redirects (in the case of the blog post reference, it will redirect to a mobile version), then creates a client and sets the user agent to mimic a mobile device. The page is requested and the code ensures a successful response was obtained before loading the content of the response and sending it to the WebView control.

This technique is common for requesting content in a format that is suitable for viewing within your app (mobile content tends to have less chrome so it is easier to process). You can also parse and analyze the content prior to presenting it to the end user. This allows you to strip unwanted tags or even inject your own JavaScript and content as needed prior to the page being displayed.

In some apps you may wish to include embedded HTML resources for your apps to display. The third button demonstrates this technique. It also shows that the rendering engine has full support for Scalable Vector Graphics (SVG) [4 - W3C SVG Working Group], which can be useful if you need to integrate charts or vector-based graphics in your application and have existing implementations using SVG. In the example app, there is an embedded HTML file named Ellipse.html in the Data folder.

Referencing this resource is simple and straightforward. The special ms-appx-web protocol provides a path to the WebView control that is embedded in the store app. You’ll notice it uses three forward slashes and then provides a path to the resource in the app from the root.

private void ViewSvg_OnClick(object sender, RoutedEventArgs e)
{
     this.WebViewControl.Navigate(new
          Uri("ms-appx-web:///Data/Ellipse.html"));
}

You can also embed static text (or dynamic text that you build and generate prior to passing into the control). The fourth button triggers the load of a string literal. The literal contains the text for an HTML document and includes various header tags, an embedded image (the logo of the app itself), and a hyperlink that demonstrates you can navigate to embedded content or external content. If you follow the link to the external website, you’ll see that the base URL is consistently reported as static text because that’s how the original document was loaded.

private void ViewString_OnClick(object sender, RoutedEventArgs e)
{
     this.WebViewControl.NavigateToString(HtmlFragment);
}

The final button demonstrates how your app can interoperate with the web. To show this, I included a JavaScript function in the template of my blog. The function is just a few lines of code. If you load any page from my blog and view the source, you can search for “supersecret” to locate the function:

function superSecretBiographyFunction(subPath) {
window.location.href="http://csharperimage.jeremylikness.com/" + subPath;
}

The function is usually not called, but that will change if you load one of the blog pages using the example app and click the last button. The code snippet below shows the implementation. The InvokeScript method is used to call the function. You can pass in null for a function that takes no parameters, otherwise you can pass in an array of values. In this case the path to my biography is passed in, and the page picks it up and navigates to the path. Note that you can call JavaScript on any type of page the control rendered, including embedded resources or literals you’ve passed in.

private async void CallJavaScript_OnClick(object sender, RoutedEventArgs e)
{
     MessageDialog popup = null;
     var parameters = new[] 
                          {
                                 "p/biography.html"
                          };
     try 
     {
        this.WebViewControl
                .InvokeScript("superSecretBiographyFunction", parameters);
    }
    catch (Exception ex)
     {
        popup = new MessageDialog(ex.Message, "Unable to Call JavaScript.");
     }
     if (popup != null)
     {
         await popup.ShowAsync();
     }
}

An attempt to invoke a function on page that doesn’t have that function will result in an exception. The code captures the very user-unfriendly exception and displays it for you. The pattern is important to note because it is not possible to use the await keyword from within a catch block. The workaround is to capture any necessary information needed in the catch, then await the dialog to display the information once the block is exited.

Although sending information to a page is nice, wouldn’t it be great if you could receive information back? This scenario is possible and you can in fact create apps that have two-way conversations with web pages. If you searched for the source snippet above, you may have also noticed this block of code:

if (document.title==='C#er : IMage: Synchronous to Asynchronous Explained') {
if ((typeof (window.external) !== "undefined") && (typeof (window.external.notify) !== "undefined")) {
window.external.notify(new Date().toLocaleString());
}
}

I would not normally do a string comparison against a topic title to trigger application logic, but I can get away with it here because I own the blog and am not planning on changing the title. When the user navigates to a specific topic inside a WebView control, the web page itself will actually send a message to the Windows Store app that contains the localized date and time. The communication between the web page and the Windows Store app is illustrated here:

The function first checks for the existence of the window.external object. This is provided to the JavaScript runtime by Internet Explorer to provide access to the object model of the host [5 - External object (Internet Explorer)] (in this case, the host is the WebView control). The control in turn exposes the notify method to the runtime. A call to this from the web page with a single string parameter will raise the ScriptNotify event on the WebView control.

The example app simple stores the value that is passed to a local variable.

private void WebViewControlScriptNotify(object sender, 
    Windows.UI.Xaml.Controls.NotifyEventArgs e)
{
     this.message = e.Value;
}

Once the entire web page is loaded, the LoadCompleted event checks for this value and displays it when present.

if (string.IsNullOrEmpty(this.message))
{
     return;
}
 
popup = new MessageDialog(
     this.message,
      "The Blog Has Spoken!");
this.message = string.Empty;
await popup.ShowAsync();

To see this in action, use the timeline on the right side of my blog to navigate to the year 2012, the month August, and the title “Synchronous to Asynchronous Explained.” The result should be two pop-ups, one to notify you when the page has loaded and a second that declares the blog has spoken and displays the date. This closes the loop and demonstrates how Windows Store apps can load, display, and interact with HTML-based content.

This post just scratches the surface of what is possible but hopefully provides you with an in-depth demonstration of how you can embed HTML, SVG, and even JavaScript in your Windows Store apps.

Full Source Code

Side-Load Package

Review of the Lenovo IdeaPad Yoga 13 for Development

2013-02-17T18:38:00.001-05:00

After several months of comparing various Windows 8 devices to replace my old 1.5” thick 6-lb. Dell laptop, I finally settled on the Lenovo IdeaPad Yoga 13. My requirements are fairly straightforward: I want 8GB of RAM and a minimum of 256GB SSD, I have to have a touch display and the resolution needs to be at least HD+ (1600 x 900). I wasn’t as concerned about budget and there was one device that fit the bill perfectly: the ASUS ZenBook Prime Touch. The only catch was that the 8GB version isn’t yet available in the states. I also didn’t feel like waiting for the Helix and other devices. The Dell XPS 12 was a strong contender but I had a hard time committing to such a small (12.5”) display, and the ThinkPad X1 Carbon Touch would have likely been my choice if Lenovo didn’t have supply problems that prevented them from shipping it for 4 – 8 weeks after ordering.

I did want to stick with the maxim of “thin and light” because part of the reason for replacing my perfectly competent Dell is the simple fact it gets old lugging something that thick and heavy around. The only two concerns I had with the Lenovo were the keyboard (the ThinkPad line has the best keyboards out there, but I also know I can purchase a USB external version if I need one) and the display (1600 x 900 is fine, but I really wanted full 1080p at 1920 x 1080). So, after much deliberation, I pulled the trigger and purchased my Lenovo from Amazon after locating a third-party seller who had it in stock (the 8GB models are suddenly very hard to find).

Un-boxing

UPS dropped off my box just a few days after I purchased it through Amazon.com. The box is simple and easy to open and gives you immediate access to the components within. It ships with the laptop, a power cable, and some documentation to get started quickly. Obviously there is no “instructional DVD” as there is no DVD included. I was debating whether or not to invest in a portable DVD burner, but I realized I rarely use the one I have unless it’s to install software, and then I can just burn an ISO to my home network and install from that. I passed on it for now.

I don’t do un-boxing videos but it was really mundane – a few slices with my Buck knife and I was in, then plugged in the adapter and booted it. The boot time is under 10 seconds. I spent just a few minutes logging into my Microsoft Account and specifying my WiFi options and I was logged in with most of my content synchronized. All of my Windows 8 roaming settings carried over and most of my writing is synchronized through SkyDrive. The installs for Office, SQL, and Visual Studio with a few extensions all took only an hour or two. It took a little longer to copy some resources over my local network but it wasn’t long before I was transitioned over to the new laptop.

Here’s a quick snap of the laptop sitting on the tray on my Delta flight:

Look and feel

The laptop itself is very simple. It has a solid build and feel. It’s not designed with a sleek taper like the MacBook, Samsung, or even ASUS models, but this is a 13.3” ultrabook and that means light (3.34 lbs – heavier than other tablets but half the weight of my Dell) and thin (17mm, again about half the thickness of my Dell). The outside is a nice monochrome silver metal (top and bottom – apparently bold users can get an orange one too) while the inside sports a black keyboard and frame around the screen. The inside looks almost like leather but is texture plastic. The touchpad is glass.

Here’s the laptop closed:

Specs

The system I ordered sports an Intel Core i7-3537U (U for Ultralow voltage) processor w/ 2.00 GHz that over-clocks up to 3.1 GHz. It is dual core with hyper-threading allowing for 4 virtual cores. The installed memory is 8.0GB and I’m happy to say after quite a bit of usage this laptop isn’t memory hungry even when running a full developer edition of SQL Server 2012 and building/running an MVC 4 enterprise application using Entity Framework that is composed of over 20 different projects. It compiles the project roughly 33% faster than my Dell that had the same specs, which I’m assuming I can attribute to the included Samsung SSD. From the specs I’ve read it’s midrange speed (over 200 MB both read and write, whereas some models like the Dell XPS 12 almost double the read rate). The Windows Experience Index rates it solid in almost everything but desktop graphics, but that’s the trade-off with the ubiquitous Intel HD 4000 chip – you’re getting it for business, not heavy 3D gaming.

Included are Bluetooth 4.0 that works quite well (more on that later), Sensors include ambient light, orientation and compass. Orientation sensors are there as I’ve verified with several programs and I don’t believe there is GPS although the location services do quite well using the network to locate your position. There is no Near Field Communication (NFC) unfortunately.

Ports

Starting at the back of the device and going clockwise, we have some vents, square proprietary power adapter, USB 2.0, mini-card reader and orientation lock. The front includes the battery indicator, power button, and Lenovo one-touch restore. Finally we have volume rockers, headphone and microphone jack (single jack), USB 3.0 and full HDMI.

Keyboard

One reason I was reluctant to invest in the Yoga was my fear that the smaller keyboard would require me to invest in an external keyboard. I have been using an external one for some time but have been hoping to consolidate and just use the included laptop. The biggest complaints I’ve read are that the laptop feels cramped and there are issues with the location and size of the right shift key.

After working on this laptop full time for several days, both developing code and working on my next book, I can say that my opinion is that this keyboard is phenomenal. Maybe I’m biased because I’m used to the really small ASUS VivoTab RT keyboard and this is much larger, but it truly has been a pleasure using the keyboard. I’m able to easily find the keys, they have perfect travel and feedback and a nice, soft touch (and yes, I do use the right shift key). It is much quieter than my external keyboard. While the locations of the Home, End, etc. keys are slightly different than what I’m used to, I quickly adapted to them and haven’t found it to be a problem. I took a typing test online that lasted one minute and was able to type 109 Word Per Minute at 100% accuracy, so no complaints here – I doubt I’ll be investing in an external keyboard.

The only complaint I have is the trend that seems to be common in newer ultrabooks and that’s making the function keys default to laptop functions instead of, well, function keys. The default mode is for the keys to do things like adjust volume, switch to airplane mode and change the brightness of the display. As a developer I’m constantly using function keys from within Visual Studio and it can be jarring to hit F10 to step through code and have the external monitor fly-out appear instead. I’m assuming there is some way to swap the default but I haven’t looked into it yet and I seem to be getting “trained” on holding down the FN key to make them work as expected.

Touchpad

I’ve seen a lot of negative touchpad reviews in general so I was concerned about this experience as well. I can say my fears were completely unfounded. I find the touchpad to be extremely responsive to both normal “desktop mode” mouse pointer emulation and full Windows 8 gesture recognition. I consistently use it to swap between applications, pull up the charm bar, activate the application bar and scroll both vertically and horizontally. It has the right level of sensitivity and I don’t miss the mouse at all. There are no raised buttons for clicks – you depress the lower left or right – but that is fine. Palm detection is superb and I have yet to have a “miss” where I’m typing and my palm forces the cursor to jump elsewhere.

My only complaint about the touchpad is that sometimes I’ll try to move the cursor and accidently swipe from the edge to activate a Windows 8 gesture instead. Fortunately the touchpad is fairly large so it is easy to adapt to this.

Screen

When I started my search for a replacement laptop, I was fairly certain I only wanted to consider full HD at 1080p. It was frustrating to find most of Lenovo’s offerings standardized at the lower 1600 x 900 resolution. After using the laptop, however, I can safely say that this resolution works fine. It is very sharp and bright and watching full screen movies is an amazing experience. I am really pleased with the display, both for its brightness and viewing angles. While it is a glossy (not a matte) display, it is bright enough that I can use it quite well even in bright, outdoor conditions. While the screen is 13.3” there is significant frame around the edge, unlike the ThinkPad X1 Carbon Touch which manages to fit a larger screen in the same size space by bringing it to the edges. This is not an issue in my mind because it makes it easy to use gestures and swipe from the side of the screen. The screen does take to fingerprints easily, but a small cloth takes care of that (and again, the brightness makes it difficult to notice).

The touch works flawlessly and handles all swipes and multi-gestures without issue. The only thing it is lacking is a digitizer pen. I feel like these should be standard with touch screens because they offer so much added precision and flexibility. Speaking of flexibility, the whole point of the Yoga is the various screen orientations that are available and it works well. While I won’t be using it in full laptop mode often, flipping the screen over in “display mode” (imagine the keyboard facing down and the screen closest to you rather than farther away as it is in the traditional laptop mode) is perfect for playing touch games while it’s resting on my lap or resting on my chest when I want to lie down and watch movies.

Sound

I’m more of a headphones person so I’ve never paid much attention to laptop speakers unless I’m bringing it outdoors to provide some entertainment. The speakers are housed beneath the keyboard and have decent volume. There is obviously no throbbing bass due to the ultrabook form factor but the volume and clarity are enough to make this work to play some tunes on the deck or while I’m packing my bags for a trip. The laptop comes with Dolby Home Theater and an impressive equalizer that I couldn’t tell you I know how to use.

I mentioned earlier I would share more about the Bluetooth. After an exhaustive search I decided I wanted to invest in a Bluetooth headset (more on the model, etc. below). The headset connected immediately and without issue to my Yoga and produces amazing quality sound. I haven’t tried it for a Skype call yet so the jury is out on the microphone, but I’m used to the older Bluetooth that was tinny and distorted. I’m getting a full range of CD quality sound that is fantastic. I love the freedom of listening without having to keep track of an audio cord.

Performance

General performance is fantastic. It will definitely serve as my primary development machine. I’ll talk a bit more about extensibility later, but I do two primary tasks during the day: writing and developing. The laptop performs superbly for both. My current configuration uses a docking station (more on that later) to extend to two additional monitors, giving me a setup with three monitors total (the laptop 1600 x 900 and two 21” 1920 x 1080). I often have a web application on one screen, Visual Studio on another screen, and email or a team chat window open in the third window. I’m debugging a large enterprise project over a Cisco VPN over wireless and it all works flawlessly. Compile times are about 33% faster than my old Dell workstation (again, I attribute this mainly to the speed of the SSD drive) and everything just feels snappy. I haven’t figured out why yet (maybe there are more programs I’ve yet to install) but in general the Yoga seems to consistently use less memory than my Dell setup. Again, it could be some background agents that aren’t running yet.

I read some complaints about the WiFi not being dual band. I’m sure down the road I might have an issue with that but for now the bands included more than match the speed of my connections. My recent test gave me 28 Mbps which exceeds the advertised pipe for my Comcast broadband. No issues there!

Camera

The built-in camera is perfect for video conferences. I lead a large distributed development team and we frequently conduct virtual meetings using WebEx, GoToMeeting or even Google Hangouts. The team reported that the camera looked great and the built-in microphone was perfect. I made several Skype calls and had no complaints about audio fidelity. The following was taken during my flight with the screen shaking somewhat – note I’m leaning into the aisle to try to avoid bumping elbows with my seat mate.

Battery Life

The huge brick of a Dell I am used to would be lucky to get about 2 hours of solid battery life even with a bulky battery. My ASUS VivoTab RT, on the other hand, seems to go on forever – even on international flights I’ve never come close to running the battery out. While the Yoga may not be comparable to some laptops that approach the 10 hour range, the battery life is still impressive. I’ve had two tests so far – one was at my daughter’s archery competition when I was working on code samples and writing between her sets, and the second is writing this on a flight from Atlanta to Seattle. In the latter case I was editing the blog post, downloading software and listening to music over Bluetooth for the duration of the flight. Neither time did I completely drain the battery, but it showed plenty time remaining even after several hours of use at full brightness. It looks like I am on track to get a full five hours of use before recharging, and I’m assuming that will dwindle if I’m doing things like watching Netflix full screen. Overall I’m perfectly satisfied with the battery life because seldom will I be in a situation that requires it last longer.

Software

Although there were some complaints about initial configurations losing up to 40GB of storage, Lenovo seems to have addressed these and ships the laptop with only about 20GB taken up for recovery. That may seem like a lot but on the 256GB system I didn’t even bother with re-partitioning. I can always do that later if I need the space but for now I’m fine with having the little bit of recovery media available in case I need to reset.

Otherwise the shipped software was fairly light. I immediately uninstalled the McCaffee anti-virus as I find the built-in Microsoft tools to be sufficient. So far I’m tolerating the YouCam software, it seems to be a lot of bells and whistles around the built-in camera. Otherwise there is Kindle that holds the current copy of Steve Jobs’ biography that I’m reading, Evernote, a Tetris-like game that features birds, and some Lenovo software like gesture support for the cam and general support for the laptop. Windows 8 makes it extremely easy to simply tap and uninstall unwanted software, while some of the other programs need to be removed from the control panel.

Extensibility

One reason I used to always get Dell machines was due to the docking station that made it easy to dock and connect to multiple peripherals including a multi-monitor setup. This used to be something you had to give up when moving to ultraportable devices. Not any more! There are quite a few options that make it easy to extend the setup.The first thing I invested in was a Targus USB 3.0 Docking Station. The reviews seemed to go either way for this so I decided to take a chance. I am glad I did. I literally unboxed the Targus and plugged it into the Lenovo and it was recognized instantly – the drivers installed automatically in seconds. I was able to plug in my external USB 3.0 hard drive and set up File History. I then connected my two external monitors. The docking station has one DVI and one HDMI. I have two DVI cables. No worries, the docking station includes all of the converters you could hope for so I simply used the HDMI port with a DVI converter and was instantly greeted with three screens, the vivid Yoga at 1600x900 and my two 21” at 1920 x 1080 (when I return from the MVP summit I plan to connect one of them directly to the Yoga’s HDMI). The USB charging port was able to quickly charge my Sennheiser MM 450 headphones (that’s another review – I love them). Now docking my Lenovo is as simple as plugging a cable into the USB 3.0 port.

Here is the three-screen setup:

The other accessory I got was for the road. With all of the coding and writing I do, I’ve come to rely on a dual-monitor set-up. Before I’d travel with my brick of a Dell along with a huge external keyboard and still be stuck with a single screen. Now with the lighter main laptop I was able to invest in a Lenovo ThinkVision 14” mobile monitor. This is a thin monitor that has a hard plastic cover to slide over and protect the glass and runs solely from USB power (there is an included Y-cable for situations when your ports are underpowered). Once again I plugged this in and instantly the driver was recognized and installed. The monitor is only 1366 x 768 and not very bright on a single USB port but it does double the number of screens and give me the workable space I need (it’s perfect for a Word document set to fit the display width when I have Visual Studio pulled up on the higher resolution laptop screen). It takes the place of my external keyboard in my laptop bag (no longer needed because the Yoga keyboard is so great) and ironically takes up less space. If you are interested in this option you may wish to wait; Lenovo is coming out with a 1600 x 900 model later this year with a touch and digitizer pen option.

Conclusion

So far I’m extremely pleased with the investment. I am still curious about some of the other devices coming down the pipe in 2013 but the Yoga has exceeded my expectations. It is light, thin, portable, yet powerful enough for me to conduct all of my daily tasks faster than I did on my previous workhorse laptop. That one, by the way, is going to get an installation of Plex and become the family media server.

Have you recently purchased a Windows 8 device? What device was it and why did you pick that particular model? How do you like it? Please leave your feedback in the comments section below and feel free to ask any questions you may have regarding the Yoga. Thanks!

Referencing the Windows Runtime from Desktop Apps

2013-01-14T07:01:00.001-05:00

Most people think of the Windows Runtime as being synonymous with the formerly-known-as “Metro” applications, now called Windows Store apps. To add to the confusion, of course, is the fact that the ARM-based version of the Windows OS is branded as Windows RT. Programmers, being lazy, like our abbreviations so the runtime has been adopted by the world at large as WinRT. Did you know you can reference WinRT from desktop applications? It’s possible, but not easy nor straightforward.

There are actually two approaches you can follow if you wish to build a desktop application that references the Windows Runtime. The first, through the IDE, works like this:

First, create your project and target the .NET Framework 4.5 or later. You see what I did there? By using “later” I’m hoping this post will still be relevant next year. Once your project is created, right-click on the project node and select Unload Project. You should get something like this:

Now edit the project and add the following tag inside a PropertyGroup element:

Reload the project and you’ll now have access to WinRT. If you go to the Add References tab, There will be a new option to add the Core for the Windows Runtime:

Be sure this is included. You might feel like you’re good to go, but there’s actually more to it. Trying to reference WinRT components and compiling will result in an error like this:

You need to add another reference to System.Runtime.dll – to do this, browse to the folder:

c:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\Facades

You know the drill: if you’re on 32-bit, remove the (x86) portion. There you will find any other necessary DLLs you need to build and compile your application. If that seems like a lot of work, it is. You could try an alternative. My colleague Jeffrey Richter shows you how to do it from the command line in Using the Windows Runtime from a Non-Metro application.

You’ll quickly learn that not all APIs are available to desktop applications, and some that are available on the desktop aren’t available to Windows Store apps. If you are in doubt, consult the MSDN documentation for the API in question. You will see what is supported at the bottom under supported client and server:

MSDN also provides a comprehensive Windows 8 API List for desktop apps.

Traveling with Microsoft and the ASUS VivoTab RT

2013-01-04T07:22:00.001-05:00

My daughter turns 13 today and to celebrate, our family took a trip to Paris, France. We celebrated Christmas and New Year’s Eve (bonne année) there. I recently purchased an ASUS VivoTab RT and turned over my Samsung Series 7 slate to my wife. We decided to travel light and only bring the slates – no heavy laptops. We were gone for 10 days – so how was the experience?

In a word, fantastic! Before I share some updates around the slate itself, I wanted to mention a few technologies that eased my time in Paris.

Windows Phone (Nokia Lumia 900)

I brought my Windows Phone and despite it being the “older version” (nope, don’t have the fancy new “8” yet) it was a life saver and I didn’t feel like I missed a thing. I took all of my pictures on the trip using the phone. While the quality pales in comparison to the professional camera my daughter brought along, it held it’s own. Here’s the gardens of Versailles:

Here’s the moon peeking out from behind the Eiffel Tower at night. I didn’t even tinker with settings aside from changing the “scene” to “night”:

The ability to take high resolution pictures was also a boon because instead of carrying around Metro maps, etc. we’d simply load up a portion of the map we were going to visit, snap a picture on the phone, then pull it up when needed. Worked great.

SkyDrive

We had wireless in the apartment. SkyDrive made it very easy for me to organize my photos on the trip. I would capture pictures all day with the phone, then upload them to SkyDrive and the family would review them on the slate. I also saved some of the materials for my new book so I could edit them on the trip when I felt like it and easily synchronize them back to my laptop when I returned.

Skype

Skype is awesome. I purchased a year of unlimited calls to the US and Canada because my cellular phone wasn’t getting good reception in my home office (not a problem specific to any phone, just seems the radiation emitted by my large screen monitors does something). I’ve been very satisfied with the service and Paris was no let down. I used Skype and WiFi on my slate to monitor messages on my home and cell phones (I did not get a data plan, so my cell phone was in airplane mode with WiFi turned on the duration of the trip). It made it extremely easy to check for calls.

It also helped me when I made a little mistake. I scheduled a shuttle service to pick us up the last day in Paris and bring us to the airport. We were waiting for the shuttle and it did not show, so I went online to track it and was told I could only track within 2 hours of the service date. Puzzled, I opened my confirmation email and found I had scheduled it for the wrong day! The service was US-based so I used Skype to call in and correct the error – and we made it home fine.

Bank of America

Bank of America has a great app for Windows 8 and I used it to track my various purchases and withdrawals and track against the exchange rate, etc.

Super Voltage and Ragdoll Run

Some of the lines were a bit long. We waited three hours to gain entrance to the catacombs! Having Super Voltage on my phone kept my daughter occupied for most of that time, as well as on the 18 hours of air time we spent traveling between Atlanta and Paris. I personally am a fan of Ragdoll Run.

Now to the Slate …

So how was the slate experience?

After having it for this time and relying on it during the trip, I can say it was fantastic. I could do everything I wanted: listen to music, keep up with news, post pictures to Facebook, manage pictures, write, Tweet, etc. The extremely long battery life meant I could watch videos and play games on the flights without the battery even showing a dent.

There were some negatives. Specifically, some of the Paris sites I wanted to visit used Flash and for some reason didn’t work with the Internet Explorer 10 even in desktop mode (what was really weird was the interactive Paris Metro application worked for a few days then started complaining that I didn’t have the right plug-in). That was solved by pulling it up on my wife’s slate. ~~The other issue was that the Word version doesn’t support the macros my publisher provided for formatting the book, so I decided not to work much on that for fear of losing formatting, etc.~~

Update: turns out I just didn’t know the right way to configure the macros. I have full support and can edit my book on the go with this laptop as well. WOW! Loving it even more.

Those are not deal-breaking issues for me, however, because I don’t expect to have 100% productivity on my slate – it’s a nice, lightweight, portable device and I’m not looking to develop code for it (nope, that’s going to be my next investment, and I’m getting very excited).

Beyond the Slate

So just as a final note, I have to make a purchase soon for a more primary development laptop. I know there are a lot of models coming out in the next few months but I’m not in a position to really wait. I’ve been to several stores and tried out various models. Right now my favorite hands-on model is the ASUS 13.3” Zenbook Ultrabook. It is light, thin, responsive, and fun to use. I liked the form factor better than the Lenovo IdeaPad Yoga 13, but Lenovo has the best keyboards by far in my opinion (ASUS was a great keyboard compared to all of the other models I tried, but the Lenovo keyboard is still my favorite to type on). Therefore, I’m holding out to test drive a Lenovo ThinkPad X1 Carbon Touch.

What do you think?

I know many of you have invested or tried out your own devices, or are currently looking. I am amazed at how far technology has come and how different this trip was compared to the last time I visited 15 years ago (nope, no looking up the Metro online back then). What are your thoughts and experiences? Please share in the comments below.

The Mixed Bag of Windows 8 Chips

2012-12-21T07:33:00.001-05:00

Ivy Bridge. Clover Tail. No, wait, Cloverview. ARM? Atom!

Understanding the processors that drive today’s tablets and laptops is definitely like wading through alphabet soup. If the fact that there are two versions of the latest Windows operating system (Windows 8 and Windows RT) isn’t confusing enough, there are literally dozens of CPUs available and most have an affinity to one OS version or the other. Oh, and by the way, you’ve probably heard that Windows RT runs on ARM processors, right? So why do the tablet processors have names like Tegra and Snapdragon?

First, let’s get some terminology out of the way.

Chip – a piece of silicon with an electronic circuit, and can also be referred to as a Microprocessor. Often used to describe components like the central processing unit (CPU) and graphics processing unit (GPU).
Chipset – an architecture that may include multiple chips designed to work together.
Instruction Set – this is the part of a processor that relates to programming and includes instructions for the processor to execute, registers for storing data, among other features.
Microarchitecture – describes how a given processor implements an instruction set.
Processor – a specialized chip that can interpret instruction sets and perform tasks. For example, most devices have a CPU (Central Processing Unit) and a GPU (Graphics Processing Unit).

A quick glance at popular Windows 8 models reveals quite the mix of processor technologies. Here’s a quick rundown:

Tablet	Processor
Acer Aspire S7	Intel Core i5-3317U
Acer Iconia W510	Intel Atom Z2760
Acer Iconia W700	Intel Core i3-3217U
ASUS VivoTab RT	NVIDIA Tegra 3
ASUS VivoTab	Intel Atom Z2760
ASUS ZENBOOK UX31A Touch	Intel Core i7-3517U
Dell XPS 10	Qualcomm Snapdragon S4
Dell XPS 12	Intel Core i7-3517U
HP ENVY x2	Intel Atom Z2760
Lenovo IdeaPad Yoga 11	NVIDIA Tegra 3
Lenovo IdeaPad Yoga 13	Intel Core i7-3517U
Lenovo ThinkPad Tablet 2	Intel Atom Z2760
Samsung ATIV Smart PC 500T	Intel Atom Z2760
Samsung Series 5 Ultra 13 Touch	Intel Core i3-3217U
Surface with Windows RT	NVIDIA Tegra 3

That is by no means a comprehensive list but it does show a cross-section of chips you may encounter when searching for a portable Windows 8 device. The first step in understanding what the processors are is to take a look at the following chart. This is my attempt to lay out the processors in a “map” to show the hierarchy:

It’s interesting to note that the ARM chips are “white-labeled” with other companies. This is because they plug into an SoC, or “system-on-a-chip” architecture that allows for multiple components to be integrated onto a single chip. The ARM architecture is an instruction set architecture that is integrated with other components such as the graphics processing unit (GPU) to provide a low-voltage, high performance experience. All of the chips to the right of the diagram use an ARM-based SoC architecture and only run Windows RT. To the left of the diagram, all of the Intel processors (including Atom) will run the full version of Windows 8. Atom is the SoC offering from Intel.

Code Names

You’ll hear quite a view code names for processors. The first two are easy: Snapdragon and Tegra are brands of SoC chips that are based on the ARM instruction set. They are specific implementations of those chips and tablets that use these chips run various devices and operating systems including Windows RT.

The Intel SoC platform was codenamed Clover Trail (the chipset is Cloverview) and is now mostly referred to by the actual name, the Intel Atom (and as far as I can tell, the Z2760 is the only one out right now). Intel produced a series of chipset versions that handled low voltage (you’ll read about that in a bit) and then developed an even lower voltage set for Atom. Unfortunately, Atom-based tablets are experiencing some delays due to difficulties with drivers. The advantage of the ARM-based and Intel Atom processors is that they run cool, eliminating the need for a fan. This allows for an extremely small/thin form factor, and tablets and laptops that use these chips are the thinnest available. My ASUS VivoTab RT is only 8.3 millimeters thick and weighs only 1.16 pounds. Compare that to the iPad3 at 9.4 millimeters thick and 1.43 pounds.

Next you can cross two bridges: Ivy Bridge and Sandy Bridge. These names may be confusing because they don’t refer to a specific processor, but a microarchitecture used by Intel to manufacture their chips. You might see processors listed as “2nd generation” or “3rd generation” Intel processors (all of the new ones are 3rd generation). The 2nd generation was codenamed Sandy Bridge, and the 3rd generation or current batch is called Ivy Bridge. Ivy Bridge is actually based on the Sandy Bridge architecture, but provides a smaller chip, lower voltage and hence less power usage, improved graphics and slightly faster processing speeds. Any i3, i5, or i7 chip you see in a portable device is likely a Sandy Bridge.

The Sandy Bridge family is “branded” as the Core series. This includes the Core i3, Core i5, and Core i7.

Getting to the Core

So what is the difference? First, you’ll notice that the specific sequence of each chip listed above includes a “U” at the end. This is simply the designation from Intel for a lower voltage version of the chip. While it sacrifices a bit of performance compared to desktop counterparts, it makes sense for a laptop, ultrabook, slate, or tablet form factor because of the lower power consumption. The difference between series numbers is more complicated but as you might expect, “more is better” in this case, i.e. you’ll likely see advantages to using a Core i7 over a Core i5.

Core i3

This is the budget or entry-level family. It is a dual-core chip that lacks a feature called Turbo Boost that allows the chip to overclock at a faster rate. It does have hyper-threading, a technology that allows a physical core to appear as two logical cores. This means the i3 supports four simultaneous threads. The 3217U clocks at 1.8 GHz.

Core i5

Ironically, the i5 does not support hyper-threading. The chip itself comes as a quad-core, however, so you still get four threads and these are physical, not logical, threads. While the clock speed for the i5 might be listed as 1.7 GHz it is capable of overclocking to 2.6 GHz.

Core i7

The i7 is very similar to the i5 but adds hyper-threading back to the mix. Therefore, this quad-core chip supports up to eight simultaneous threads. It’s important to note that unless software is written to specifically take advantage of multi-threading, this doesn’t necessarily add any benefit and may not justify the expense over the Core i5. It is faster, with a base of 2.0 GHz that can overclock to 3.2 GHz.

The Atom Formerly Known as Clover Trail

The Atom processor is the Intel SoC offering that some say could make ARM obsolete. It runs x86, clocks at 1.8 GHz (the same as the Core i3), supports up to 2 GB of memory and supports hyper-threading. According to Intel, it benchmarks faster than the NVIDIA Tegra 3 and Qualcomm Snapdragon S4. Basically it is a lower performing Intel chipset with the advantage that it consumes less power (making it ideal for thin form factors such as tablets and ultrabooks) and runs the full x86 chipset (allowing it to run the full Windows 8 versions and provide support for legacy Windows 7 and Windows XP applications).

ARM Yourself

The last set of chips follow the ARM instruction set. This is a completely different architecture than the Intel chipsets provide, so it is not compatible with the millions of lines of legacy code that was compiled to target x86 and x64 (32-bit and 64-bit Intel) systems. ARM licenses the instruction set architecture so other companies like NVIDIA and Qualcomm then provide their own chips. In addition to allowing for extremely low voltage implementations, ARM does provide a few advantages over the x86 instruction set that Intel processors use.

For example, the Intel chips take complicated x86 instructions and “decode” them into simpler, smaller instruction sets for the chip to follow. The ARM is streamlined to avoid the need for this approach. The x86 set relies heavily on branching logic (perform an operation, then branch based on the result). In the ARM instruction set, every instruction is conditional so if-then-else operations can be handled without branching.

ARM processors are used heavily in smart phones, disk drives, and set top devices. There are several builds of Linux, including Android, that support the ARM architecture, and Microsoft recently released the Windows RT OS specifically to provide ARM support. To make things even more confusing, chip maker AMD which produces, among other things, x86-based chipsets announced it will be integrating ARM technology with its chips.

Summary

As you can see, there are quite a few options when shopping for a mobile device. Initially, it appeared the ultra-light, ultra-thin form factors would all run the more limited Windows RT OS on ARM architectures, but Intel’s introduction of the Atom processor may change the game. I believe we’ll see a plethora of devices “mature” in the Windows 8 space by the 2nd quarter of 2013 but if you insist on purchasing a device now, understanding the chipset will help you make a more informed decision. I plan to have two devices until the low voltage Intel-based chips can support a true development environment: an ARM-based device for travel and portability, and a Core i7 for my workstation.

The Future of Windows 8 and Windows Phone 8 Development

2012-12-19T06:45:00.001-05:00

Does the snapped view required for Windows 8 apps provide insights into the future of Windows 8 and Windows Phone 8 development?

Windows 8 app developers are required to create a snapped view for their applications. This is the one option for on screen multi-tasking in the Windows 8 world. The usefulness of this view on either a tablet or a laptop form factor depends on how well it is implemented. For example, the Windows Store doesn’t offer any useful functionality when it is snapped – it simply resides on the side of the display with a static logo:

On the other hand, Skype provides fairly useful snap views when you are chatting, as shown below, or making phone calls. I can use the desktop to work on my “main task” while keeping an eye on the chat or having fast access to mute a call on the side.

This is fairly useful. In fact, I use Skype snapped all of the time – having the control on the side allows me to text (now that it integrates with Messenger) and also makes it easy to mute and unmute as needed. I couldn’t help but notice that the snapped view reminds me of the full-blown application on Windows Phone:

So what does that have to do with the snapped view? Well, I got to thinking – what does the Microsoft guidance say about snapped view? You can read the guidelines at MSDN.

The snapped view is fixed at 320 pixels wide. This is a width that can scale well to most phone resolutions – the Windows Phone 7 width was 480 and goes up from there. So setting this as a fixed width means it automatically fits in any Windows Phone screen. Here’s what’s even more interesting: the guidance for snapped is that "the snapped app is your app resized! It is not a gadget or a minimized window. You want to maintain state, context, and interactivity for your users. Snapping and unsnapping should never destroy the user's work or state.” That means the snap view should behave as a fully functional application.

At the very minimum, it seems that if you are targeting both Windows 8 and Windows Phone, then you have a point of parity that should be designed for: the snapped view. Shouldn’t the snapped view of your Windows 8 app behave pretty much the same as the full blown app on the phone form factor? There may be some nuances that you have to address (for example, the panorama control that works well on the phone isn’t necessarily available for the snapped view on Windows 8) but for the most part you are functioning in a similar form factor (while the strip goes “long” on large displays, this is easily a vertical scroll on the phone).

So then my next question is this: did Microsoft plan for this? Is the snapped view really just a convenient way to allow two apps to run side-by-side on Windows, or is it maybe a forward-looking approach to the eventual unification of the platforms? To me, it’s an interesting notion: if you write a Windows 8 app with a fully functional snapped view, couldn’t you potentially port that directly to the phone without changing a thing?

It’s an intriguing notion. Of course, it does have some flaws as well. For example, you can’t ignore the fact that a lot of the code and XAML for a given app will be focused on the full screen Windows 8 app experience, and that extra overhead makes no sense for the phone (it just takes up extra space that’s not needed). Then there is the issue with the 320 pixel width: modern phones support much higher resolutions, so the snap view could quickly become clunky and scaled on future phones.

So what to do?

My opinion is that the snapped view can provide the means to an approach for forward-thinking developers. The platform may or may not become fully unified in the future, but that doesn’t mean you don’t have the tools right now to build code in a way that takes advantage of both. Through the use of the Portable Class Library you can already share code between Windows 8 and Windows Phone 8. It seems that you could structure your application to take advantage of snapped view and overlap the majority of logic that targets the smaller form factors, then target the full screen Windows 8 view as a separate experience.

What do you think?

ASUS VivoTab RT Review

2012-12-17T07:17:00.001-05:00

I recently purchased an ASUS VivoTab RT (the TF600 SKU, 32 GB of storage). As it is one of the less popular WindowsRT models I wanted to write a short review to explain why I made the purchase and how it is working out.

Why Get a WindowsRT Device?

The first question is, of course, “Why?” There are several reasons I decided to pick up this particular device. After using a Samsung Series 7 Slate running Windows 8 for over a year now, I’ve come to realize that we are not yet in a “one device” world. While there are a number of exciting new hybrid and convertible tablets, I’ve watched my own usage of an arguably “business ready” slate (capable of writing chapters, developing, and compiling production code as I did for my Building Windows 8 Apps Book) I really … just … don’t use it that way. Even my bulky Dell Latitude E6510 ends up serving me mostly when it’s in the docking station so I have my large screen monitors and external keyboard and mouse. This is where I do my “productivity” work or engage in business use. That’s tasks like image editing, developing code, and heavy writing (ironically, there is just one app that we need on WindowsRT to shift the bulk of writing over, as I’ll explain in a bit).

Based on this, I came to the realization that I don’t need a device with lots of storage or processing power for my tablet. In fact, I don’t really want it. I’ve had a tablet capable of running those power apps I’m used to from Windows 7 and while I installed them and tinkered with them, I’m almost exclusively running Windows 8 apps. The tablet is absolutely for casual use. That includes casual writing, productive browsing (I can do a lot with web-based apps using Internet Explorer 10), watching movies, and checking and responding to email. If I can eke out just a few more tasks like going into Word, Excel, and PowerPoint, then it’s also good for portability. When I take short business trips or long vacations, I’d much rather lug around a light tablet than a heavy business laptop.

While I know I can run those fancy x86 apps using an Atom processor, I really don’t see the need to go outside of ARM. So for me, WindowsRT is a fine choice for one of two machines I’ll use. I’m not trying to make it my “main" machine.” I understand consumers can get confused about the choice, but I’d also argue many consumers will do just fine with what WindowsRT provides. I like to think of it as “that Windows 8 version that really only runs Windows 8 apps and Office.” I know that’s oversimplifying, but this is precisely what I use it for.

So then the next logical question is, “Why the ASUS VivoTab? Why not a Surface?” Let me preface by saying I love the Surface. It’s an amazing piece of hardware. I love what they did with the keyboard and how even the touch keyboard responds so nicely and provides a very usable experience. There are some issues, however. The kickstand works great in commercials with students slapping it on flat surfaces, but what about propped up on my chest when I’m on the couch watching a movie? The kickstand really doesn’t do much for that … whereas the Samsung had a hard case I could arrange in a “tent mode”. Besides, a lot of people are picking up the Surface so I was interested in trying out some other form factors.

There was another practical reason. For the follow on book to my first one – a more in-depth volume that covers the Windows Runtime in advanced detail – I’ll need to write sample code and demonstrate the use of sensors. It turns out that the ASUS VivoTab has two that the Surface does not: GPS (and I mean freaky good GPS, as in “the blue dot is literally showing the room of my house I’m in” good) and NFC. While I could get devices to hook externally to test these, I liked that they come with the ASUS right out of the box.

Here’s me testing the accelerometer:

The Buying Experience

My experience picking one up wasn’t too bad. I started by reading reviews and narrowing the field, then looking at prices. It turns out there is a great special and ASUS will throw in the keyboard dock for free when you order before 2013. I can’t imagine reviewing this device without the dock. It serves as a stabilizer (yes, I can rest it on my lap on the couch because it’s a firm dock with the keyboard) but also extends the battery life. I’m thinking “constant use on overseas flights.” It makes it into a nice little folding laptop.

I wanted to try out several machines (remember, I’m in the market for two … this is my casual/portable one but I’m looking for the main business-case one to use as well) so I drove to Best Buy first. They had two models on display. If I was an average consumer, I’d have stopped right there. These devices had been literally touched to death (salespeople, how about wiping them clean every once in awhile?). The touch was non-responsive – I couldn’t even get the Charms bar to show! That was both devices. They had so much crap running that trying to tap a tile or multitask was taking forever. My heart sank … no way I could use this … but it still seemed strange that none of those problems were discussed in any of the reviews I read or hands-on videos I watched.

It was funny hearing the sales representatives talk to customers. There was a huge gathering of people trying out Windows devices. Surface was in high demand, only the message was, “Wait.” Over and over I’d watch someone pick up the Surface and start to play with it, seem pleasantly surprised, then call over an assistant only to be told, “You don’t want to buy that. The Pro is coming out soon, that’s what you want.” Not, “What do you need?” or “What are you looking for?” but simply, “Wait.” No wonder sales aren’t that great, and I don’t think Best Buy is going to up those much if that is the message they were rolling out.

Instead of giving up, I made a few calls and located an Office Depot that had the model in stock. I drove there and was able to use that device. I really enjoyed it. The touch worked fine, it was super responsive, and I had no issues. Maybe I should be concerned about future wear and tear based on the Best Buy experience, but I suspect their tablets may have been abused slightly more than what mine will go through. Anyway, I was sold right there. I told the cashier what I wanted, and laughed when the reply was, “Um, sir, you know that’s a WindowsRT device, right? Are you SURE you want to buy that?” “Yes, please, let me give you my money.” They caved in and allowed me to purchase it. It was nice to get it from a store because I saved shipping, got to try the device out, and they honored the free keyboard right there (no rebates or mail-ins, just a second box to go with my new tablet).

The Build Quality

I got home and unboxed and was incredibly impressed with the device. I’m not one to go into heavy detail with the “unboxing experience” but ASUS really did a great job of packing it. When I picked up my first iPhone it felt like getting a piece of jewelry in a velvet box and this experience was no different. It’s in a nice, professional looking black box with a padded inside and crisp, tight presentation (the documents come enclosed in a glossy black cardboard box and everything is tightly packed and wrapped in plastic). The slate itself is incredibly thin and light. Here’s one of my not-so-professional pictures holding it from the side:

I love the rounded corners. The back has a brushed metal appearance and texture that just feels firm and sturdy. It is really easy to grip in both hands or with a single hand as needed. All of the outlets are well-positioned. I personally like that the thickness was not compromised for USB. Instead, you can use a dongle to bridge USB into the super-thin slot that serves as the power outlet. Once you get the hang of the volume rocker (it is tilted slightly so you have to press behind the device) it also makes perfect sense.

The first complaint I have is the power cord itself. It seemed simple and easy enough to plug in, but when I tried to pull it out the first time, the plastic sleeve literally started to come out while the internal connector remained snugly attached. I pushed the plastic down and gripped it farther back and it disengaged fine. There doesn’t appear to be any damage and I’ve used it several times for both the slate and keyboard dock. Ironically, even though I now know I have to grip it a certain way to remove it, when it is seated it appears to be slightly loose. I found myself checking the power indicator a few times to convince myself it was OK.

The keyboard is also impressive. I like the overall look and feel:

There are keys for about anything you’d like to do, but doing it is another story. While they have good travel and nice, chicklet-style feedback, they are also very cramped. While I can type quickly it takes some getting used to. The backspace button feels really small and out of place, and sometimes I found myself struggling to use the shift key in combination with a character. It is usable and I noticed that I was getting better with practice, but even the similarly sized Bluetooth keyboard I got with my Samsung feels more functional and productive.

I’ve heard some complaints about the track pad but I really enjoy it. It seems responsive and well calibrated in my opinion, and I found myself using it easily with a single finger or thumb while the tablet is docked. Using a single touch it works like you would expect as a replacement for a mouse pointer. Use two fingers, however, and you get gesture support. The main advantage here is that you can scroll as if you are swiping the screen. This works both horizontally and vertically, and I use it a bit. It is super sensitive, which I like because I can zoom through a list quickly and get to where I want to go – no more awkward scrollbar dragging or clicking to scroll.

The dock itself is sturdy. I consider it an advantage because I can set it down on my lap or on other unstable surfaces and still view the screen in an angle I desire. The docking experience itself is a little unsettling. While it does vibrate when turned on to indicate a successful dock, I find myself pressing a bit hard and worrying about damaging the ports if I’m not aligned. There isn’t a satisfying click when it snaps into place, so if you aren’t powered on you have to guess – you only get the vibration when you are powered on. Undocking it requires pressing a lever on the side to release it and pulling it up. The slate doesn’t detach easily and again I find myself worrying about damaging the unit.

Once docked, however, it works great as a miniature laptop. The hinge is hidden in a clamshell design and you can angle the display with a good degree of freedom and even close the “lid” to make it hibernate. I find this to be the easiest way to carry it around without worrying about the screen. Even with the keyboard it’s very light (less than 3 pounds) but the added bonus is battery life. I haven’t had a chance to run it down but the manufacturer states up to 19 hours and reviewers are saying around 15 hours of life when it is docked. That’s huge, and it’s done without any large or heavy batteries. This is a truly innovative design in my opinion and will come in handy when heading overseas. In the following snapshot, I’m not running a Commodore 64 emulator – it’s just the background I use to confuse strangers and start interesting conversations with other nostalgic 6502 hackers.

The speakers are built into the back of the slate and have a very clear, crisp sound. I started off the day this morning by loading up a Christmas station and playing Christmas songs. The built-in volume is plenty to hear throughout the house. The audio out is also crisp and clear and sounds great in my headphones.

The screen is only 1366 x 768 but it works – plenty of pixel density for a 10.1” screen. The display is incredibly bright and crisp. I tried several different modes, between working with applications, playing games, watching movies and reading books in the Kindle app. All modes worked great and are far more crisp and clear than what I’m used to (and no, I’m not an iPad user so I understand that may be old hat for some). Full screen video worked flawlessly (I tested Netflix streaming and local video at full screen).

Usability

So the most important part of the review is … how usable is it? If you’re not familiar with the Windows Store, it provides a nice feature that keeps all of your apps in a single location regardless of what device you are using if you sign in with a Windows Account. That makes it easy to find apps that I purchased or downloaded on my other devices and quickly install them on the new device. Some of the apps that came with it:

Built-in Mail

This comes “as is.” While it does not provide a version of Outlook in the preview, I really don’t care. I won’t use this for heavy business mail and it is perfectly fine for browsing and reading mails. I wired in all of my accounts easily (from Office 365 to Gmail and Live) and it ran fine.

People

The people hub picked up my social connections automatically through my Windows Account and works fine. Unfortunately, since the TweetRo debacle I haven’t found a good Twitter client for Windows 8. TweetRo has the features I want so this may just be the reason I’ve been looking for to slap down $9.99 for the pro version. I tried Rowi (don’t like the interface) and MetroTwit (kept crashing on me) so I’m a little stuck on that respect. The People Hub works fine for quick glances and notifications but I don’t consider it a replacement for the better native software we’ve all grown accustomed to.

Office

It is exciting to me that Office is available for this device. To me, that’s a key differentiator between WindowsRT and iOS devices. It’s not just the ability to view and work with Office documents, but to have a fully functional suite that allows you to create, edit, and consume them. The apps appear to work great – I opened several different types of documents. There were a few hiccups, however, that it is important to share.

The first happened when I opened a contract that had form fields and tried to print it to the native printer driver that was auto-recognized. My HP Office Jet Pro 8500 A910 was found automatically. The driver was not too happy, however, and I kept spitting out errors when I tried to print to it. I’d get a dialog telling me “the selection is invalid” that would keep popping up when dismissed and forced me to close the application through the Task Manager. I joined my Homegroup and the same printer showed up as a share from my Windows 8 laptop. Printing through the share worked fine and had no issues, so I’m not sure why the direct print had problems.

Asus Software

Asus adds some software that is surprisingly usable. There’s a connector to their WebStorage service that gives me 5 GB of extra space, a dictionary, a special camera app with built-in effects, a note-taking product (looks good but I’ll stick to OneNote), and a “fun center” that appears to feature various types of radio stations – I listened to a few and enjoyed them although the interface was terrible. Kindle was pre-installed and works well on the tablet and with the sharp, bright display is very readable even in direct sunlight.

Stuff I Installed

The Google Search app is a must-have. It has great voice recognition and does a pretty good job of figuring out what you are asking for. I used it to test the built-in microphone and it scanned my voice with no problems. I installed Bank of America to stay on top of my accounts (I love being able to deposit checks by taking pictures from my home office) and Lync to stay connected with my business. Slacker Radio is a personal radio station that I enjoy and has channels that I can customize and listen to that I can’t find on iHeartRadio (which I also use).

Of course, I threw in a mess of games from Minesweeper and Solitaire to Card Games Chest (a cool game that has Crazy 8s and an Uno knock-off). I installed LastPass (it’s built-in browser is usable, but when push comes to shove I use the desktop browser and flip over to LastPass to cut/paste passwords for key sites).

For keeping up with news I use Nextgen Reader which works just as well on the ASUS as it did on my Samsung slate. Netflix is a must-have. I spend a few hours watching Battlestar Gallactica rebooted episodes in full screen. The image was crisp and clear with no stutter and the audio quality sounded even better than on the Samsung.

Xbox SmartGlass is always fun to cut in when my daughter is watching a movie and randomly pause it from the next room. Skype installed and I made a call to my wife’s cell phone. She heard me loud and clear. I haven’t tested video conferencing with Skype yet but I tested the video camera and it works fine.

I installed NovaMind’s Mind Map software. It is built really well for the slate experience. I used it to create a mind map for writing this article, and printed it out to use as a reference.

The last thing I installed was Jack of Tools to test out the various sensors. I found the accelerometer, GPS, and compass all work well. I see the ambient light sensor kicking on as well, but that particular app flags it as “not available.”

Usability Summary

Overall I was worried that with an ARM processor and 2 GB of memory that I’d struggle using these applications. Maybe I haven’t had it long enough, but that simply wasn’t the case. Everything was fast and responsive and worked well, including heavy video, audio, and graphics. I really haven’t found anything yet that feels like it runs more slowly on this device. Perhaps that is one of the powerful benefits of the lifetime model that Windows 8 apps follow – they allow the foreground app to retain the majority of resources and only run things in the background that make sense like audio (who wants to lose their favorite jingle when they switch away from the music app to play games?)

The touch is responsive and snappy, the touch pad does everything I need it to, and while my fingers fumble over each other on the small keyboard it can get the job done. As I wrote earlier, I haven’t tried to drain the battery but I spent several hours browsing mail, watching videos, printing documents and surfing the web and the battery didn’t look like it drained even a bit.

Complaints

I do have some complaints. You’ve already heard about my issues with the keyboard design and the power cord. Another complaint is the lack of stylus support. While my finger works fine in some cases, the stylus provides extra precision where touch and the touch pad fall short. There may be certain pens that work with the display but I don’t own any and am not aware of any.

I’ve read that the WiFi might be sub-par but I don’t see that in my tests. I have an 802.11n router and my laptop regularly clocks 25 Mbps download and 8 Mbps upload speeds. The same test on my ASUS tablet yielded 25 Mbps down and 4 Mbps. These are the same results I get on my Samsung Series 7 slate. The signal does drop a bit more with distance compared to the slate and laptop I own, and I don’t believe the VivoTab supports 5 GHz wireless.

The other issues I had are related to WindowsRT and not specific to the ASUS (I would have these same issues on a Surface). The Office suite is a preview and it shows – there are definitely some features that behave differently and are less stable than the RTM version that runs on x86 machines. Homegroup is a selfish experience on WindowsRT. You can join and tap into the network, but you can’t share your own libraries (you can take it in but you can’t dish it out).

None of these complaints is major, but there is one problem that does annoy me with WindowsRT. There is no decent blogging software. I tried using the blog feature in Word only to have it choke on my Blogger credentials and tell me I couldn’t use their picture provider, whatever that means. It wasn’t usable.

I would love to be able to start a draft of a blog post using LiveWriter on my slate, fill in major ideas or notes, then pull it up on the full laptop to fill in images or do heavy editing. Unfortunately, that simply isn’t possible at the moment. Instead, I settled with laying out my thoughts using the mind map software, printing it from the slate and then heading back over to the laptop to run LiveWriter. If I could get a workable version of LiveWriter on this machine I could say it does everything I want it to.

Bottom Line

Bottom line? I think this is a terrific device. It is lighter than the iPad but still feels firm and projects a sense of precision and high quality engineering. I prefer the clam shell docking design over the Bluetooth option, and the battery life simply can’t be beat. With a crisp, clear display, highly responsive touch, and the built-in apps that address most of the things I want to do like watch videos and play music, I would already consider this an iPad contender. Add to that fully functional copies of Word, Excel, PowerPoint, and OneNote, and I consider it a winner.

Going Old School on Windows 8

2012-12-07T08:37:00.001-05:00

The other day I was browsing some archives on an old disk drive and came across the T64 formatted binaries of some demo software I wrote for the Commodore 64 in the 1980s. Demo software is fun to write and is more about tricks and optimizations than business rules or data models. I had written a few fun projects in Silverlight a few years back and decided to convert some over to Windows 8. This particular project involved using a plane projection on six different rectangles to provide the illusion of a cube (it is an illusion because it’s not true 3D rendering, but instead the manipulation of the rectangles to give the illusion of a 3D construct). This was overlaid on a classic sine-based plasma field.

Once again, I was amazed at how quickly and easily I was able to port the code over to Windows 8. Essentially, the only real work was changing the implementation of the plasma effect because the older version was able to manipulate pixels directly in the bitmap object, whereas in Windows 8 this must be done in a buffer and transferred over. By no means is this code optimized and efficient – you’ll certainly see the CPU spike – but it’s a neat and fun effect to watch and coding it was a nice break from typical line of business work.

The first step was creating the cube. A style defines the properties of a “side”:

<Style TargetType="Rectangle">
    <Setter Property="Margin" Value="170,50"/>
    <Setter Property="Height" Value="150"/>
    <Setter Property="Width" Value="150"/>
    <Setter Property="Opacity" Value="0.5"/>
</Style>

Next, the sides are positioned to simulate the actual surface of a cube – here are just two of the six sides as an example. Note two sides are wrapped in the grid to facilitate the necessarily transformations to project properly:

<Rectangle Fill="Orange">
        <Rectangle.Projection>
            <PlaneProjection x:Name="Rectangle4Projection" 
             CenterOfRotationZ="-75" RotationX="90"/>
        </Rectangle.Projection>
</Rectangle>
<Grid Margin="170,50">
    <Grid.Projection>
        <PlaneProjection x:Name="Rectangle5Projection" 
         CenterOfRotationZ="-75" RotationY="-90"/>
    </Grid.Projection>
    <Rectangle Margin="0" Fill="Yellow" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform x:Name="Rectangle5Rotation" Angle="0"/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>

With the sides in place, the control itself wires into two events. The first event, the CompositionTarget.Rendering event, fires each time a frame is rendered for the application. This is one way to handle animations by “cheating” on the render loop rather than depending on a dispatcher timer. It also means the cube will move at different rates based on the speed of your machine. That event is used to update the projections for the sides:

private void CompositionTargetRendering(object sender, object e)
{
    this.Rectangle1Projection.RotationY += ((this.pt.X - (this.LayoutRoot.ActualWidth / 2)) / this.LayoutRoot.ActualWidth) * 10;
    this.Rectangle2Projection.RotationY += ((this.pt.X - (this.LayoutRoot.ActualWidth / 2)) / this.LayoutRoot.ActualWidth) * 10;
    this.Rectangle3Projection.RotationY += ((this.pt.X - (this.LayoutRoot.ActualWidth / 2)) / this.LayoutRoot.ActualWidth) * 10;
    this.Rectangle4Projection.RotationY += ((this.pt.X - (this.LayoutRoot.ActualWidth / 2)) / this.LayoutRoot.ActualWidth) * 10;
    this.Rectangle5Projection.RotationY += ((this.pt.X - (this.LayoutRoot.ActualWidth / 2)) / this.LayoutRoot.ActualWidth) * 10;
    this.Rectangle6Projection.RotationY += ((this.pt.X - (this.LayoutRoot.ActualWidth / 2)) / this.LayoutRoot.ActualWidth) * 10;
    this.Rectangle1Projection.RotationX += ((this.pt.Y - (this.LayoutRoot.ActualHeight / 2)) / this.LayoutRoot.ActualHeight) * 10;
    this.Rectangle2Projection.RotationX += ((this.pt.Y - (this.LayoutRoot.ActualHeight / 2)) / this.LayoutRoot.ActualHeight) * 10;
    this.Rectangle3Projection.RotationX += ((this.pt.Y - (this.LayoutRoot.ActualHeight / 2)) / this.LayoutRoot.ActualHeight) * 10;
    this.Rectangle4Projection.RotationX += ((this.pt.Y - (this.LayoutRoot.ActualHeight / 2)) / this.LayoutRoot.ActualHeight) * 10;
    this.Rectangle5Rotation.Angle -= ((this.pt.Y - (this.LayoutRoot.ActualHeight / 2)) / this.LayoutRoot.ActualHeight) * 10;
    this.Rectangle6Rotation.Angle += ((this.pt.Y - (this.LayoutRoot.ActualHeight / 2)) / this.LayoutRoot.ActualHeight) * 10;
}

You’ll notice there is a reference to a pt instance that impacts the offsets applied to the cube. This instance is updated by the PointerMoved event, and used to allow you to change the speed and direction of rotation of the cube by swiping your finger, mouse, or stylus across the cube.

private void LayoutRootPointerMoved(object sender, 
       Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
    this.pt = e.GetCurrentPoint(this.LayoutRoot).Position;
}

The plasma effect is also a control. An Image is used to host the plasma background:

<Grid>
    <Image x:Name="PlasmaImage" Stretch="Fill"/>      
</Grid>

Each frame, a new wave of sine data is computed, mapped into a pixel buffer, and applied to the Image. A virtual size of 320 x 200 is used and then simply expanded. This keeps the computation down but scales well to large screens because the constant movement and color shifts keep you from seeing individual pixels. A sine table is generated for the effect:

private void CreateSineTable()
{
    for (var i = 0; i < 512; i++)
    {
        var rad = (i * 0.703125) * 0.0174532;
        this.sine[i] = (int)(Math.Sin(rad) * 1024);
    }
}

As well as a color palette:

private void CreatePalette()
{
    for (var i = 0; i < 64; ++i)
    {
        var r = i << 2;
        var g = 255 - ((i << 2) + 1);
        this.palette[i] = Color.FromArgb(255, (byte)r, (byte)g, 0);
        g = (i << 2) + 1;
        this.palette[i + 64] = Color.FromArgb(255, 255, (byte)g, 0);
        r = 255 - ((i << 2) + 1);
        g = 255 - ((i << 2) + 1);
        this.palette[i + 128] = Color.FromArgb(255, (byte)r, (byte)g, 0);
        g = (i << 2) + 1;
        this.palette[i + 192] = Color.FromArgb(255, 0, (byte)g, 0);
    }
}

Then some math is applied to generate the effect (I’ll let you inspect the code for that, it’s fairly common although in the old days, optimizing it to run on slow processors was where a lot of the magic happened). One the buffer is set, it is rendered into a WriteableBitmap and set as the source of the Image:

var image = new WriteableBitmap(ScreenWidth, ScreenHeight);
 
using (var stream = image.PixelBuffer.AsStream())
{
    stream.Seek(0, SeekOrigin.Begin);
    stream.Write(this.pixelBuffer, 0, this.pixelBuffer.Length);
}
 
image.Invalidate();
this.plasmaImage = image;

Now there is a plasma effect “control” and a cube control available to drop on the canvas. If I had more hours in the day, I’d optimize this by updating the plasma field in a background thread so the UI thread would simply perform the buffer operation. There may be opportunity to use the parallel features of the TPL as well – just haven’t had time to dig into that. The effect works well as coded even if it does take up a few cycles. The main page simply overlays the cube on the plasma background and then uses a Viewbox to stretch the effects to fill the full screen:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <local:Plasma HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    <Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="50">
        <local:Cube/>
    </Viewbox>        
</Grid>

It was a fun little side project. You can download the full source here or sideload with the package here.

Dogfooding Windows 8: I Tell All

2012-11-27T09:35:00.001-05:00

The other day I read an article about Windows 8 and “six long-term Windows 8 users tell all.” The premise? Several columnists over at ZDNet had been using Windows 8 for quite some time, and were interviewed about the experience. You can read about the results in the original article. I am also a writer. In addition, I sling code and manage software projects. I’ve also been “dogfooding” Windows 8 since I could first get my hands on it, so I thought it might be interesting to compare my own experience.

The first part of the article summarized the questions at a high level. If you want to use that chart to compare to my answers, I have them here in bullet form:

How much have you used Windows 8? 14 months.
Use Metro vs. Desktop? Both.
Using Modern UI apps? Internet Explorer, People, Calendar, Weather, Skype, TweetRo, Bing, Google Search, Netflix, iHeartRadio, Bank of America, Kayak, Nextgen Reader, Music, Video, Flow Free, Pew Pew, Mahjong Deluxe, Card Games Chest, NASA Be a Martian, Dictionary.com, Lync, //BUILD
Miss or replaced the classic Start menu? Don’t miss it a bit.
Tweaked Windows 8? Not really.
Using touch hardware? Yes and no (used it both laptop without touch, and slate with)
Which OS to install on a new machine? Windows 8.
Prefer Win7 or Win8? Windows 8.

While the questions didn’t ask specifically about desktop, it’s important to make this note: I wrote the first five chapters of my book Building Windows 8 Apps with C# and XAML on a Samsung Series 7 Slate (then switched to a laptop when I finally upgraded that from Windows 7). I also used it to develop the sample applications for the book. In addition, I use the slate to carry around the house and as you can see, am quite a “power user” of the Windows Store apps, so I believe I can speak from hands-on experience. I am also very aware I am a developer, so my view/opinion and approach will not translate well to an “average consumer.”

Here is the detailed list of questions and my answers:

Question #1: How long have you been using Windows 8 (and previews) for day-to-day desktop use?

I pitched my Windows 8 book right as //BUILD happened in September 2011. I downloaded the Developer Preview the night it was released, then used my slate as the means to develop applications and write the first several chapters. Once the Consumer Preview came out, I switched to a dual boot on my main laptop and finally upgraded wholesale to Windows 8 when it went RTM.

Question #2: Do you use the Metro [sic] tile interface, or live completely in the desktop?

I live and switch easily between both. On my laptop, I’m mostly in the desktop interface, with a twist. I use the Skype app to make phone calls. I have an interesting set-up because I use a Kinect sensor for my audio. The audio array is phenomenal and most people tell me I sound like I’m on a headset even though I’m using the sensor “hands free.” When I dial the call, I move Skype into snapped mode. This allows me to have two screens for my desktop (one full screen and most of the second) with a small strip to monitor my call, mute when necessary, or respond to messages.

At the same time, my tablet is always next to me as a “third screen.” I often use the TweetRo app to display the “signal” group I’ve made (a filter for people who don’t add a lot of noise to their timeline). It will auto-refresh so I can always stay up to date on the stock-ticker that is social networking while I’m working. On the slate, I’m almost always in the Modern UI interface and that’s as it should be (do you see what I did there, fixing the terminology in the answer?) I still fallback to desktop mode for the Office suite of tools and for occasional development.

Question #3: Are you using relying [sic] on any Modern UI apps for day-to-day use? Which ones?

That would be an empathetic, “yes.” I use Internet Explorer and the Calendar quite a bit, as well as Skype and Lync. I use Skype to make most of my calls and Lync is what our company uses for group meetings and screen sharing. I use the Modern UI for both. What you might find more interesting is how I keep up to date with news. I have a ton of feeds and alerts set up in Google Reader. I love the Nextgen Reader app for browsing and reading news stories. When I’m in “reading mode” though I’m not necessarily into tweeting mode, so I have a simple system for synchronizing between my slate and laptop. On the slate, I browse the stories in the reader and if I’m interested in exploring further or want to share the item, I’ll star it. On the laptop, I can use the web interface to pull starred items and use that view to compose my tweets.

The Bank of America app keeps me from having to drive to an ATM or local bank. When I have a check to deposit, I go into the app, take a picture of the front and back of the check, and there it is – deposited. When the girls are watching a show I’m not interested in on the big TV, a set of headphones and my slate lets me watch my own Netflix movies without disturbing them. The games are great for killing time in the airport, and the radio and music apps I use whenever I’m hanging out on the deck or just relaxing and want some music. Yes, I’m a power user of the Windows Store apps.

Question #4: Do you miss the Start menu or have you replaced it?

No, I don’t miss it. About the only thing I ever used it for was the search feature, and that hasn’t gone anywhere. I never liked having to find a folder and drill down and click on something to open an app. I far prefer tapping the Windows Key, starting to type part of a program name, then hitting the Enter key and launching it. I can get to any app lightning fast. Are there icons it would be easier to click on? Sure. For those, I pin them to the taskbar. I have a big monitor, so my taskbar has lots of icons. Honestly I think if I used more than I have space for, I’d have bigger issues than worrying about where the start menu went. If you’re curious, here’s my taskbar-pinned apps that I can launch with a tap or click:

Internet Explorer
File Explorer
Visual Studio 2012
Blend 2012
Developer Command Prompt
Google Reader (web link)
FireFox
Chrome
Fiddler
GMail (web link)
Hyper-V MMC Snap-in (for those customers I have to run Windows 7 for)
Office 365 Web Link
LinqPad
IETester (for those customers I need to test IE7+)
Balsamiq
Outlook
Lync
LiveWriter (for writing what you’re reading right now)

Question #5: How have you tweaked your environment for day-to-day productive use of Windows 8 (add-ons, settings, etc.)?

I really haven’t done much tweaking at all. I make sure I have roaming enabled, so it’s always fun when I install Windows 8 on a new machine, log in, and suddenly see a Commodore 64 BASIC prompt waiting for me (that’s my lock screen of choice, and it confuses enough people I don’t see myself changing it any time soon). The only other tweak has really just been pinning some items to the taskbar for ease of launching from the desktop interface, and I constantly rearrange tiles based on which ones are live and static, what their functionality is and how often I use them.

Question #6: Have you added any touch hardware (like a touch mouse or trackpad)? Do you find that improves productivity or just simply makes Windows 8 usable?

I haven’t added any touch hardware other than what comes “as is.” Before Windows 8, I did quite a bit of slate development so one of my two monitors is touch-enabled. Sometimes it’s fun to use touch (for example, when I run the Windows Store Skype app and it shows me that big Modern UI dial pad, I just have to use it instead of the numeric keypad on my keyboard) but otherwise I use what I’ve got. My biggest secret has been learning all of the Windows 8 shortcut keys that make it easy to open the Charms bar, search, swap primary monitors, etc. on the laptop, then using all of the touch gestures on my slate.

Question #7: So you’re going to go out and buy your new, hot primary work machine. Would you put Windows 7 or Windows 8 on it, and why?

Hands down Windows 8. No doubt in my mind. There are a million enhancements to the desktop that I just can’t live without now. On top of faster boot, stable sleep and resume, native mounting of ISO and VHD images, USB 3.0 support, etc., I actually do enjoy the Modern UI and the apps that run on it. I don’t want you to think it’s all wonderful. There are certainly some nasty quirks like clicking a mail link in Outlook only to have it pop open the Windows Store Mail app, but those are few and far between for me. In the case of customers who don’t support Windows 8 (mostly from a security perspective, so the VPN access policy for example might reject a connection from a Windows 8 host) I use the built-in Hyper-V and run a Windows 7 image. It works great. I’m talking a huge enterprise web solution with dozens of projects and I work, compile, build, deploy and test without any problems on the VM. Better yet, the newer machines are optimized for Windows 8 and come with SSD drives. Windows 8 + SSD = killer productivity combo.

Last question [or question #8]: do you prefer Windows 7 or Windows 8?

What do you think? Windows 8. I get everything I had in Windows 7 (I’ve read some of the amusing articles saying it should be called “Window” because the Windows don’t overlap, and that’s simply not true – I get full overlapped, multi-tasking goodness on the desktop) plus the new features of Windows 8. Look, my favorite Commodore 64 emulator runs fine on Windows 8, so why would I ever go back?

That’s it. I started eating the Windows 8 dog food a long time ago and am enjoying every bite.

Thanks to David Gewirtz for the original article that inspired this post.

Koch Snowflakes on Windows 8 with XAML

2012-11-26T09:49:00.001-05:00

A few years back I wrote a little program that would generate Koch snowflakes in Silverlight. After brisk walk in the cold weather today, I decided it was time to port it over to Windows 8, more just to see how easy it would be. It turns out it only took about 5 minutes to have the program up and running. I made a few tweaks, and it works. I spent some more time just changing how the snowflakes are updated. It is definitely far from perfect (there is an occasional unhandled exception I haven’t debugged and it pegs the CPU) but it’s still a fun little project to run and see.

The Koch curve is simple. You start with a line segment, break it into thirds, and extend the middle third into a triangle. You then repeat the process with the outer line segments recursively. This image depicts the process:

Working backwards, the implementation for the Windows Store app starts with a helper method that takes a set of points and turns them into a path so we can render the snowflake on the XAML surface:

private static Path CreatePath(IReadOnlyList<Point> points)
{
    var segments = new PathSegmentCollection();
 
    foreach (var point in points.Skip(1))
    {
        segments.Add(
            new LineSegment
                {
                    Point = point
                });
    }
 
    var pathGeometry = new PathGeometry();
 
    // pull the segments into the geometry
    pathGeometry.Figures.Add(
        new PathFigure
            {
                IsClosed = true,
                StartPoint = points[0],
                Segments = segments
            });
 
    return new Path { Data = pathGeometry };
}

The points turn into segments then are collapsed into a closed path. Next, two points need to be split into thirds with a triangle in the middle. The following method does that. It turns 2 points into 5, so the first and last are returned “as is” while the middle triangle is produced using some trigonometry and randomness:

private static IEnumerable<Point> RefactorPoints(Point a, Point b)
{
    // first point
    yield return a;
 
    var dX = b.X - a.X;
    var dY = b.Y - a.Y;
 
    // 1/3 of the way from first point to second point
    yield return new Point(a.X + (dX / 3.0), a.Y + (dY / 3.0));
 
    var factor = Random.NextDouble() - 0.5;
 
    var vX = ((a.X + b.X) / (2.0 + factor)) + ((Math.Sqrt(3.0 + factor) * (b.Y - a.Y)) / (6.0 + (factor * 2.0)));
    var vY = ((a.Y + b.Y) / (2.0 + factor)) + ((Math.Sqrt(3.0 + factor) * (a.X - b.X)) / (6.0 + (factor * 2.0)));
 
    // apex of the middle triangle
    yield return new Point(vX, vY);
 
    // 1/3 of the way from the second point to the first point
    yield return new Point(b.X - (dX / 3.0), b.Y - (dY / 3.0));
 
    // second point
    yield return b;
}

Now we know how to break down a side. This is done recursively for several levels and the points are aggregated back:

private static IEnumerable<Point> RecurseSide(Point a, Point b, int level)
{
    // iterations are done, so return this line segment
    if (level == 0)
    {
        return new List<Point> { a, b };
    }
 
    // first we need to build a list of points that make the refactoring of the side
    var newPoints = RefactorPoints(a, b).ToList();
 
    // this breaks down the segment into 5 points
    var aggregatePoints = new List<Point>();
 
    for (var x = 0; x < newPoints.Count; x++)
    {
        var y = x + 1 == newPoints.Count ? 0 : x + 1;
        aggregatePoints.AddRange(RecurseSide(newPoints[x], newPoints[y], level - 1));
    }
 
    return aggregatePoints;
}

Now the whole process is kicked off by a triangle – not a perfect triangle and the midpoint is randomized a bit, but enough to get the process started to generate a snowflake. As I noted in my post a few years back, you could probably eliminate the second and third calls for recursion and simply reflect a single side:

public static Path Create()
{
    // something to start with
    var a = new Point(0, 0);
    var b = new Point((Random.NextDouble() * 70.0) + 15.0, 0);
    var c = new Point(0, b.X);
 
    // now we refactor as many times as needed
    var levels = Random.Next(Min, Max);
 
    // first set of points (first triangle)
    var points = new List<Point>();
    points.AddRange(RecurseSide(a, b, levels));
    points.AddRange(RecurseSide(b, c, levels));
    points.AddRange(RecurseSide(c, a, levels));
 
    // walk the sides and iterate them
    var retVal = CreatePath(points);
}

The original example had colorful snowflakes. This time I’m going for a more black and white effect, so I generate a random gradient based on some shades of gray with a random transparency value.

I then wrap the snowflake entity in a class that knows how to insert itself into a canvas (a delegate is passed in so it doesn’t have to take a hard reference on the canvas):

public SnowFlakeEntity(Action<Path> insert, bool fromTop)
{
    this.snowflake = SnowFlakeFactory.Create();
 
    this.affinity = Random.NextDouble();
 
    // set velocity, initial x and y
    this.velocity = (Random.NextDouble() * 10.0) + 1.0;
    this.x = Random.NextDouble() * Left;
    this.y = fromTop ? -100.0 : Random.NextDouble() * Top;
 
    // set it
    this.snowflake.SetValue(Canvas.LeftProperty, this.x);
    this.snowflake.SetValue(Canvas.TopProperty, this.y);
 
    // place onto surface
    insert(this.snowflake);
 
    // remember parent
    this.surface = this.snowflake.Parent as Canvas;
 
    this.NextTick = DateTime.Now.Add(Interval);
}

It is set up with an initial position and velocity, as well as an interval to update it. If I wasn’t randomizing the motion, I could get away with a storyboard (and potentially have much better performance and less CPU utilization) but the motions are randomized to appear more “organic” as you can see in the following method. The affinity affects the drift direction and the rate of spinning/twisting. The snowflake falls and drifts, and when it is “out of bounds” is removed from the canvas so a new flake can be born:

public void Frame()
{
    // fall
    this.y = this.y + this.velocity + (3.0 * Random.NextDouble()) - 1.0;
 
    // is it offscreen?
    if (this.y > Gone)
    {
        this.surface.Children.Remove(this.snowflake);
 
        // notify the outside world that things changed
        var handler = this.SnowflakeDied;
        if (handler != null)
        {
            handler(this, EventArgs.Empty);
        }
    }
    else
    {
        // nudge it
        var factor = 10.0 * this.affinity;
                
        if (this.affinity < 0.45)
        {
            factor *= -1.0;
        }
                
        this.x = this.x + (Random.NextDouble() * factor);
 
        // left edge
        if (this.x < 0)
        {
            this.x = 0;
            this.affinity = 1.0 - this.affinity;
        }
 
        // right edge
        if (this.x > Left)
        {
            this.x = Left;
            this.affinity = 1.0 - this.affinity;
        }
 
        this.snowflake.SetValue(Canvas.LeftProperty, this.x);
        this.snowflake.SetValue(Canvas.TopProperty, this.y);
    }
 
    // spin
    var rotate = (RotateTransform)this.snowflake.GetValue(UIElement.RenderTransformProperty);
    rotate.Angle += Random.NextDouble() * 4.0 * this.affinity;
 
    // rotate
    var plane = (PlaneProjection)this.snowflake.GetValue(UIElement.ProjectionProperty);
    var rotateFactor = 6.0 * this.affinity;
    plane.RotationX += Random.NextDouble() * rotateFactor;
    plane.RotationY += Random.NextDouble() * rotateFactor;
    plane.RotationZ += Random.NextDouble() * rotateFactor;
 
    this.NextTick = DateTime.Now.Add(Interval);
}

This is all managed by a behavior that attaches to the canvas. The behavior can update the size when the canvas changes, so the snowflakes fall within the confines of the surface regardless of the orientation or if the app is snapped (when you snap it, you just get a greater density of snowflakes). You can see the adjustment happening when you unsnap as snowflakes fall off the bottom and begin to appear in the additional space provided by the unsnapped view.

The older implementation used a set of dispatcher timers unique to each snowflake to update them. This felt a little unwieldy for a store app so I centralized it to a single task. If the application is suspended the task simply freezes and resumes when restarted, and if the app is terminated, so is the task and the entire thing can simply start over again when the user returns. I don’t like infinite loops so I could probably set a variable that is updated on suspension, but this gets the job done for now:

private static async void ThinkLoop(CoreDispatcher dispatcher)
{
    while (true)
    {
        var now = DateTime.Now;
        var snowFlake = Snowflakes.FirstOrDefault(s => s.NextTick <= now);
        while (snowFlake != null)
        {
            var flake = snowFlake;
            await dispatcher.RunAsync(CoreDispatcherPriority.Normal, flake.Frame);
            now = DateTime.Now;
            snowFlake = Snowflakes.FirstOrDefault(s => s.NextTick <= now);
        }
        await Task.Delay(1);
    }
}

Notice the task simply loops and finds the next flake that is eligible to update, then dispatches the update to the UI thread. The await is important to avoid clogging the thread (if I were to simply spam the dispatcher with tons of requests, the dispatcher would hit its quote and the app would get terminated). The delay is also fairly arbitrary but keeps the loop from spinning non-stop and instead adds a little bit of a break.

The behavior attaches to the canvas loaded event (and the resized to notify the snowflakes where they are allowed to drift) and kicks off the task, like this (notice the delegate being passed to attach the snowflake to the canvas):

private static void CanvasLoaded(object sender, RoutedEventArgs e)
{
    var canvas = sender as Canvas;
 
    if (canvas == null)
    {
        return;
    }
 
    SnowFlakeEntity.Left = canvas.ActualWidth;
    SnowFlakeEntity.Top = canvas.ActualHeight + 50.0;
    SnowFlakeEntity.Gone = canvas.ActualHeight;
 
    for (var index = 0; index < Snowflakes.Capacity; index++)
    {
        var snowflake = new SnowFlakeEntity(o => canvas.Children.Add(o));
        snowflake.SnowflakeDied += SnowflakeSnowflakeDied;
        Snowflakes.Add(snowflake);
    }
 
    Task.Run(() => ThinkLoop(canvas.Dispatcher));
}

When a snowflake “dies” it is removed from the collection that the behavior is tracking as well as the canvas surface:

private static void SnowflakeSnowflakeDied(object sender, EventArgs e)
{
    var snowflake = sender as SnowFlakeEntity;
 
    // get the surface so we can add the next snowflake to the same surface
    if (snowflake == null)
    {
        return;
    }
 
    var canvas = snowflake.Surface;
    Snowflakes.Remove(snowflake);
    var newFlake = new SnowFlakeEntity(o => canvas.Children.Add(o), true);
    newFlake.SnowflakeDied += SnowflakeSnowflakeDied;
    Snowflakes.Add(newFlake);
}

The XAML uses the behavior to kick everything off. A light gradient helps the flakes show up with more contrast. There is also an event that fires when the size of the canvas changes to update the bounds of the clip. The clip ensures snowflakes don’t appear outside of the row designated for snowflake activity.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Text="Koch Snowflakes" Style="{StaticResource HeaderTextStyle}" Margin="12"></TextBlock>
    <Canvas Grid.Row="1" 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
            SizeChanged="FrameworkElement_OnSizeChanged"
            local:SnowFlakeBehavior.AttachSnowFlake="True">  
        <Canvas.Background>
            <LinearGradientBrush>
                <GradientStopCollection>
                    <GradientStop Color="Black" Offset="0"></GradientStop>
                    <GradientStop Color="#888888" Offset="1.0"></GradientStop>
                </GradientStopCollection>
            </LinearGradientBrush>
        </Canvas.Background>
        <Canvas.Clip>
            <RectangleGeometry x:Name="CanvasClipper" Rect="0,0,9999,9999"/>
        </Canvas.Clip>
    </Canvas>
</Grid>

That’s it. You can download the full source here. Don’t have Visual Studio or don’t care to compile it? You can side load it with the app package here. I’m sure I could create a much better experience using Direct2D but this was literally an attempt to port an existing app. I was very pleasantly surprised to find so little had to be changed from my Silverlight implementation. Enjoy the snowflakes!

Building a JavaScript Event Aggregator using TypeScript

2012-11-19T08:38:00.001-05:00

The event aggregator is a useful mechanism for decoupling notifications. Typically, notifications happen through events. In JavaScript, an event is a notification that happens as the result of an action. You can think of it as a notification that is triggered by something. We call the triggering of the event “raising” the event. Events are a simple notification mechanism that contain a collection of handlers. A handler is really just a function that is called when the event is raised. The event may pass some information to the handler, and your function must react to the event.

Perhaps the most popular event in JavaScript is the “click” event. Events can be wired directly in HTML markup, like this:

A more sophisticated way to provide a handler is to do something like this:

var homeLink = document.getElementById('homeLink');
homeLink.onclick = function(e) {
alert('Go Home!');
}

Here, the handler is assigned to the onclick function that is raised when the link is clicked.

Events are the core of interacting with HTML DOM. Many JavaScript frameworks provide a mechanism for you to extend JavaScript objects to participate in the event model as well. For example, using Backbone’s events you can register to an event that is triggered by a business object, and raise the event from the business object. This allows you to have events that are not tied to specific user actions in the DOM.

The event model makes sense for most cases. One complaint about this model is that it does force coupling. To register for an event, you must have a reference to the object or DOM element that triggers the event. You provide your handler directly to the source of the event. This is appropriate in most cases, because coupling isn’t always a bad thing. A common example of this is entering search criteria for a grid and pressing the search button.

The search criteria is often bound to a view model that contains properties for the search criteria. The search event will fire, and this will trigger a call to a service that passes the criteria and returns the results for the grid. While these actions should be decoupled to an extent (i.e. the view model will remain free of view-specific code to keep it testable and maintainable, and the service call is probably implemented in a separate function), it makes sense for the view model to be aware of the service because there is a direct action/reaction taking place – the action is to request the list of results and the reaction is to receive the list. Decoupling these (for example, simply sending a message that states, “I want data” and then having a completely separate mechanism to listen for the message “I have data”) can make the code confusing to follow, hard to troubleshoot and difficult to maintain.

There are a few scenarios such as cross-module communication and extensibility that make more sense from a highly decoupled perspective. For cross-module communication, for example, you may want to use an event aggregator. One module may focus on the process of searching for items and adding them to a shopping cart, while another module handles tracking the shopping cart. You may eventually add a third module and extend the application by providing a shipping estimation calculator that responds with a new total whenever items are added to the cart. In these cases, you can decouple the modules by sending a generic message that an item is selected, then build the other modules to receive that message and act on it.

To facilitate this, you can use the publisher/subscriber model as implemented by the event aggregator. The concept of an event aggregator is simple: you have a “broker” that manages notifications. All modules know about the broker, but not about each other, and publish messages to the broker. The broker maintains a list of subscriptions (modules “subscribe” to messages) and notifies the subscribers when a message is listed.

This pattern is a perfect example of how TypeScript can be used to build a facility without compromising the flexibility of the JavaScript language. TypeScript is a superset of JavaScript, so all valid JavaScript is also valid TypeScript code. Instead of trying to replace the language or force typing, TypeScript allows you to define contracts and types where they make sense and are expected, but retain full control over the power of the dynamic and function-oriented aspects of JavaScript.

I decided to start by developing an MVVM module I’ll call Gom because it’s the glue that we can use on the client to hold things together. I’m exploring this solely as a learning exercise as there are plenty of fantastic frameworks like KnockoutJS, AngularJS, and the framework built into Kendo UI that handle data-binding and enterprise concerns. In TypeScript, a module is like a namespace and can be simply defined like this:

module Gom {

That’s it – now I can start defining classes and methods that are specific to my module. The first thing I want to keep track of is subscriptions. A subscription is simply a callback – it’s a function that should be called when a notification is sent (or an event is raised). In this model, I’ll give the subscription an identifier as well so the listener can unsubscribe if it is no longer interested in the notification:

class Subscription {
    constructor (            
        public id: number, 
        public callback: (payload?: any) => void) {
    }        
}

Note the signature for a function can be declared using a lambda-style expression, showing the parameters that are expected and the return type. The implementation of the class in JavaScript is a self-invoking function scoped to the Gom module:

var Subscription = (function () {
    function Subscription(id, callback) {
        this.id = id;
        this.callback = callback;
    }
    return Subscription;
})();

What’s nice is that I don’t have to worry about things like creating a constructor or wrapping the function – TypeScript does that for me. Next, I’ll create an interface for a message. Think of a message as a “channel.” I can send a type of message (giving it a name), and I’ll keep track of all subscriptions for that message. It is assumed that both publishers and subscribers understand how to deal with the content of messages that have the same name. In TypeScript, interfaces have no actual JavaScript implementation. They simply provide compile-time checks, design-time auto-completion and help keep your code clean and make it easier to build and maintain.

interface IMessage {
    subscribe(callback: (payload?: any) => void): number;
    unSubscribe(id: number): void;
    notify(payload?: any): void;
}

The subscription takes a callback which has the signature of expecting any type of object (optional) and returning nothing (this is the function the listener will implement) and returns a number (the token for the subscription so it can be unsubscribed). The unsubscribe function takes the identifier, and the notify function takes an optional payload.

We can now implement the interface:

class Message implements IMessage {
 
    private _subscriptions: Subscription[];
    private _nextId: number;
 
    constructor (public message: string) {
        this._subscriptions = [];
        this._nextId = 0;
    }
 
    public subscribe(callback: (payload?: any) => void) {
        var subscription = new Subscription(this._nextId++, callback);
        this._subscriptions[subscription.id] = subscription;
        return subscription.id;
    }
 
    public unSubscribe(id: number) {
        this._subscriptions[id] = undefined;                        
    }
 
    public notify(payload?: any) {
        var index;
        for (index = 0; index < this._subscriptions.length; index++) {
            if (this._subscriptions[index]) {
                this._subscriptions[index].callback(payload);
            }
        }
    }
}

Notice how the message maintains it’s own list of subscriptions. For efficiency, it keeps the subscriptions in their assigned slots and simply sets them to undefined when they are unsubscribed. A notification simply iterates through the array and sends the payload to the subscriptions. Empty slots are skipped.

The implementation in JavaScript is again as self-invoking function that scopes the variables appropriately. Note the public functions are class-wide and therefore assigned to the underlying prototype for the object:

var Message = (function () {
    function Message(message) {
        this.message = message;
        this._subscriptions = [];
        this._nextId = 0;
    }
    Message.prototype.subscribe = function (callback) {
        var subscription = new Subscription(this._nextId++, callback);
        this._subscriptions[subscription.id] = subscription;
        return subscription.id;
    };
    Message.prototype.unSubscribe = function (id) {
        this._subscriptions[id] = undefined;
    };
    Message.prototype.notify = function (payload) {
        var index;
        for(index = 0; index < this._subscriptions.length; index++) {
            if(this._subscriptions[index]) {
                this._subscriptions[index].callback(payload);
            }
        }
    };
    return Message;
})();

All of the classes so far have been scoped internally to the module. This means they are local to the self-invoked function that defines the module, but not available externally. You can’t directly create a Message instance. Instead, I expose an EventManager class. This is exported in TypeScript so it can be referenced externally from the module. The event manager handles a list of messages and exposes the various operations:

export class EventManager {
 
    private _messages: any;
 
    constructor () {
        this._messages = {};
    }
 
    subscribe(message: string, callback: (payload?: any) => void ) {
        var msg: IMessage;            
        msg = this._messages[message] ||
            <IMessage>(this._messages[message] = new Message(message));
                       
        return msg.subscribe(callback);                        
    }
        
    unSubscribe(message: string, token: number) {            
        if (this._messages[message]) {
            (<IMessage>(this._messages[message])).unSubscribe(token);
        }
    }
 
    publish(message: string, payload?: any) {
        if (this._messages[message]) {
            (<IMessage>(this._messages[message])).notify(payload);
        }
    }
}

Now you can see some more powerful TypeScript features at work. The subscriptions simply exist as properties on the main _messages object. When a subscription comes in, the existence of the Message instance for that subscription is checked, otherwise it is created. The <IMessage> casts the result so you can use auto-complete (type msg and hit the period and you’ll see the list of available methods). This example passes the subscription through to the message.

To unsubscribe the function first checks that the message exists, and only if it does, it passes the token down to unsubscribe. Finally, the publication checks for the existence of subscriptions (if no one subscribed, there is no one to notify) and then passes the payload through. The generated JavaScript (note the assignment to the Gom module so it is available for external consumption):

var EventManager = (function () {
    function EventManager() {
        this._messages = {
        };
    }
    EventManager.prototype.subscribe = function (message, callback) {
        var msg;
        msg = this._messages[message] || (this._messages[message] = new Message(message));
        return msg.subscribe(callback);
    };
    EventManager.prototype.unSubscribe = function (message, token) {
        if(this._messages[message]) {
            ((this._messages[message])).unSubscribe(token);
        }
    };
    EventManager.prototype.publish = function (message, payload) {
        if(this._messages[message]) {
            ((this._messages[message])).notify(payload);
        }
    };
    return EventManager;
})();
Gom.EventManager = EventManager;

Now I can demonstrate the pub/sub model through a simple page. Here is the full mark-up. The TypeScript is compiled to a corresponding JavaScript file that is referenced.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GOM - MVVM Glue for JavaScript</title>    
</head>
<body>
    <div><input id="txtMessage" value=""/></div>
    <div><input type="button" id="btnSubmit" value="Publish"/></div>
    <div>
        <h1 id="header">Pub/Sub Example</h1>
        <p id="paragraph">Type a message in the box and click "publish" to continue.</p>
    </div>
    <script src="Scripts/GomEvents.js"></script>
    <script type="text/javascript">
        var events = new Gom.EventManager();
        
        var token = events.subscribe("message", function(msg) {
            document.getElementById("header").innerText = msg;
        });
 
        (function(tok) {
            events.subscribe("message", function(msg) {
                document.getElementById("paragraph").innerText = msg;
                events.unSubscribe("message", tok);
            });
        })(token);        
 
        document.getElementById("btnSubmit").onclick = function() {
            events.publish("message", document.getElementById("txtMessage").value);
        };
 
    </script>
</body>
</html>

This is a very simple example but it illustrates the working event aggregator. Two subscriptions are made, one that will listen for the message called “message” and update an H1 tag, another that listens to the same message and updates the P tag. The second listener will also try to unsubscribe the first listener. The result is that the first message will update the H1 and P tags, while subsequent messages only update the P tag. Finally, a click event is wired to obtain the contents of the text box and publish the message. This is of course a contrived example to illustrate the implementation.

While you would never use the event aggregator for such as simple case, let’s go back to the original scenario of a shopping cart. The payload can be any type of object. In the shopping cart example, you could serialize an item added to the cart into JSON, then publish a “cartAdded” message with that as the payload. The cart module could then receive and track that item, while the shipping estimation module receives the same payload and uses it to estimate the shipping costs.

I believe TypeScript made it easier to design and build the implementation by using a class structure, while still generating clean JavaScript code. The resulting code can be consumed by any other code and doesn’t require TypeScript. More importantly, however, developers in a large enterprise project will now be able to reference the module and consume the contents with full IntelliSense, making it a lot easier to explore APIs and understand what they expect. Here’s an example of auto-completion in the IDE – note that I get a list of available functions as well as their complete signature:

You can download the source for this post here. I leave you with this working example:

Click here to view in a new window.

Enjoy!

Answering your Windows 8 Questions

2012-11-12T06:44:00.001-05:00

I’m extremely excited to be a part of an event this coming Tuesday, November 13th, geared towards answering your questions about Windows 8. An estimated 4 million PC users upgraded to Windows 8 during the first weekend of its release. I’m assuming several of you reading this blog were a part of that wave. While developers tend to be quite savvy when it comes to “bricking their machine” and installing fresh or updating the OS, it can be a challenge to consumers, especially if there are peripherals involved.

On November 13th I’ll be teaming up with the Windows team and HP for a Twitter chat to discuss Windows 8. The goal is to help users make a smooth transition to the new OS and take full advantage of its new features and benefits. The conversation will be co-moderated by @WindowsBlog and @HPSupport.

The talk takes place on Tuesday, November 13th from 1pm – 2pm PST (4pm – 5pm EST) right after the regularly scheduled time for the popular #WinChat.

I hope you’ll be able to join me along with colleagues:

Peter Bright @DrPizza) of Arstechnica
Tim Fisher (@AboutPCSupport) of the About.com PC Support Guide
Richard Hay (@winobs) of WindowsObserver.com
David Murphy (@thedavidmurphy) of PC World
Paul Thurrott (@thurrott) of WinSuperSite.com

Please share this with friends, family, co-workers and anyone else you may know who either already upgraded to Windows 8 or is looking to make the switch. We will do our best to answer all of theirs (and your) Windows 8 related questions.

Thanks, and I hope to tweet you there!

Building Windows 8 Apps with C# and XAML is Here!

2012-10-30T14:04:00.001-04:00

“Jeremy builds real apps for real customers. That’s why I can heartily recommend this book. Go out and write some great apps … and keep this book handy.” – from the forward by Jeff Prosise.

When my wife stuck her head in the office and said, “Honey, there’s a UPS truck in front of the house” I knew exactly what it was. I ran downstairs and practically kicked down the door to grab my box that contained the initial copies of my latest book, Building Windows Apps with C# and XAML.This is my third full-length book and it is still amazing to see the final result. I pitched the project back in October of 2011 on the heels of the first //BUILD conference. I started with the idea of pushing out a comprehensive reference manual but quickly realized that project would take way too long to deliver in time for the official release of Windows 8. Therefore, I decided instead to focus on the core story necessary to go from an idea to a complete app successfully accepted in the Windows Store. I’m happy I did because I was able to cover all of the key areas in what I believe is an easy to read narrative that gives you everything you need to get started, while connecting to other resources and references to “go deeper” when and where needed.

If you’re curious about just what is covered, here is the detailed table of contents:

The New Windows Runtime
1. Looking Back: Win32 and .NET
2. Looking Forward: Rise of the NUI
3. Introducing the Windows Store Application
  1. Windows 8 Design
  2. Fast and Fluid
  3. Snap and Scale
  4. Use of Right Contracts
  5. Great Tiles
  6. Connected and Alive
  7. Embrace Windows 8 Design Principles
4. Windows 8 Tools of the Trade
  1. Blend for Visual Studio
  2. HTML5 and JavaScript
  3. C++ and XAML
  4. VB/C# and XAML
  5. Behind the Scenes of WinRT
  6. WPF, Silverlight, and the Blue Stack
5. Summary
Getting Started
1. Setting Up Your Environment
  1. Windows 8
  2. Visual Studio 2012
  3. Blend
2. Hello, Windows 8
  1. Creating Your First Windows 8 Application
  2. Templates
3. The ImageHelper Application
  1. Under the Covers
4. Summary
Extensible Application Markup Language (XAML)
1. Declaring the UI
  1. The Visual Tree
  2. Dependency Properties
  3. Attached Properties
  4. Data-Binding
  5. Value Converters
2. Storyboards
3. Styles and Resources
4. Layout
  1. Canvas
  2. Grid
  3. StackPanel
  4. VirtualizingPanel and VirtualizingStackPanel
  5. WrapGrid
  6. VariableSizedWrapGrid
  7. ContentControl
  8. ItemsControl
  9. ScrollViewer
  10. ViewBox
  11. GridView
  12. ListView
  13. FlipView
  14. ListBox
5. Common Controls
6. Summary
Windows 8 Applications
1. Layouts and Views
  1. The Simulator
  2. The Visual State Manager
  3. Semantic Zoom
2. Handling User Input
  1. Pointer Events
  2. Manipulation Events
  3. Mouse Support
  4. Keyboard Support
  5. Visual Feedback
  6. Targeting
  7. Context Menus
3. The Application Bar
4. Icons and Splash Screens
5. About Page
6. Sensors
  1. Accelerometer
  2. Compass
  3. Geolocation
  4. Gyrometer
  5. Inclinometer
  6. Light Sensor
  7. Orientation Sensor
7. Summary
Application Lifecycle
1. Process Lifetime Management (PLM)
  1. Activation
  2. Suspension
  3. Termination
  4. Resume
  5. Navigation
  6. Application Data API
2. Connected and Alive
3. Custom Splash Screen
4. Summary
Data
1. Application Settings
2. Accessing and Saving Data
  1. The Need for Speed and Threading
  2. Understanding async and await
  3. Lambda Expressions
  4. IO Helpers
  5. Embedded Resources
3. Collections
  1. Language Integrated Query (LINQ)
4. Web Content
5. Syndicated Content
6. Streams, Buffers, and Byte Arrays
7. Compressing Data
8. Encrypting and Signing Data
9. Web Services
  1. OData Support
10. Summary
Tiles and Toasts
1. Basic Tiles
2. Live Tiles
3. Badges
4. Secondary Tiles
5. Toast Notifications
6. Windows Notification Service
7. Summary
Giving Your Application Charm
1. Searching
2. Sharing
  1. Sourcing Content for Sharing
  2. Receiving Content as a Share Target
3. Settings
4. Summary
MVVM and Testing
1. UI Design Patterns
  1. The Model
  2. The View
  3. The View Model
2. The Portable Class Library
3. Why Test?
  1. Testing Eliminates Assumptions
  2. Testing Kills Bugs at the Source
  3. Testing Helps Document Code
  4. Testing Makes Extending and Maintaining Applications Easier
  5. Testing Improves Architecture and Design
  6. Testing Makes Better Developers
  7. Conclusion: Write Those Unit Tests!
4. Unit Tests
  1. Windows Store Unit Testing Framework
  2. Mocks and Stubs
5. Summary
Packing and Deploying
1. The Windows Store
  1. Discovery
  2. Reach
  3. Business Models
  4. Advertising
  5. Preparing Your App for the Store
  6. The Process
  7. The Windows App Certification Kit (WACK)
  8. What to Expect
2. Side-Loading
3. Summary

Of course, you can also download and check out the source code from all chapters - it's available free as an open source project at http://Windows8Applications.CodePlex.com.

My publisher did a great job pulling together the content, including the dozens of figures and screenshots I included to illustrate every step of the process. Besides your local book store (and if they don’t have it, be sure to let them know they need to fill a shelf with copies), where can you pick this up? There are several options available and various sites will be running different specials and discounts, so check them out:

Thanks again for all of your support!

Windows 8 Hands-On Videos from Engadget Round-Up

2012-10-24T07:17:00.001-04:00

With the launch of Windows 8 right around the corner, OEMs are releasing a ton of exciting hardware. In fact, there are so many options for Windows 8 machines that it is causing information overload. I thought I’d help simplify things by pulling together some of the hands-on videos I’ve watched over the past few weeks from one of my favorite technology sources, Engadget. This should help pull together the Windows 8 experience in one place. Here, in alphabetical order, are a slew of videos to help get you started.

Weigh in with comments at the bottom, and if I missed a hands-on you think belongs here, let me know!

Note: if you are not seeing embedded videos, try going to the original site for this article by clicking here.

Acer Iconia W510 and W700

ASUS VivoTab RT

Dell XPS 12 Windows 8 Convertible (Link, no video)

Follow this link to see the hands-on write-up.

Fujitsu Lifebook UH75

Fujitsu Stylistic Q702 and LifeBook T902 Convertibles

Kupa UltraNote Modular Tablet

Lenovo ThinkPad Tablet

Check out the video “The Pursuit.”

Microsoft Surface

Panasonic AX series Ultrabook

Samsung Series 5 and Series 7

Samsung Windows RT ATIV

ZTE V98 Windows 8 Slate (Link, no video)

Follow this link to see the hands-on write-up.

How to Play DVDs on Windows 8 (Even on your tablet that doesn’t have a DVD Player)

2012-10-18T08:27:00.001-04:00

I recently picked up a new DVD that I wanted to watch … only I was hoping I could tap into the convenience of my tablet and take it with me. Of course, the tablet doesn’t have the form factor to host a DVD player. Compound that with the problem that Windows 8 doesn’t ship with DVD support, and it could have been a major issue.

Only, it wasn’t.

Getting support to play DVDs on Windows 8 is easy. Just download a copy of VLC media player (click on the text for the link). This is a free, open-source multimedia player that handles almost any protocol you can think of. With the software, it’s easy to pop in a disc and start playing it, and it renders beautifully on my Windows 8 laptop.

But what happens when I want to watch in another room? That’s easy enough. I install a copy on my slate device as well, and then perform a few easy steps.

First, I open the disc.

Next, I tick the mark for “No disc menus” and choose the “Stream” option.

The first dialog just sources the disc – you can click next to set up the destination. Here, choose HTTP and click the Add button.

You can select a port and an optional path … here I’m using the default 8080 port with no path. Remember that you must have the port opened on your firewall (the first time you launch, you should get a dialog prompting you to allow that firewall access).

Under the profile, you can pick the type of stream. I had to experiment on my local network but VP80 + Voris (Webm) seemed to work best for me.

I click Next and then on the final screen I simply leave the defaults and click the “Stream” button at the lower right of the dialog. Once it starts streaming, I open VLC on my tablet. I choose the option to open a network stream:

I enter the name of my host computer (the one that is playing the DVD) and the port, then click play:

Now I have streaming goodness, and can watch the DVD from anywhere in the house using my tablet. I’d show you a screen cap of Spartacus playing but I’m pretty sure that image would be under copyright.

Of course, there are other more advanced options with controls that will be available through media center, XBox and Smartglass, but for now that is a quick and dirty solution that works well for me.

The Microsoft Surface and Apple iPad 3 Head to Head

2012-10-17T08:35:00.001-04:00

I was in a recent discussion about the Microsoft Surface and how it will be received by the consumer market. Obviously there are a lot of emotional reactions. Everyone is speculating about the price points, comparing features, and wondering if average consumers will even care. I would argue that there is a technical aspect to this that does make sense to discuss and debate … after all, you can compare screen resolutions or count apps in the app store … but then there is a purely marketing aspect that overrides any technical considerations. No, it doesn’t mean the specs don’t matter, but it does mean that you can have poor specs and great marketing and still succeed, and the best specs in the world won’t fix a poor marketing campaign.

All of the discussion and speculation got me wondering, how does this offering compare to the iPad? I can’t offer an objective opinion because I’m not an iPad user. I have a Samsung Series 7 slate that I purchased to write my book, and have been using Windows 8 on it since the Developer Preview. I love it. It does exactly what I want. When I am heads down writing prose or code, I’m on my dual screen monitors with a big external keyboard. When I’m casually browsing emails, participating in social networks, editing or commenting on manuscripts or watching videos, I’ve got my slate in hand. The battery lasts a long time (I enjoy watching movies any time I’m flying from Atlanta to Seattle, and always have plenty of battery left over) and the experience is just nice.

That, however, doesn’t mean it is not lacking or inferior. Of course this is a full version of Windows 8 on a Pentium chip that requires a fan to cool it so it is a lot thicker than an iPad. I have friends with iPads who love it. It’s thin. It’s easy to carry around. It is fast, snappy, and does the trick … so from that perspective, it’s tough for me to say one really “wins” over the other. The people used to the iPad, love it, the ones used to the Windows 8 slate, love it. Having said that, I was a former iPhone user and switched to Windows Phone 7 and had no desire to go back (no, didn’t receive anything from Microsoft for that statement, either, I truly had the choice and ended up turning it over to my daughter because I loved the Windows Phone so much).

OK, enough about speculation, let’s see what we can be objective about. Here’s a technical comparison that I believe accurately reflects the two models. Disclaimer: this is what I’ve gathered to the best of my ability by examining the data available online. I do not warrant the accuracy here and I welcome all feedback and updates. The specs here do not represent any official statement or correspondence from either Microsoft nor Apple. Here’s what I came up with:

	iPad $499	Surface $499	iPad $599	Surface $599	iPad $699	Surface $699
Storage	16 GB	32 GB	32 GB	32 GB	64 GB	64 GB
Display	2048x1536	1366x768	2048x1536	1366x768	2048x1536	1366x768
Camera	1080p	720p	1080p	720p	1080p	720p
Back Camera	720p	720p	720p	720p	720p	720p
Weight	1.44 lbs	1.5 lbs	1.44 lbs	1.5 lbs	1.44 lbs	1.5 lbs
Thickness	9.4mm	9.4mm	9.4mm	9.4mm	9.4mm	9.4mm
Includes keyboard?	No	No	No	Yes	No	Yes
RAM	1 GB	2 GB	1 GB	2 GB	1 GB	2 GB
CPU	2-core 1 GHz	4-core 1.5 GHz	2-core 1 GHz	4-core 1.5 GHz	2-core 1 GHz	4-core 1.5 GHz
Battery	10 hours	8 hours	10 hours	8 hours	10 hours	8 hours
HD Video out?	Yes	Yes	Yes	Yes	Yes	Yes
USB 2.0?	No	Yes	No	Yes	No	Yes
Ambient light?	Yes	Yes	Yes	Yes	Yes	Yes
Accelerometer?	Yes	Yes	Yes	Yes	Yes	Yes
Gyroscope?	Yes	Yes	Yes	Yes	Yes	Yes
Compass?	Yes	Yes	Yes	Yes	Yes	Yes
Microsoft Office?	No	Yes	No	Yes	No	Yes

Again, I welcome any corrections or updates if I’m off. Let’s take a look line by line:

Storage

This one was interesting to me. The entry level model for Surface actually has twice the storage of it’s counterpart, and other models are on par with the price.

Display and Cameras

Clearly the iPad3 wins in this category. With a super high resolution display it blows the Surface out of the water, and has a higher resolution front camera to boot. I would have to really hold two of these devices side by side to determine how much of a difference that makes – the video really doesn’t concern me, I am perfectly fine with 720p, but the display is something that can make a major difference if you are staring at the tablet all day long.

Weight and Thickness

These appear to be so close that you can’t really declare a winner. Right on par in both aspects.

CPU and RAM

Unless my information is off, it looks like all price points of the Surface are double RAM of the iPad3 (2 GB vs. 1 GB). The CPU is a quad core NVidia T30 that clocks up to 1.5 GHz compared to a dual-core A5x that clocks up to 1.0 GHz but I wouldn’t read that as a win for one over the other – regardless of cores or clock (which changes, by the way, to preserve battery) we’d have to see head-to-head bench marks to determine if the CPUs are really being utilized in a way that makes one truly faster than the other.

Battery

These are all based on claims and not actual data, so it’s tough to say the 2 hour difference is significant. Microsoft may be conservative or they may be off – you’d have to set up an experiment with comparable streaming video, browsing, or other “high cost” activities on both devices to truly compare. It looks like on paper the batteries should be comparable.

Peripheral Support

To me the Surface wins hands-down here. If you don’t care, it’s a moot point, but I like my USB drives and other peripherals and the fact that the Surface has a USB 2.0 port I can plug them right into.

Sensors

The systems appear to have a similar array of sensors.

Microsoft Office

This is to me hands-down the most important comparison. This is not based on my personal bias, but practical experience. My Samsung slate is often mistaken for an iPad on planes just because it’s a tablet and Apple has certainly marketed their product well enough to make it seem that all tablets are iPads. What gets interesting, however, is when I’m editing PowerPoint presentations, book manuscripts in Word, or catching up on Outlook emails on my device. That’s when people lean over and go, “Oh, wow, how did you get Office on there?” When I explain it’s the Windows version on a Windows machine, I consistently get “oohs” and “ahhhs.” Of course, I have mixed feelings about this one. WindowsRT will be limited to Windows Store apps, which include Office, so that’s good … but the next thing I typically say, which is “Yeah, I can run ALL of my Windows 7 software on this” simply won’t hold true for Surface until the Pro version comes out later next year.

First Windows 8 ad:

First Surface ad:

So what’s the bottom line?

I think this appears to be a very innovative product that I’m excited to try out. I just may get one for my wife or daughter and see how they enjoy it and whether or not they feel limited by the available apps. Whether we decide it’s awesome and far better than the iPad3 doesn’t really matter, however. Sure, it makes a difference, but what will determine overall success is how well Microsoft markets the product … and that’s still up in the air, although the hype is now beginning for both Windows 8 and Surface.

What do you think about the recent announcements? What are your thoughts on features, specifications, and price points? How about all of the other manufacturers releasing their line of Windows 8 products … is any particular model standing out as a clear leader in innovation, design, and, yes, I’ll say it, ability to kick iPad’s ass?

Comment below.

Windows Runtime Components in a .NET World

2012-10-10T20:22:00.001-04:00

The new type of program known as a Windows Store app—optimized to run on Windows 8 devices—has a default view with a full-screen window and no distracting chrome, so the content is the focal point. Windows Store apps support fluid layouts that adapt and scale to a variety of screen sizes and resolutions. They provide a touch-first experience while providing full support for the traditional keyboard and mouse.

MSDN recently released a special Windows 8 issue that covers Windows Store apps. It includes an article I contributed about creating managed Windows Runtime (WinRT) components that can be consumed by Windows Store apps written using any of the available language options, including C++ and HTML/JavaScript. Learn about the requirements needed to create a Windows Runtime Component in C#, how to reference and use it, and how it impacts other language selections when developing Windows Store apps.

The article includes a full example for creating a special component that generates thumbnails and is consumed by C#, C++, and a HTML/JavaScript application as well. The team at Microsoft also provided a VB version.

Read the full article online at Windows Runtime Components in a .NET World.

A Tiny Portable Inversion of Control Container for Multiple Windows Platforms

2012-10-06T16:30:00.000-04:00

As part of the cross-platform example in my book, I built a tiny IOC container mainly to avoid having to reference and explain MEF, Unity, or any of the other choices. This is not a full-fledged container with tons of services like injection. It is simply an easy way to create things that depend on other things and manage their lifetime.

The "portable" part is evident in the targets. You can reference the exact same DLL from any Windows Phone, .NET Framework 4.x, Windows Store (Windows 8), or Silverlight 4+ project to use the container. That's it - completely portable, no recompiling necessary, and you now get to keep the same API on your view models when you're wiring dependencies (yes, I'm looking at providing a simple portable MVVM implementation too, but a portable Sterling will probably be my next focus since I get so many requests for it on Windows 8).

If you are dubious about what is possible across platforms, download the Chapter 9 source code from Windows8Applications.CodePlex.com (it's free, regardless of whether or not you get the book) and look at the Wintellog example. This is a full blown RSS feed reader implemented for both WPF and Windows Store (Windows 8) that uses most of the same code (even part of the networking stack). It includes a very basic version of the container that I used in the book.

The container is less than 200 lines of code. Many of the lines are there for design-by-contract checks and some thread-safety mechanisms to ensure unregistering and resolving from separate threads doesn't clobber the container.

It has a few features:

Uses a simple lambda expression to describe how to create implementations for types
Passes itself to the instance delegates so they can recursively resolve other references
Provides labels so you can segregate different definitions (or consider everything under a "label" as a different "container"
Allows you to unregister a definition (and register it as something different, though I can't imagine why you'd do that)
Allows you receive a shared or a non-shared instance (lifetime management
Allows you to destroy the shared instance and generate a new one
Provides a TryResolve to test and resolve in one operation

The use of it is fairly straightforward and can be inferred from the tests:

[TestInitialize]
public void TestInitialize()
{
    _target = new PortableIoc();
}

[TestMethod]
public void GivenTypeRegisteredWhenRequestedThenShouldReturnInstance()
{
    var expected = new SimpleBar();
    _target.Register<IBar>(ioc => expected);
    var actual = _target.Resolve<IBar>();
    Assert.AreSame(expected, actual, "Test failed: same instance was not returned.");
}

Test that you can resolve it:

[TestMethod]
public void GivenTypeRegisteredWhenCanResolveCalledThenShouldReturnTrue()
{
    _target.Register<IBar>(ioc => new SimpleBar());
    Assert.IsTrue(_target.CanResolve<IBar>(),
                    "Test failed: can resolve should return true when the type is registered.");
}

Try to resolve it:

[TestMethod]
public void GivenTypeIsNotRegisteredWhenTryResolveCalledThenShouldReturnFalse()
{
    IBar barInstance;
    var result = _target.TryResolve(out barInstance);
    Assert.IsNull(barInstance, "Test failed: bar instance should be null when type is not registered");
    Assert.IsFalse(result, "Test failed: result should be false when type is not registered.");
}

Generate a non-shared instance:

[TestMethod]
public void GivenTypeIsRegisteredWhenNewInstanceIsRequestedThenShouldReturnNewInstance()
{
    _target.Register<IBar>(ioc => new SimpleBar());
    var actual1 = _target.Resolve<IBar>();
    var actual2 = _target.Resolve<IBar>(true);
    Assert.AreNotSame(actual1, actual2, "Test failed: create new should not return the same shared instance.");
}

Use constructor injection:

target.Register<IBar>(ioc => new SimpleBar());            
_target.Register<IFoo>(ioc => new SimpleFoo(ioc.Resolve<IBar>()));

Or property injection:

target.Register<IBar>(ioc => new SimpleBar());            
_target.Register<IFoo>(ioc => new SimpleFoo { Bar = ioc.Resolve<IBar>() });

That's about it - you can grab the source and/or binary (sorry, no NuGet package yet) over at PortableIoC.CodePlex.com. Now let's get some work done on Sterling ...

Building Backbone Applications with TypeScript

2012-10-02T17:18:00.001-04:00

Hot off the press, TypeScript was announced earlier this week and has resulted in an explosion of commentary over Twitter and various blogs. The language claims to be tailored for application-scale development using JavaScript by providing a typed superset. It compiles to JavaScript so it will work in any browser. The promise is to make it easier to organize and structure code, as well as get rid of those annoying errors that leave users hunting through hundreds of lines of code seeking out an errant comma or issue with case sensitivity.

Ironically, I was speaking with an attendee at our Devscovery conference about the future of JavaScript right before TypeScript was announced. It’s obvious that JavaScript is here to stay, and it’s not going to get any better. It may get better parts, but backwards compatibility is going to force the bad parts to remain for a long time. What’s worse, there is nothing that convinces me browser vendors will play nice with the specifications when we’ve had a standard for almost 20 years and it is still implemented differently in different browsers. My take having come from a heavy JavaScript background before I was spoiled for several years by the ease of writing solid Silverlight business applications is that if we have to deal with it, we need to tackle it on three fronts:

Education: JavaScript is a dynamic language where functions, not classes, rule. Developers need to stop trying to play object-oriented developer in the client space and learn how to play by the client rules.
Moderation: Having said that, there are features that simply make it far too easy to shoot yourself in the foot. While there are decent solutions to address this like running JSHint/JSLint, I personally welcome an approach to catch issues at compile (or even better, development) time and keep us all honest. Bugs are easier to fix the closer to the source and the earlier in the process you are. One of the things I mentioned was that something like CoffeeScript should be implemented that helps protect us from the bad parts as we develop, but still generates to that friendly backwards-compatible JavaScript all of the browsers love.
Better Glue. Yes, I said it. Silverlight developers know what I’m talking about *cough* RIA Services *cough* … now that we have very standard ways of exposing APIs, there should be easier ways to glue the client to the server so that developers are working on “what’s different” and not spending 75% of their time building controller methods and writing AJAX calls on the client.

I believe TypeScript is a tool that preserves the first item (it honors JavaScript and doesn’t try to hide the dynamic and flexible nature) and addresses the second item (it allows us to declare intent far more clearly and then have feedback right away) and probably does nothing for the last item.

Instead of debating whether or not we need another language or if it is good or bad (and hey, I love C#, and I loved TurboPascal, so the fact that it was developed by Anders Hejlsberg doesn’t hurt) I would rather jump into using it so I can start to get a feel for how it helps or hurts. Tomorrow I’ll be speaking for three hours on this specific topic (how to leverage libraries in JavaScript development to help scale for large projects and with large teams) so I decided to grab an example I created with Backbone.JS to see what it would take to port over. Here we go!

Step one was simply implementing the VS 2012 plug-in. I’m sure I failed miserably at this. I get syntax highlighting but no template to add a new TypeScript file, no automatic compilation and no effective IntelliSense. I’m sure it’s operator error so stay tuned. You can grab whatever you need (or I should say, “Whatever is available”) from the TypeScript downloads link. Next, I added a JavaScript file and renamed it to have a .ts extension and added a post-build script to compile it:

tsc $(ProjectDir)/Scripts/app.ts

Next, I grabbed the language specification and went to work. First, I found I had to declare some variables to allow for external modules:

declare var $: any;
declare var _: any;

That was easy! Using Backbone however was a little more complicated. I cheated by taking a look at the existing TodoMVC sample from the TypeScript site. To allow Backbone to play nicely with TypeScript, I have to define a module and export classes that describe the API. It doesn’t have to be the full API, but can focus on the pieces I’ll be using. Here’s an example of exporting the Backbone Model object as a class:

declare module Backbone {

    export class Model {
        constructor (attr? , opts? );
        get(name: string): any;
        set(name: string, val: any): void;
        set(obj: any): void;
        save(attr? , opts? ): void;
        destroy(): void;
        bind(ev: string, f: Function, ctx?: any): void;
        toJSON(): any;
    }
}

Notice that I have optional parameters in the constructor. I can declare intention by providing a type for named parameters and the return type of the function. Pretty cool. I like to use Backbone.Events as well, and TypeScript allows me to define interfaces. Here is the interface for events specifying the signature for “on” and “off” (register and unregister):

interface HasEvents {
on: (event: string, callback: (parms?: any, moreParms?: any) => any) => any;
off: (event: string) => any;
}

The easiest way to read this in my opinion is right to left. A function that returns any type takes the parameters of, well, in the case of the first one, a function that has two optional parameters and returns any type, and the first parameter is a string. I also made an interface for the simple version of a contact to make it clear when I am expecting an instance of this:

interface ContactInterface {
    id?: number;
    firstName: string;
    lastName: string;
    email: string;
    address: string;
    city: string;
    state: string;
};

You can also declare static properties on classes, so I created a template class just to hold the compiled templates I am using:

class Templates {
    static contact: (json: any) => string;
    static editContact: (json: any) => string;
    static contacts: (json: any) => string;
};

Note that the compiled template takes any type of object and returns a string. Finally, I created a global object to host cross-cutting events in lieu of using a pub/sub library like Postal. Note the implementation of the HasEvents interface.

class AppEvents implements HasEvents
{
    on: (event: string, callback: (model: Contact, error: any) => any) => any;
    off: (event: string) => any;
    trigger: (event: string, data: any) => any;
};

Finally, you get to see some plain JavaScript – I create the object and extend it to have events:

var appEvents = new AppEvents();
_.extend(appEvents, Backbone.Events);

So now let’s tackle how we did it the “old way” vs. “the new way.” Here is the old way I defined my contact model:

App.Models.Contact = Backbone.Model.extend({
    initialize: function () {
        console.log("Contact init.");
    },
    defaults: function () {
        return {
            id: null,
            firstName: '',
            lastName: '',
            email: '',
            address: '',
            city: '',
            state: ''
        };
    },
    validate: function (attrs) {
        if (_.isEmpty(attrs.firstName)) {
            return "First name is required.";
        }
        if (_.isEmpty(attrs.lastName)) {
            return "Last name is required.";
        }
        if (_.isEmpty(attrs.email)) {
            return "Email is required.";
        }
        if (attrs.email.indexOf("@") < 1 ||
        attrs.email.indexOf(".") < 1) {
            return "The email address appears to be invalid.";
        }
        return "";
    }
});

Basically I’m logging something to the console, providing a template for a contact instance, and declaring my validations. Notice that there is no way to guarantee what I return from the function (I could just as easily send back { foo: “bar” }) and that the attributes for the validation could be anything as well. With TypeScript, I can be more specific and even generate development-time (and compile-time) errors if I’m not doing what I expect:

class Contact extends Backbone.Model implements HasEvents {
    on: (event: string, callback: (model: Contact, error: any) => any) => any;
    off: (event: string) => any;
    isValid: () => bool;
    initialize() {
        console.log("Contact init.");
    };
    defaults() : ContactInterface {
       return {
            id: null,
            firstName: '',
            lastName: '',
            email: '',
            address: '',
            city: '',
            state: ''
        };
    };
    validate(attrs: ContactInterface) {
       if (_.isEmpty(attrs.firstName)) {
            return "First name is required.";
       }
       if (_.isEmpty(attrs.lastName)) {
            return "Last name is required.";
       }
       if (_.isEmpty(attrs.email)) {
            return "Email is required.";
       }
       if (attrs.email.indexOf("@") < 1 ||
        attrs.email.indexOf(".") < 1) {
            return "The email address appears to be invalid.";
       }
       return "";
    }
};

Notice that I implement the events in a more specific way, providing a detailed signature for the callback. Functions are simply declared similar to how they are defined on C# classes and I don’t have to worry about exposing the property name. Finally, I can type the return value and the parameters for the various functions. Pretty cool, no? I’m still using JavaScript and the object can still be dynamic, but I can at least constrain it to the specific interface I’m going to use within my method.

Here’s the old definition for the collection, passing in the options to configure it to point to the REST API on my server:

App.Collections.Contacts = Backbone.Collection.extend({
    model: App.Models.Contact,
    url: "/api/Contacts",
    initialize: function () {
        console.log("Contacts init.");
    }
});

Here’s the new definition that derives from the base class and uses a constructor instead. I also make it very clear I’m using events on the collection as well, which isn’t evident in the original JavaScript.

class Contacts extends Backbone.Collection implements HasEvents {
    on: (event: string, callback: (parms?: any, moreParms?: any) => any) => any;
    off: (event: string) => any;
    url: string;
    model: Contact;
    initialize() {
        console.log("Contacts init.");
    }
    constructor(options?: any) {
        this.url = "/api/Contacts";
        super(options);
    };
};

Another cool feature is that I can declare types and then cast calls that aren’t apparent to a type. For example, I haven’t informed TypeScript that jQuery can return a DOM element, but on my declaration for views I do use the HTMLElement type. To reconcile this, I can simply cast the result like this:

this.el = <HTMLElement>$("#contact");

I know, it looks like an HTML tag but that is because it’s not a true cast, only a tip that this is the return type we expect. After several more models and views, I define an overall application object that spins up the initial collection in the constructor. Note how I also set the static template properties – very straightforward syntax. Creating the object kicks off the application:

class Application {

public static editContactView: EditContactView;

    constructor() {
        Templates.contact = _.template($("#contactTemplate").html());
        Templates.editContact = _.template($("#editContactTemplate").html());
        Templates.contacts = _.template($("#contactsTemplate").html());
        var contacts = new Contacts();
        contacts.fetch();
        var contactsView = new ContactList({
            collection: contacts
        });
        contactsView.render();
    };
};

// host container
var App = new Application();

The application demonstrates CRUD with a list that populates a form with validation where the user can edit, delete, and add new contacts.

The build process compiles the TypeScript to a JavaScript file that is actually referenced from the MVC view. You won’t see interfaces or definitions because those help enforce things at development and compile time. What does the output look like? Here’s the compiled application-wide event object I created:

var AppEvents = (function () {
function AppEvents() { }
return AppEvents;
})();
; ;
var appEvents = new AppEvents();
_.extend(appEvents, Backbone.Events);

Here is the contact model definition – note how the Backbone Model is passed in for extension:

var Contact = (function (_super) {
    __extends(Contact, _super);
    function Contact() {
        _super.apply(this, arguments);

    }
    Contact.prototype.initialize = function () {
        console.log("Contact init.");
    };
    Contact.prototype.defaults = function () {
        return {
            id: null,
            firstName: '',
            lastName: '',
            email: '',
            address: '',
            city: '',
            state: ''
        };
    };
    Contact.prototype.validate = function (attrs) {
        if(_.isEmpty(attrs.firstName)) {
            return "First name is required.";
        }
        if(_.isEmpty(attrs.lastName)) {
            return "Last name is required.";
        }
        if(_.isEmpty(attrs.email)) {
            return "Email is required.";
        }
        if(attrs.email.indexOf("@") < 1 || attrs.email.indexOf(".") < 1) {
            return "The email address appears to be invalid.";
        }
        return "";
    };
    return Contact;
})(Backbone.Model);

Jeremy, where’s the full download? Sorry, right now the project is reserved for attendees at Devscovery – I may have a full project to make available after this week, but for now you can take a look at the full TypeScript source (this is the entire client application) by clicking here.

Thanks! What do I think? So far my thoughts are very positive. I see this being a useful tool that enables teams to write the code they are used to, with options to add safeguards and types where necessary to avoid errors and make the code easier to organize, read, and comprehend. I’ll have to use it some more but this short project of converting an application over has me raising both thumbs up.

Modern Web and Desktop App Development

2012-09-27T09:18:00.001-04:00

Free stuff! Got your attention? Read on to learn more …

Last year I focused on completing my book about enterprise solutions using Silverlight. Since the release of Designing Silverlight Business Applications, much has changed. The book itself was well-received (currently well-rated at Amazon, thanks to my readers who take the time to leave their feedback) but the market itself shifted as executives concerned with the unclear future of Silverlight began to focus more heavily on HTML5. Technology moves fast so companies have had enough time to process the fact that HTML5 was a lot of marketing and hype but failed to deliver on the promise of writing once and running everywhere. Part of the uncertainty was compounded by the release of Windows 8 and the shift to WinRT.

I’ve been fortunate to have projects that have allowed me to focus on both aspects of leading edge technology. In addition to working “behind the scenes” with Wintellect founders Jeff Prosise and Jeffrey Richter on Windows 8 as it evolved over the past year, I’ve also been heavily involved in a large enterprise web-based application that is built on HTML5 technologies and follows a Single Page Application (SPA) paradigm which means lots of client-side JavaScript code. The project integrates libraries like Backbone.js, RequireJS, AmplifyJS, and leverages controls and MVVM features from Kendo UI. We are using the latest Visual Studio 2012 and TFS Server 2012 features to manage an agile project with a large development team located literally around the world.

I learned the hard way that JavaScript is difficult to manage and scale almost a decade ago. It was one of the reasons I shifted to Silverlight and was delighted to discover the teams could produce quality code about 4x faster than using the traditional web stack. The focus has shifted back to JavaScript but the problem with scaling applications based on JavaScript is not unique so a number of amazing libraries and solutions have been created to make it easier to control the quality of applications that have a heavy client JavaScript component.

On the other side of the spectrum, as I work with companies moving their existing technologies from Silverlight and WPF to Windows 8 and smartphones, the common question is how to leverage as much of the existing codebase as possible. I’ve had plenty of experience working both with the Portable Class Library (PCL) and the team at Microsoft driving that project to help build portable assemblies that can provide 80% of the functionality required across multiple platforms without recompiling. I think the PCL is one of the least understood and most underused features of Visual Studio 2012.

The reason I’m sharing all of this is because I’m excited to present on both of these topics next week at Wintellect’s own Devscovery conference. This is an event that is unique in many ways. First, the focus is less on presenting and more on training … it’s a subtle difference but the sessions dive deep into technologies including Windows 8 and WinRT, HTML5, jQuery, JavaScript, ASP.NET MVC, .NET 4.5, C# 5, Visual Studio 2012, advanced debugging and testing, and more. You can view the full agenda here.

The second reason this event is unique is because of the expert presenters. It’s one of the few places you’ll find Jeffrey Richter, Jeff Prosise, and John Robbins under the same roof and not only attend sessions but meet with them one-on-one to get your questions answered. You can view the full list of presenters here. Add to that a powerful keynote and what’s not to like? I’ll be there as well, presenting on Enterprise JavaScript and the Portable Class Library.

I mentioned free stuff at the beginning of this blog post. Registration is still open for this event, but I realize for some it may be short notice, so I’ve got a special offer. If you can swing the travel, we can swing the entrance fee. I have two free passes to give away on a first come, first serve basis. These are for new participants who have not yet registered but are interested in attending the event. You have to be committed and able to attend, so if you think you can swing it and would like the pass, please tweet the hash tag #DevHouston12 with your pass request and the link to the agenda (http://bit.ly/Pvityp) … for example, “I would like a pass to #DevHouston12 – check out the agenda http://bit.ly/Pvityp” – you must include the hash tag and a link that ends up on the agenda page. Our marketing director will monitor the hash tag and the first two to tweet and verify they can attend will get the passes.

Thanks!

Entity Framework: Expressing the Missing LINQ

2012-09-18T07:47:00.000-04:00

I have worked on quite a few projects that use the Entity Framework. It is a powerful ORM and does quite a lot out of the box. I've worked with code-first, database-first, and every other flavor in between. If I were to name the one reason I believe developers enjoy working with LINQ the most, it would be the support for LINQ via LINQ to Entities.

Download Source Code for this post

What's not to like? You can query data in a very easy, straightforward manner that is consistent. Unfortunately, the Entity Framework can wreak havoc on an otherwise stable web application if it is not handled with care. There are a number of "gotchas" you will run into (updateable materialized views, anyone?) ranging from improper use of the context used to access the database to "features" of LINQ that can become defects in production. In this post I will focus on two very subtle LINQ problems I see people run into quite often.

It Will Be Deferred

The first is probably the easiest to understand and the fastest to catch in testing. Consider a very contrived model called Thing:

public class Thing
{
    public int Id { get; set; }
    public string Value { get; set; }
}

The code-first definition for a database of things is simple enough:

public class SampleContext : DbContext 
{
    public DbSet<Thing> Things { get; set; }

    protected override void OnModelCreating(DbModelBuilder modelBuilder)
    {
        modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
    }
}

I could use an initializer to then seed the data but I got really lazy and created a controller instead that does this (not recommended for production code but will work perfectly well to illustrate the points in this blog post):

public class ThingsController : ApiController
{
    public ThingsController()
    {
        using (var context = new SampleContext())
        {
            if (context.Things.Any()) return;

            for (var x = 0; x < 1000; x++)
            {
                var thing = new Thing
                                {
                                    Value = Guid.NewGuid().ToString()
                                };
                context.Things.Add(thing);
            }
            context.SaveChanges();
        }

    }
}

As you can see, I'm ensuring we have at least 1000 things to deal with. You'll notice this is an ApiController that makes it very easy to expose a REST service on top of the collection. In fact, I'm going to do just that - first with a method that returns the full list:

public IEnumerable<Thing> GetThings()
{
    using (var context = new SampleContext())
    {
        return (from thing in context.Things select thing);
    }
}

The Get convention will automatically map this to /api/Things and then I can get a nice list of them by navigating to the local URL, correct? Not quite. This is the first and most common mistake made: forgetting about deferred execution. The query is passed back to the controller, which faithfully tries to serialize it by enumerating the list ... only by that time, you have left the using block for the context and therefore the connection is closed. This will fail every time until you find a way to force execution before disposing the context ... the easiest way is by converting it to a list like this:

public IEnumerable<Thing> GetThings()
{
    using (var context = new SampleContext())
    {
        return (from thing in context.Things select thing).ToList();
    }
}

Casting to a list ensures it is enumerated (and thus executed) immediately to populate the list.

Expressive Functions

The second issue is far more subtle. It is very easy to get excited about using LINQ to access your queries, and it's not uncommon to have a strategy that involves passing in filters and order clauses to your repository. Consider a basic LINQ query that looks like this:

var query = from thing
                in context.Things
            orderby thing.Value                            
            select thing;

Now, what if you wanted to dynamically filter this based on various options? You might go down this path:

Func<Thing,bool> filter;

You can then assign the filter:

filter = thing => thing.Value.Contains("-e");

And attach it to the query, execute it, then return the result:

var modifiedQuery = query.Where(filter);
return modifiedQuery.ToList();

In fact, if you pull down the sample code from this link and use the following URL: http://localhost:XXXX/api/Things/?useFunction=true you will see the result (replace XXXX with your port number), something like this:

[{"Id":229,"Value":"031662bd-14be-4562-9b34-e13ab193b112"},{"Id":330,"Value":"04a35727-9b64-4b5d-99fd-e421fe7340d7"}...]

If you compare this to the full result set, you'll see the filter worked fine. Many developers will be satisfied at this point and move onto other things — even integration tests for the filter will likely pass. But is this doing what you want? If you are like me, you never trust the ORM. You always want to know how it is interpreting what you send so you will profile and trace and verify results. If you run a trace on the above code (in the sample project, it will write to the console in case you don't have a profiler handy) you'll find the query that is passed to SQL looks like this:

SELECT 
[Extent1].[Id] AS [Id], 
[Extent1].[Value] AS [Value]
FROM [dbo].[Thing] AS [Extent1]
ORDER BY [Extent1].[Value] ASC

At this point you probably see the problem. We're dealing with 1000 records in this example, but what would happen if we had 1000000? The problem is the query is loading all records from the database, then filtering the resulting list. No matter how clever your filter is, you are always pulling the entire table and then using LINQ to Objects to filter it in memory. Probably won't scale, you think?

The solution is very simple. What you created above was a function that is passed to the query. The LINQ to Entities provider doesn't know how to map a function to the database, so it handles the part it understands and then applies the function. (As a reader was kind enough to comment below, technically the filter never gets passed to the Entity Framework ... there is an extension method for expressions, but not functions, so the query is cast to an enumerable after the call to EF and then the filter is applied.) There is only one change you need to make for this to work:

Expression<Func<Thing,bool>> filter;

That's it! Change the definition. You can assign and execute it exactly the same way:

filter = thing => thing.Value.Contains("-e");
var modifiedQuery = query.Where(filter);
return modifiedQuery.ToList();

While the returned result is the same, the SQL is slightly different. Hit the URL http://localhost:XXXX/api/Things?useFunction=false instead, and what you'll find is:

SELECT 
[Extent1].[Id] AS [Id], 
[Extent1].[Value] AS [Value]
FROM [dbo].[Thing] AS [Extent1]
WHERE [Extent1].[Value] LIKE N'%-e%'
ORDER BY [Extent1].[Value] ASC

Now the filter is being passed to SQL, so it can do what SQL is good at: filtering and ordering records. It's a subtle but important difference. In both cases, you designated the filter using a lambda expression, but the first forced it into a function whereas the second method loaded it into an expression tree. The LINQ to SQL provider does know how to parse an expression tree and map it to SQL, so you get the desired result by using LINQ to Entities and SQL rather than LINQ to Objects as a fallback.

Summary

The bottom line is that ORM tools make it very easy to interact with data, and even easier to have side effects that can lead to performance issues and production defects. It is very important to understand the technology you are working with and dig into the nuances of how LINQ works under the covers and the relationship between delegates, lambda expressions, and expression trees. I've heard it come up in interviews that I sometimes ask "academic" or "textbook" questions, but more often than not those questions are related to real world scenarios and knowing the answer is the difference between 20 and 1000000 records in a single database call.

Download Source Code for this post