Matt Hidinger

Video and code from my Build talk on Sharing Code between Platforms

Matt Hidinger — Tue, 02 Jul 2013 16:40:34 GMT

Last week I had another incredible time at Microsoft’s annual Build conference. This year was particularly exciting for me, as I was invited to speak about some real-world experience on Building Apps for both Windows and Windows Phone.

This talk is all about cutting to the chase: cross-platform development is challenging. It's also increasingly a reality we must accept, embrace, and learn to take advantage of. By demonstrating a "real-world" app designed for Windows and Windows Phone, you will learn six battle-tested techniques for maximizing both code and skill reuse between multiple platforms.

Get the code

If you enjoyed the talk and would like to check out the code for the Real-world Stocks apps that were built on stage, use the following Github link:

https://github.com/matthidinger/Build2013RealWorldStocks

Introspective

This was my first talk at a major conference. It’s funny watching yourself on video for the first time; you certainly observe some habits to work on. I quickly realized that I was pacing a lot in the beginning, but thankfully my clicker started to die early on which virtually tethered me to the podium!

That said, any other feedback on the presentation would be greatly appreciated! Was the pace ok? I’ve already received feedback that I was both too fast, and too slow, so this will definitely vary depending on one’s own comfort level with the technologies discussed, but I’d love any additional comments.

Thanks for watching!

Technorati Tags: winrt,wp7dev,wp7,presentations,pcl,xaml

A Windows Phone Developer’s take on Xamarin

Matt Hidinger — Sun, 21 Apr 2013 17:29:42 GMT

Xamarin is all the rage in mobile development right now. They just threw an amazing conference in Austin and started trending on Twitter during the opening keynote.

But I’ve identified myself as a Microsoft platform dev for years now, and Xamarin is all about iOS and Android. Why am I, and more importantly Microsoft, seemingly so interested in this product?

Xamarin

If you haven’t been following along, Xamarin is a company that is now 22 months old, founded by Miguel de Icaza and Nat Friedman. Their product allows you to develop native iOS and Android apps using the most wonderful language of all time: C#.

Their toolset, among other things, lets you use Visual Studio to build these apps, offering rich designer experiences, and even let you compile iOS apps using Windows thanks to some neat remoting technology.

Evolve Conference

Last week they threw their very first conference, and it was a truly impressive feat. A giant stage, exciting keynotes, new product announcements, live recordings of all sessions, and amazing one-on-one support with Xamarin engineers. Oh and one of the most friendly and helpful communities I’ve ever been a part of.

What more could you ask for? Parties? After-parties? They had those too.

The Windows angle

Ok so they throw a great conference and have some impressive tooling for building iOS and Android apps. But Microsoft was a platinum sponsor of the Evolve conference. I also ran into 8 or 9 Microsoft employees while there. This puzzled a lot of people.

Why would Microsoft show interest in a platform designed to sell licenses for developing software on competing platforms?

An analogy is in order.

Take the image to the left. The bar at the conference was serving cocktails named iOS, Android, and Windows. The drinks were colored according to the platform. It was a fun idea.

What’s the primary ingredient in all of these drinks? Vodka.

The Vodka is Xamarin. The shared language, the shared tools, the shared core.

The rest of the drink-specific ingredients? Those are the UX, animations, and native platform APIs.

If architected properly, as described by a few talks at the conference, these other ingredients can be quite small comparatively. And these ingredients are focused on delighting the user, not porting all of your HTTP interfaces, models, logging, and generic business logic. The fun stuff; not the laborious, time consuming monotony.

Windows Phone needs a genuine app infusion.

Microsoft has made decent headway getting the “top 50” apps onto the platform. But what about the top 500? What about getting them in a timely manner relative to other platforms?

The chain reaction the platform needs will start with genuine developer interest, and without market-share numbers the only business drive to supporting Windows Phone will come from lowering cost and effort.

Xamarin offers that lower cost/effort.

In my humble opinion, Microsoft should be promoting Xamarin developers every chance it gets.

The more iOS apps written in C#, the more apps can be ported to Windows at a significantly lower cost. The developers will already know the language, they know the IDE, they know the .NET BCL. They most likely just need to learn XAML, and the Windows application lifecycle, which is very similar to the other platforms anyway.

It’s a cross-platform world

This is obvious to anyone working in the mobile space, but the idea of 95% market-share of a single client-platform is a thing of the past. Rocky Lhotka had a great article on the future of the smart client and what this means for developers, although we may differ on which language could take us to that future.

The one thing we all agree on: this is going to be a fun ride.

So let’s all enjoy a xammy whammy

I’d like to wrap-up with a special thanks the entire Xamarin community, I met a ton of great people and definitely look forward to seeing everyone next year! And of course a huge thanks to Stephanie Schatz, Erik Polzin, and Anuj Bhatia for the warm welcome and great conversations throughout the week.

See you all at BUILD 2013!

Technorati Tags: wp7,wp7dev,xamarin,xplat,ios,android

Sharing Code: Windows 8 and Windows Phone

Matt Hidinger — Wed, 05 Dec 2012 18:26:12 GMT

I recently had the opportunity to speak at Microsoft’s New Era of Work conference in Chicago. Below you’ll find the presentation material, the Real-World Stocks project which demonstrates the principles, and a high-level recap of the lessons learned while practicing the following techniques in actual apps.

Slides

A number of slides were provided by Microsoft, and many specifically from Matthias Shapiro. Be sure to check out his blog for more excellent Windows Phone articles!

source

For this talk I started with my Real-World Stocks Windows Phone project, extracted the central logic into a Portable Class Library, and used File-Linking to share Controls and Converters between the two projects.

The full source code for Real-World Stocks can be downloaded at the following link, inside a new folder named CodeSharingSample.

http://realworldstocks.codeplex.com/

For my mercurial fans…

hg clone https://hg.codeplex.com/realworldstocks

Recap: the six techniques of sharing

Sharing code is getting easier, but like all things, there is no silver bullet. Below are six techniques I’ve used in every app I’ve shared code between -- you will very likely use a combination of all of them in a single solution.

Ctrl-C, Ctrl-V

The tried and true technique for sharing code. Simple, elegant, and a potential maintenance nightmare.

Copy/pasting files is still very useful for sharing some XAML across platforms. It will let you copy the XAML as a starting point, and tweak it to look best on the alternate platform. The obvious trade-off being that these files are no way associated, so any tweaks to the XAML in the future will need to be made in both places.

Linked Files

Sometimes you need to share a raw .cs file between projects. You can copy/paste the file or use Add Existing Item, but this will create a duplicate file on disk, so any changes made in the future will need to be copy/pasted again.

Linking source files between projects will come in very handy when you want to share a custom Control, or maybe a handful of custom Converters. Since Linked Files are still the same file on disk, any change made in one will be persisted between all projects.

Pro tip: Finally in VS 2012, you can hold the Left-Alt key and drag entire folders between projects… It will Add a Link for every file inside the folder!

Linked Files enhanced with #if blocks

Sometimes your Linked Files won’t immediately compile on both platforms.

A very common nuisance is when accessibility modifier are different. For example, sharing a custom Control I wrote for Real-World Stocks: in Silverlight the method signature for OnApplyTemplate is public; in Windows it’s marked protected. To work around this I had to write a rather silly #if block to tweak how this code will be compiled, depending on which platform it’s compiling on.

namespace RealWorldStocks.UI.Phone.Controls
{
    [TemplateVisualState(Name = "Positive", GroupName = "PriceStates")]
    [TemplateVisualState(Name = "Negative", GroupName = "PriceStates")]
    public class PriceChangeArrow : Control
    {
        public PriceChangeArrow()
        {
            DefaultStyleKey = typeof (PriceChangeArrow);
        }

#if NETFX_CORE
        protected override void OnApplyTemplate()
#else
        public override void OnApplyTemplate()
#endif
        {
            LayoutUpdated += PriceChangeArrow_LayoutUpdated;
            base.OnApplyTemplate();
        }
    }
}

Portable Class Libraries (PCLs)

When you want to move away from sharing raw source assets you will want to check out PCLs.

When you Add –> New Project and select a Portable Class Library, you will see the following dialog, allowing you to specify exactly which platforms you’d like to target. IntelliSense and the tooling will only surface APIs which are common across all chosen platforms.

Your end result is a single project, with a single codebase, outputting a single assembly (.dll) that is able to be referenced by any of the targeted platforms.

A Platform Adapter Abstraction

PCLs are excellent tools, but not all .NET APIs are currently available to them.

Suppose you want to write a shared HTTP stack in your PCL, which will certainly need the ability to do GZip decompression. Unfortunately you realize the PCL has no GZipStream type. To solve this, I create an abstract class named PlatformAdapter, which has a static property to access the Current instance. Each platform is then responsible for implementing a concrete platform adapter to provide the implementation and initialize the Current property on startup.

Download the full sample project to see how these pieces fit together.

namespace RealWorldStocks.Core
{
    public abstract class PlatformAdapter
    {
        /// <summary>
        /// Provides acess to the current platform adapter
        /// </summary>
        public static PlatformAdapter Current { get; set; }


        public abstract string ReadCompressedResponseStream(HttpWebResponse response);
        public abstract void BeginInvoke(Action actionToInvoke);
        public abstract ISettingsStore Settings { get; }
    }
}

Your skills – it’s not always about sharing raw assets

Lastly, and arguably the biggest thing worth sharing: your skills.

You know C#. You know .NET. You know (and love) XAML. These skills will you get a huge head-start, specifically on the XAML stacks. They aren’t 100% identical, as seen above, but the overarching concepts are exactly the same.

Finally, above all else…

Make a great user experience!

Sharing code, assets, and skills are all great tools for more efficient software delivery. Just don’t forget that you are creating software for different platforms, and the user should always have the optimal experience on each. Not every screen is going to show the same data, in the same way.

Technorati Tags: presentations,wp7dev,winrt,xaml,pcl,architecture

How to get the Windows Phone user agent string

Matt Hidinger — Thu, 05 Jul 2012 18:31:50 GMT

On a recent project I needed to extract the windows phone user-agent string for our usage analytics, and it had to be the same user-agent as the IE requests. While this didn’t end up being as straight forward and I had hoped, the code below involves a few simple steps. First we have to insert a collapsed browser onto the page, then we can navigate it to specifically crafted HTML/JavaScript, which will in-turn notify the WebBrowser control of it’s user-agent. All you need to do is store it somewhere; in my case, I put it into a custom ApplicationSettings class, but you can store it anywhere you want.

Usage

Since this code requires adding a WebBrowser control to a page, it’s probably easier to do in code-behind as opposed to a view model.

public partial class HomeView : PhoneApplicationPage
{
    public HomeView()
    {
        InitializeComponent();
        Loaded += HomeView_Loaded;
    }

    private void HomeView_Loaded(object sender, RoutedEventArgs e)
    {
        UserAgentHelper.GetUserAgent(
            LayoutRoot,
            userAgent =>
                {
                    // TODO: Store this wherever you want
                    ApplicationSettings.Current.UserAgent = userAgent;
                });
    }
}

The Helper

public static class UserAgentHelper
{
    private const string Html =
        @"<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01 Transitional//EN"">

        <html>
        <head>
        <script language=""javascript"" type=""text/javascript"">
            function notifyUA() {
	            window.external.notify(navigator.userAgent);
            }
        </script>
        </head>
        <body onload=""notifyUA();""></body>
        </html>";

    public static void GetUserAgent(Panel rootElement, Action<string> callback)
    {
        var browser = new Microsoft.Phone.Controls.WebBrowser();
        browser.IsScriptEnabled = true;
        browser.Visibility = Visibility.Collapsed;
        browser.Loaded += (sender, args) => browser.NavigateToString(Html);
        browser.ScriptNotify += (sender, args) =>
                                    {
                                        string userAgent = args.Value;
                                        rootElement.Children.Remove(browser);
                                        callback(userAgent);
                                    };
        rootElement.Children.Add(browser);
    }
}

Technorati Tags: wp7dev,wp7

A simple IndexingObservableCollection for zebra-striping rows

Matt Hidinger — Mon, 02 Jul 2012 17:12:30 GMT

I’m currently wrapping up a Windows Phone project and thought this would be a good time to share some of the more reusable stuff we needed.

Zebra-striping alternate rows

This particular app displays a lot of tabular data, so we wanted to zebra-stripe the rows to make them easier to discern. At first we tried using a ValueConverter to get the index of the current container, but this method didn’t end up working with the Telerik DataBoundListBox.

Instead, we wrote a simple IndexingObservableCollection that will automatically populate the Index of each item as it’s added to the collection. This method also works with the infinite scrolling feature of Telerik’s listbox – which we actually needed anyway.

IndexingObservableCollection

To use it, you have to implement the IIndexable interface which ensure an Index property on your model. Then simply replace the ObservableCollection property on your view-model with the following IndexingObservableCollection.

public class IndexingObservableCollection<T> : ObservableCollection<T> where T : IIndexable
{
    protected override void InsertItem(int index, T item)
    {
        item.Index = index;
        base.InsertItem(index, item);
    }

