Mike Ormond's Blog

ASP.NET 4.0 - and semantic markup

MikeOrmond — Fri, 13 Nov 2009 18:04:52 GMT

By default, the menu control in ASP.NET 4.0 now renders tableless markup. Here’s the default ASP.NET Web Forms template (see my previous post) which uses an <asp:Menu> control for navigation.

Below you should be able to see it highlighted on the page (outlined in blue) and the corresponding markup in the IE8 Developer Tools window. You can see the <asp:Menu> renders as a <div> containing a <ul> of menu items rendered as <li> elements. This gives you scope to style it any way you choose.

(of course it is still possible to reinstate the old <asp:Menu> behaviour for backward compatibility).

Technorati Tags: asp.net,4.0,menu,semantic,tableless,css

ASP.NET 4.0 - New Project Templates

MikeOrmond — Fri, 13 Nov 2009 17:07:57 GMT

There’s been a few changes to the project templates in ASP.NET 4.0 to make things cleaner and simpler. I really like them. First off is the streamlining of web.config by moving boilerplate configuration to machine.config. Applications simply inherit these settings.

Apart from anything else (like being able to find that elusive entry in your web.config file) this also reduces the dependence on Visual Studio to create new web projects (or finding an “old” web.config to copy").

If you create an Empty Web Site in VS2010 Beta 2, this is what your web.config file looks like:

The standard ASP.NET Web Site template has also been changed to add basic layout, styles and functionality such as membership. The ASP.NET Web Forms template takes its lead from the ASP.NET MVC template here.

This is the default content for an ASP.NET Web Forms site in VS2010 – note the Account folder (membership pages), Scripts folder (jquery scripts), Styles folder (stylesheet), site master and global.asax.

This is what the “vanilla” app looks like running.

And if you click on the Log In link in the top right hand corner.

According to the documentation the default site should be a two-column layout but in Beta 2 I don’t think it’s quite there. The stylesheet looks to be still in a state of flux. Anyway, the design is fully XHTML 1.0 strict compliant markup giving you a solid foundation for customising to your desired design.

Download VS2010 Beta 2 / .NET 4.0 (including ASP.NET 4.0 and ASP.NET MVC 2)

Check out the ASP.NET 4.0 and VS2010 Beta 2 Web Development whitepaper

Technorati Tags: asp.net,project,template,4.0,css,xhtml

ASP.NET 4.0 Beta 2 – What’s New?

MikeOrmond — Wed, 11 Nov 2009 18:21:30 GMT

A bit behind the times here but in my defence I’ve been up to my ears in nappies and things :). I’ve just been having a read of the ASP.NET 4 and Visual Studio 2010 Web Development Beta 2 Overview whitepaper and spotted a few things which I don’t think were there in Beta 1 (I’m sure this list isn’t exhaustive but let’s have a stab at it anyway):

Expanding the range of allowable URLs

Alter the max path / query string length
Specify invalid characters used for the valid URL character check

Request validation logic is customisable
You can customise HTML, URL and HTTP Header encoding
Perf monitoring for individual apps in a single worker process
JSONP support in ASP.NET AJAX allowing you to access services in a different domain
<asp:chart /> control
HTML encoded expressions (automatic HTML encoding of markup expressions)
New project templates include basic styling and membership functionality
Controls render XHTML 1.0 Strict markup by default
For controls such as FormView, Login, ChangePassword etc the outer table element they render can be suppressed
CheckBoxList / RadioButtonList can render as <ul> / <ol>
<asp:menu> renders as <ul>, keyboard navigation improved, gets ARIA roles / attributes
More control over HTML generated by Wizard / CreateUserWizard controls

And of course all the other good stuff is still there.

Also check out the breaking changes document. I spotted a minor discrepancy wrt to ClientIDMode between the overview and breaking changes documents. The overview states that controls will default to AutoID whereas the breaking changes doc states that the default setting is Predictable. I did a quick test and it looks to me that the breaking changes document is correct. ie Predictable is the new default.

Technorati Tags: asp.net,asp.net 4.0,.net 4.0

Beta 2 of Visual Studio 2010 / .NET Fx 4 Available Today for MSDN Subscribers

MikeOrmond — Mon, 19 Oct 2009 16:01:00 GMT

