I have published my version of the Prairie Dev Con conference app out to the Windows Phone Marketplace, which you can browse or invoke an install from here. I am going to write a little at a high level about the experience, then get into some meatier posts down the road.

Timeline

It took ten days to build. Actually, it was more like two flights, a few hours in TO Pearson airport, one late night and an after-supper-code-crunch. I wish I had used some more agile tricks and principles to help pull through this project (some great conversations with Steve and David over the last few months about Agile have been a solid influence).  It certainly helped that David and Amir had already built the JSON services, so my responsibilities were simply in being a consumer.

The Tech That Made it Tick

• MVVM Light Toolkit – this was a God-send. Seriously, it made visual binding in Expression Blend so easy. I put my time in the trenches hand-bombing XAML in the past. I think everyone should know XAML inside and out if you want to build WP7 apps, but once you do…man alive. Laurent, I’m buying you a drink!
• Silverlight Toolkit for Windows Phone – This gem adds a bunch of controls to the designer’s tool chest.  I made use of the page transitions and the hub tiles. I wasn’t able to get a good thing going with the context menu - I was trying to use it on data-bound items and there was too much friction there to use it without pain.
• SQL CE and LINQ – Yum. Though I had a few struggles with many-to-many relationships (I’ll explain later) this makes working with relational data so simple. I was going to go with custom serialization but at the last minute threw together a spike solution and committed.  It was also good to exercise some of the Mango functionality.
• JSON.net – This little library chews through JSON data and does an excellent job of deserialization without object mapping.
• Visual Studio 2010 – Best development environment on the planet. Period.
• Expression Blend – As I mentioned, I’ve earned my stripes in raw XAML, so I have no problem using the right tool for the right job. While the markup it creates is still a little verbose (and you have to cajole it into using best practices) Expression Blend makes such quick work of templating, databinding and making your app look like a big bowl of awesomesauce. With cherries.
• Marketplace Test Kit – this is a handy utility that plugs into VS2010 when you install the phone SDK. It has some automated tests, makes sure your images are in check, then gives you the skinny on what you need to do to get your app approved.  This is the kind of _brutal transparency _that app developers deserve and other vendors (cough Apple cough) would do good to imitate.

 

This was a fun app to build. I got to touch (and dive into) a good variety of technical elements. I’m a little sick in the head, in that I like when things break. I tend to find that when they do break you get that exciting rush of running down the rabbit hole to see what makes things tick.

Friction Points – Things I Don’t/Didn’t Like

Navigation and User Experience

The back stack of NavigationService helps to maintain a consistent feel across the whole UI, across the whole phone. Microsoft is fighting for this, recommending this and I agree with it for the most part. In my app, though, I ran into this UX problem; consider the following:

• User clicks on the speakers tile
• They click on a speaker
• They click on a session
• They save the session (which navigates to the sessions page again)
• They go to another session
• They click back (which returns them to the session list)

Now, to get to the “home” screen, they still have to click back 4 times.  Which is gross.  I “solved” this by adding a “return” button in the application bar of the session list, but I want to study this more and see if it’s a design problem.  The thing is, until you want to move backwards, the app seems easy and fluid to move through speakers and sessions and I don’t want to break that.

Many-to-Many Relationships in SQL CE

Another hang up (for a couple hours, on the plane with no internet access, boo!) was with the many-to-many relationships in SQL CE. I have “sessions” and “tags”. Tags have several different sessions and sessions can have more than one tag.  In the mobile version of code-first, you have to be more explicit about these relationships, something I missed originally.  I’ll put a post together on this.

Blend and Build Configurations

This one is completely obvious once you get what’s going on, yet will make you pull out your hair if you don’t. And I don’t have a lot of hair to begin with.

I was switching between Release, Debug and a config I created called “Trial”.  Once you get in the pattern of flowing back and forth between VS 2010 and Blend, you have to remember that Blend only reads from your Debug directory. For example, if you’re building in Release config changing parts of your ViewModel in VS and then flipping over to Blend to wire up the UI, the changes just don’t show up when you’re trying to bind.  Just be aware of this, if you’re using multiple build configurations.

Again, completely obvious, just not at 2 in the morning.

My Own Threading Design

I rushed this piece and didn’t think this through. As a result, I had to create a bunch of events rather than using existing messaging facilities and even then, I didn’t get the UI responsive. I’m redesigning this piece.

Awesomeness – Things that Worked Really Well

MVVM Light Toolkit and Expression Blend