    protected override void SetItem(int index, T item)
    {
        item.Index = index;
        base.SetItem(index, item);
    }
}

public interface IIndexable
{
    int Index { get; set; }
}

Tweaking your model

Below is a sample model that could be used for displaying a list of products. In this case I’m returning a specific Brush for odd-numbered rows, and the XAML Grid simply binds Background="{Binding Background}"

public class ProductRow : IIndexable
{
    public int Index { get; set; }

    public string ProductName { get; set; }

    public string Price { get; set; }

    public Brush Background
    {
        get
        {
            return Index % 2 == 1
                    ? new SolidColorBrush(Colors.DarkGray)
                    : new SolidColorBrush(Colors.White);
        }
    }
}

Technorati Tags: wp7,wp7dev,xaml

WindyCityGo, StirTrek, Windows 8 Anchor

Matt Hidinger — Sun, 06 May 2012 19:31:29 GMT

This blog is quiet… too quiet.

It’s been a busy couple of months since starting at Clarity in January. PowerPoint, for better or worse, became my after-hours IDE. Below you will find some of the recent talks accompanied by their slides and code. Hopefully I didn’t forget anything, but please shoot me a comment if I did!

WindyCityGo

Apr 5 – 6, 2012

WindyCityGo is a two-day conference in Chicago that covers all things mobile.

This year they added Windows Phone to their lineup and I was invited to speak on “Real World Windows Phone Development.” My talk covered an intro to metro and supports my tutorial series on building a polished Stocks app for windows phone.

And now that my speaking gigs are winding down I can finally get back to that series!

GET THE CODE

Windows 8 Anchor at Navy Pier

Apr 26, 2012

This event was put on by Microsoft to help get our excellent mid-west developers ready for Windows 8.

Since Clarity had been using the consumer preview tools to build a few metro-style apps already, Erik Klimczak and I were invited to talk about “Windows 8 from the Trenches.” We really wanted to cover our experience from three perspectives: business, design, and development.

Overall this was a very exciting event with nearly 400 people eager to see what’s coming with windows 8 and this new metro design language.

StirTrek

May 4, 2012

StirTrek is one of the coolest conferences I’ve been to so far. My buddy Clark Sell and I flew out to Columbus for the one-day event that takes place at a movie theater. This was StirTrek’s fourth year and they impressively sold out 1,000 tickets in under 10 minutes.

My talk was on “WinJS for C# Developers” where I gave a crash course into JavaScript development from a C# perspective. I ended up building a Stocks app on stage, on one of the worst market days in recent memory. It always makes for a good demo to show people how much money they are losing!

That said, thankfully I did not have to compete with Scott Hansleman in my time slot. My condolences for those who did!

GET THE CODE

ThatConference

Aug 13 – 15, 2012

This one is coming up soon and I’m really pumped for it. Be sure to check it out, registration should open soon!

Spend 3 days, with 1000 of your fellow campers in 125 sessions geeking out on everything Mobile, Web and Cloud at a giant waterpark.

With over 125 sessions to choose from, your head will eventually start to overheat. Cool off in one of the many nearby pools, because unlike your traditional technology conference, you will be camping at a giant indoor waterpark. Be sure to follow us on twitter and check us out on facebook. Then start practicing your cannon balls.

Technorati Tags: speaking,community,win8,winjs,metro,wp7dev,wp7

A Smarter Infrastructure: Automatically filtering an EF 4.1 DbSet

Matt Hidinger — Wed, 25 Jan 2012 20:02:34 GMT

If you ~~drink from the fire hose~~ read Ayende’s blog you would notice a lot of Anti-Repository talk over the past couple years – which I fully agree with.

Back in 2009 he declared repository is the new singleton, stating:

My current approach for data access now is:

When using a database, use NHibernate’s ISession directly

Encapsulate complex queries into query objects that construct an ICriteria query that I can get and manipulate further

When using something other than a database, create a DAO for that, respecting the underlying storage implementation

Don’t try to protect developers

Naturally he gets a slew of comments asking how he handles certain scenarios without using the repository abstraction. One such question, asked just today is:

With regards to my queries against repositories, Matt asks:

…if my aggregate root query should exclude entities that have, for example, and IsActive = false flag, I also don't want to repeatedly exclude the IsActive = false entities. Using the repository pattern I can expose my Get method where internally it ALWAYS does this.

Ayende responds by stating that the additional abstraction is not necessary; one can simply rely on making a smarter infrastructure. Since he briefly describes how he would solve it using NHibernate, I figured I would also explain how I solve it using EF 4.1 code-first.

A life without repositories

Like Ayende, I prefer to access my ORM abstraction directly (NHibernate has ISession; I create a single IDataContext). Rather than having separate Repositories for each aggregate root I am able to access all of them directly from the IDataContext.

Using the IDataContext

Here is a typical controller with constructor injection to obtain an IDataContext.

The Categories table has 3 rows in it, but one of them has IsDeleted set to true. If you were to execute the following query, you would see that only 2 of the rows are returned.

public class EFController : Controller
{
    private readonly IDataContext _db;

    public EFController(IDataContext db)
    {
        _db = db;
    }

    public ActionResult Index()
    {
        // _db.Categories will only return categories where IsDeleted == false
        var categories = _db.Categories;
        return Content(string.Format("Found {0} active categories", categories.Count()));
    }
}

To prove it, here is the SQL Profiler output when I hit the controller from a browser.

Creating the IDataContext

Now let me show you what the IDataContext looks like. It’s pretty simple. Each of the properties are of type IDbSet<T> and not IList<T>, which would commonly be found in a repository abstraction.

public interface IDataContext
{
    IDbSet<Category> Categories { get; set; }
    IDbSet<Product> Products { get; set; }
}

“OMG you’re spreading EF throughout your entire app!”

IDbSet comes from EntityFramework.dll. This means that anyone who uses the IDataContext will have some (small) knowledge of Entity Framework. Some developers are very concerned over this architectural dependency.

My argument is that Entity Framework, like any popular ORM, is already an abstraction over your database. It will take care of translating your needs into the appropriate SQL depending on the underlying store (MSSQL, Oracle, etc). As a firm believer in YAGNI, I highly doubt I will need to swap out my entire data access layer some day down the road, so why should I introduce architectural complexity for something that will very likely never come up? And even if it somehow does, I don’t know of a single instance where an application has been able to seamlessly swap completely different data stores (like going from SQL Server to RavebDB), without redesign, significant code re-write, and re-testing.

Implementing the IDataContext (and adding filtering into our infrastructure)

Below is our concrete data context. It inherits from DbContext (From EF) and implements the interface we created. EF will automatically initialize the DbSet properties for us (as in the case of Products below), but we could also initialize it ourselves (as in the case of Categories).

Using this answer from StackOverflow I found a great implementation of IDbSet called FilteredDbSet, which takes an Expression in the constructor to represent a WHERE clause. This WHERE clause will be automatically added to every query against the Categories property (and of course, translated all the way to SQL).

Since consumers of the IDataContext are only ever working with IDbSet, they have no idea that this automatic filtering is taking place behind the scenes. Hooray: a smarter infrastructure.

public class ECommerceDb : DbContext, IDataContext
{
    public ECommerceDb()
    {
        // Automatically filter out Categories where IsDeleted == false
        Categories = new FilteredDbSet<Category>(this, c => c.IsDeleted == false);
    }

    public IDbSet<Category> Categories { get; set; }
    public IDbSet<Product> Products { get; set; }
}

What about Unit Testing?

Repositories offer a great unit testing abstraction. And so does this design. IDataContext exposes properties of type IDbSet – which is an interface just like IList, and ripe for the mocking!

Someone has even created a great InMemoryDbSet and added it to NuGet for our consuming pleasure.

http://nuget.org/packages/FakeDbSet

Now it becomes painlessly simple to create a fake IDataContext instance and populate it with InMemoryDbSets just like an in-memory repository would offer.

What about accessing the unfiltered set?

Kevin LaBranche asked below how I might handle a scenario where I needed to bypass the filter, such as for reporting. One way to solve this would be to create an Unfiltered extension method which could check if the IDbSet is a FilteredDbSet, and if so, return underlying set instead of the filtered one.

public static class DbSetHelper
{
    public static IQueryable<TEntity> Unfiltered<TEntity>(this IDbSet<TEntity> set) where TEntity : class
    {
        var filteredDbSet = set as FilteredDbSet<TEntity>;
        return filteredDbSet != null ? filteredDbSet.Unfiltered() : set;
    }
}

Note: I also had to add the following method to the FilteredDbSet class

public IQueryable<TEntity> Unfiltered()
{
    return _set;
}

Which could then be used as follows:

public ActionResult Index()
{
    var categories = _db.Categories;
    var unfiltered = _db.Categories.Unfiltered();
    return Content(string.Format("Found {0} active categories. Found {1} total.", categories.Count(), unfiltered.Count()));
}

Summary

Like the saying goes: complexity is easy; simplicity is hard.

Striving for a clean and simple architecture, without needless layers of complexity, is a goal we should all have. Sometimes it makes sense to try and make your infrastructure smarter, instead of adding yet another layer of indirection.

Technorati Tags: entity framework,architecture,expression trees,codefirst

Adding rich Selector support for MVC

Matt Hidinger — Mon, 23 Jan 2012 21:58:10 GMT

By using the the simple SelectorAttribute and EditorTemplate described in this post, you will get rich support the following very common scenarios (and flip between the various modes with ease):

Single selection from a Drop Down
Single selection from Radio Buttons
Multiple selection from Check Boxes
Multiple selection from a List Box
Read-only mode combines multiple values into a comma-delimited string

The Canonical example

Say you’re inserting a new Product and need to set the CategoryId property. You make a simple input Model wanting to use EditorFor, but CategoryId gets rendered as a useless textbox. The challenge is:

Retrieving the list of categories to present to the user
Keeping the selected item(s) in sync with the list of choices

public class Product
{
    [Required]
    public string Name { get; set; }

    [Required]
    [Display(Name = "Category")]
    public int? CategoryId { get; set; }
}

Enter the SelectorAttribute

The only change from the model above is the new [CategorySelector] attribute on the property.

Single Selection vs. Multiple Selection

Since the [CategorySelector] was placed on an int? property, the selector will render in Single-select mode (only one int can be stored into the property). If however, it were a List<int?> property, the selector would render in Multi-select mode, allowing the user to choose more than one int value. I personally find this automatic behavior pretty cool and very helpful!

The full model

The screenshot you saw easier is rendered simply by using following Model and EditorFor. The magic lies in the [CategorySelector] and [DisplayModeSelector] attributes.

public class DisplayModeOptions
{
    public DisplayModeOptions()
    {
        ReadOnly = new List<DisplayMode> { DisplayMode.HomePage, DisplayMode.BrowseOnly};
    }

    [Required]
    [Display(Name = "Category")]
    [CategorySelector]
    public int? CategoryId { get; set; }

    [Required]
    [DisplayModeSelector(BulkSelectionThreshold = 0)]
    public DisplayMode? DropDown { get; set; }

    [Required]
    [DisplayModeSelector]
    public DisplayMode? RadioButtons { get; set; }


    [Required]
    [DisplayModeSelector(BulkSelectionThreshold = 0)]
    public List<DisplayMode> ListBox { get; set; }

    [Required]
    [DisplayModeSelector]
    public List<DisplayMode> CheckBoxes { get; set; }

    [ReadOnly(true)]
    [DisplayModeSelector]
    public List<DisplayMode> ReadOnly { get; set; }
}

The View is nothing more than

<form action="" method="post">
    <div class="two-column">
        <div class="field-group">
            <h4>Single Selection</h4>
            @Html.FullFieldEditor(m => m.RadioButtons)
            @Html.FullFieldEditor(m => m.DropDown)
            @Html.FullFieldEditor(m => m.CategoryId)
        </div>
        
        <div class="field-group">
            <h4>Multiple Selection</h4>
            @Html.FullFieldEditor(m => m.CheckBoxes)
            @Html.FullFieldEditor(m => m.ListBox)
        </div>
    </div>
    <input type="submit" value="Save"/>
</form>

Other helpful features

Respects existing validators like [Required] and shows a nice custom validation UI on failure
Customizable OptionLabel (or don’t show one at all)
If the SelectorAttribute is placed on an IEnumerable Property it will automatically render in multi-selection mode (notice the difference between the RadioButtons and CheckBoxes property above)
Automatically converts to bulk items mode if the number of choices exceeds your specified threshold. (You wouldn’t really want to show a user 50 checkboxes would you?)
A handy enum helper displays the enum values as the choices in the UI (seen below in the DisplayModeSelectorAttribute code)
Of course it retains all user selected values on posts, very common in validation failures

Creating your own SelectorAttributes

You’ll need to create your own SelectorAttributes in order to specify the list of choices that should be displayed to the user.

The DisplayModeSelector displays all possible choices within an enum.

public class DisplayModeSelectorAttribute : SelectorAttribute
{
    public override IEnumerable<SelectListItem> GetItems()
    {
        return Selector.GetItemsFromEnum<DisplayMode>();
    }
}