General availability is 21st October. Visit the Visual Studio 2010 / .NET Fx 4 Beta site for more information, downloads, forums and to submit feedback.

There have been significant changes to the SKU line-up / packaging and licensing to simplify the SKU structure and provide better value for money.

You’ll also notice that MSDN website has undergone a redesign and MSDN subscribers will also see new benefits such as Azure compute hours, Team Foundation Server and e-learning options.

Update: Link to Soma's blogpost announcing Visual Studio 2010 / .NET Fx 4.

The official launch date for VS2010 / .NET Fx 4 has also been announced – 22nd March 2010.

Time to start that download (if you’re an MSDN subscriber, otherwise you’ll have to wait, sorry).

Technorati Tags: visual studio 2010,.net framework 4,msdn

Windows Azure Migration from USA-Northwest

MikeOrmond — Wed, 14 Oct 2009 10:40:01 GMT

If you’re on the Azure CTP (and specifically one of the early participants, eg a PDC attendee) then there’s a good chance you’ll have received an email like this one:

I do have a couple of problems with this mail. i think it could be a bit clearer in some respects and it gives me no indication of how I might “Copy any data you wish to preserve”. As it happens I don’t have any data I want to keep but I do have an application up there I’d like to keep.

Heading to the portal I could find no way of “backing up” my application and I don’t have the original source (well I do but it’s been hacked about something chronic as I blogged about various aspects of it so I’d rather not have to piece it all back together).

I admit this is my fault but it didn’t stop me muttering under my breath (and to our local Windows Azure people) about the Windows Azure team causing me pain. Anyway, I decided to take them up on their offer of help so I replied to their mail….

Knock me down with a feather but the last thing I expected was this reply

Talk about a no-brainer. Windows Azure Team, I take back all I muttered about you :).

Windows Azure is Microsoft’s new cloud platform. Find out more.

Technorati Tags: azure,migration,windows

Search Engine Optimization in ASP.NET

MikeOrmond — Mon, 12 Oct 2009 14:22:42 GMT

A few days ago I posted about my adventures with the SEO Toolkit and some of its features for ensuring your site is as SEO friendly as possible. Today I noticed that K.Scott Allen has an article in the September issue of MSDN Magazine entitled "Search Engine Optimization with ASP.NET 4.0, Visual Studio 2010 and IIS7” (quite a mouthful but very SEO friendly). This covers a much broader set of SEO topics than just the toolkit itself and is definitely worth a read, especially if you’re new to SEO in ASP.NET.

And on another SEO-related note, Scott also has a post about enforcing lower-case URLs in ASP.NET MVC.

Technorati Tags: asp.net,seo,search,search engine optimization

Silverlight 3 Firestarter Event - Download the Videos

MikeOrmond — Mon, 12 Oct 2009 12:55:17 GMT

Via Mithun Dhar

Kickoff | Mithun Dhar & Mark Hindsbo | Download
Keynote | Scott Guthrie | Download
Silverlight Key Scenarios & Features | Tim Heuer | Download
Expression 3 Overview | Adam Kinney | Download
Sketch Flow | Janete Perez | Download
Toolkit & Controls | Marco Matos | Download
RIA Services | Brad Abrams | Download
XAML Power Toys | Karl Shifflett | Download
Q & A Panel | Download

The slides are also available on Mithun’s blog.

Technorati Tags: silverlight,firestarter,video

Boot Windows 7 from VHD without installing a native OS

MikeOrmond — Fri, 09 Oct 2009 19:29:58 GMT

I’d already started to install Windows 7 as a “host OS” on an old machine simply to be able to use boot from VHD to fire up an existing (VHD based) Windows 7 installation when I stopped myself with the thought “surely you don’t need to install a whole OS just to be able to use boot from VHD”.

I was right. And let me tell you it’s not often that happens.

There’s a bit of work involved – there’s a bit of command-line stuff in there to get the boot medium sorted out – but essentially it’s pretty straightforward.

You need a bootable Windows PE Media – for me, creating this was the fiddly bit
You need a “native boot” Windows 7 VHD file (I already had one but see below)
You need to follow some instructions

Step 1 - Create a bootable Windows PE CD / DVD

