Released: Project Silk Client-Side Web Development for Modern Browsers

The Microsoft patterns & practices team is excited to announce the release of Project Silk.

Project Silk

Client-Side Web Development for Modern Browsers

Project Silk provides guidance for building maintainable cross-browser web applications that are characterized by an intentional design, rich interactivity, and a responsive user interface (UI). The result is an immersive and engaging user experience (UX). Such applications take advantage of the latest web standards, including HTML5, CSS3, and ECMAScript version 5, and modern web technologies such as jQuery and ASP.NET MVC 3.

The concepts explained in this book are demonstrated via a real-world customer-facing web application called the Mileage Stats Reference Implementation (Mileage Stats). Mileage Stats allows users to track and compare their vehicles’ fuel efficiency, usage, and operating costs, and to schedule vehicle maintenance reminders. The image below shows the Mileage Stats client-side objects and their implementation mapped to libraries or frameworks.

Building a rich web application that reduces the number of full-page loads, includes animations, and is responsible for updating the UI dynamically requires a thoughtful approach to managing structure, modularity, communication, navigation, and data. The book details how the Project Silk team designed Mileage Stats and solved a number of challenges.

Links

• Project Silk download
• Project Silk Home Page on MSDN
• Project Silk Community on CodePlex
• Project Silk Road Map
• Mileage Stats Video

Audience

• This guidance is intended for web developers and assumes you have some hands-on experience with ASP.NET MVC, CSS, HTML, JavaScript, and jQuery.

In this Release

• Project Silk Mileage Stats Reference Implementation full source code
• Widget QuickStart documentation and source code
• Unit Test Hands on Labs (3)
• Project Silk: Client-Side Web Development for Modern Browsers online documentation
• Mileage Stats Video

About patterns & practices

The Microsoft patterns & practices team provides a wide range of guidance to help customers save time and reduce risk on their software development projects by incorporating proven patterns and practices.  This applied engineering guidance includes both production quality source code and in-depth documentation.

The guidance is designed to help software development teams:

• Make critical design and technology selection decisions by highlighting the appropriate solution architectures, technologies, and Microsoft products for common scenarios
• Understand the most important concepts needed for success by explaining the relevant patterns and prescribing the important practices
• Get started with a proven code base by providing thoroughly tested software and source code that embodies the recommendations

For more information: http://msdn.microsoft.com/practices

Have a great day,

Just a grain of sand on the worlds beaches.

Windows 8 Gives New Life to Older Hardware

Like most of you, I’ve been wonderfully surprised by the Microsoft BUILD conference this last week. The delivered software and presentations to help us get started with Windows 8 far exceeded any expectations I had.

To try and add anything to what has been clearly communicated would be foolish on my part.  Instead let me tell you about my “Lazarus” experience this week.

I’ve been eyeing the Asus EP121 for several weeks now. I got to play with one at the Bellevue Microsoft Store. This is one sweet unit.

Well, I have a dusty, HP tm2 TouchSmart Laptop/Tablet. It has a Core i3 1.2ghz, 4GB memory, integrated graphics card, slow 5400rpm drive. My thinking was, if I can pull a Lazarus on this computer for 6-12 months, I’ll save myself the $1,000 now and wait for the next generation hardware and with fast CPU, SSD, HD screen, etc.

I did use the HP tm2 for Window Phone 7 development and OneNote note taking.  It was kind of slow, especially compared to other modern hardware.

The slowness was not attributed to Windows 7, but rather to lame hardware. 

PC hardware manufacturers please start making decent hardware that competes with Apple’s hardware and PLEASE stop putting crapware on my new PC. All crapware should be a line item, opt-in.

I need to move off this topic before I go into a tirade.

On the good side, one of the keynotes at BUILD showed new hardware coming soon that looks like the MacBook Air, metal, thin, etc.  At last. Please offer good components in your units, I’ll pay for them.