The CategorySelector demonstrates how you might access a database to get a list of items dynamically.

public class CategorySelectorAttribute : SelectorAttribute
{
    public CategorySelectorAttribute()
    {
        // The Category selector should always be rendered as a drop down
        BulkSelectionThreshold = 0;
    }

    public override IEnumerable<SelectListItem> GetItems()
    {
        // You could of course get these values from a database, similar to:
        // var dataContext = DependencyResolver.Current.GetService<IDataContext>();

        var categories = new List<Category>
                                {
                                    new Category {Id = 1, Name = "Beverages"},
                                    new Category {Id = 2, Name = "Tools"},
                                    new Category {Id = 3, Name = "Soup"},
                                };
        return Selector.GetItems(categories, m => m.Id, m => m.Name);
    }
}

Get the Code!

Rather than pasting the full source here, I will be publishing it along with a sample project at http://mvcgrabbag.codeplex.com

What you need for Selector support

Selectors\Selector.cs
Selectors\SelectorAttribute.cs
Views\Shared\EditorTemplates\Selector.cshtml

Pull it down locally

Using TortoiseHg simply clone the URL: https://hg01.codeplex.com/mvcgrabbag

Browse the code

Browse the Selector code, MvcGrabBag.Web/Selectors folder

Technorati Tags: aspnet mvc

Simplifying application caching

Matt Hidinger — Fri, 13 Jan 2012 20:40:32 GMT

Many ASP.NET applications utilize the System.Web.Caching.Cache in some way. While it offers a pretty simple Dictionary-like API that your app can start using immediately, I typically create a combined “tell-don’t-ask” wrapper around it – which has some additional architectural benefits as well.

Out of the box concerns

A very common usage of the Cache API can be seen below, but there are a few initial problems I have with it:

Ugly, non-generic casting
Manual null checks
Duplicating the string for the key
Lots of implementation details sprinkled around
No out of box way to scope the cache. For example, cache a unique copy of the item for each User

public ActionResult Bad()
{
    var firstVisit = HttpContext.Cache.Get("FirstVisit") as DateTime?;
    if(firstVisit == null)
    {
        firstVisit = DateTime.Now;
        HttpContext.Cache.Insert("FirstVisit", firstVisit, null, DateTime.Now.AddMinutes(1), TimeSpan.Zero);
    }

    return View("Index", firstVisit.Value);
}

A simple ICache/HttpCache wrapper

The wrapper I create is used below. It’s nothing revolutionary, but does try to cut down on the redundancy, while adding a few features as well. The following code functions exactly the same as the code above.

public ActionResult Index()
{
    var firstVisit = _cache.Get(CacheScope.User, "FirstVisit", TimeSpan.FromMinutes(1), () => DateTime.Now);
    return View(firstVisit);
}

The three biggest changes are:

Implicit generic casting (the Get() method is automatically returning a nice, typed DateTime object because the Func<T> at the end became a Func<DateTime>)
Tell-don’t-ask. Instead of asking the cache if it already contains something by checking for null, then creating and adding the new item into the cache, I’d rather just combine these 2 functions and have the cache figure out what it needs to do. The last method parameter is a Func<T> which will be invoked if the item is not already in the cache.
Added a CacheScope which allows the developer to cache something application-wide, or for each user individually.

Architectural advantages

Aside from these API usage changes we also get 2 big architectural advantages:

The application can rely on a new ICache interface, which means you can access the cache from a lower, non-web layer without having to reference System.Web
The provided implementation of ICache is an HttpCache, which by default uses HttpContext.Current, but provides a nice testability hook to plug in your own mocked HttpContextBase if you want to do some integration testing

Going the extra mile

You may notice that our controller still has intimate knowledge of our caching strategy: duration, scope, the string-based key, etc. This code-duplication lightning-rod could easily be copy-pasted around. One possible way to solve this would be to create something like the following AppCache.

A central AppCache

/// <summary>
/// This class demonstrates fully abstracting the details of your caching strategy and could serve as the single entry point for cached data
/// </summary>
public static class AppCache
{
    public static ICache InternalCache = new HttpCache();

    public static DateTime UsersFirstVisit = InternalCache.Get(CacheScope.User, "FirstVisit", TimeSpan.FromMinutes(1), () => DateTime.Now);
}

Usage in a Controller

public ActionResult FullyAbstracted()
{
    var firstVisit = AppCache.UsersFirstVisit;
    return View("Index", firstVisit);
}

Now we are completely free to change the caching strategy of our application in a single place.

Get the Code

Rather than pasting the full source here, I will be publishing it along with a sample project at http://mvcgrabbag.codeplex.com

Browse the HttpCache code, MvcGrabBag.Web/Caching folder

Technorati Tags: aspnet mvc,caching

Tidy up MVC forms with a simple HtmlFormHelper

Matt Hidinger — Tue, 10 Jan 2012 16:12:53 GMT

Many line-of-business applications contain dozens of forms similar to the following, each field consisting of a few common characteristics:

A Label with the name of the field
The field editor itself
Asterisks and special styling for required fields
A tooltip that can be hovered for a detailed description of the field
Validation messages if the input is incorrect

To achieve this, we can create the following Model

public class ProductInput
{
    [HiddenInput(DisplayValue = false)]
    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Required]
    [Display(Description = "A brief description of the product")]
    [DataType(DataType.MultilineText)]
    public string Description { get; set; }


    [Display(Description = "An optional alternate description of the product to display when featured on the home page")]
    [DataType(DataType.MultilineText)]
    public string FeaturedDescription { get; set; }

    [Required]
    public decimal? Price { get; set; }

    [Display(Description = "Price of the product during a sale")]
    public decimal? SalePrice { get; set; }
}

However, when it comes to actually rendering the view, many MVC forms contain some variation of the following pattern, repeated over and over for every single field.

<div class="field-wrapper">
    <div class="field-label">
        @Html.LabelFor(m => m.Name)
    </div>
    <div class="field-input">
        @Html.EditorFor(m => m.Name)
        @Html.TooltipFor(m => m.Name)
        @Html.ValidationMessageFor(m => m.Name)
    </div>
</div>

While this pattern certainly takes advantage of great MVC functionality like Editor Templates and strongly-typed inputs, it’s clear that this template is going to be pasted all over the application, with a quick rename on the property being rendered. Unfortunately this type of duplication creates 2 distinct problems:

Immediately, it offers no way of styling required fields differently (like adding an asterisk or bolding labels)
It becomes very time consuming to handle a business request like “Please move the tooltip icon before the textboxes instead of after”

To solve this, I use a very simple HtmlFormHelper called FullFieldEditor, which renders the exact same HTML described above, but allows me to easily re-style it in a single place.

The entire View in the screenshot above consists of the following:

<form action="" method="post">
    <div class="two-column">
    
        <div class="field-group">
            @Html.FullFieldEditor(m => m.Id)
            @Html.FullFieldEditor(m => m.Name)
            @Html.FullFieldEditor(m => m.Price)
            @Html.FullFieldEditor(m => m.Description)
        </div>
        
        <div class="field-group">
            @Html.FullFieldEditor(m => m.SalePrice)
            @Html.FullFieldEditor(m => m.FeaturedDescription)
        </div>
    </div>
    
    <div class="clear-fix"></div>
    <input type="submit" value="Save"/>
</form>

Source Code

Rather than pasting the full source here, I will be publishing it along with a sample project at http://mvcgrabbag.codeplex.com

View the full HtmlFormHelper.cs

Technorati Tags: aspnet mvc

Want to be a great architect? Then you’ll need to be a great salesman

Matt Hidinger — Fri, 16 Dec 2011 20:25:46 GMT

The title is slightly tongue-in-cheek, but I do believe selling is a crucial aspect of being an ‘architect.’ And I don’t mean selling to customers.

But first, a backstory

A long time ago, at a client far, far away… they were making a big push to SOA. My project at the time was calling a few methods from a referenced assembly, but the client’s architect said I must re-write it using their new WCF endpoint instead. I had my reservations about this change because the services so far were not known to be stable nor discoverable. Now I am certainly no expert at applying SOA, but I do appreciate that it consists of more than simply exposing everything through web services.

In my mind, before even attempting to impose an SOA mandate across an enterprise you must establish some baseline infrastructure:

A central service registry that lists all available services and their endpoints for various configurations (Integration, QA, Prod)
A heartbeat service monitoring each endpoint so developers don’t waste time relying on a specific service that isn’t available
An enforced protocol that all developers must list any new services on the registry and ensure that heartbeats are setup before signing off

Of course this list is not exhaustive nor even proposed solutions – but they are a few concerns I had during my re-write. The endpoint I was given was under active development and highly unstable; while the referenced assembly I used was rock solid and had existed for years. A lot of time and money were wasted throughout this process. While I can absolutely appreciate the need for standardization, this felt a lot like putting the cart before the horse: the necessary baseline components to make this SOA transition even remotely efficient had not been established. As I was starting to raise these concerns up the chain, I got…

The No-Time Justification

[While this story is purely anecdotal I want to be perfectly clear that the subsequent dialog is hearsay, although we’ve all no doubt been in similar situations.]

I started discussing these concerns with a coworker, and he assured me that the architect is aware of the problems. So the story goes, he was not given the time nor resources to have his plan fully executed. Of course I can appreciate that sometimes there really is no time, but converting an enterprise to SOA should not be some snap decision made without careful consideration.

One could argue that the wasted effort these teams were suffering is the fault of management not allocating the proper resources, but perhaps some of the fault lies on not effectively selling the importance of this plan to management.

Sell your plan

In my mind being an architect (or team lead, or technical lead, or whatever your title may be) is not only about coming up with a plan, but being able to sell that plan to peers and as well as superiors.

Sell your plan to management

As in the anecdote above, the time will come when you may need extra time or resources to execute your plan. This means preparing for a certain kind of debate: a targeted discussion with people concerned with budgets and finances, not curly braces and semi-colons. This means preparing a cost/benefit analysis if applicable: doing this will save us X time or money, failing to do so will cost us X over Y months until corrected. You must be able to articulate clearly that this is not some grandiose gold-plating pie-in-the-sky need. If it’s important and will reduce developer friction while saving the company money then be prepared to argue that effectively.

Sell your plan to the team

It’s equally important to get your team on board. Don’t be an Ivory Tower Architect. You are still a part of the team (or many teams). Don’t just swoop into meetings, impose your will, and avoid implementing the architecture you’ve laid out. Let your team contribute to the discussion and decisions; you are not infallible. This means being able to address concerns directly and intelligently, especially when they don’t align with your beliefs. This means proving that you have considered alternatives and are prepared to have a rational debate on them. This also means having at least cursory knowledge of a number of technologies, patterns, strategies, and platforms.

I understand at the end of the day work needs to get done and us technologists can debate for weeks on something as simple as Hungarian notation, so you’ll still need to use your best judgment when a topic should be put to rest and the team needs to move on.

Sell your plan in terms your audience can understand

Did you notice the huge differences between the two types of meetings above? It’s important to prepare the correct type of material tailored for the audience at hand.

Which brings me to…

My advice: Public Speaking

I can say without a doubt the largest contributors to my professional growth have come from blogging and speaking. If you’re up for it, I highly recommend giving it a shot because…

It builds confidence by putting your material and yourself out there. It’s no secret that being confident in what you’re selling makes it exponentially easier.
It forces you to truly prepare and attempt to master subject material. Hopefully this also means diving into alternative solutions, to ensure that you have indeed made the best possible decision at the time.
It forces you to answer questions on the spot, in front of an audience. These are the very same types of questions you’ll get from your team and your management. “Because I say so” isn’t going to fly during a talk, and it shouldn’t fly in a meeting at work.

Since I’m absolutely no expert at public speaking, if it’s something you’re interested in then you should definitely check out this TekPub production:

The Art of Speaking: Scott Hanselman

Summary

I don’t often write opinion pieces on this blog, mostly because I am still learning every day, and will probably look back on this post a year from now and think these are absurd suggestions. In any event, the following Five Whys blog has some pretty helpful advice, and the book Code Leader I read a few years ago had some nice insight for an aspiring tech lead like myself.

Blog: Five Whys - Team Leadership

Book: Code Leader: Using People, Tools, and Processes to Build Successful Software

Technorati Tags: opinions,speaking,career,architecture

Tweaking Subtext with Hero Shots next to each post

Matt Hidinger — Mon, 12 Dec 2011 17:02:17 GMT

This past weekend I decided to upgrade my Subtext blog to VS 2010 so I could finally rid my machine of VS 2008. After some small hiccups it was ready to rock, and thankfully the deployment to my server was entirely painless with WebDeploy.

So being in VS 2010 and having fully tested my deployment process it seemed like a good time to make a tweak to my Skin that I’ve been wanting to try for a while: showing “Hero Shots” next to each post.

Hero shots?

I’m not really sure what they should be called, I just know I’ve heard the term hero shot a lot this year and it seemed to fit, but call it whatever you want