To create the bootable Windows PE Media you can follow the instructions here. I already had the Windows Automated Installation Kit (Windows AIK) from creating my earlier Windows 7 native-boot VHD. You can download the Windows® AIK for Windows® 7 from the Microsoft Download Center.

Using various tools from the AIK, the instructions help you create a bootable CD/DVD with the Windows Preinstallation Environment (WinPE) installed. This is a lightweight version of the OS that will allow you to set up the boot environment and configuration to boot from your VHD file.

Step 2 – Create a “native boot” Windows 7 VHD file (if necessary)

If you don’t have a native-boot VHD file, you can start at Step 1 in the Walkthrough: Deploy a Virtual Hard Disk for Native Boot. Steps 1 and 2 help you create the VHD - this requires a Windows 7 image (.wim) file. Alternatively, check out my previous posts here and here for other, simpler options. I had a SysPrep’d image created from the techniques outlined in the first of those links.

Step 3 – Deploy the VHD and enable for boot

Follow from Step 3 onwards in Walkthrough: Deploy a Virtual Hard Disk for Native Boot to prepare the target machine, deploy the VHD and enable for boot. This essentially consists of cleaning the target machine and partitioning the disk, copying the VHD (I copied mine from an external USB drive and was pleasantly surprised this was detected without issue) and using BCDboot to create the necessary configuration.

You’re done.

One nice option this gives me is to create multiple differencing disks based off the same parent and enable each of them for boot. Or perhaps have a single parent with a differencing disk for native boot and another for Virtual PC. In my case, it was just an easy way to boot an existing Windows 7 VHD on a different machine. And the reason I wanted to do that? I don’t have an external monitor at the moment but sometimes really need that capability. Running a 2nd machine is a temporary solution. All I have to do now is buy a monitor and I can retire it again…

Technorati Tags: windows 7,virtualisation,virtualization,vhd,boot

More on Boot from VHD - Disk2vhd

MikeOrmond — Thu, 08 Oct 2009 14:38:00 GMT

A little while ago I wrote about how impressed I was with boot from VHD in Windows 7 . This morning I was trying to convince Mike that using this technique with a base Windows 7 VHD and differencing disks would be a great way to get VS2010 Beta1 and Beta2 (when it arrives) installed on his machine.

He wanted to know if he could just create a VHD from his existing install ie snapshot his native Windows 7 installation to VHD. That had me foxed although we talked about whether or not Windows Backup might be a possibility.

Then, as if by magic, I came across Disk2vhd which does exactly that – “create virtual hard disks copies of the physical disks that are attached … Another potential use is to allow you to move a physical installation of Windows 7 to a “boot from VHD” configuration.” Bingo!

Direct download link is here.

Technorati Tags: vhd,windows 7,boot

Adventures with the SEO Toolkit

MikeOrmond — Wed, 07 Oct 2009 20:21:07 GMT

Well, TBH, things didn’t get off to the best of starts as my attempts to install the SEO Toolkit via the Web Platform Installer failed. I hunted around but couldn’t find it. Funny though that if you click the link on the SEO Toolkit page, Web PI fires up and offers you the option to install the SEO Toolkit. Either I’m plain stupid or there are certain applications that aren’t advertised via Web PI but can be installed by it.

Anyway, I digress, it’s also very easy to install from the Microsoft Download Center so that’s what I did. To give it its official title, the IIS Search Engine Optimization Toolkit is currently at v1.0 Beta 2. Its role in life is to help you improve your luck with search engines. In other words how to improve search relevance by making your site as search-engine friendly as possible.

The SEO Toolkit is an IIS7 extension so IIS7.x must be installed on your machine. That said you can use it to analyze both local and remote websites and these don’t have to be IIS. It includes a Site Analysis module, a Robots Exclusion module and a Sitemaps and Site Indexes module. The Toolkit will perform analysis, offer recommendations and assist you in making changes to your site.

The SEO Toolkit appears as a feature in IIS Manager

Open the SEO Toolkit and you’re presented with 3 options; analysis, sitemaps and robots exclusions

Analysis

For analysis, supply a URL and report name and the SEO Toolkit will head off and crawl the site, reporting back in a number of key areas such as SEO “violations”, content summary, performance issues (eg slow pages) and links (eg pages with most links, most linked pages etc). You can see the sorts of violations that get flagged below (I’ve run the tool against my default site which has very little content).

