I’ve had my Windows Phone 7 for about a year, now, and I’ve found it to be the useful, flexible device I’ve owned.  Plus, it’s fun to use.  Over the course of the past year, I’ve laid several other devices and programs aside and have, instead, allowed my phone to take over their former roles.  Below, I’d like to talk a bit about the various ways that my Windows Phone has become the central device in my life.

Social Integration

I find that the integration of Facebook, LinkedIn and twitter into my phone has virtually eliminated the need for me to ever have to open any of these sites in a browser.  Granted I’m not a super user of any of these sites, but other than profile updates and the like, the phone offers all I need.  I’m notified of any Tweets directed at me or any mentions of me on Facebook, any person from my contact list that I pin to the start screen allows me to immediately see a change in their status and the People Hub allows me to browse a consolidated feed of all the news from all the sites.  In addition, I can upload photos to my accounts, post a status or check in.

Google Analytics

It’s fun to follow the traffic and popular content on my blog.  Used to be, I had to browse to the Google Analytics site to get this information.  However, I know open an app on my phone, Phonealytics Free, and see a graph of my hits by date as well as by post.  A nice application that allows me to see what I want to with a couple of taps and swipes.

GPS

One device that I used to keep in my Jeep was a Gamin Nuvi GPS.  The maps were getting old and the windshield mount had just broken.  About this same time, I became aware of the Garmin StreetPilot app for windows phone.  I downloaded the trial and gave it a try.  I was amazed at how much better the features were in the phone app compared to the device.  Within a week of obtaining the trial version of the application, I upgraded to the full version and have used it daily since.  The app offers turn-by-turn directions via voice (with street names), traffic information and delays, photos of highway exits and information on what lanes you need to be in for the next turn.  You can save favorite locations, as well.   There is never an issue with the age of the maps or information about places of interest as the maps are downloaded as needed and the app uses Google Search to find locations.

Music and Podcasts

A second device I always kept with me was a 128 GB Zune.  I kept my entire music collection on the device and periodically updated podcast feeds to it.  My Jeep has a plug for auxiliary inputs and I’d just plug the Zune into the Stereo and listen to this media as I drove.  The Windows Phone Marketplace now has a podcast section that allows me to subscribe to podcasts on the phone.  I can specify how many episodes to keep on the phone and the phone automatically updates my subscriptions over wifi when it has access to it.  This has allowed me to always have fresh podcast content without having to worry about plugging a device into my PC for syncing.

It would be impossible for me to keep my entire music collection on my phone, but it would be great to have access to all of it via streaming.  I recently found the tversity application in the marketplace and gave it a spin.  The app requires that you install an application on a PC containing your content and that application exposes the titles to the phone app.  I already had my collection on a Homeserver, so I installed the tversity application and configured it to expose not only my music collection, but also my videos.  Now, I can stream my music to my phone wherever I am, over 3G.  The video is a bit jerky over 3G, but works great over WiFi.  Another device I no longer need.

There are many other apps that I used almost every day that make my life simpler.  Access to cloud storage from any device with the SkyDrive app.  Access to OneNote notes from anywhere make it easy to stay organized.  The Lync app allows me to stay in touch with coworkers via text and voice.

My phone is easily one of the best purchases I’ve ever made and I’m excited to see what Microsoft does with the platform going forward.

Recently, I was working on a project where there was a requirement to print certain documents.  These documents were stored, in pieces, in the database and then loaded and assembled at runtime.  This allowed parts of the documents to be reused as needed.

The Xaml for these documents contained bindings to data that originated from the database.  The usual drill would be to statically define all the required properties on the view model and then write code to populate them from the database.  There's nothing wrong with this approach, but the project was in a mode where new documents were being generated quickly and they required new properties to be defined on the view model making the view model code a hot spot.

The data required in the bindings was largely stored as name/value pairs in the database.  Wouldn't it be much nice if new values added to the database just showed up at runtime without having to create new properties and the code to populate them?

Using dynamic objects would be a great way to go, if you could bind to them.  Unfortunately, they don't support reflection which is required for binding.  A second problem is that adding properties to a dynamic object requires a syntax like this:

Which, of course, requires you to know all property names to be added, ahead of time.  Since I'd like to be able to add properties that I find in the database, this is unsuitable.

I did some research and found this blog post by Lester Lobo.  The solution accompanying the post contained this class.

This class was almost just what I needed.  It solved the problem of not being able to bind to a dynamic, but I still needed a way to add properties on the fly.  For this, I added the AddProperty() method, which you'll see in the above listing.