I can’t stress enough how quickly things come together when you’re using “Blendable” view models.  This app was very much an experiment as to where those pieces fit and where code should live (as evidenced in the source), but visualizing data is just so easy with this marriage.

JSON.Net

While I originally missed the LINQ-to-JSON support, I’ve started playing with this and it’s great. In my current build I had to smack together a bunch of DTO objects that could easily be used by JSON.Net, then I crafted up my real model objects and did a mapping.  I know now about the LINQ support and will be using that to replace my hackiness in my psuedo-DAL

Visual Studio 2010 and the Mango SDK

Folks, if you’re developing on any other mobile platform, your tools aren’t as good. I don’t rightly care if that offends you. I’ve used the iOS and Android toolset (even with folks more well versed than I) and they’ve not shown me a better end-to-end experience. I’ve put up a challenge on Twitter for Android developers to do a head-to-head tool comparison at a conference with no bites.  I’m talking everything from New Project to the emulator all the way through to the Marketplace Readiness test kit.  It’s all there, and I can effortlessly switch between Blend and VS.  The SDK is strong, close to the metal, and fully integrated into Visual Studio. It’s what it should be.

And, The Project is Going Open Source!

That’s right, even in it’s half-baked bits right now, I’m pushing it up to Git.  Amir has promised that the code will not be used to judge me so I’m trusting that he’ll hold true to that. There are no tests, the view models are inconsistent, I’m not making full use of the JSON tools and my templates are crafted quite differently from one view to the next.  Simply put: This code will not appear in it’s current form on my resume .

And For You, the Reader

Well, surf over here and try it out! I would love feedback on what conference attendees would like to see in an app.

Equip yourself with the dev tools from MSDN.

Familiarize yourself with JSON.  Grab a copy of JSON.NET.

And start building apps!

I recently implemented the AdControl in the trial version of an app I’ve got in the marketplace. It is remarkable how easy they’ve made it to add ads to your app, with the Microsoft Advertising ASK baked right into the Windows Phone 7.1 SDK.

Unfortunately, I couldn’t get the app displaying ads. I assumed there was something wrong with the way that I was implementing it, sent a couple emails out and went about finishing the other features I was working on. The error I was getting was:

A first chance exception of type ‘Microsoft.Advertising.Mobile.Shared.AdException’ occurred in Microsoft.Advertising.Mobile.dll

No detail, wrapping the control code I was using to add the control to the page with a try block produced no results, so I moved on.  Unfortunately, as the ad was not appearing, I forgot that I had stubbed it in and published the update to the marketplace.  Oops.

When I saw the update appear in the Marketplace, I installed the app and…there were the ads.  In the paid version.  Oops.

Check Your Manifest at the Door

Wait a minute! Everything I’ve read says that if you can’t see ads in the debugger that the ads won’t show up on the live app. So what gives?

In looking for help on the error, I hit the SDK documentation where I stumbled on the control’s events.aspx), where I found the ErrorOccurred event.  This little beauty solved all my problems.  Subscribing to this event – as easy as yourAdControl.ErrorOccurred += [tab] [tab] – and checking the properties on the exception provided the details on my problem: I was missing the ID_CAP_IDENTITY_USER declaration in my application manifest.

So Why Did It Work on the Live App?

Ah, right…when you submit your app to the Marketplace, Microsoft kindly builds your manifest for you with all the correct capabilities.  If you have extras, they take them out. If you don’t have the ones you need, they inject them.

So, when you accidently publish your app with the AdControl in it, but you’re missing the capabilities from your manifest, fear not! The App Hub publishing process will take care of everything. 

Just try to remember to avoid pushing out your app with ads in the paid version.

Going Forward

So, here’s some things you should do when using the AdControl:

• Familiarize yourself with SDK if you’re wondering about monetizing your app.  It’s super simple.
• Make sure you’re properly registered with Pub Center and follow the instructions they give.  It’s straightforward.
• Add an event handler to the AdControl.ErrorOccured event. If you run into any issues with the control, it’ll set you straight.

 

Good luck!

I’m coding an ASP.NET MVC 3 web site in Visual Studio 2010.  I added a service reference to a SOAP 1.2 version of a web service and started updating my code (I was using a SOAP 1.1 endpoint previously).

Unfortunately the switchover wasn’t as clean as I had hoped. The first method I changed resulted in an error, even on a call that appeared identical to the previous version. The error message I received was:

The CustomBinding on the ServiceEndpoint with contract ‘SubscriberServices’ lacks a TransportBindingElement.  Every binding must have at least one binding element that derives from TransportBindingElement.

…which looked like this:

For the quick fix, head to the end of this article.  Keep reading if you want to know what’s going on.

What Was Going On?

The two things that gave me the strongest clues where “CustomBinding” and “TransportBindingElement”, but for different reasons.  CustomBinding was a little unexpected as the service was added via HTTP. I guess I always assumed that it would be using an HTTP binding? The other piece suggested a derivative of the TransportBindingElement, which according to MSDN is an abstract base class.

Off to Our Config File

Actually, at this point, I wanted less noise, so I quickly created a console app and added references to both services.  The differences were, at this point, fairly obvious. The 1.1 version of the service was using a basicHttpBinding element (which I was expecting), whereas the 1.2 service was using a custom binding:

So, what we’re looking at is trying to get the custom binding to know which transport we want to use. This is something that is implicit in the basicHttpBinding but needs to be explicitly set for customBindings.

The Fix

Following the links on the TransportBindingElement will lead us to the httpTransportbindingElement, which has both code and config file samples.  Adding a short and simple section to the binding did the trick; all I needed was an httpTransport element in the customBinding\binding element. The updated config section looked like this with the MSDN sample config injected:

Further reading shows that all the properties set in the MSDN example are actually all defaults, which means that our httpTransport element can simply be reduced to a single, self-closing tag:

Great!

Quick Recap

So, in short, if you’re using a SOAP 1.2 service reference, or any service reference that requires the use of a custom binding, make sure you’ve added a TransportBindingElement (such as httpTransport) to your config file or in your code.

Caution: I don’t recommend trying this in a production environment. The branch of jQuery UI I’m using in this series is not considered stable and is not meant for prod releases.  You can, however, learn about the new features in the UI library and stretch your development capabilities!

The New and Juicy Bits

jQuery UI continues to impress. The development team’s commitment to extensibility means that their own widgets are up for review at each release, and even at each milestone of a release.  The great thing about the modularity in jQuery UI is that you can build your own widgets or customize the existing ones with the very parts used to build the core set in the first place.

But, before you even have to venture in that direction, you already have the ability to work with the many themes (or roll your own!) to make it look and feel the way you want to.

Focusing on stability and flexibility in the 1.9 build, here are some of the important bits that will be surfacing in this release of jQuery UI:

• Improved, tested code in many of the existing widgets
• Much better accessibility accross the suite (for disabled users/browsers)
• Revisited the API design on a number of widgets (Button, Dialog, Position, ProgressBar, Slider, Tabs)
• Improved collision detection on Position and added a new flipfit mode
• A new version of Theme Roller, the download builder and the web site
• New widgets: Tooltip, Spinner, Menu and Menubar

 

Here’s the descriptions of the new Widgets from the horse’s mouth:

• Tooltip: A tooltip is a small overlay that sits over the main page that can be used to provide content or functionality that does not need to be always visible.
• Spinner: A spinner (stepper) is a simple widget that allows users to increment or decrement the current text box value without having to input it manually.
• Menu: Menu transform a list of anchors into a widget with mouse and keyboard support for selecting an item.
• Menubar: A horizontal menu with nested vertical flyout menus for each menu item.

 

Getting jQuery UI 1.9

While I’m a huge fan of the integrated package manager in VS2010, you’re not going to find these bits on Nuget.  You’re going to either need to follow the links from the Milestone 6 post or grab the bits directly from googlecode.com.

Once you grab the zip, unpack it and have a look at the contents.

Pretty much everything we’re going to need will be in the UI and Themes directories.  If you’re not familiar with jQuery UI, the Themes directory is where all the CSS is stored for making the entire UI has a consistant look-and-feel.  UI is where all the code exists for all components.

You have the choice of building up your own set of functionality for the widgets you’re using by including the smaller UI libraries, or you can fire up the full kit with one library.  This allows the bandwidth-concerned developer the opportunity to choose lighter weight code files (or even compile only the needed scripts into a minified script of their own creation).

As an example, if you wanted to make use of the new spinner, you’d need to include:

• jquery.ui.core.js
• jquery.ui.widget.js
• jquery.ui.button.js
• jquery.ui.spinner.js

Of course, you would also need to include the relevant CSS files, but with a total weight of 7Kb (and the option to use multiple CDNs out on the web) you might as well just include the full jQuery-ui.css.

Using jQuery UI 1.9 in ASP.NET MVC