The idea is pretty simple: when viewing a list of posts (the home page, a specific tag, the archives) I want to show an image that helps illustrate the topic and allow for easier scanning with the eye.

As for implementation I wanted to allow some basic configuration of the hero shot from within Live Writer (or whatever you use to author posts). It goes something like this:

Find an <img id=”hero” /> within each post and if found, float it inline with the PostText
If no images have that ID, then grab the first <img/> and float it inline with the PostText
If I want to entirely disable a Hero Shot for a post then I just add a <div id=”no-hero” /> into the post body

Cool, what’s the tweak?

First I used NuGet to get HtmlAgilityPack – the absolute best way to work with an HTML string.

Install-Package HtmlAgilityPack

With that installed the change to Subtext was actually really simple. Within EntryList.cs I found where it was binding the Post Text and added the BindHeroShot() method seen below. BindHeroShot encapsulates that logic described above. The code below will respect Skins which do not use the PostImage, so this change should not affect any themes without a PostImage control declared.

Subtext.Web\UI\Controls\EntryList.cs

private void BindPostText(RepeaterItemEventArgs e, Entry entry)
{
    BindHeroShot(e, entry);

    var postText = (Literal)e.Item.FindControl("PostText");

    if(DescriptionOnly)
    {
        postText.Text = entry.HasDescription
                ? string.Format(CultureInfo.InvariantCulture, "<p>{0}</p>", entry.Description)
                : ShowTruncatedBody(entry, 150);
    }
    else
    {
        postText.Text = entry.HasDescription ? entry.Description : entry.Body;
    }
}


/// <summary>
///  Get the first image in a post to use as the "Hero Shot" on the list of entries
/// </summary>
private static void BindHeroShot(RepeaterItemEventArgs e, Entry entry)
{
    var postImage = e.Item.FindControl("PostImage") as System.Web.UI.WebControls.Image;
    if (postImage != null)
    {
        postImage.Visible = false;

        var html = new HtmlDocument();
        html.LoadHtml(entry.Body);

        var noHero = html.DocumentNode.SelectSingleNode("//div[@id='no-hero']");
        if (noHero != null)
            return;

        var img = html.DocumentNode.SelectSingleNode("//img[@id='hero']")
                  ?? html.DocumentNode.SelectSingleNode("//img");
                
        if (img != null)
        {
            postImage.Visible = true;
            postImage.ImageUrl = HttpUtility.HtmlDecode(img.Attributes["src"].Value);
        }
    }
}

That’s actually all that had to be changed in Subtext. The rest of the changes take place in your current Skin.

Subtext.Web\Skins\{YourSkin}\EntryList.ascx

Below is the Repeater which shows each Post, the only thing I added to it was an <asp:Image ID=”PostImage”/>

<asp:Repeater runat="server" ID="Entries" OnItemCreated="PostCreated">
    <ItemTemplate>
        <div class="post">
            <div class="title">
                <asp:HyperLink runat="server" ID="TitleUrl" />
                <asp:HyperLink runat="server" ID="editLink" />
            </div>
            <div class="body">
                <asp:Image runat="server" ID="PostImage" CssClass="post-hero-image" />
                <asp:Literal runat="server" ID="PostText" />
                <div class="clear">
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

Subtext.Web\Skins\{YourSkin}\style.css

Naturally I gave the PostImage a CSS Class so I could style it. I chose to float it right and give it max height and widths so it doesn’t take up the entire post. You can of course tweak this any way you like – this part is entirely in your skin. Put the image wherever and style it how you like.

.post-hero-image
{
    float: right;
    margin: 0 0 6px 10px;
    max-height: 200px;
    max-width: 400px;
}

Summary

All in all pretty small tweaks and I actually like how it turned out. I think images next to the posts make it a lot easier to scan topics as I’m scrolling down the page. If you agree and are using Subtext then hopefully this post will make it easy to add to your blog!

Technorati Tags: subtext,open source

Transform your LINQ queries into Excel/PDF reports with DoddleReport 1.2

Matt Hidinger — Wed, 07 Dec 2011 15:59:00 GMT

DoddleReport generates tabular reports from any IEnumerable datasource. Out of the box it can render reports to Excel, PDF, HTML, and CSV – fully pluggable of course. I created the project to provide reporting output over the LINQ queries we had already written for an application, but maybe you can find other uses for it.

So what does it generate?

The following samples are generated live in real-time (notice the data will change every time you open the report)

Excel Report (OpenXML) Creates a native Excel file using OpenXML Requires the DoddleReport.OpenXml package See it live!	Excel Report (HTML) Creates an Excel file using HTML (downside being an Excel security prompt when opening the report) Automatic Sticky/Frozen Headers stay at the top when scrolling through the data See it live!

PDF Report (iTextSharp) Automatically repeats title and column headers numbers on every page Requires the DoddleReport.iTextSharp package See it live!	PDF Report (ABCpdf) Automatically repeats title, column headers, and page numbers on every page Requires the DoddleReport.AbcPdf package Requires an ABCpdf license See it live!

CSV/Delimited Use any kind of delimiter you want See it live!	HTML Report Good old HTML report See it live!

Get Started!

New to DoddleReport?

The project lives at CodePlex: http://doddlereport.codeplex.com/
Look at the Building Your First Report page
If you’re using ASP.NET make sure to read the Web Reporting section
Review the sample project in the solution
Check out the full documentation for advanced customization and configuration

Get it!

The preferred install method is NuGet
…but the compiled Binaries can be found under Downloads
…or just get the latest source

NuGet Packages

DoddleReport has been split into multiple packages to support more users’ needs. See their Descriptions within NuGet for more on the differences.

Install-Package DoddleReport
Install-Package DoddleReport.Web
Install-Package DoddleReport.iTextSharp
Install-Package DoddleReport.AbcPdf
Install-Package DoddleReport.OpenXml
Install-Package DoddleReport.Dynamic

New in v1.2

NEW WRITER: A new OpenXML ExcelReportWriter found in the DoddleReport.OpenXml package, courtesy of Louis-Philippe Perras
NEW WRITER: A new iTextSharp PDF writer can be found in the DoddleReport.iTextSharp package, courtesy of Louis-Philippe Perras (thanks again!)
Breaking change: The root namespace changed from Doddle.Reporting to just DoddleReport
Breaking change: The Default Orientation for reports is now Portrait
All Web references moved to separate project to allow for .NET Client Profile support for WinForms/WPF
Added “myReport.RenderHints.BooleansAsYesNo = true” to write Yes/No on the reports for boolean fields
Added custom FileName support for web reporting as requested in Discussions
Added MVC Areas support by calling areaRegistrationContext.MapReportingRoute();
Various Bug fixes and enhancements as reported in the Discussion forum and Issue Tracker

Technorati Tags: doddle,open source,reporting,nuget

RealWorldWPDev Part 6: Page Navigation and passing Complex State

Matt Hidinger — Mon, 05 Dec 2011 00:34:02 GMT

Series Introduction and Outline

This series is going to walk through building a polished, functioning Windows Phone app from start to finish. The app is called Realworld Stocks and the full source code will be available on CodePlex as the series progresses. I’ll be using Mercurial to encourage forking and maybe even pull requests from developers who want to contribute their own real-world solutions.

View the Series Introduction and Outline

Navigation Basics

Even though this series assumes a basic understanding of Windows Phone development I want to briefly touch on the basics of page navigation. Windows Phone apps follow a basic stateless navigation paradigm very similar to that of a web app. Each page in the app is represented by a URL ending with .xaml.

How to Navigate to a new Page (the bad way)

The simplest way to navigate would be to drop in a Button, add a Click handler for the button, and use the following sample code in your code-behind.

NavigationService.Navigate(new Uri("/Views/Home.xaml"));
NavigationService.Navigate(new Uri("/Views/ProductDetails.xaml?ProductID=5&ProductName=HTC%20Titan"));

As you can see, if you need to pass parameters to the page you’re navigating to, you use query string values, again exactly how you would write a web application.

In the first image above we have a ListBox of Stock Symbols. When the user clicks on the MSFT item, we want to navigate to the StockDetailsView.xaml, and tell it which Symbol was clicked on. What we are looking to achieve is something along these lines.

NavigationService.Navigate(new Uri("/Views/StockDetailsView.xaml?Symbol=MSFT"));

Accessing QueryString params (the bad way)

Now we are on our new page and need to access the QueryString. So if we open up code-behind for StockDetailsView.xaml.cs we could override OnNavigatedTo, and access the NavigationContext.QueryString dictionary to pull out the params that were passed in.

public partial class StockDetailsView : PhoneApplicationPage
{
    public StockDetailsView()
    {
        InitializeComponent();
    }

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        var symbol = NavigationContext.QueryString["Symbol"];
    }
}

Ick. Lots of strings in this scenario, both for navigating to a new URI, and also for pulling query string parameters out.

Strings can prove troublesome for a few reasons:

They are very susceptible to typo’s
They offer no refactoring/renaming support at compile-time.

Thankfully, there’s a better way…

Navigating with Caliburn

As I mentioned in a previous post, one of the reasons I love Caliburn is that it provides just enough infrastructure to let me develop faster, but not so overbearing that I’m boxed into a corner. One of these infrastructure benefits is navigation on both sides of the equation: navigating to a new page, and pulling out query string params on the new page.

Navigating with HyperlinkButton and an ActionMessage

In the screenshot above we can see a ListBox showing a list of Stocks. And with this ListBox we naturally have a DataTemplate describing how to render each item. But the really important piece here is that when a specific item is Tapped, we want to load the StockDetails view for that item.

HomeWatchListView.xaml

Within HomeWatchListView.xaml we have defined the following DataTemplate, which has a HyperlinkButton with something special – cal:Message.Attach=”LoadSymbol($dataContext)”

<DataTemplate x:Key="WatchListItemTemplate">
	<HyperlinkButton cal:Message.Attach="LoadSymbol($dataContext)">
		<Grid>                
	             <TextBlock Text="{Binding Symbol}"/>
	             <TextBlock Text="{Binding Company}"/>
		</Grid>
	</HyperlinkButton>
</DataTemplate>

At first this may look pretty weird. It looks like it’s calling a method named LoadSymbol() with some kind of token being passed as $dataContext – and that’s exactly what it is.

HomeViewModel.cs

Now, in our HomeViewModel we can see exactly where this method is defined. And it does in fact take in a method parameter of type StockSnapshot. Since this is exactly what our ListBox on the view was bound to, were able to use the $dataContext param which represents a single StockSnapshot in the list – specifically, the one that was Tapped.

This give us the added benefit of writing navigation login in our ViewModel and not in our View. ViewModels are more easily testable than Views and can be reused if necessary.

public class HomeViewModel : Screen
{
    // ... snip ...

    public void LoadSymbol(StockSnapshot snapshot)
    {
    	// TODO: Navigate!
    }
}

How to Navigate to a new Page (the good way)

Caliburn has an INavigationService that we use in our ViewModel. It offers 2 major pieces of functionality (and a lot more – see the summary section below!):

Building a URI for us using _navigationSerice.UriFor<T>() – Look ma’, no strings!
Take the generated URI and Navigate to a new page

public void LoadSymbol(StockSnapshot snapshot)
{
    var uri = _navigation.UriFor<StockDetailsViewModel>()
        .WithParam(m => m.Symbol, snapshot.Symbol)
        .BuildUri();

    // BuildUri() returns the following URI
    // /Views/StockDetails/StockDetailsView.xaml?Symbol=MSFT

    _navigation.UriFor<StockDetailsViewModel>()
        .WithParam(m => m.Symbol, snapshot.Symbol)
        .Navigate();
}

Accessing QueryString params (the good way)

Now that we have navigated to StockDetailsView.xaml we need to figure out which Symbol to load – which was passed in via query string. Another great piece of infrastructure is that when a Page is Initialized Caliburn will examine the Page’s QueryString for you. It will look for properties on the ViewModel that match the QueryString parameters and inject them automatically, performing the necessary type coercion (for example, if you ViewModel had a property of type Int.)

That is a long way of saying this: On your ViewModel, create a property whose name matches a QueryString parameter and it will be injected for you automatically.

public class StockDetailsViewModel : Screen
{
    private string _symbol;

    // This property will be populated automatically because 
    // the incoming querystring has a param named ?Symbol=X
    public string Symbol
    {
        get { return _symbol; }
        set
        {
            _symbol = value;
            NotifyOfPropertyChange(() => Symbol);
        }
    }
}

Awesome! No more strings! We are now able build a URI using a strongly typed model with full refactor/rename supporting, and able to pull out the query string parameter on the new page without every accessing the Query String directly. I personally find this to be amazingly time saving and allows for very rapid refactoring and enhancements as the app progresses.

Passing complex State between Pages

Now there is one final piece to our puzzle. Passing around basic query string primitives is fine, but what if you already have a fully populated complex object model and want to pass that to the next page? This is where things can get a bit muddy.

For this scenario I typically combine query strings with a singleton data dump called GlobalData. Usually I will create a basic dictionary inside of GlobalData, where I will store the object based on some key, and then pull the object out of GlobalData by using that same key – the key is what I pass around using QueryStrings. The 3 classes working together are outlined below.