Here’s a report I ran partially (it can take a while to run an analysis on a big site) on microsoft.com which gives a much broader range of results as well as their associated priority

Sitemaps

The sitemaps and sitemaps index feature allows me to create and modify sitemaps and sitemap index files for my (local) site.

This generates a sitemap file thus

Robots.txt

Similarly for robots.txt I can add Disallow and Allow rules

Which results in the robots.txt file

All in all, extremely useful, particularly the site analysis features which flag up potential issues that may otherwise have gone unnoticed.

Check it out at the SEO Toolkit page on IIS.net. There are additional articles on using the SEO Toolkit linked at the bottom of that page as well as a dedicated forum.

Technorati Tags: seo,iis,optimisation,optimization,search

Web Application Toolkit for IE8

MikeOrmond — Wed, 30 Sep 2009 20:12:51 GMT

Some time back I did a video and some demos on how to create IE8 accelerators, search providers and web slices based around a traffic information site I called Trafficify (I know, it’s not pretty, it was never meant to be published but Ian wanted it up on the IE Add-On Gallery so up it went).

Since then, we’ve released the Web Application Toolkit for IE8 which makes it *even easier* (as if that were possible after my explanation) to create these things. In particular it includes some clever ASP.NET controls which do most of the hard work for you.

As you can see there are 3 Extenders (controls that you can attach to other controls to add new functionality), one each for search, accelerator and web slice. There’s also a “stand alone” control for web slices which just takes its content as the web slice content. And there’s the BrowserHelperControl which identifies the browser type and enables / disables IE8 specific functionality on the page as well a providing the capability add helpful messages for the user.

VisualSearchControlExtender

The VisualSearchExtenderControl extends a button or similar control that the user will use to install your search provider. As well as allowing you to easily specify search and suggestion URLs etc, the Toolkit also comes with handlers and templates to make it very straightforward to create a new search provider. The control is automatically hidden if the user already has the search provider installed.

The markup for my VisualSearchControlExtender for Trafficify looks like this:

<asp:Button ID="SearchButton" runat="server" Text="Button" />
<IE8:VisualSearchControlExtender ID="VisualSearchControlExtender1" runat="server" 
    TargetControlId="SearchButton"
    TargetControlText="Install Trafficify Seach Provider"
    OpenSearchDescriptionHandlerUrl="~/OpenSearchDescription.ashx"
    SearchUrlTemplate="~/Search.aspx?road={searchTerms}"
    SuggestionsUrlTemplate="~/SearchSuggestions.ashx?road={searchTerms}"
    SearchProviderTitle="Road Search" />

I have a standard ASP.NET Button with ID SearchButton that the user can use to install the search provider. OpenSearchDescription.ashx comes with the Toolkit and generates the OpenSearchDescription file based on the properties you set on the control. I have a search page (Search.aspx) and a suggestions handler (SearchSuggestions.ashx) that takes partial search terms and offers different alternatives. It’s possible (quite easy in fact) to add unique images to the suggestions but my application doesn’t lend itself well to that.

AcceleratorControlExtender

Similarly the AcceleratorControlExtender extends and installation control and makes it easy to build a new accelerator

The markup for my AcceleratorControlExtender for Trafficify looks like this:

<asp:Button ID="AcceleratorButton" runat="server" Text="Button" />
<IE8:AcceleratorControlExtender ID="AcceleratorControlExtender1" runat="server" 
    DiscoveryControlId="AcceleratorButton"
    DiscoveryControlText="Install Trafficify Accelerator" 
    InstallDescriptionFileUrl="~/traffic.xml" />

In this case I had an OpenServiceDescription file already (from my original implementation of Trafficify) so I just used that – these controls are happy with either a file URL or the handler + template approach.

WebSliceControl / WebSliceControlExtender

With web slices you have the choice to use the WebSliceControl (in which case you simply include the content you want to turn into a web slice as the content of the control itself) or the WebSliceControlExtender in which case you set the TargetControlId to the ID of the control you want to turn into a web slice. The control supports alternative update and display sources (ie it the refresh tigger and content don’t need to come from the original page).

The markup for my WebSliceControl for Trafficify looks like this:

<IE8:WebSliceControl ID="WebSliceControl1" runat="server" WebSliceTitle="Traffic Info">
    <uc1:TrafficSummary ID="TrafficSummary1" runat="server" />
</IE8:WebSliceControl>

I’ve incorporated all the content I want in my web slice as a user control which makes life nice and easy.

BrowserHelperControl

The BrowserHelperControl detects the type of browser and optionally displays a suitable message / hides IE8 specific controls on the page for non-IE8 browsers.

The markup for my BrowserHelperControl for Trafficify looks like this:

<IE8:BrowserHelperControl ID="BrowserHelperControl1" runat="server" 
    CheckSupportedScenarios="true" />

Quite simply I’m using it to hide the IE8 controls when appropriate with the CheckSupportedScenarios property.

Here’s the results – a slightly updated (but still very ugly) version of Trafficify.

Note the notification of the web slice and the buttons to install the accelerator / search provider.

The web slice provides me access to latest traffic information whatever web page I’m viewing.

The accelerator shows me a preview of traffic conditions at a particular location (whatever I’ve selected). Note that the button to install the accelerator is hidden as the accelerator is now installed.

The visual search includes search suggestions as I type in the search box.

Note that now the search provider is installed, its install button is also hidden.

I’d definitely encourage you to take a look at the Web Application Toolkit for IE8 as a great way to ramp-up on extending IE8.

Links

IE8 Homepage

Web Application Toolkits

Web Application Toolkit Videos

Technorati Tags: ie8,web slice,accelerator,search,search provider,visual search,asp.net,trafficify

Web Application Toolkits

MikeOrmond — Tue, 29 Sep 2009 19:09:09 GMT

Web Application Toolkits provide a packaged set of samples, documentation, templates, controls etc to get up and running quickly with a particular technology. When you just want a bit of help to build an IE8 Accelerator or want to add search to your site, the Web Application Toolkit provides comprehensive documentation as well as a running sample so you can understand exactly what’s going on.

Currently there are Web Application Toolkits for:

REST Services
Mobile Web Applications
Template-Driven Email
Making your Website Social
Bing Search
IE8
FAQs

I’ve been taking a look at the IE8 Toolkit – given my recent foray into accelerators, webslices and search providers – and found it makes life even easier. The ASP.NET control and extender samples wrap up the functionality very neatly and make it a doddle to extend IE8. I’ll take a look at updating my Trafficify app using the toolkit in a later post.

In the meantime, I recommend you checkout the Web Application Toolkits themselves and also the videos on Channel 9.

Technorati Tags: asp.net,toolkit,sample

dezineforce Proof of Concept Interview

MikeOrmond — Thu, 24 Sep 2009 14:38:00 GMT

Following on from my post yesterday about the dezineforce proof of concept, I spent a little more time with Peter Williams (dezineforce), Neil Kidd (Microsoft) and Josh Twist (Microsoft) quizzing them on various aspects of the project…

1. Tell me a little about dezineforce and the sorts of problems you’re trying to solve.

(PW) Dezineforce focuses on empowering design engineers to create better designs faster. To produce a good design engineers need to balance many different requirements; an engine must produce lots of power and yet be fuel efficient, it must be rugged and reliable yet lightweight and cost effective to manufacture. Dezineforce’s services enable engineers to systematically and efficiently explore different designs and understand the complex trade-offs that need to be made.

2. What’s been the typical approach to engineering design? How does dezineforce’s approach differ?

(PW) Typically an iterative and manually intensive process is used. A skilled engineer creates an initial design and schedules computer simulations to analyse its performance. The results of the analysis are then used by the engineer to modify the design and the new design simulated. This continues until the engineer is fully satisfied with the design or quite often until they run out of time or resources.

The dezineforce approach allows the engineer to provide a parameterised design and select from a number of workflows that will systematically simulate, analyse and adjust the design using advanced mathematical models in a process known as Design Search and Optimisation (DSO). This creates a body of knowledge that the engineer can use to make informed decisions.

3. You’ve just completed a proof of concept (PoC) exercise in the Microsoft Technology Centre. Tell us a little about that. What was the need for change? Where did you perceive that Microsoft could add value? What was the specific focus of the PoC?