So I replaced the first generation 5,400rpm hard drive with a 7,200 second generation SATA. Was getting just a little excited, breathing new life into my laptop.

Lazarus!

Following simple directions on Scott Hanselman’s blog, I loaded the Win8 Preview on a USB.

When I booted the laptop I change the default boot to the USB so I could install Windows.  When Windows restarts, don’t forget to change the default boot back to your hard drive.

Installation took 12 minutes; Windows, Visual Studio, demo applications, etc.  Core i3 and a decent disk, still respectable.

The laptop boots very quickly, applications are responsive and fun to use.  I have not installed Office yet, but will soon. For now, just learning to get around Windows 8 and how to write Metro XAML apps.

Scud Missile

After I logged in, I ran Windows Update and one of the items installed was the, “Microsoft IntelliPoint 8.2 Mouse Software for Windows – 64 bit” This update on my laptop caused the touch to quick working.  So I used Add Remove programs to uninstall it, rebooted and got touch working again.

Visual Studio XAML Designer Patch

You need to install a patch published by the Expression Team to correct a mouse issue with the designer.

https://connect.microsoft.com/VisualStudio/Downloads/DownloadDetails.aspx?DownloadID=38599

After downloading, don’t forget to “Unblock” the .zip file.  The instructions left this out.

You MUST follow the installation instructions, most important you must install the patch as an administrator.

The fun part will be trying to figure out how to open an Administrator Command Prompt. I could not figure out how to do this using the Metro interface.  So… I opened Windows Explorer in the Desktop, navigated to the \Windows\system32 folder, right-clicked on the cmd.exe file and selected, “Run as Administrator.” While you at it, go ahead and pin that Administrator Command Window to the TaskBar, problem solved.

Getting Around Windows 8

Since you probably won’t be writing code using your TouchScreen keyboard, you’ll want to get up to speed on Windows Shortcuts. The following blog post is being recommended by several on Twitter so I’ve included it here as well.

http://www.winrumors.com/windows-8-tips-and-tricks-for-mousekeyboard-users/

Before Your Frist Project

Before you dive into your first Metro project, take time and watch some of the BUILD videos. If you only watch one video, watch this one: http://channel9.msdn.com/events/BUILD/BUILD2011/BPS-1004. Jensen Harris clearly explains Metro and the thinking behind it. He is also one of the best presenters at BUILD and connects with the audience and viewers alike.

Video

The below video shows my HP tm2 after the Lazarus operation.  Short, 3 minutes gives you a good feel for how a Core i3 runs Windows 8.

http://www.vimeo.com/29222402

Close

These are good times for Windows developers.

For me, I’m finishing up my WPF/Prism BBQ Shack program and will move the cash register and online purchasing modules to Metro.  Metro is perfect for a touch screen cash register.  This will be so much fun to write.

Have a great day,

Just a grain of sand on the worlds beaches.

Seattle GiveCamp Oct 21-23 2011 in Redmond

Give camps are a great way for developers, designers, and database administrators to give back to non-profit organizations, and to have a very fun weekend too!

All the details and sign up for the Redmond GiveCamp can be read here:  http://seattlegivecamp.com/

What I like about weekend events like this is the challenge:

• Working with a team you may have never met
• Writing an application you have zero up front context on
• Delivering over the weekend an application that will be deployed and used the next week

For this event, I’ll be joining a group of of Microsoft LightSwitch team members to take up the challenge of delivering an application using LightSwitch over the weekend.

This is a great opportunity for you to meet others, exercise your skills on a team, learn from other team members and have fun at the same time.

If you find yourself in Redmond in October, we hope to see you there.

Don’t forget you need to sign up here: http://seattlegivecamp.com/

Have a great day,

Just a grain of sand on the worlds beaches.

Simplifying Prism WPF Navigation – Synchronous Navigation Confirmation