GlobalData / SnapshotCache

public class SnapshotCache : Dictionary<string, StockSnapshot>
{
    public StockSnapshot GetFromCache(string key)
    {
        if (ContainsKey(key))
            return this[key];

        return null;
    }
}

public class GlobalData : NotifyObject
{
    private GlobalData()
    {
            
    }

    private static GlobalData _current;
    public static GlobalData Current
    {
        get
        {
            if (_current == null)
                _current = new GlobalData();

            return _current;
        }
        set { _current = value; }
    }

    private SnapshotCache _cachedStops;
    public SnapshotCache Snapshots
    {
        get
        {
            if (_cachedStops == null)
                _cachedStops = new SnapshotCache();

            return _cachedStops;
        }
    }
}

Before navigating to a new page, store the object into GlobalData…

public class HomeViewModel : Screen
{
    public void LoadSymbol(StockSnapshot snapshot)
    {
        GlobalData.Current.Snapshots[snapshot.Symbol] = snapshot;

        _navigation.UriFor<StockDetailsViewModel>()
             .WithParam(m => m.Symbol, snapshot.Symbol)
             .Navigate();
    }
}

…on the new page, pull the object out of GlobalData

public class StockDetailsViewModel : Screen
{
    private string _symbol;
    public string Symbol
    {
        get { return _symbol; }
        set
        {
            _symbol = value;
            NotifyOfPropertyChange(() => Symbol);
        }
    }

    public StockSnapshot Snapshot
    {
        get { return GlobalData.Current.Snapshots[Symbol]; }
    }
}

Summary and further reading

This tutorial covered quite a bit but hopefully didn’t throw too much at you. Page navigation is one of the biggest topics that devs ask me when building their first app, and I highly recommend using Caliburn’s excellent infrastructure to make the task a lot easier.

If you want to dive more into using CM with Windows Phone please check out the following pages:

Caliburn Docs: Working with Windows Phone

Caliburn Docs: All About Actions

Want some more RealWorldWPDev?

View the Series Introduction and Outline

Technorati Tags: realworldwpdev,wp7dev

New job, month off, RealWorldWPDev continues

Matt Hidinger — Sat, 03 Dec 2011 04:52:10 GMT

As Phil put it recently: it’s not every day you write this sort of blog post.

A few people have been asking me why there haven’t been any updates on RealWorldWPDev in the last few weeks, and the simple answer is that I was pretty swamped over a particular life decision: changing jobs. They say changing jobs is one of the most stressful things we do in life, and I definitely believe it.

November 30th marked my last day at Triton-Tek after 4.5 years. It was by far the best job I’ve had to date. I got to work with some really great people, on some awesome projects, and made good friends along the way. It was a really tough decision to leave.

What’s Next?

But Chicago is a big city with some great companies and great talent. I would be remiss if I didn’t take this opportunity in my late 20s to explore what else is out there. I’m very excited that on January 5th, 2012 I’ll be joining Clarity Consulting. The first time I met some of Clarity’s WP7 team was back in October 2010, where we were both invited by Microsoft to speak at the Chicago Windows Phone launch party. They have worked on some really impressive software over the years, and I very much look forward to joining a group well known for their talent and passion for leading edge technology solutions.

A Month off

But before all that, I decided to take a month to myself. So I have December off. I’m going to be nerding out. A lot. Many of you have recommended I go on vacation, but with my girlfriend just starting a new job and unable to take time off, she would be pretty bitter if I disappeared somewhere exotic for two weeks. Ultimately, I love coding, and I am honestly very excited to work on code that I want to… for an entire month.

And it’s actually off to a pretty good start, some of which includes…

Get the code from my Onion Architecture talk on CodePlex
Update DoddleReport to v1.1 with some new features and lots of NuGet goodness
Update one of my most trafficked blog posts with a new API and full source code
Migrate all my personal projects off TFS and onto Mercurial (I really like Mercurial)
RealWorldWPDev parts 6-10
Publish the CTA Watch update for Mango and some cool new features
Publish the Transit Directions update for Mango
Tackle my massive blog backlog
Tackle it even more. Seriously, it’s a huge backlog. 20 posts? Ack. Prob won’t get to all of them

I know what you’re thinking: I need time away from the computer. I’ll do that too. I greatly look forward to unwinding back home in Michigan for a week around Christmas!

In closing…

Thanks again to everyone at Triton-Tek for an awesome near half-decade!

Thanks to all of you who read my ramblings on here every few weeks!

Thanks to the Chicago dev Community! Rest assured I will still be fully involved in the local community, probably even more-so.

And come on Nokia, help us get Windows Phone the market attention it deserves

Technorati Tags: career

Writing a Fluent ASP.NET MVC Recursive TreeView Helper

Matt Hidinger — Sun, 27 Nov 2011 19:32:08 GMT

This post is an update to my original ASP.NET MVC Recursive TreeView Helper from almost 3 years ago. Oddly enough it’s still a high-traffic post and has close to 50 comments asking for an update or a complete solution to download. I figured if I was going to do that, I might as well give the API a much-needed facelift and pop it on NuGet.

What is it?

Given the following self-referencing hierarchal model…

public class TreeViewLocation
{
    public TreeViewLocation()
    {
        ChildLocations = new HashSet<TreeViewLocation>();
    }

    public int Id { get; set; }
    public string Name { get; set; }

    public virtual int? ParentLocationId { get; set; }
        
    public virtual ICollection<TreeViewLocation> ChildLocations { get; set; }
}

…we want to generate an HTML unordered-list like this

what’s the new API look like?

First, apologies for mixing syntax highlighters. My default one doesn’t have a great Razor theme yet.

The following Razor shows the API we will create. It follows a fluent syntax which many developers greatly prefer over the alternative (dozens of overloads!) In the end, it’s easier for us to write, easier to extend in the future, and more discoverable for developers who use it later on. This particular TreeView implementation also takes advantage of Razor’s awesome HelperResult templating delegate (the @<text> syntax seen below).

@model List<MvcTreeView.Models.Location>

@(Html.TreeView(Model)
    .EmptyContent("No locations have been defined yet!")    
    .Children(m => m.ChildLocations)
    .HtmlAttributes(new { id = "tree"})
    .ChildrenHtmlAttributes(new { @class = "subItem"})
    .ItemText(m => m.Name)
    .ItemTemplate(
        @<text>
            <a href="#@item.Id">@item.Name</a>
        </text>)
)

How was it written?

Defining a Fluent API

Writing a fluent API is typically pretty simple. The key requirement is that each method returns the type of the class, and always terminates with “return this;” The rest of the method body usually just stores some state to a private field, which will eventually be used to render the customized UI.

For example, to set the ItemText which will display the item label in each <li>, we take the property selector and simply store it into the _displayProperty field, eventually returning the current instance allowing for further methods to be chained together.

public TreeView<T> ItemText(Func<T, string> selector)
{
    if (selector == null) throw new ArgumentNullException("selector");
    _displayProperty = selector;
    return this;
}

Rendering / IHtmlString

Finally, once the developer has customized exactly how the TreeView should be rendered, we need to output the HTML.

One way to hook into this infrastructure is by implementing both IHtmlString and overriding ToString(). MVC will inspect whether we implement IHtmlString and if so, will call ToHtmlString() to trigger our rendering which is written to view.

Also notice the ValidateSettings() call – this is necessary in many fluent configurations, since these kinds of APIs lend themselves to invalid configuration on occasion. For example using 2 incompatible methods like ItemText() and ItemTemplate() together – typically you either want to use a simple text display or a full-blowing template display – but it’s impossible to use both. We could throw an exception here alerting the developer that this is an invalid configuration.

public override string ToString()
{
    ValidateSettings();

    var listItems = _items.ToList();

    var ul = new TagBuilder("ul");
    ul.MergeAttributes(_htmlAttributes);

    // snip...
    return ul.ToString();
}

public string ToHtmlString()
{
    return ToString();
}

Get The Code

This helper is very easy to add to your project using NuGet. Alternatively you can still go the manual route and grab the code from CodePlex.

NuGet / NuGet Sample Package

With this project I decided to include a NuGet Sample Package which is used to easily demonstrate the usage of the helper.

These are source-only packages. By installing this package into your project you will get a raw file in Helpers\TreeView.cs that you can edit or update as you see fit.

The sample project is the same concept, it will add a TreeViewController, and a TreeView.cshtml view which demonstrates the usage of the TreeView helper. Once you’ve tried out the sample and played with it, it’s very easy to uninstall via NuGet to remove the unnecessary files.

CodePlex

And of course, the full source is available to download on CodePlex.

http://mvctreeview.codeplex.com

Browse the latest source code

Technorati Tags: aspnet mvc,fluent,razor,nuget

RealWorldWPDev Part 5: Creating and Consuming Web Services

Matt Hidinger — Tue, 01 Nov 2011 06:19:12 GMT

Series Introduction and Outline

View the Series Introduction and Outline

Choices

In the Microsoft world we have no shortage of client and server-side HTTP stacks to choose from. Rather than try to cover every possible combination, and to prevent this topic from getting too long-winded, I will keep this part succinct.

Our first major decisions revolve around the following options:

SOAP or REST?

WCF or ASP.NET MVC?

Without getting too deep into it, and certainly without suggesting that this is The One True Way, I personally prefer creating REST-based ASP.NET MVC endpoints for the following reasons:

Very simple, flexible routing out of the box
Returning JSON is as simple as return Json()
Model binding/casting of incoming request parameters
Simple ActionFilter attributes add Caching and GZip Compression
No XML configuration, no code/proxy generation, no service references

Creating Services

Since we’ve decided to go down the path of ASP.NET MVC for this project, I’m going to walk you through creating services using MVC. If you’ve been following along then you already have your Web project setup. If not, please see Part 2: File –> New Project

Should I create a middle-man service?

Many mobile apps communicate with some kind of 3rd party service(s). The decision you need to make is whether the phone should connect directly to this service, or if there are benefits to having the mobile app connect to your middle-man web service, which will subsequently contact the third party service. The decision here definitely depends on your specific needs, but there are very real advantages to creating a middle-man service. A few of the benefits of include:

API Keys - If the third party service requires an API key, storing it on the phone can easily be stolen. If your web server proxies this call for you, it’s much safer being stored there.
Caching – Many services will throttle the number of requests you make (using your API key). If you can limit these requests by caching the response on your server, it can greatly improve response times for your users as well as keep your third party service usage lower.
Shaping the Model – Many service providers return XML. They may even return a ton of XML that you don’t even care about in your app. If your mobile app contacts your server directly, your server is able to query the third party data and shape it in the most efficient way possible to return to the mobile app, including: Aggregating multiple third-party service calls into one HTTP response to the phone, removing unnecessary elements that the phone app wouldn’t use, and turning the XML into Compressed JSON making it much more compact.

Enough background, implementation time

The following will walk you through a pretty efficient way for creating and consuming services, while enhancing them very easily over time. Of course, to get the full idea of how it works in practice, make sure you pull down the latest code and check it out.

step 1: Define your entities/model in the WP7 project

In RealworldStocks.Client.Core I have a Models folder, which include various classes that inherit from NotifyObject, seen below.

step 2: “Add as Link” model classes into your Web project

Since you want these same classes to be serialized from your service, you will need them in the web project, but want to keep them in sync as you add, remove, or rename properties. To do this, in RealWorldStocks.Web, right-click in your Models folder and select Add –> Existing Item…

Then navigate to the RealWorldStocks.Client.Core\Models folder and select the entities you plan on serializing and exposing to your client, but don’t just press Add! Next to the Add button is a drop-down arrow, open it and make sure you click Add As Link

Notice how the files have little “shortcut” overlays on their icons.

step 3: Return your data as JSON from the MVC controller

Below is the complete StocksController for exposing Snapshots and getting the latest News articles. The following code covers a number of concepts from the beginning of this post. I encourage you to check out the full source code to get an understanding of how they work under the covers.

[AllowJsonGet] – This attribute works around an MVC 2 security feature that makes you explicitly return JSON from HTTP GET requests
[NoCache] – The WebClient in WP7 will cache requests for you automatically. This can catch you off guard and cause very subtle bugs if you aren’t careful. This attribute will add the appropriate HTTP cache-control headers to our response telling the app not to cache the returned JSON. If we didn’t have this, every time we requested an update for the MSFT symbol, we would immediately get back the phone-cached previous response without even trying to contact the server.
[Compress] – This attribute checks the incoming Accept-Encoding of the request, and if it supports GZip, will automatically GZip compress the outgoing response. Our Windows Phone app uses the SharpGIS.GZipWebClient to decompress it – discussed below.
[OutputCache] – On The GetSnapshot method below there is an OutputCache with a Duration of 60. This attribute instructs MVC to return a cached version of this response as long as the incoming route parameters are the same – in this case, if the same Symbol is requested. This means that if multiple Realworld Stocks users out there are all request a snapshot of MSFT, our service will cache this for 60 seconds and give them all the same response, rather than hitting Yahoo every single time.