(PW) In order to make decisions engineers need to quickly and effectively make sense of the large volumes of data that can be generated during an optimisation process. Our existing system made extensive use of AJAX to allow engineers to navigate and view this data, but we were reaching the practical limits of that technology. We thought it likely that Silverlight would enable us to take this to the next level and wanted to prove whether or not that was the case.

For the proof of concept we focused on a particular engineering problem, a filter, for which we already had all the output data. We looked at how we could use Silverlight to expose that data in a way that would enable the engineer to better explore and understand the design tradeoffs in order to better inform their decisions. We also looked at how Silverlight could be used to drive further analysis.

4. What were the most challenging aspects of the problem?

(NK) For me, the biggest challenge was understanding what the software was actually supposed to do! The dezineforce system is a very complex beast requiring a large amount of domain knowledge in engineering and mathematics. Trying to develop an intuitive user interface on an application you don’t fully understand is somewhat of a challenge. It sounds obvious, but making sure that the whole team understood the problem domain and the data we were going to be working with was my first priority. After this happens everyone becomes much more productive as they are able to take more responsibility for the bits of the application they are working on and make decisions independently.

5. Can you explain a little bit about the PoC process eg what precedes the PoC? What does the PoC look like? How big’s the team? Who’s in the team etc

(NK) An engagement in the MTC really consists of two things:

A two day Architectural Design Session where we spend time understanding the customers requirement, working out what technology is appropriate, identifying any risks in adopting that technology and scoping out what the proof points are for the prototype we are going to build.
A three week Proof of Concept. This is where we build the prototype we designed in the ADS. In between the ADS and the PoC we will have put together a team comprising of people from the customer, Microsoft and potentially from one or more Microsoft Partners. This ensures we have the technical skills in the room to do the work, but also ensures we have people from the customer to transfer any technical knowledge to. There is no point in handing over a prototype to the customer who has no experience with the technology or visibility of why design choices were mode – hence it is essential to have people from the customer working on the team.

In my mind one of the most important things here is to ensure that the Architect that ran the ADS also runs the PoC – taking responsibility for the delivery of the project is a great way to help ensure that you get the scope correct.

The size of the team depends on how big a problem we have bitten off, but we would typically look for 4-8 people. In the dezineforce PoC we had 3 developers from dezineforce, one Silverlight developer from a partner (DotNet Solutions) a Microsoft Application Development Consultant, 2 designers from a partner (Tricky Business) and the MTC Architect. This provided comprehensive converge of all the skills we needed from the design and creative side, client and server development and domain engineering knowledge.

6. What risks did you identify for the PoC?

(NK) Having worked on a number of Silverlight applications I was pretty sure the risks weren’t really from the technology side - I’ve seen enough Silverlight applications to have a great deal of confidence in the platform. The area I was most concerned with was ensuring that as we were going to have a lot of people working on a relatively small code base, we didn’t spend all our time tripping over one another. Ensuring that we picked the right architecture and tools to support this was pretty key to our success. In this case we chose to build the client using the Model-View View-Model (MVVM) pattern; this gave us a huge boost in productivity and really helped solve the problem of multiple people working on a small code base.

7. Which technologies did you identify as key to delivering a solution for dezineforce?

(NK) Silverlight 3 was due to be released during the PoC, so I decided that it should be stable enough for us to start work with and then migrate to the release version at launch. Silverlight 3 gave us a few new things that we couldn’t have done in version 2 (specifically with respect to data binding and writable bitmaps) and as such was worth the small risk.

The Visual Studio Tools for Silverlight 3 and Expression 3 were also stable enough so we adopted them.

Visual Studio 2008 is the obvious choice for the C# and services development. We created some WCF services talking to the SQL 2008 database and deployed it all on a Windows 2008 server.

8. You had a good mix of different skill sets in the project including a nice blend of developers and designers. Given the short timescales, how did you go about making this work from the off?

(NK) With the work that we do, the wire frames are the key. These consist of sketches of each screen in the application. They give us two main things;

· An understanding of these users navigation journey through the application

· Details of what data will be displayed on each screen.

We try to have the wire frames completed before the PoC starts – we print them on A3 sheets and stick them round the wall of the project room where everyone can see them. This allows us to get the customer to sign off the wire frames to ensure that we are about to build the right thing.

When the project starts the wire frames are the starting point, the designers can start working on the look and feel of each of the screen and the developers can be building the data model and view model to support the application. Having the wire frames ready before the PoC starts ensure that everyone can start work from day one.