I’m going to assume you’ve done a little MVC work before, if not, hold tight for the walkthrough after the bullet list. I’m using version 3 of the MVC Framework in Visual Studio 2010 SP1.

Here’s the steps:

1. Create a new MVC 3 project using the “Empty” template
2. Delete the “themes” folder in Content
3. Update jQuery with NuGet
4. Add jQuery UI 1.9 files to the project (“themes” go in Content and “UI” go in Scripts)
5. Add a HomeController
6. Add an Index view for HomeController
7. Modify the _Layout.cshtml file (your master page) to include jQuery UI and the theme CSS

 

Walking Through the Setup

Here’s the visual play-by-play of that in action.

Creating and Cleaning up the Project

Open up Visual Studio 2010 and select File –> New Project.  Create a new ASP.NET MVC 3 Application.

Name the project and click OK.  Finally, select the “Empty” template from the list and click okay.

Navigate to the content folder at the root of the project and delete it.

Updating jQuery

Next, we need to get the latest version of jQuery so that jQuery UI 1.9 is happy with us.  Go to the Package Manager Console and type:

Update-Package jQuery

…and you’ll see the following:

NuGet (the heart of this console) happily goes off and updates all our dependencies for us.

Adding jQuery UI 1.9

Pop over to that zip folder you downloaded. You’ll need to make sure you’ve extracted all the files. Copy the themes directory, then switch over to VS2010 and paste it into the content folder.  Do the same with UI, but paste it as a sub folder into Scripts.

Adding the Controller and View

We’re going to use the tooling in MVC 3 to do the next bit of work for us, in particular, the code generation that creates controllers and views for us.  Right-click on the Controller folder, then select Add –> Controller.  Call it HomeController when the dialog prompts you (this is so that we can take advantage of the default routing rules in MVC).

Your HomeController class is automatically generated with the Index action created for you.  Right click on the name of this action and select Add View. Accept the default name (it picks Index for you because that’s the action you right-clicked).

Updating the Layout

Almost there!  All that’s left to do is to adjust our Layout.  The _Layout.cshtml file is like a MasterPage from our days of WebForms and we use it to inject our head element containing the script and CSS references.

There’s already a jQuery reference there, so that needs to be update to the correct version (1.6.4 as at the time of this writing).  You’ll need to add the jquery-ui.css and jquery-ui.js files as well.

For you copy-and-pasters out there:

    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />     <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>     <script src="@Url.Content("~/Scripts/ui/jquery-ui.js")" type="text/javascript"></script>

And that’s it! You’re all set up to use jQuery UI 1.9.

A Convenience Disclaimer

Things are a little drawn out right now because we can’t grab the preview bits on NuGet.

Keep in mind that once the updated library is released, you will simply be able to update jQuery UI through the package manager console in Visual Studio 2010. This, in turn, will resolve and update all other dependancies and will also incorporate the vsdoc files needed for IntelliSense.

Right now we really only have the guts in place to make jQuery UI tick, but it’s always good to stay on top of your game.  Get your hands dirty now!

1) Download the jQuery UI 1.9 development branch (Milestone 6 post)

2) Create an ASP.NET MVC 3 project

3) Get jQuery UI 1.9 in your project and start exploring

4) Try jQuery UI 1.9 in a copy of one of your current project and see if anything breaks

Next Up: Using the Spinner with Entity Metadata

Now that you’ve got the library in your project, we’re going to have look at some of the controls in more detail. One of the great things in MVC is the insanely simple  rendering of templates and data binding, especially when coupled with something like Entity Framework.

Hold on to your hats, in the next segment we’re going to use data annotation attributes to wire up a jQuery UI Spinner widget.

If you want to run Windows 8 in a virtual machine or boot from a VHD there are already instructions out there for that.  What about dual-booting on an existing machine?  Yeah. That’s why you’re here.

I have a good sized HDD and lots of free space on my lap top.  I wanted to run Windows 8 on the metal but didn’t want to format (and lose my perfectly good Win7 config) or swap HDDs every time I wanted to switch OSes.  I also wanted to try out the Windows 8 graphical boot loader, so here’s what I came up with.

The Process

Here’s what you need:

1. Download Windows 8 from http://dev.windows.com
2. Either burn the ISO or create a bootable USB (I like & used the USB option)
3. About 40Gb of free space on your drive
4. Maybe up to 2 hours of passive time (waiting on drive operations)

The steps are pretty simple:

1. Go to computer management and shrink your drive
2. Reboot your computer with the DVD/USB plugged in