[AllowJsonGet]
[NoCache]
[Compress]
public class StocksController : Controller
{
    private readonly IStocksService _stocksService;
    private readonly INewsService _newsService;

    public StocksController()
    {
        _stocksService = new YahooStocksService();
        _newsService = new FakeNewsService();
    }

    public ActionResult GetSnapshots(string[] symbols)
    {
        var model = _stocksService.GetSnapshots(symbols);
        return Json(model);
    }

    public ActionResult GetNews(string[] symbols)
    {
        var model = _newsService.GetNews(symbols);
        return Json(model);
    }


    [OutputCache(Duration = 60)]
    public ActionResult GetSnapshot(string symbol)
    {
        return GetSnapshots(new[] { symbol });
    }
}

Test it!

If everything goes as planned you should be able to hit this URL in a browser. On my machine hosted under IIS, the URL is:

http://localhost/RealWorldStocks.Web/Stocks/GetSnapshots?symbols=MSFT&symbols=NOK

step 4: Creating a robust HttpClient

Now that we have our service up there and returning JSON, let’s start consuming it from the app. The following HttpClient handles a number of concerns on our behalf.

GZip Compression using SharpGIS.GZipWebClient (can be found on NuGet!)
Timeout Support to automatically kill requests that take too long (30 seconds by default)
Logging requests and responses in the Debug window
Deserializing the JSON into the specific Model type automatically

public static class HttpClient
{
    public static TimeSpan Timeout = TimeSpan.FromSeconds(30);

    public static void BeginRequest<T>(HttpRequest<T> request, Action<HttpResponse<T>> callback)
    {
        BeginRequest(request.Url, callback);
    }

    public static void BeginRequest<T>(string url, Action<HttpResponse<T>> callback)
    {
        var client = new GZipWebClient();

        var timer = new Timer(state => client.CancelAsync(), null, Timeout, TimeSpan.FromMilliseconds(-1));
            
        Debug.WriteLine("HTTP Request: {0}", url);
        client.DownloadStringCompleted += (s, e) => ProcessResponse(callback, e);
        client.DownloadStringAsync(new Uri(url, UriKind.Absolute), timer);
    }

    private static void ProcessResponse<T>(Action<HttpResponse<T>> callback, DownloadStringCompletedEventArgs e)
    {
        var timer = (Timer) e.UserState;
        if (timer != null)
            timer.Dispose();

        try
        {
            if (e.Error == null)
            {
                string json = e.Result.Replace("&amp;", "&");
                Debug.WriteLine("HTTP Response: {0}\r\n", json);
                var model = SerializationHelper.Deserialize<T>(json);

                Deployment.Current.Dispatcher.BeginInvoke(() => callback(new HttpResponse<T>(model)));
            }
            else
            {
                throw new WebException("Error getting the web service data", e.Error);
            }
        }
        catch (SerializationException ex)
        {
            var httpException = new HttpException("Unable to deserialize the model", ex);
            Debug.WriteLine(ex);
            Deployment.Current.Dispatcher.BeginInvoke(() => callback(new HttpResponse<T>(httpException)));
        }
        catch (WebException ex)
        {
            var httpException = new HttpException(ex);
            Debug.WriteLine(ex);
            Deployment.Current.Dispatcher.BeginInvoke(() => callback(new HttpResponse<T>(httpException)));
        }
    }
}

Logging

The logging is helpful to see the following in the Debug window as you’re testing the app.

INFO: HTTP Request: http://legacy/RealWorldStocks.Web/Stocks/GetSnapshots?symbols=MSFT&symbols=NOK&symbols=AAPL&isTrial=False&clientVersion=1.0.0.0
INFO: HTTP Response: [{"Symbol":"MSFT","Company":"Microsoft Corpora","OpeningPrice":27.08,"LastPrice":27.19,"DaysChange":0.03,"DaysChangePercentFormatted":"+0.11%","DaysChangeFormatted":"+0.03","DaysRangeMin":0,"DaysRangeMax":0,"Volume":56897792,"PreviousClose":27.16}]

step 5: Create the client-side API for communicating with the server

Calling an HTTP endpoint is as simple as declaring the URL along with any query string parameters to customize the request. Since we definitely don’t want to spread this implementation detail all through our code-base, we write a simple abstraction which handles the following:

Declares what type of model is returned from the server by defining the method as HttpRequest<T> where T is what is returned from the server
Declares the base URL path for the request, e.g., “Stocks/GetSnapshot”
Builds up any query string params that will be sent with the request.
Essentially, it builds a string like the following, and automatically parses the JSON into the type of Model we expect from the server: http://localhost/RealWorldStocks.Web/Stocks/GetSnapshots?symbols=MSFT&symbols=NOK

public class StocksWebService : HttpService, IStocksWebService
{
    public StocksWebService()
    {
#if DEBUG
        BaseUrl = DynamicLocalhost.ReplaceLocalhost("http://localhost/RealWorldStocks.Web/");
#else
        BaseUrl = "http://services.mydomain.com/v1/";
#endif
    }

    public HttpRequest<StockSnapshot> GetSnapshot(string symbol)
    {
        var queryString = new QueryString
                                {
                                    {"symbol", symbol}
                                };

        return CreateHttpRequest<StockSnapshot>("Stocks/GetSnapshot", queryString);
    }

    public HttpRequest<IEnumerable<StockSnapshot>> GetWatchListSnapshots()
    {
        var queryString = new QueryString();
        queryString.AddMany("symbols", WatchList.Current.Select(m => m.Symbol));

        return CreateHttpRequest<IEnumerable<StockSnapshot>>("Stocks/GetSnapshots", queryString);
    }

    public HttpRequest<IEnumerable<News>> GetNewsForWatchList()
    {
        var queryString = new QueryString();
        queryString.AddMany("symbols", WatchList.Current.Select(m => m.Symbol));

        return CreateHttpRequest<IEnumerable<News>>("Stocks/GetNews", queryString);
    }
}

DynamicLocalhost

DynamicLocalhost is a NuGet package I wrote to make debugging services on multiple machines with multiple developers easier.

step 6: Bringing it all together – Orchestrating the request from the ViewModel

It seems like a lot of code just to get this far, but most of this stuff is infrastructure that I just copy/paste into all of my projects. Without these infrastructure concerns I am able to just start writing the controller methods, and defining the client-side API for the requests. From there I just start using it from the ViewModel, all in a matter of 5 minutes.

Coroutines - Making async sexy since C# 2

As a quick aside I wanted to talk about coroutines. One of these amazing things was first introduced to me in Rob Eisenberg’s Build your own MVVM Framework talk from MIX ‘10. It was an excellent talk, and the inspiration for the Caliburn.Micro project.

The Coroutine is the UpdateWatchList method below.

Show the global BusyIndictator with a friendly loading message
Making an async HTTP Request
When we get the HTTP Response, check if it had an error, if so show a friendly MessageBox
If it returned successfully then we bind the data to our ObservableCollection so the UI will update itself
Hide the global BusyIndicator

This is actually a lot of stuff going on, and it’s async. Notice how there are no lambdas, no callbacks, no anonymous method delegates? It’s really quite elegant, and has suited me very nicely while I patiently wait for C# 5 and official async compiler support.

private IEnumerable<IResult> UpdateWatchList()
{
    BusyIndictator.Show("Loading watch list...");
    var request = _stocksWebService.GetWatchListSnapshots().Execute();
    yield return request;

    if (!request.Response.HasError)
    {
        WatchList.RepopulateObservableCollection(request.Response.Model);
    }
    else
    {
        MessageBox.Show("We had troubles updating your watch list, please try again in a few moments", 
            "Unable to contact server", MessageBoxButton.OK);
    }

    yield return BusyIndictator.HideResult();
}

Summary

That covered a lot of stuff. My hope is that it wasn’t too daunting or overwhelming – a lot of this code really is reusable infrastructure stuff that can just be pasted into any project and used right-away. I would love feedback from people, particularly those who choose a different path, like WCF and Service References.

Want some more RealWorldWPDev?

View the Series Introduction and Outline

Technorati Tags: realworldwpdev,wp7dev

RealWorldWPDev Part 4: The Panorama

Matt Hidinger — Fri, 21 Oct 2011 06:33:15 GMT

Series Introduction and Outline

View the Series Introduction and Outline

The windows phone panorama

Many apps lend themselves nicely to a Windows Phone Panorama. CTA Watch looks similar but it’s actually a Pivot with a background image. After going back and forth for a bit with Real-world Stocks I decided that the panorama looked pretty nice and went with it.

Thanks again @Templarian for the background! Be sure to hit him up if you’re in need of a great designer who actually gets metro!

This post is going to cover a lot of topics so I will do my best to whet your appetite, but please be sure to Download the Code and check out the app for yourself! The code should be pretty easy to follow as you get more familiar with how Caliburn does things.

What helps make a great experience?

Lazy load sections after the user has swiped to them
Panorama animations take ~0.5 seconds; don’t run your code until the animation is finished to prevent stuttering
Show a nice BusyIndictator with friendly messages for each panorama section
Customize the app bar buttons depending on which panorama section is active
The News section show time relative dates (just now, 2 hours ago, etc)

Disclaimer

This entire series assumes a basic understanding of Silverlight and MVVM. If you aren’t familiar with these topics then I am hopeful that you can still follow along, but you may need to do some further reading outside of this to cover the fundamentals and framework primitives. That said, the following post is going to remain fairly high level and try to let the source code speak for itself. I am intentionally not going to deep-dive into topics that are covered elsewhere.

Documentation

Caliburn.Micro has great documentation. Check out the following links if you’re looking to deep dive into anything covered here.

Caliburn.Micro Documentation

Working with Windows Phone 7

MVVM Recap

MVVM is covered everywhere, so all I will say about here is the following – it stands for Model-View-ViewModel.

ViewModels are just regular classes. In Caliburn many of them inherit from Screen. They provide the logic for your View, including what data should be displayed, and what code should execute when actions are taken on the view (like Button clicks)
Views are your standard XAML artifacts, like Pages and UserControls. In MVVM they rely heavily on the rich Binding support in XAML/Silverlight to interact with the ViewModel that it is bound to.
Model is everything else.

The Anatomy of the HomeViewModel

Now then, the HomeViewModel is a great starting point. At the time of the writing you can see the full HomeViewModel source. It’s actually a pretty simple class for doing a whole lot of stuff for us. Let’s dissect this bad boy.

public class HomeViewModel : Conductor<IScreen>.Collection.OneActive, IRefreshable, IAppBarController
{
    private readonly INavigationService _navigation;

    public HomeViewModel(INavigationService navigation, HomeWatchListViewModel watchList, HomeNewsViewModel news,
                            HomeQuoteViewModel quote)
    {
        _navigation = navigation;
        Items.Add(watchList);
        Items.Add(news);
        Items.Add(quote);
    }
}

Conductor

A Panorama is normally comprised of 3-4 individual panes. Most of the time these panes are completely isolated and have nothing to do with each other; aside from being housed within the same container. If you actually think about it like that, then you can come up with some highly maintainable and extensible designs.

Rather than creating one giant HomeViewModel that is responsible for controlling every single out of those panes, let’s instead give our HomeViewModel the responsibility it deserves: conducting each of these panes.

You’ll notice that HomeViewModel inherits from Conductor<IScreen>. This provides some great infrastructure for us right out of the box. First up, it exposes a property from the base class of time IObservableCollectio<IScreen> called Items. In the code above, we are using this Items collection to add our Children View Models. It also handled Activation of our child items, telling them what to Initialize themselves – this lends itself amazingly to lazy loading the panorama panes, discussed at the end of this post.

How is this used in HomeView.xaml?

So we have a HomeViewModel, with an Items property that now contains 3 other ViewModels. How exactly is this used in our view? In 2 ways:

The Panorama control inherits from ItemsControl, which means it supports binding to collections just like a ListBox does. In the end, since our “Items” are just ViewModels themselves, they are in turn rendered as Views in the Panorama. This concept is the basis of known as building Composite Views.
No ItemsSource=”{Binding Items}”?? You may notice there is no explicit binding in the XAML below – Caliburn is a Convention over Configuration framework (if you want it to be!). This means it will by default use its x:Name and look for a property on the ViewModel that it can bind itself to. If you prefer to explicitly bind your Views then please do so! The conventions are entirely optional.

<controls:Panorama x:Name="Items" Title="{StaticResource AppNameUpper}">
    <controls:Panorama.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </controls:Panorama.HeaderTemplate>
</controls:Panorama>

IOC / Constructor Injection

Now you might be wondering, in the HomeView I just created a constructor that takes 4 parameters, INavigationService, HomeWatchListViewModel, HomeNewsViewModel, and HomeQuotesViewModel.

When our HomeView.xaml is loaded, what is creating our HomeViewModel for us, and more importantly, how did it know how to pass these parameters to our constructor?

This concept is known as Inversion of Control. Our HomeViewModel relies on other classes to complete it’s job, but rather than being responsible for creating these dependencies itself, it externalizes that responsibility and simply declares ‘hey, I need these things! Framework, you give them to me!’