Starting with the wire frames may not be suitable for every project (especially one with no UI ;-), but with short time scales they ensure that everyone in the team starts head in the same direction right from the start.

9. What is MVVM and what are its benefits?

(JT) MVVM stands for Model View ViewModel – it’s a presentation (UI) layer pattern that helps you separate the logic that controls your View from its visual layout. In this pattern we separate the code from the view (XAML and code-behind) and place it inside a new class, the ViewModel, that is a canonical representation of the presentation state of the application – a model of the view, if you will. MVVM is similar to the MVP (Model View Presenter) and MVC (Model View Controller) presentation layer patterns but aims to fully leverage WPF and Silverlight’s amazing data-binding capabilities.

10. What does it bring to a project such as this one?

(JT) Because the View and ViewModel are very loosely coupled, the ViewModel can easily be unit tested and the designer has total freedom to change how the application looks, constrained only by the basic conceptual UI exposed by the ViewModel. On this project this pattern actually created opportunities for enhancing the application – once we’d created the ViewModel, new and powerful ways of visualising the data became obvious that simply wouldn’t have transpired without this approach.

11. How does it help designers and developers work together?

(JT) This layer of abstraction provided by MVVM better supports the designer-developer workflow as designers can work on the View whilst a developer works on the ViewModel concurrently. To get started, the two roles simply have to agree on how they’ll model the view so that this contract can be agreed and implemented in the ViewModel.

12. What does it look like from a designer’s perspective?

(JT) Expression Blend 3 has a new Data tab that can help designers populate the ViewModel with sample data. Using this, a designer can see exactly how the UI will look when bound against an actual ViewModel but at design-time.

13. What about lookless controls as another enabler to the workflow?

(JT) Lookless controls are another great feature of WPF and Silverlight that give designers the freedom to change how standard controls look. For example, a designer can take a ListBox and change its appearance in any way they see fit. Again, these changes are abstracted from interactions with the controls in the view and designers are thus free to experiment and exercise total creative freedom over the look and feel of the application – without upsetting the developers on the project.

14. What types of controls did you use in the project?

(NK) We were able to make extensive use of the Silverlight toolkit; we saved a significant amount of dev time by being able to build on the controls that the toolkit provides. I was really impressed by how extensible the toolkits’ controls are. If you see a screenshot / view of the application, then you should be able to see a scatter chart, bar chart and line graph and composed into the Simulation panel – all of these controls are laid on to of one another, so it takes a moment to work out which is which. Other toolkit controls include the data grid (for the property panel) accordion and rating control.

Some of the controls were built from scratch the parallel axis chart and the range sliders were the biggest examples of custom controls.

The Image plot control is a ListBox with a custom layout panel – this uses all the functionality of the built in control and just provides its own Measure and Arrange functions.

The tile plot panel is a deep zoom control that uses a service to dynamically generate the image tiles.

We also use the Blacklight control library’s drag drop panel to have 4 resizable panels.

15. What were the decision points as to whether to re-skin, customise or build from scratch?

(NK) The preference always has to be in that order – prioritise the rout that has the least development effort. I’m not sure that there is a really a magic formula for this except you need to spend some time understanding what the control needs to do. Once you have your head round that you can compare it to the functionality offered you the existing controls. This is worth a investing a bit of time in as sometimes you find that what looked like a start from scratch control is just a re-skinning of one you already had. The best example of that would be our image plot control – this displays an image of a design at a specific X-Y coordinate based on values chosen by the user. We started of thinking that it would be a new control then quickly decided that we could use a ListBox and provide our own layout panel – far less effort. After we had written it, we realised that we could probably just have re-skinned the toolkit’s scatter chart – even less effort.

16. Did you build any rich controls from scratch?

(NK) Yes. The Parallel Axis chart was written from scratch.

17. Why was that necessary and how much effort did it take? Are you pleased with the results?

(NK) The parallel axis chart is a very domain specific data visualisation as such there really isn’t anything that we could have subverted to our needs. Initially we thought that we could have used a line chart, but digging more into the functionality of the PAC we realised that it is quite different from a line chart and we would be taking on a lot of risk in trying to bend the line chart to do this as it was never meant to.