And that’s it!

Here’s What It Looks Like

First we’re going to need to open up the Disk Management snap-in. It’s located in Computer Management under Storage.  You access it by right-clicking on Computer in the start menu and selecting Manage.

If your drive is older or you’re a little crunched for space, right-click your target drive and pull up the properties.  You can defrag your drive and possibly shuffle a little more room out of your disk.  Note this is completely optional because it looks like shrinking might try to do a lighter version of defrag when it runs.

Next, right-click the drive and select Shrink Volume.

Windows happily goes off and does it’s best to figure out what it can do for you.  Go get a coffee, especially if you have a bigger drive.

Once that is out of the way, give yourself the space you need for Windows 8.  There is a recommended minimum of 25Gb, but if you want to install the full version of Visual Studio 11 you’re going to need at least another 10Gb.  I used 40Gb and I’m finding that’s a good size to explore the OS and do a bit of development.

Click Shrink and away you go!  Prepare for another wait while it does the dirty work for you.  Plug your Windows 8 bootable USB/DVD in the drive and restart your computer, and select your new partition as the destination.

After the install, you’ll have dual-boot glory and Windows 8 running on the metal.

An Important Tip

If you’re using a USB drive to install (perhaps with DVD, didn’t try) you’re going to want to pull out the key when Windows 8 tries to reboot.  Otherwise, it’ll start the process over again. Save yourself 5 minutes of waiting to reboot and pull the USB stick out AFTER your screen goes black and preferably BEFORE your POST finishes.

What’s Next

1. Developers, dive in! It’s easy to create new apps using the included Visual Studio 11 Express, or if you have an MSDN subscription, you can grab the full preview of VS11.
2. Forget what you know about using Windows and just try to embrace Metro. Play with the apps that they’ve included.  Look at how those apps integrate with each other, and figure out where it’s appropriate for your app to expose Share or Search contracts.
3. Try to rethink an app or part of an app you’ve recently worked on and design it for Metro. It’s a different paradigm and we need to think about things that perhaps weren’t always in our domain as Windows developers (application activation & state, connectivity/network availability, and more importantly style).

 

Good luck with your dual boot!

I’m not sure I understand the position that many (including MS insiders) are taking, saying that Metro will not be for LoB applications.

I think we’re actually going to head into a different class of applications, where we redefine what LoB means.  I think we’ll see less and less of lists, grids and data dumps and move towards a place where we introduce context, history and action.

And I would argue that the Metro UI is the perfect place for this.

Let’s Rethink LoB

Here’s a screenshot from an LoB application I designed 2 years ago. The views were built in XAML. Please pay no mind to the cheesy rounded corners and glossy buttons, it was 2 years ago :).

This is the screen a helpdesk technician would see when they “take” a call from the queue.  It’s integrated into the VoIP system.  It’s already run some background tests (see: “No Internet Access”). It allows the tech a chance to gauge the customers’ mood (based on previous satisfaction surveys/time on hold/technical ability), confirm the contact details of the caller and then take some relevant action.  If you take a look at it, there is quite a bit of data packed in, but it’s all in context. It’s by no means a Metro style but it doesn’t look anything like a typical LoB app either and the user experience is quite different.

They didn’t start with a search, the data was ready based on context.

They didn’t start with a list of tickets and survey results, the information was visualized.

They didn’t surf through the “chrome” of application menus, relevant actions were presented.

There is no reason that an app running in Metro can’t be connected, integrated and contextual - in fact I think this will be the trend - and it’s not a far leap from the above to something that fits that style.

Do Our Part: Cut Out the Uglies

These kinds of concepts should be more prevalent in LoB applications, IMO.  I’m not sure why they’re not.  I’ve previously argued that we’ve trained users to expect ugly software (grids, lists, buttons, menus), which in turn has cultivated analysts and designers who ask developers to make more of the same.

The thing that excites me about Metro is the opportunity we have to reinvent the whole thing, maybe even take some risks.

So, why can’t we change our perception of what an LoB application can be, and why can’t we develop them in Metro?

Necessity is the mother of innovation, so let’s put ourselves in need.  The next time you go to draft a UI up, throw out the grid, throw out text-only lists and try to think about what user is doing when they will be looking at that screen. Craft your actions as something that happens in context to what the user will do.  These are the kinds of excercises that will help us bend our minds around designing for Metro.

And, maybe, if we act like we don’t have the old tools, we’ll be forced to create something that changes the game.