When you create new ViewModels and other services, you just need to register them in your AppBootstrapper. A snippet can be seen below. Once these ViewModels are registered in the Bootstrapper, Caliburn will take care of the rest.

public class AppBootstrapper : PhoneBootstrapper
{
    private PhoneContainer _container;

    protected override void Configure()
    {
        LogManager.GetLog = type => new DebugLog();

        _container = new PhoneContainer(RootFrame);
        _container.RegisterPhoneServices();

        _container.Singleton<IStocksWebService, StocksWebService>();


        _container.Singleton<HomeViewModel>();
        _container.Singleton<HomeNewsViewModel>();
        _container.Singleton<HomeWatchListViewModel>();
        _container.Singleton<HomeQuoteViewModel>();
    }
}

Let’s Talk Polish

The following concepts were used to create the full Panorama experience seen in the YouTube video. You may need to watch it more than once to notice the subtle attention to detail.

BusyIndicator

Mango improved panoramas in many ways. For one, the System Tray now has an Opacity property, so you can finally show the tray in a full screen panorama and it still looks great. Another big improvement is the native ProgressIndicator experience. It’s built into the SystemTray and interacts excellently to the rest of the tray, like hiding the loading message when the user taps it to see the clock. It also has some great out of the box animations.

For our app I wanted a global hook into the ProgressIndicator from my ViewModels. To do so, I created a simple BusyIndicator.Show() method which hooks right into the System Tray. You can use this API directly from your ViewModel in a very simple fashion.

I will be going more into the BusyIndicator in a future post.

public void RefreshData()
{
    BusyIndictator.Show("Loading watch list...");
    ThreadPool.QueueUserWorkItem(callback =>
    {
        Coroutine.BeginExecute(UpdateWatchList().GetEnumerator());
    });
}

IRefreshable

Refreshing data is very common in these types of apps. Acknowledging this I decided to create a simple IRefreshable interface, which in our Conductor’s case, simply delegates along to the ActiveItem (the currently active panorama pane ViewModel) and says “Hey, do you know how to refresh data? If so, please proceed to do!”

public void RefreshData()
{
    var refreshableChild = ActiveItem as IRefreshable;
    if (refreshableChild != null)
        refreshableChild.RefreshData();
}

Then, in the HomeWatchListViewModel for example, it also implements IRefreshable, and proceeds to refresh the current Watch List.

This is another example of compositing pieces together to write really extensible code as our app progresses.

public class HomeWatchListViewModel : Screen, IRefreshable
{
    public void RefreshData()
    {
        BusyIndictator.Show("Loading watch list...");
        ThreadPool.QueueUserWorkItem(callback =>
        {
            Coroutine.BeginExecute(UpdateWatchList().GetEnumerator());
        });
    }
}

Polishing up the AppBar

If you look closely at the video, you will notice some careful consideration we needed on our home screen. Each swipe of the panorama changes the ApplicationBar in some way.

Watch List shows 2 app bar buttons: Add and Refresh
News shows only 1 app bar button: Refresh
Lookup shows 0 app bar buttons, and it set it’s Mode to Minimized

In order to achieve this I created a simple IAppBarController interface and an AppBarHelper class. To try and keep this post from getting too long I will be dedicating an entire article to this topic soon. In the mean time, please see the code if you want to see how it works!

WatermarkedTextbox and PriceChangeArrow

Again a keen eye may have noticed 2 other niceties on the home screen:

PriceChangeArrow – the price change arrow (showing positive or negative gains) had a little animation when the Watch List loaded. It’s a little thing but I think goes a long way to making the app feel polished and enjoyable. I will be blogging exactly how to create such a control in the future.
WatermarkedTextBox – this control I found from an open source Silverlight project and improved it a bit for Mango. I will be blogging in more detail about this control in the future.

Lazy Loading the Panorama Panes and Keeping the Animations Fluid!

This is perhaps the most important part of the home screen, so I’m not entirely sure why I left it ‘til the end. In any event, high framerates are very important, and maintaining a nice fluid user experience throughout the app is crucial to getting those coveted 5-star rating.

Caliburn Screens have a few important methods that you will want to override to make your app do something.

OnInitialize – Override this method to add logic which should execute only the first time that the screen is activated. After initialization is complete, IsInitialized will be true.
OnActivate – Override this method to add logic which should execute every time the screen is activated. After activation is complete, IsActive will be true.
OnDeactivate – Override this method to add custom logic which should be executed whenever the screen is deactivated or closed. The bool property will indicated if the deactivation is actually a close. After deactivation is complete, IsActive will be false.
OnViewLoaded – Since Screen implements IViewAware, it takes this as an opportunity to let you know when your view’s Loaded event is fired. Use this if you are following a SupervisingController or PassiveView style and you need to work with the view. This is also a place to put view model logic which may be dependent on the presence of a view even though you may not be working with the view directly.

In addition to the above events, a while ago I came up with OnViewReady and submitted the patch to Rob. The idea is simple: fire after OnViewLoaded, but also after the first LayoutUpdated; meaning the base UI is rendered, so feel free to start doing hogging CPU! By waiting until OnViewReady you make sure that your code doesn’t start running and burning precious CPU cycles while the platform is trying to finish starting up (and animating things into view, like the panorama).

Workaround to OnViewReady

At the time of this writing, in the 1.2 NuGet package, I could not get it to behave correctly, so instead opted for a slightly uglier workaround. Essentially this creates a background thread, and then sleeps for 1 second in that thread, before starting to work. 1 second should be plenty of time for any base loading and animations to complete.

protected override void OnInitialize()
{
    RefreshData();
}

public void RefreshData()
{
    BusyIndictator.Show("Loading watch list...");

    // TODO: Move this to OnViewReady in CM 1.3
    // For now sleep for a bit to let the panorama load smoothly
    ThreadPool.QueueUserWorkItem(callback =>
    {
        Thread.Sleep(1000);
        Coroutine.BeginExecute(UpdateWatchList().GetEnumerator());
    });
}

Summary

Kudos if you followed all of that! This one took me a little while to write and contains a lot of stuff, but it also leaves the door open for a whole lot more to talk about in the future!

Please post any questions you have here, and again, please pull down the code and follow along as we go. Feedback is greatly appreciated!

Want some more RealWorldWPDev?

View the Series Introduction and Outline

Technorati Tags: realworldwpdev,wp7dev

RealWorldWPDev Part 3: Caliburn.Micro and Application Infrastructure

Matt Hidinger — Sun, 16 Oct 2011 23:27:13 GMT

Series Introduction and Outline

View the Series Introduction and Outline

Caliburn.Micro

Many Windows Phone Applications use a lightweight MVVM framework for basic infrastructure services. Realworld Stocks is going to use Caliburn.Micro. I have had great success with Caliburn.Micro in my previous Windows Phone and Silverlight apps. CM was created by Rob Eisenberg and is under active development and has a great community and following.

This article is going to walk through a lot of Caliburn.Micro setup, but for the full documentation please see the official project documentation.

Installing Caliburn.Micro from NuGet

If you’ve been following along then you already have NuGet installed. If not, please see Part 2: File –> New Project.

Caliburn.Micro needs to be installed into both the RealWorldStocks.Client.Core and the RealWorldStocks.Client.UI projects.

From the Package Manager Console

To get Caliburn.Micro you can open up the Package Manager console and type the following, but make sure you select the right Default Project. You must install CM into both .Core and .UI projects!

From the Manage NuGet Packages UI

Alternatively you can right-click on both Projects from the Solution Explorer and select “Manage NuGet Packages…”, then click the Online pane and search for Caliburn.Micro. You must install CM into both .Core and .UI projects!

Finishing Caliburn Setup

Once Caliburn.Micro finishes installing it should open up a web page with instructions to finish the configuration.

Follow the instructions that opened up in Visual Studio
Make sure your App.xaml and App.xaml.cs are cleared out from the instructions above!
Delete MainPage.xaml
In RealworldStocks.Client.UI, create a new folder called Framework
Delete AppBootstrapper.cs
Create a new AppBootstrapper.cs file in the Framework folder
Paste the following code into AppBoostrapper.cs

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Windows;
using System.Windows.Controls;
using Caliburn.Micro;
using Microsoft.Phone.Controls;
using RealWorldStocks.Client.UI.ViewModels.Home;

namespace RealWorldStocks.Client.UI.Framework
{
	public class AppBootstrapper : PhoneBootstrapper
	{
        PhoneContainer _container;

        protected override void Configure()
        {
            _container = new PhoneContainer(RootFrame);

            _container.RegisterPhoneServices();
            _container.Singleton<HomeViewModel>();
        }

        protected override void OnUnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
        {
            if (Debugger.IsAttached)
            {
                Debugger.Break();
                e.Handled = true;
            }
            else
            {
                MessageBox.Show("An unexpected error occured, sorry about the troubles.", "Oops...", MessageBoxButton.OK);
                e.Handled = true;
            }

            base.OnUnhandledException(sender, e);
        }

        protected override object GetInstance(Type service, string key)
        {
            return _container.GetInstance(service, key);
        }

        protected override IEnumerable<object> GetAllInstances(Type service)
        {
            return _container.GetAllInstances(service);
        }

        protected override void BuildUp(object instance)
        {
            _container.BuildUp(instance);
        }  
	}
}

8. Since we moved the AppBoostrapper into the RealWorldStocks.Client.UI.Framework namespace we need to update our App.xaml. Paste the following into your App.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:Framework="clr-namespace:RealWorldStocks.Client.UI.Framework"
             x:Class="RealWorldStocks.Client.UI.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Assets/Constants.xaml"/>
                <ResourceDictionary Source="Assets/Styles.xaml"/>
                <ResourceDictionary Source="Assets/Converters.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            
            <Framework:AppBootstrapper x:Key="bootstrapper" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

Working around a small NuGet bug

At the time of this writing there appears to be a bug in the NuGet package which thinks my project is a Silverlight project (instead of Windows Phone).

If the NuGet package created a ShellViewModel.cs in your project, then you will need to take the following steps:

Delete ShellViewModel.cs
Delete IShell.cs
Delete ShellView.xaml

Application Infrastructure

The final pieces of our infrastructure include the following:

Value Converters

I have a set of IValueConverters that I have used on all of my Windows Phone projects. They can be viewed from the CodePlex source code.

Assets

Assets are a set of ResourceDictionaries that contain the resources used throughout the application. They can be viewed from the CodePlex source code.

Constants.xaml

Defines variables like “AppName” so it can be used on pages
<TextBlock Text=”{StaticResource AppName}” />

Converters.xaml

Defines the set of converters used in our project

Styles.xaml

Defines a set of reusable styles

ViewModels

ViewModels define the logic for all of our views. They take advantage of XAML’s great binding mechanisms and Caliburn’s ActionMessages to control how our views behave. Later in the series we will deep dive into Views and ViewModels.

To get started, make sure you have a ViewModels folder, then right-click and select New Item…, add a Class file called HomeViewModel.cs

public class HomeViewModel : Screen
{
    public HomeViewModel()
    {
        DisplayName = "Home";
    }   
}

Views

Views are your .xaml Pages and UserControls. Later in the series we will deep dive into Views and ViewModels.

To get started, make sure you have a Views folder, then right-click and select New Item…, add a Windows Phone Portrait Page called HomeView.xaml

WMAppManifest.xml

Lastly, you need to update the WMAppManifest to tell it what page should load when the app is launched.

Open WMAppManifest.xml and set the NavigationPage to your primary page

<DefaultTask Name="_default" NavigationPage="Views/HomeView.xaml" />

Run it!

Now we’re getting somewhere. We have the majority of our application infrastructure in place and have our first View and ViewModel. If you press F5 now it should launch right into the HomeView!

Problems?

If the app exits immediately after launching check the following:

WPAppManifest NavigationPage points at a .xaml file that actually exists
Make sure you App.xaml.cs has nothing but InitializeComponent() and App.xaml only has the Bootstrapper in it. See the Caliburn.Micro documentation for more
Check the namespaces in your ViewModels and Views and make sure ViewModels and Views namespaces match up
For further Caliburn troubleshooting check the Caliburn.Micro documentation

Want some more RealWorldWPDev?

View the Series Introduction and Outline

Technorati Tags: wp7dev,realworldwpdev

RealWorldWPDev Part 2: File –> New Project

Matt Hidinger — Sun, 16 Oct 2011 21:56:41 GMT

Series Introduction and Outline

View the Series Introduction and Outline

Before you begin, install NuGet!

NuGet is a Visual Studio extension that makes it easy to install and update open source libraries and tools in Visual Studio. It can be installed directly from within Visual Studio and only takes a minute.

In Visual Studio: Tools –> Extension Manager and find NuGet

Defining our Solution Structure

For our solution we are going to create 3 Client-side projects and 1 Server-side project. These projects are described below. The Solution Explorer to the right should help give you a sense of how our solution will start to develop, but for now, let’s just get the basics running.

Creating the Windows Phone Projects

RealWorldStocks.Client.Core

Windows Phone Class Library