Microsoft patterns & practices Prism 4 library and guidance gives WPF and Silverlight developers a very solid foundation for creating business applications. Adopting Prism patterns and library features guides the developer towards creating applications that: can evolve over time, are not tightly coupled, can be independently developed across a large team, are Blendable, and testable.

New to Prism 4 was the Navigation API’s. The use of the Navigation API’s greatly simplifies application development because the Navigation API takes over the responsibility of object creation and siting objects in the target region.

The Prism library is designed to support applications that can target WPF and Silverlight with good code reuse. While not all developers need this capability, a lot of thought and design decisions were made to fully support this scenario.

One API that took this capability into account while being designed is the Navigation API; specifically the confirmation of a navigation request. Objects that implement IConfirmNavigationRequest have the option to veto a navigation request. In order to support the limitation that Silverlight does not allow blocking dialog boxes, the IConfirmNavigationRequest.ConfirmNavigationRequest method had to be written so that Silverlight objects could participate in vetoing a navigation request without a blocking dialog.

Without going into all the details (you can read them here), objects that implement IConfirmNavigationRequest are required to invoke the callback in the ConfirmNavigationRequest method arguments. Objects are free to implement any vetoing code they want as long as the callback is invoked.  In practice the navigation request is halted until the callback is invoked. This design enables Silverlight developers to implement a variety UI solutions for prompting the user, for example the Prism Interaction Request.

I’ve found that I’m my WPF development that I had to jump through the above hoops just to have navigation confirmation, when in fact WPF has out of the box support for modal, UI blocking dialogs. In an effort to simplify my WPF applications I’ve created a replacement for the Prism RegionNavigationService that allows for synchronous navigation confirmation.

The implementation is very straightforward and only requires that you add one class and one interface to the Prism library and recompile it.

The RegionNavigationSynchronousService is the replacement for the stock RegionNavigationService. This class uses the new synchronous (blocking) navigation confirmation interface IConfirmNavigationRequestSynchronous, listed below.

public interface IConfirmNavigationRequestSynchronous : INavigationAware
{
    /// <summary>
    /// Determines whether this instance approves being navigated away from.
    /// </summary>
    /// <param name="navigationContext">The navigation context.</param>
    Boolean ConfirmNavigationRequestSynchronous(NavigationContext navigationContext);
}

By default, Prism automatically registers the RegionNavigationService in the container as part of the bootstrapping pipeline. However, we want to use the WPF friendly synchronous confirmation service, RegionNavigationSynchronousService.

All that is required is to override the ConfigureContainer method in your bootstrapper and register RegionNavigationSynchronousService as I’ve done below.

namespace TestBench {
    using System.Windows;
    using Microsoft.Practices.Prism.Modularity;
    using Microsoft.Practices.Prism.Regions;
    using Microsoft.Practices.Prism.UnityExtensions;
    using Microsoft.Practices.Unity;
    using TestBench.Customers;

    class Bootstrapper : UnityBootstrapper {
        protected override IModuleCatalog CreateModuleCatalog() {
            var catalog = new ModuleCatalog();
            catalog.AddModule(typeof (CustomersModule));
            return catalog;
        }

        protected override DependencyObject CreateShell() {
            var shell = this.Container.Resolve<ShellView>();
            Application.Current.MainWindow = shell;
            Application.Current.MainWindow.Show();
            return shell;
        }

        protected override void ConfigureContainer() {
            base.ConfigureContainer();

            // register the new navigation service that uses synchronous navigation 
            // confirmation instead of the async confirmation.
            this.Container.RegisterType(typeof(IRegionNavigationService), 
                typeof(RegionNavigationSynchronousService));
        }
    }
}

Below is a very simple implementation.

PLEASE do not put MessageBox code in your view models!  This is for demo purposes only and to keep the code simple.  Please use a dialog service that abstracts the UI dialog away from the view model.

The below code is from the included download and is in the CustomerMaintenanceViewModel. The below ConfirmNavigation property allows the demo to confirm or not but is not part of the Navigation API. This method returns true or false to continue the navigation request or not.