Using the class is easy.  Below is an example.

So, using the above, I can simply read the name/value pairs out of the database and then add each to my view model at  runtime.  This means that any new value added to the database will automatically be available on the now dynamic view model for binding.

One Offs

Of course, you don't have to use a completely dynamic view model.  It's just as easy to define properties at design time and have one of those properties be a dynamic type.  Also, it's possible to have a dynamic view model that contains a property that is, itself, a dynamic.

I've recently been working with KnockoutJS and have found it to be a very comfortable paradigm to use in constructing a web site.  Having worked with XAML a good bit over the last few years, the benefits of MVVM have been made apparent to me time and again and the approach is familiar.

KnockoutJS lets you use very nearly the same MVVM approach you're used to using in WPF or Silverlight development.  I've attached a sample application, below.  Let's have a look at it.

If you run the sample application, you'll see the following web page open in the browser.

There is an editable table that allows the user to edit existing contacts. Clicking the Add Contact button adds a new blank row to the table.

The ViewModel

The project contains a Javascript file named ViewModel.cs, in the Scripts directory.  The contexts of this file are listed below.

   1:  var viewModel = {

   2:      contacts : ko.observableArray([

   3:          { firstName : "Bob", lastName : "Marley" },

   4:          { firstName : "Larry", lastName : "The Cable Guy" },

   5:          { firstName : "Maxwell", lastName : "Smart" }

   6:      ]),

   7:   

   8:      addContact : function() {

   9:          this.contacts.push( { firstName : "", lastName : "" } );

  10:      }

  11:  }

  12:   

  13:  $(document).ready(function() {

  14:      

  15:      ko.applyBindings(viewModel); 

  16:  })

In the first code block, lines 1 – 11, we create a view model.  In WPF or Silverlight, out view model would contain properties and commands that we could bind to in our view.  The same is true with KnockoutJS.  Here, we have a property that is a collection of contacts and a function (command).  In lines 13 – 16, we ask Knockout to parse our view and connect the data bindings to our view model.

Notice that our property is an instance of an observableArray.  In XAML data binding, we have the concept of  the view and view model communicating with one another where events are raised when values change so that data and the controls bound to it stay in sync.  This same functionality is encapsulated in the observableArray for arrays and observable for simple properties.    So, modifying a bound property from the view model will cause a control in the view that is bound to the property to change, as well.  The reverse is also true, modifying the contents of the control will update the view model property.

The View

   1:  @{

   2:      Layout = null;

   3:  }

   4:   

   5:  <!DOCTYPE html>

   6:  <html>

   7:  <head>

   8:      <title>Index</title>

   9:      <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>

  10:      <script src="../../Scripts/jQuery.tmpl.js" type="text/javascript"></script>

  11:      <script src="../../Scripts/knockout-1.2.1.js" type="text/javascript"></script>

  12:      <script src="../../Scripts/ViewModel.js" type="text/javascript"></script>

  13:  </head>

  14:  <body>

  15:      <div>

  16:          <fieldset>

  17:              <legend>Email Addresses</legend>

  18:   

  19:                  <table>

  20:                  <thead>

  21:                      <tr>

  22:                          <th>First Name</th>

  23:                          <th>Last Name</th>

  24:                      </tr>

  25:                  </thead>

  26:                  <tbody 

  27:                    data-bind='template: { name: "contactRowTemplate", foreach: contacts }'>

  28:                  </tbody>

  29:              </table>

  30:   

  31:              <button data-bind="click: addContact">Add Contact</button>

  32:   

  33:              <script type="text/html" id="contactRowTemplate">

  34:                  <tr>

  35:                      <td><input class="required" 

  36:                          data-bind="value: firstName, uniqueName: false"/></td>

  37:                      <td><input class="required" 

  38:                          data-bind="value: lastName, uniqueName: false"/></td>

  39:                  </tr>

  40:              </script>

  41:   

  42:          </fieldset>

  43:      </div>

  44:  </body>

  45:  </html>

We start by setting up our html table.  All probably looks familiar up to line 27.  In Xaml, we use Binding expressions to state what we want to bind to and how that binding is to behave.  KnockoutJS uses the "data-bind" attribute to specify these bindings.  In line 27 a binding is expresses that says, "for each item in the collection of contacts on the view model, create and populate an instance of the template named 'contactRowTemplate'".  You can see the template definition in lines 33 – 40.

Compare this binding with a similar Xaml binding and you'll find:

• It's possible to do an ItemsSource type binding in KnockoutJS where an item is generated for each entry in an array.
• Adding or removing an item from the array causes row corresponding to that item to appear or disappear respectively.
• A template can be specified for how each item in the list will be constructed.  Compare this with the ability to specify an ItemTemplate in Xaml (note that you can organize the container of the list as you wish which is very similar to ControlTemplate's.
• In Xaml, the data context flows in a predictable way through all an item's sub-items.  Note that the binding on the <tbody> element is to an array and the bindings inside the template are to a single item in the array.  This behaves the same as in Xaml.

The button in line 31 uses a click binding to bind the click event to the function we defined on our view model.

Yes, the binding syntax is different and there are many more binding types available than are used in this simple sample, but the library is very well documented here and the familiarity of the MVVM approach to constructing a UI make KnockoutJS a very easy library to get started with.

Back in the late nineties, during the .com boom, I worked on a huge web application that used XmlHttp (now known as AJAX) and extensive lots of JavaScript.  The language and how it's perceived has changed a lot since then and so has the maturity of the community using it.  Techniques have come about that make JavaScript easier to use in large internet applications.  Most of these techniques have come about because developers are learning to go with the flow of the language instead of fighting it; to use the unique qualities of the language to advantage.

An Example

Consider the following JavaScript:

   1:  function MyClass(x) {

   2:     var Addend = x;

   3:   

   4:      return AddTo = function (y) {

   5:          return y + Addend;

   6:      }

   7:  }

   8:   

   9:  var AddToTen = MyClass(10);

  10:  alert(AddToTen(10));

  11:   

  12:  var AddToFive = MyClass(5);

  13:  alert(AddToFive(10));

Beginning in line 1, a function is being defined.  Inside this function, we define a local variable and set its value equal to the passed in parameter.  Then, an inner function is returned.  This inner function refers to the local variable defined in the outer function.  Once the outer function has completed execution, it cannot be garbage collected because it is still being referred to by the inner function.  It's also very important to understand that whatever value the local variable has at the time the inner function is returned, is the value that will be visible to the inner function when it is executed from an external call.

When lines 9 and 10 run, 10 is passed in to the outer function and the local variable is set to 10.  When the inner function is returned, it will always see Addend as having the value of 10.  Thus, this script will pop the first alert with a value of 20 and then a second with the value of 15. 

In short, whenever an inner function is returned from an outer one, a logical copy of the outer functions state is made available to the inner function and this state can be accessed each time the inner function is invoked.

What About a .Net Example

We can duplicate this behavior in C#.  I created a Console application to illustrate this.

    class Program
    {
        static void Main(string[] args)
        {
            var five = MyMethod(5);
            Console.WriteLine(five(10));

            var ten = MyMethod(10);
            Console.WriteLine(ten(10));
            Console.ReadLine();
        }

        static Func<int, int> MyMethod(int x)
        {
            int addend = x;

            return new Func<int, int>((y) =>
            {
                return addend + y;
            });
        }
    }

Occasionally it's useful to be able to load a piece of XAML as a string. This allows you to be able to decide, at runtime, what the UI will look like. This XAML can be composed beforehand and stored away in a file or the database, or it can be generated on-the-fly at runtime. In any case, the XAML can be a simple string and loaded into the the visual tree at runtime.

There are a few things you'll need to keep in mind, however.

Remove the Class attribute

The Class attribute is specified on the root element of a XAML document and specified the code file containing the code-behind code that is associated with the document. If this attribute is specified, it is expected that the class exists. Using code-behind kind of defeats the purpose of dynamically loading your XAML.

Explicitly Specify Namespaces and Assemblies

A good rule of thumb is that if you have to add a namespace to your document in order to be able to access its contents, you need to also specify the assembly containing the namespace. For example:

xmlns:cnvtr="clr-namespace:MyConverters.Sub.Xaml.Converters;assembly=MvcConverters"

Load the XAML

Once you have clean XAML in a string format, you can load it as below:

            var stringReader = new StringReader(value);
            var xmlTextReader = new XmlTextReader(stringReader);
 
            var control = XamlReader.Load(xmlTextReader);

In the above, "value" is a string that contains the XAML. We set it ass the source of a StringReader, which is set as the source of an XmlTextReader. This is passed into the XamlReader's Load method. Here, the XAML is parsed and a visual tree is constructed.

The Load method returns the root element of your control as a type "object". All that's left to do is to either set the control's DataContext or inject it into an already existing visual tree through, say, binding.