18. Did anything unexpected come out of it?

(PW) I was pleasantly surprised by the amount of new ideas that the proof of concept sparked. It was a very creative environment in which everyone was inspired and able to contribute new ideas.

(NK) I was surprised by just how productive a team we were. The application we built is of higher quality than I would expect from a prototype. The main reasons for this were:

By getting the wire frames created before project started everyone was productive from day 1.

Picking the MVVM pattern for the client side architecture allowed us to perform the developer designer split very well – this is where devs and designers need to work on the same part of the application at the same time without overwriting each others changes. Having the logic and the UI in separate files, using TFS and making heavy use of data binding to our View Model ensure that things ran very smoothly.

19. Were there any other interesting technology aspects?

(PW) The Model-View-ViewModel (MVVM) pattern was a very interesting aspect of the proof of concept. Being able to learn and explore patterns for using the new technologies was as useful to us as finding out what the technologies themselves were capable of.

20. What was it like working with Microsoft and their partners?

(PW) The proof of concept team was first rate. The people that Microsoft and their partners provided were able to quickly understand our business needs and get their heads around our specific challenges. This meant the team was productive very quickly and able to make intelligent tradeoffs in what was a time boxed exercise.

21. What was the outcome? How did you demonstrate success (or otherwise)? How did your sponsors respond?

(PW) The output from the proof of concept was very well received by our internal stakeholders. It very quickly achieved the first goal of proving to ourselves that a heavy duty, data intensive, rich user experience could be built using Silverlight. With relatively little work we were then able to turn the output from the proof of concept into something we could demonstrate to our current customers in order to gain detailed feedback before investing the effort required to take it into full production. It helped us to clarify the way forward and provided a medium to stimulate customer feedback. It also inspired the entire team with what could be done.

Technorati Tags: dezineforce,silverlight,mvvm,mtc,poc,engineering,design,blacklight

A User Experience Overhaul with Silverlight and MVVM

MikeOrmond — Wed, 23 Sep 2009 18:01:00 GMT

I recently had the opportunity to spend some time in the Microsoft Technology Centre (MTC) with a company called dezineforce who offer a unique capability – a cloud-based engineering design service. Coming from an engineering background myself, I found both the problem domain and their application fascinating. It’s all about helping engineers build better components more quickly (where “better” might be stronger, lighter, less material, cheaper material etc)

dezineforce were in the MTC for a 2 day Architecture Design Session (ADS) followed by a 3 week Proof-Of-Concept (PoC) looking at how they could revolutionize their user experience. At the end of the PoC, I took the opportunity to chat to some of the people involved.

Of particular interest I think are Richard Harding talking about the problem domain, Neil Kidd talking about the ADS and PoC, Josh Twist talking MVVM and Althea de Souza’s genuine delight on seeing the results for the first time.

The following are the hyperlinks from the end of the video for convenience

I also have a more in-depth written interview with some of the people involved which I’ll publish shortly.

Technorati Tags: silverlight,hpc,mvvm,dezineforce,engineering,design

Microsoft AJAX CDN Launched

MikeOrmond — Mon, 21 Sep 2009 18:27:00 GMT

I’ve long thought we were missing a trick by not having a hosted service for the ASP.NET AJAX scripts and lo and behold ScottGu has announced a new content delivery network (CDN) for the ASP.NET AJAX and jQuery libraries. That means:

Edge cache servers close to the consumer and therefore faster
Scripts can be shared across multiple sites (as they share the same URI) so there’s more chance they’ll already be in the local browser cache and therefore *no* download required
You don’t pay for the bandwidth

So, for example, instead of:

<script src="http://mysite.com/scripts/MicrosoftAjax.js"
	type="text/javascript">
</script>

You would instead use something like (NB: only Preview 5 is available on the CDN right now):

<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjax.js"
	type="text/javascript">
</script>

Not only that but for ASP.NET 4.0, the ScriptManager control is aware of the CDN and can take advantage of it by simply setting the EnableCdn property to true.

Full details of the URLs / <script> tags to use as well as which libraries are available can be found here.

The service is free for both commercial and non-commercial use. As usual, Scott has a great write-up as well as a sample using some of the features from ASP.NET AJAX Preview 5.

Technorati Tags: asp.net,ajax,jquery,cdn