public Boolean ConfirmNavigationRequestSynchronous(NavigationContext navigationContext) {
    if (this.ConfirmNavigation) {
        if (MessageBox.Show("Close form and navigate?", "Confirm Navigation", 
            MessageBoxButton.OKCancel, MessageBoxImage.Question) == MessageBoxResult.OK) {
            return true;
        }
        return false;
    }
    return true;
}

Demo Application

Very simple Prism application that demonstrates confirming navigation requests and region lifetime. The status bar indicates the views in the ContentRegion on the right.  As you open or close views their name will be displayed; for the Customers, the customer number will be displayed.

Crack the code open, you’ll have this down in a few minutes.

Download

As always, don’t forget to “Unblock” the zip file after downloading from the Internet before you unzip it.

Synchronous Prism Navigation (177KB)

The download includes a sample Prism solution that your can run without modifying your Prism library code.  I’ve included a \Lib folder in the solution with pre-built, modified Prism library code.

I’ve also included two files in the \PrismSource folder that you can add to your Prism library. Simply copy these two files into the below folder and recompile Prism. You now have the option to use a simpler navigation confirmation API in your WPF projects. 

This only works in WPF and NOT Silverlight.  If you have the requirement to share code between WPF and Silverlight this will not work because Silverlight requires the navigation confirmation to be async.

Have a great day,

Just a grain of sand on the worlds beaches.

Windows Phone 7 – Seattle Silverlight User Group Meeting Code

On 8/3/2011 I did a presentation for the Seattle Silverlight Users Group called, “A Slice of Mango – Data Forms.”

This presentation was on data forms for Windows Phone 7.

The MangoForms demo application consists of a series of forms that each focus on a single aspect of a form such as, scrollability, type mismatch exceptions, validation, ICommands, IDataErrorInfo, sample data, design-time tooling, MVVM, etc.

I’ll try and publish a few videos that capture the teaching presented at the meeting.

Download

You can download the code and deck from my Sky Drive here.

Note:  The deck is in the folder SiliconValleyCodeCamp and is for the Application Life Cycle training.  There is no deck for this presentation, just code.

Have a great day,

Just a grain of sand on the worlds beaches.

Project Silk Drop 13

The patterns & practices Web Guidance team released Drop 13 of Project Silk (7-13-2011). The code changes for this release were minor.

Video

If you have not seen the Project Silk video check it out here.

Chapters

The following chapters are ready for review:

• Design and Layout (new)
• Modularity (early draft)
• Communication (early draft)
• Navigation (early draft)
• Server-Side Implementation (updated)
• Introduction (updated)
• Architecture
• Client Data Management and Caching
• jQuery UI Widgets
• Application Notifications
• Security
• Unit Testing Web Applications
• Widget QuickStart
• How to: Check UIElement Properties with Coded UI Test
• How to: Create Automation Negative case with Coded UI Test
• How to: Create Web Client UI Test using Coded UI Test

The following chapters are currently being written or will be started soon:

• HTML Templates

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Just a grain of sand on the worlds beaches.

Boise Prism, Unity, WPF, MVVM Code and Decks

Everyone had a great time in Boise this week with developers from the United Kingdom and all over the United States.  WPF is alive and well and being used in corporate development along with Prism!

Contents

C# early version of Ocean.

• Data Binding
• M-V-VM
• Commands in M-V-VM
• Dialogs in M-V-VM
• Data Validation
• M-V-VM Tips & Tricks
• Unit Testing & Moq
• Introduction to Prism
• Unity and Dependency Injection
• Shell and Bootstrapping
• Modules
• Regions
• Events
• Navigation

Download

The download includes PowerPoint decks for most of the sessions and source for all sessions.  Also included is an  Extras folder with goodies.

Please READ THE READ ME.

You can download the code and decks from my Sky Drive here.

Have a great day,

Just a grain of sand on the worlds beaches.