This project contains all of our core (non-UI) client-side functionality: Data Models, Helpers, HTTP Web Service clients, etc

RealWorldStocks.Client.UI

Windows Phone Application

References RealWorldStocks.Client.Core

This project holds all UI-specific functionality for our application: Assets, Styles, ViewModels, Views (Pages and UserControls), etc

RealWorldStocks.Client.BackgroundAgent

Windows Phone Scheduled Task Agent

References RealWorldStocks.Client.Core

The periodic task project that will eventually update our Live Tiles in the background every 30 minutes

Creating the Backend Services

RealWorldStocks.Web

ASP.NET MVC 2 Application

This project exposes our server side endpoints. I chose MVC for service simplicity; it’s very easy to create HTTP GET Routes with query string model binding and returning JSON out of the box.

Run it!

At this point we can F5 our project and marvel at our progress! In the next part we will start giving it some signs of life.

Want some more RealWorldWPDev?

View the Series Introduction and Outline

Technorati Tags: wp7dev,realworldwpdev

RealWorldWPDev Part 1: Introduction and Outline

Matt Hidinger — Sun, 16 Oct 2011 20:45:49 GMT

Series Introduction and Outline

Realworld Stocks

The app we are creating is called Realworld Stocks, and this is what it looks like as of today. It’s not much yet, but hey, we’re only a few days in! Hopefully as the series progresses we’ll end up with a pretty nice looking stocks app ready for marketplace submission.

Series Outline

The following is a rough outline for how I expect this series to progress. Some parts will probably be added or removed (or broken out into smaller pieces). I will try really hard to write at least one post per week, so keep the pressure on if I start slacking!

Introduction and Outline (this post)
File –> New Project
Caliburn.Micro and Application Infrastructure
The Panorama
Creating and Consuming HTTP Web Services
Page Navigation and Passing Complex State
State Management with ApplicationSettings and GlobalData
Versioning Application settings when users upgrade
Properly supporting Trial Mode
Creating Multiple Live Tiles
Updating tiles with Background Agents
Creating reusable Blend Behaviors
Polishing the User Input Experience
Creating an Announcements/News Page
Caching frequent images automatically into isolated storage
Submitting your App
Creating the global BusyIndictator (new topic!)
Creating re-usable and themable Controls (new topic!)
Controlling the AppBar from the ViewModel (new topic!)

Extended Topics

The following parts will not apply to every app but are still worth posting about – most likely as an extended part of this series.

Adding some serious polish with Telerik RadControls for Windows Phone
Persisting certain models into a database on the server using EF 4.1 Code-first
Updating the current location with a Caliburn.Micro UploadLocationResult
MVVM Visual State Management
Theming your image resources using OpacityMask (bad) or convert to a Path with a Brush (good)

Get the Source Code

The full source code for this app will be be continuously updated on CodePlex at http://realworldwpdev.codeplex.com

There are 3 ways to get the source – the ideal way to keep updating as the app progresses would be to use TortoiseHg.

Browse the Source at CodePlex
Download the latest Source
Use TortoiseHg to pull down and update to the latest source automatically

Mercurial with TortoiseHg

At first a new source control product may seem like a burden, but TortoiseHg is a great product, extremely easy to pull from a repository, and if you feel like it, a great time to learn about DVCS.

For a great video tutorial on using Mercurial with CodePlex check out this free Tekpub Production: Mercurial With Codeplex! The TortoiseHg UI in the video is slightly out of date now, but should still give you a great starting point!

Download TortoiseHg
In Windows Explorer, create a new folder where you want to download the source to
Right click in the window, from TortoiseHg select Clone…
Type the following Source https://hg01.codeplex.com/realworldwpdev and press Clone
That’s it

Special Thanks

The following people have contributed either directly or indirectly to this app and I’d like to offer a very special thanks to them!

Thanks @Templarian for the iconography!

Thanks @JeffWilcox for the Samsung Focus Skin!

Thanks @magnusvw for connecting the backend to the Yahoo Finance API!

I hope everyone enjoys this series! Feedback always welcome!

Technorati Tags: wp7dev,realworldwpdev

DynamicLocalhost NuGet Package for Windows Phone

Matt Hidinger — Tue, 11 Oct 2011 04:18:19 GMT

Why?

Because I should be able to Get Latest and F5!

I think simplicity is a crucial measure of success in all software. I think being able to pull down the source code onto any developer machine and F5 is an important goal to strive for. Removing manual processes and streamlining the development workflow can yield huge productivity gains – especially when onboarding new developers. I believe databases should be provisioned and seeded automatically, all 3rd party libraries should be readily available in the repo, and any manual steps that must be memorized or documented should be avoided at all costs.

But this hasn’t been easy on a Windows Phone device

The aforementioned goals have been easily achievable in all of my projects except Windows Phone apps. A key component to this workflow is the magical variable known as localhost.

When I F5 one of my MVC apps the project launches a browser to http://localhost/MyProject.

When I F5 one of my Windows Phone apps in the emulator, it connects to my local IIS server at http://localhost/MyProject.

When I F5 one of my Winodws Phone apps on a real device, things go awry. Localhost on the phone does not point to my development box, naturally, it points back to itself. Thus the predicament.

Let’s spike out a theory

Last night I had an idea, and decided to spike it out. What if I could store the URL to my Local IIS web services in a simple .txt file inside the XAP package? Then I could read this file during AppLaunch and store it for later. This part was easy, now for the magic. What if I could come up with a PreBuild step in Visual Studio, which could modify said .txt file during compile, and replace it’s contents with the Environment.MachineName? After a little fumbling around with a new Console Project, I had it working.

NuGet, PowerShell, meet DynamicLocalhost

I’ve been a long-time fan of NuGet. I have seen some amazingly creative things done with it beyond just simple library dumps. People much smarter than me are using PowerShell to create impressive scaffolding frameworks. Inspired, I cracked open my Windows PowerShell and MSBuild books and got to work.

I ended up building the following:

No assembly dependencies, only a single source file and a single .txt file get added to your project
Created a MSBuild Task which will process the LocalHostname.txt file and fill it with the Environment.MachineName
Modify the .csproj file to add my custom BeforeBuild target, which executes the Task above on each compile, thus ensuring the text file always has the correct machine name

Ok that’s great, but how do I use it?

First you have to install the package. Make sure NuGet is installed.

The rest is up to you, to use the DynamicLocalhost class however you see fit.

For me, in my WP7 projects I create a static ApplicationSettings class to use throughout the app. The comments below hopefully explain how it works. The only source code you ever check in says “localhost” – and will be dynamically replaced at compile-time to the actual developer’s machine name. This means that you are free to check in everything, get latest anytime you want, and never have to worry about someone accidently checking in their real machine’s URL, hampering your workflow.

public static class ApplicationSettings
{
    public static string WebServiceBaseUrl { get; private set; }

    static ApplicationSettings()
    {
#if DEBUG
        // Compiling this app on MY machine, WebServiceBaseUrl will become: http://MATT-PC/RealWorldWP7.Web/
        // The returned URL will be automatically determined on each compile
        // Therefore no issues checking it in and getting latest on any developer machine
        WebServiceBaseUrl = DynamicLocalhost.ReplaceLocalhost("http://localhost/RealWorldWP7.Web/");
#else
        WebServiceBaseUrl = "http://services.mydomain.com/v1/";
#endif
    }
}

Source Code, Feedback, Forking!

I would really, really love feedback on this. I scoured the internet trying to see if something similar already existed and turned up with nothing. If you find it useful, or have any suggestions, please be sure to let me know!

I’m also very new at PowerShell and would not be surprised if I wrote some of the worst .ps1 scripts ever. Any input by PowerShell guru’s would be most welcome.

Get the Source!

It’s using Mercurial, so fork it, and be sure to send me pull requests if you write something awesome!

Technorati Tags: wp7dev,open source,community,nuget,PowerShell,msbuild

Windows Phone Development MVP

Matt Hidinger — Sat, 01 Oct 2011 15:29:00 GMT

This morning I received a Microsoft MVP award for Windows Phone Development. I’m really honored to be part of a community that really values knowledge sharing and continuous professional growth such as this. Over the past few years I’ve come to greatly respect and appreciate the vast amount of personal time that many people in the development community (both MVPs and non-MVPs) contribute to help drive our profession forward.

I’d also like to offer a very special thanks to the entire Windows Phone Dev community for helping to expand this great platform into the consumer reach that it deserves. There is still a ways to go, but after the impressive world-wide launch of Mango across dozens of countries, carriers, and OEMs on a single day I think we can all agree that Microsoft is taking this seriously. I’m personally really excited to be in on the ground floor this platform!

Chicago Community

And of course to anyone in Chicagoland who is at least slightly curious about Windows Phone development, don’t miss our Chicago Windows Phone Developer group meetings on the first Thursday of every month at 200 S Wacker.

Thanks!

Thanks again to the entire development community for investing so much of your personal time to speaking, training, blogging, and critiquing the tools and platforms we use every day!

Technorati Tags: wp7,wp7dev,mvp,community

An inheritance-aware ModelBinderProvider in MVC 3

Matt Hidinger — Tue, 16 Aug 2011 17:07:06 GMT

The default Model Binder in ASP.NET MVC works fine for most cases. Most of you have probably registered custom binders with it plenty of times.

ModelBinders.Binders.Add(typeof(ILoadProvider), new LoadProviderModelBinder());

The issue is that that it’s limited to binding the exact type you add to its dictionary. The ILoadProvider registered above will invoke my LoadProviderModelBinder as long as the controller action parameter is of type ILoadProvider. But what if you have a type that derives from ILoadProvider and still want your custom binding to occur?

Thankfully this is very simple in ASP.NET MVC 3. It comes with a new extensibility point, IModelBinderProvider, and works just like the other providers.

public interface IModelBinderProvider
{
    IModelBinder GetBinder(Type modelType);
}

InheritanceAwareModelBinderProvider

With this interface, we are able to create a very simple InheritanceAwareModelBinderProvider.

/// <summary>
/// Adds inheritance support when registering model binders. 
/// Any model binders added here will be invoked if the Type being bound inherits from the type registered.
/// </summary>
public class InheritanceAwareModelBinderProvider : Dictionary<Type, IModelBinder>, IModelBinderProvider
{
    public IModelBinder GetBinder(Type modelType)
    {
        var binders = from binder in this
                        where binder.Key.IsAssignableFrom(modelType)
                        select binder.Value;

        return binders.FirstOrDefault();
    }
}

Usage

var binderProvider = new InheritanceAwareModelBinderProvider
                            {
                                { typeof (ILoadProvider), new LoadProviderModelBinder() }
                            };

ModelBinderProviders.BinderProviders.Add(binderProvider);

Given the example above, if I’m binding to a type that that inherits from ILoadProvider my LoadProviderModelBinder will still handle the binding.

Technorati Tags: aspnet mvc

Windows Phone Unleashed @ TechWeek Chicago

Matt Hidinger — Fri, 22 Jul 2011 20:50:20 GMT

TechWeek Chicago

Starting today and running through next Friday, July 29th is TechWeek Chicago. TechWeek is a week of conference, expo and events with over 2,000 entrepreneurs, business leaders, and innovators, 4 days of conference sessions, over 150 international speakers, 4 days of an expo hall with over 100 exhibitors, 35 competing tech startups, and over 30 independent off-site events. TechWeek connects the newest web and mobile technologies to thousands of Chicago business, academic, community, art, and media professionals- all within one week. For more information about TechWeek, check out http://www.techweek.com.

Windows Phone Unleashed

During TechWeek Chicago, Microsoft is hosting Windows Phone Unleashed @ TechWeek. This will be an incredible evening getting hands-on with Windows Phone and you will have the opportunity to work with the Windows Phone and Windows Azure experts to help get your app ideas of the ground. More details for this event is below.

There are a limited number of tickets, so RSVP ASAP!
http://windowsphonetechweek.eventbrite.com

Don’t miss this opportunity to get hands on with Windows Phone and the new features coming in Windows Phone “Mango”. Get help developing apps from the Windows Phone experts! This is a “hands-on” Hackathon where you will learn how to build, scale and publish your Windows Phone apps from the Windows Phone and Windows Azure experts. If you are a beginner or even an expert Windows Phone developer, you should not miss this event.

We will have short sessions on how to get started creating apps for the Windows Phone. And sessions on how to make serious $$$ building Windows Phone apps. Bring your laptop and we will provide all of the necessary tools needed to build your apps. This five hour event will bring together experts and developers with the purpose of developing WP7 apps.

Bring your ideas! Present them to your peers and WIN! Top app ideas will be voted on with an opportunity to WIN FREE Marketplace registration and more! We will also show participants who manage to create a Windows Phone app how they can be entered to win a new Windows Phone!

If you are a student, this is an event you can’t afford to miss! We will show you multiple ways to get FREE Unlocked Samsung Focus Windows Phones, FREE Xbox 360 games, FREE Visual Studio 2010 Professional, FREE Windows Phone Marketplace accounts and FREE Gift Cards.

Technorati Tags: wp7,wp7dev,community,presentations