Marquee de Sells: Chris's insight outlet via OData 2.0 Marquee de Sells: Chris's insight outlet via ATOM 1.0 csells on twitter

You've reached the internet home of Chris Sells, who has a long history as a contributing member of the Windows developer community. He enjoys long walks on the beach and various computer technologies.




Bringing The Popular Tech Meetups to Portland

pdx-tech-meetup-logoI’ve been watching the Portland startup scene for years. However, in the last 12 months, it’s really started to take off, so when I had an opportunity to mentor at the recent Portland Startup Weekend, I was all over it. I got to do and see all kinds of wonderful things at PDXSW, but one of the best was meeting Thubten Comerford and Tyler Phillipi. Between the three of us, we’re bringing the very popular Tech Meetup conference format to Portland.

The idea of a Tech Meetup is meant to be focused on pure tech. In fact, at the largest of the Tech Meetups in New York (33,000 members strong!), they have a rule where it’s actually rude to ask about the business model. The Tech Meetups are tech for tech’s sake. If you’re in a company big or small or if you’re just playing, cool tech always has a place at the Portland Tech Meetup.

The format is simple and if you’re familiar with the way they do things in Boulder or Seattle, you’re already familiar with it. Starting on January 20th, 2014, every 3rd Monday at 6pm, we’ll open the doors for some networking time, providing free food and drink to grease the skids. At 7pm, we’ll start the tech presentation portion of the evening, which should be at least five tiny talks from tech presenters of all kinds. After the talks, we’ll wrap up around 8pm and then head to the local water hold for the debrief.

If this sounds interesting to you, sign up right now!

If you’d like to present, drop me a line!

If you’d like to sponsor, let Thubten know.

We’re very excited about bringing this successful event to Portland, so don’t be shy about jumping in; the water is fine…

0 comments




The Party Is Just Getting Started At Snapflow!

snapflow logoThis has been my first week at Snapflow and what a week it’s been! I’ve already spend a good part of two days with actual customers that are excited about using Snapflow to build their web and mobile applications, started on a technical spike for one of those apps to be delivered on our platform in February and found the local Hawaiian teriyaki place.

As Chief Technical Officer at Snapflow, I’ll have influence over internal technology direction and external outreach, help to build our suite of products as well as growing the engineering team and work to understand our customers and make sure that they’re happy.

Snapflow’s customers are enterprise verticals building web sites and mobile apps. They want to build apps with global reach and cloud scale, but they don’t want to manage VMs for their databases, custom logic and REST APIs. With Snapflow, they get to configure their data model, design their custom logic with workflow and the REST API falls naturally from that. Further, because Snapflow provides enterprise-grade services, customers get top notch tools, security at the granularity they need, multi-tenancy to deal with app variations across groups or geographies, and guaranteed uptime. Our customers can then build their client apps however we want, but so far it’s been overwhelmingly HTML-based, so you’ll soon see tools from us to support that even more.

Technology-wise, we’ve got an amazing mix of AWS-based cloud hosting, Mongo DB and .NET on the server-side with HTML5-based tools and apps using Angular, Bootstrap and Kendo UI on the client-side.

And we’re hiring! Snapflow has more work than we can do right now and we’d love your help. I had other choices when it came to my next adventure, but Snapflow is that rare combination of people, technology and opportunity that I just couldn’t pass up. It’s the hot enterprise startup in Portland. Come join the party!

0 comments




TypeScript Templates for Windows 8

imageAs soon as I saw Anders’ talk on TypeScript, I fell in love. If you’re not familiar with it, TypeScript adds a lot of necessary features to JavaScript to make it suitable for building real apps, while still “compiling down” to JavaScript to maintain JS’s single biggest advantage: ubiquity. Further, TypeScript has tooling inside Visual Studio so that it works nicely with a wide variety of Windows projects, including Win8/JS projects.

However, while Microsoft has made a nice Win8/TS sample available, there are currently no Visual Studio project templates for building my own apps. Luckily, it was easy enough to build some:

image

You’ll notice three new templates: TypeScript versions of Blank App, Fixed Layout App and Navigation App. All three projects generate code that acts the same, except the code is in TypeScript instead of JavaScript (although the JavaScript is generated and very visible to your inspection).

I didn’t build the Grid App or Split App templates yet, since there is a lot of code there. I also haven’t ported any of the item templates. Now that I have the Navigation App template done (which includes an empty Page Control), the Grid and Split and other item templates will all flow from there (eventually : ).

JavaScript Patterns to TypeScript Constructs

Moving JavaScript to TypeScript involves two major pieces: porting the code from JS patterns to TS language constructs and bringing in references to the types that are used.

The first step, moving from JS patterns to TS language constructs, largely involved modules, classes and functions. For example, the navigator.js file defines the PageControlNavigator class in the Application namespace using JS patterns:

// navigator.js
(function () {
  "use strict";

  var appView = Windows.UI.ViewManagement.ApplicationView;
  var nav = WinJS.Navigation;

  WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
          ...
          Application.navigator = this;
}, { home: "", /// <field domElement="true" /> _element: null, _lastNavigationPromise: WinJS.Promise.as(), _lastViewstate: 0, // This is the currently loaded Page object. pageControl: { get: function () { ... } }, ... } ) }); })();

The common pattern for a module that contains private and public parts is to use a self-executing anonymous function (which wraps all the code in navigator.js) to make everything private and then to use helpers to expose public parts explicitly (like the use of WinJS.Namespace.define). Further, to define a class is a matter of gathering up a constructor function with a set of member properties and functions, which is what the WinJS.Class.define helper does. Finally, right in the middle of that is the exposing of a namespace-wide property called Application.navigator, which makes it available to anyone using the Application namespace.

TypeScript provides actual language constructs for these patterns:

///<reference path='../declare/declare.ts' />
// navigator.ts
module Application {
    "use strict";

    var appView = Windows.UI.ViewManagement.ApplicationView;
    var nav = WinJS.Navigation;

    export var navigator: PageControlNavigator;

    interface PageControl {
        getAnimationElements: () => Element;
        updateLayout: (
            element: Element,
            viewState: Windows.UI.ViewManagement.ApplicationViewState,
            lastViewstate: Windows.UI.ViewManagement.ApplicationViewState) => void;
    }

    export class PageControlNavigator {
        home: string = "";
        _element: Element = null;
        _lastNavigationPromise: WinJS.Promise = WinJS.Promise.as();
        _lastViewstate: Windows.UI.ViewManagement.ApplicationViewState;

        constructor (element, options) {
            ...
        }

        // This is the currently loaded Page object.
        get pageControl(): PageControl { ... }

        // ...
    }
}

In this TypeScript code, you’ll see the module, export and class keywords that define the elements we were defining via patterns before. Further, the use of the interface keyword lets you define a contract for an argument or variable that the TypeScript compiler can check for you as it generates the corresponding JavaScript. Finally, notice the use of the type annotations after a colon, e.g. the PageControlNavigator type on the exported navigator variable, to give the TypeScript compiler more information. All of these constructs help you to be explicit about what you’re defining, which helps you track down errors and gives you better Intellisense as you code.

As I mentioned, TypeScript provides syntax on top of JavaScript, the idea being that all JavaScript code is already TypeScript code. Further, the TypeScript compiles produces JavaScript as it’s output. When you’re editing a TypeScript file in Visual Studio, you can see the corresponding JavaScript, which helps experienced JavaScript programmers bootstrap their way to TypeScript.

image

You’ll notice in this screenshot that TypeScript introduces shortcut syntax for function objects. For example, the following code from home.js:

WinJS.UI.Pages.define("/pages/home/home.html", {
  ready: function (element, options) {
    // TODO: Initialize the page here.
  }
});

can be written in TypeScript as follows:

WinJS.UI.Pages.define("/pages/home/home.html", {
  ready: (element, options) => {
    // TODO: Initialize the page here.
  },
});

The use of the TypeScript lambda syntax is both shorter and works better when it comes to your intuition of what the “this” keyword means.

The other thing to notice about most .ts files is one or more reference lines at the top that look like this:

///<reference path='../../declare/declare.ts' />

This is the TS way to do “include” or “import” of code from other TS files, instead of relying on an HTML container to pull in the right files.

TypeScript Declarations

A lot of the work porting the Win8/JS templates to TypeScript was replacing the use of JS patterns with TS constructs (which, ironically, generated back the same JS code I started with), but an equal amount of the work was in building TypeScript declaration files (*.d.ts files). The idea of a declaration file is that the JavaScript community has created a large number of libraries, none of which have associated TypeScript type information. TypeScript allows you to augment the type information for existing JavaScript libraries, e.g. jQuery, Knockout, WinJS, etc., with external files called declaration files.

The WinJS sample I mentioned earlier (Encyclopedia) provides a number of declaration files that provide type information for the HTML DOM, the WinRT object model, jQuery and for WinJS. Unfortunately, the one for WinJS is far from complete, which meant that a lot of the work I did to get the Win8/TS templates compiling without warnings was augmenting that file. All of the declarations files needed to make the templates compiled as generated are provided in the “declare” folder, but I’m sure there are holes that you’re going to run into as you add your own code. Of course, the authoritative winjs.d.ts file is part of the TypeScript distribution, so I’ll work with the nice folks on the TypeScript codeplex project to get my changes merged in.

Installing the Win8/TS Templates

To get started using the Win8/TS templates I’ve built, you’ll first need to install the TypeScript plug-in for Visual Studio 2012. Currently these templates have been tested under TS 0.8.1.1 only and the generated .jsproj files have this path hard-coded in. The web-based HTML Application with TypeScript template uses some trick to do away with hard-coded paths that I have yet to figure out.

You can download the Win8/TS samples from here, extract the three folders (blankts, blankfixedts and navts) into your VS2012 JavaScript project template folder, e.g. C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ProjectTemplates\JavaScript\Windows Store\1033. Once the files are there, shutdown all instances of Visual Studio 2012 and execute “devenv.exe /InstallVSTemplates” as admin. If you have multiple copies of Visual Studio installed, make sure you’re executing the one for VS2012.

Once you’ve completed those steps successfully, you should see three new TypeScript-based templates as shown in the very first figure of this blog post. Enjoy.

0 comments




Windows 8 and Visual Studio 2012 and Data Visualization, Oh My!

This month is a big one for Microsoft developers. Windows 8 will be generally available in stores on a variety of form factors starting on 10/26, with the BUILD conference following closely in the last week of October. This on top of the Visual Studio 2012 RTM earlier this summer and a Windows Phone 8 release coming soon, and there's a lot going on if you're a Windows developer.

If you've read my previous editor's notes this year, you already know that Telerik takes Windows 8 and Visual Studio 2012 very seriously. As of 10/17, we've officially released our set of XAML and HTML controls for building Windows Store apps on Windows 8, including data visualization controls like charts, gauges and bullet graphs. These controls aren't just ports from old platforms, but controls that have been re-imagined for the touch-centric mobile devices that Windows 8 will be shipping on. In addition, we've updated JustCode to support Windows Store project types, JustDecompile to decompile Windows Store and C# 5.0 apps and our JustTrace profiler to target Windows Store apps. If you'd like to see what our amazing customers have already done with all of this great Windows Store support, check out our Showcase Gallery.

Further, as the modern UI style becomes more popular, we’re continuing to push touch and metro UI themes into almost all of our suites, including ASP.NET AJAX, WPF and Silverlight. Also, these platforms including WinForms get a huge new control this Q: the PivotGrid, providing you with cutting edge data visualization for your custom apps.

In this Q, we've focused on Windows Store apps, Visual Studio 2012 and data visualization for desktop, web and mobile app development across the board, but that's not all! We've added Coded UI support to WinForms and WPF controls, full SharePoint compliance to our ASP.NET AJAX controls and complete storage of all of your Visual Studio settings in the cloud to JustCode! Check out our webinars the week of 10/22 so you can see just exactly what's new in your favorite Telerik products.

Chris Sells
VP, Developer Tools
@csells

P.S. And while the Developer Tools division has been hard at work, so has the rest of Telerik. For example, we've recently welcomed Eric Lawrence into our family with his excellent Fiddler tool, and the folks in our agile project management division TeamPulse have introduced Kanban boards and integration with TFS 2012 in their latest version.

0 comments




Telerik’s evolving platform guidance for .NET developers

Telerik often gets questions from its customers about which of the multitude of app frameworks that Microsoft provides for .NET developers that they should pick. WinForms? WPF? Silverlight? ASP.NET? What’s the right solution for their problem? The answer is always the same: it depends.

Unfortunately, that’s not very helpful, so last year a set of the best and brightest that Telerik has to offer sat down and figured out just what it depends on and whether we could offer clear, concise guidance for our customers. The answer was “yes we could,” so we did that in 2011.

However, it’s been a busy year that’s included two major events in the life of a .NET developer: Silverlight desktop and web have been shelved and Windows 8 has been born. So, with that in mind, we’ve updated the platform guidance to take those two important changes to the .NET developer landscape into account; you can read all about it in the Telerik’s 2012 platform guidance for .NET developers.

Or, if you’re already familiar with the 2011 guidance, the rest of this post will be about what’s changed in 2012.

Desktop Application

Desktop applications represent the range of applications from those supporting internal information workers to those delighting consumers. These applications typically involve richly interactive interfaces, either for heavy-duty data management or entertainment. They key characteristic of desktop apps is the need to take advantage of the full range of native capabilities of the platform.

Ideal .NET Platform: WPF

WPF provides the ideal platform for building desktop apps. With mature, rich tooling provided in Visual Studio and Expression Blend, readily available components that address the full range of app styles, a large developer community and ClickOnce deployment, WPF gives the .NET developer all of the power of building “native” Windows software with a simple deployment model.

Key Advantages of WPF:

[Special Silverlight Guidance Note: Silverlight is also a good candidate for building desktop apps, sharing many of the same characteristics of WPF. While it seems clear that Microsoft will not release a major version beyond the recently released Silverlight 5, their commitment to 10 more years of support as well as continued 3rd party vendor support means that it’s a viable alternative for WPF development for new or existing Silverlight projects.]

Tablet Application

The use of tablets and touch-centric apps within companies is on the rise, and tablet sales are expected to double in 2012 (Gartner). Unlike their mobile smartphone counterparts, which frequently complement existing desktop apps, analysts see the potential for tablets to be more disruptive, replacing certain types of desktop apps in the enterprise. For .NET developers, it is important to address this trend and pick a Microsoft platform that will deliver the best tablet experience. Many platforms available from Microsoft can be used to build touch-enabled apps, even WinForms, but Microsoft is providing clear guidance for modern, touch-first apps with the arrival of Windows 8.

Microsoft’s Windows 8 introduces a new model for building touch-enabled, tablet friendly apps that are meant to be content-focused, easy to use with no documentation, touch-centric and tailored to the device. These apps will run in a new dedicated environment only available in Windows 8.

Since Microsoft is making it clear that Windows 8 is their ideal platform for tablet apps, the bigger question developers must answer is how to develop tablet apps. Tablet apps can be built with either XAML/.NET or HTML/JavaScript. Both approaches have access to the full capabilities of the device and share a common Windows Runtime API.

Ideal Tablet Platform: XAML and .NET

When building Windows 8 tablet apps, choosing between XAML/.NET and HTML/JS largely depends on the kinds of existing assets within an organization and the skills of the developers, but we recommend XAML and .NET for most tablet app development. Tablet apps built with XAML and .NET not only offer the familiar .NET programming paradigms (and tools) that have been popularized over years of .NET and XAML development, but a large amount of the code, assets and skills carry over to Windows Phone 8 (WP8) app development. In contrast, it is not possible to leverage HTML/JS assets if you’re also building apps for WP8.

If supporting WP8 is not a key consideration for your tablet development, then it is important to know that Microsoft has worked to ensure the capabilities, tooling and run-time performance for both XAML and HTML tablet apps is as close to identical as possible. At that point, your choice between the two options is about the past and future technology strategy of your organization, not the capabilities of the platform.

So while we primarily recommend XAML and .NET for tablet app development, here are key advantages to both approaches that should be considered:

Key Advantages of XAML for building Metro-style apps:

Key Advantages of HTML for building Metro-style apps:

[Game support note: Both Windows Phone and Windows 8 provide access to DirectX for building high-performance “twitch” games. This access is provided via .NET XNA in Windows Phone 7 and via native DirectX in Windows 8. If you are planning on building high-performance games for these Microsoft platforms, we suggest this third option .]

Where are we?

It’s clear that Silverlight is in no sense “dead.” At Telerik, we still sell a large number of licenses to Silverlight developers, although from an engineering point-of-view, we spend more time making sure we’re taking the best advantage we can of WPF. Also, even if we don’t recommend starting new desktop or web deployment projects in Silverlight, it’s still alive and well on Windows Phone 7 & 8 and it provides an excellent springboard into XAML development on Windows 8. If you think of Silverlight as one of Microsoft’s implementations of XAML, along with WPF and the Windows 8 support, you’ll have the right mindset to move your Silverlight web and desktop apps, developers, skills and assets forward to WPF on the desktop, Silverlight on the phone and XAML on Windows 8.

2 comments




Telerik Loves Windows 8 and Visual Studio 2012 RTMs!

win8vs2012Yesterday’s release of Visual Studio 2012 and Blend for Visual Studio 2012 marks the beginning of a new era. In some ways, VS2012 and Blend are incremental releases, adding even better support for building enterprise and consumer apps and services for the desktop and the web. However, in one very important way, the release of VS2012 and Blend, together with the release of Windows 8 earlier this month, signals a whole new focus for the platform – that of touch-centric tablets – and with it, a whole new way to package and distribute apps for the Windows operating system – the Windows Store.

If Windows 8 sells even half of what Windows 7 has sold (which seems low, considering the support for a great number of new form factors), then that will represent 300 million customers all looking for new Windows 8 apps in the Store. Currently, that Store holds about 500 apps and even if Microsoft increases that number to 5,000 by general availability in October, that’s far short of the 500,000 apps that similar app stores have. In short, Windows 8 is going to have lots of users and those users are going to want to buy lots of apps. This is, of course, why Visual Studio 2012 and Blend are so important – they’re the tools you can use to design, develop and package your app for the Store and tap into those hundreds of millions of customers. Make no mistake – Windows 8 represents nothing short of a reboot of the Windows developer ecosystem and Visual Studio 2012 and Blend are the keys to that ecosystem.

Windows 8, Visual Studio 2012 and Blend are important to Windows developers, which makes it important to Telerik customers. Because of that, we’ve been on the cutting edge here since the BUILD conference in September, releasing metro themes that first week and supporting the Beta and RCs in our tools and controls. And now I’m happy to announce that we fully support Windows 8, Visual Studio 2012 and Blend across nearly all of our Windows developer products. And not only do we support them, but we take special advantage of their unique features in our products, as you can read in the following posts:

Of course, this is just the beginning of the tablet and mobile era for Windows developers, so count on Telerik to continue to push into Windows 8 and Windows Phone 8 for building touch-centric apps for both the Windows Store and the Windows Phone Store, as well as continuing to push our products to meet your needs on the desktop and on the web. Telerik’s been right there through the last decade of Windows development and you can expect us to be there for the next decade.

Chris Sells
VP, Developer Tools
@csells

3 comments




June, 2012, Florida: Best TechEd Ever!

This month in Florida is going to be my 2nd TechEd ever and I’m sure the best by far. The number of things I get to do is staggering:

I honestly can’t remember when I’ve looked forward to a conference more. I’ll see you there!

0 comments




Microsoft + ASP.NET + Open Source: This Time for Sure!

rocky-and-bullwinkleBullwinkle: “Hey Rocky! Watch me pull a rabbit out of a hat!”

Rocky: “Again? That trick never works!”

Bullwinkle: “This time for sure!”

In the last week or so, I’ve heard mixed reactions to Scott Hanselman’s eye-popping announcement that, in addition to ASP.NET MVC that is already open source, that Microsoft is releasing ASP.NET Web API and Razor as open source as well. Further, and this is the big deal:

Microsoft is going to take contributions on their open source ASP.NET components and ship those contributions in the box for future major releases.

Of course, this is big news on the face of it, but some folks aren’t convinced. Some more jaded members of the community look at the open sourcing of a Microsoft component as the beginning of the end for that component. “Look at IronPython!” they say. “That project was open sourced right before the team imploded.”

Another jaded point of voice is that Microsoft is open sourcing MVC so that they have a story when it’s killed: “You can add features to it all you want,” they claim Microsoft will say.

The funny thing about all of those points of view is that I hear people complain all the time when Microsoft cancels something, “I don’t care if they cancel my favorite project; just release the source to the community!” I find it ironic that when Microsoft does release the source for a dying project, people complain about that, too.

However, in this case, I don’t think that ASP.NET is going to be side-lined. In the previous cases, it was easy to see that Microsoft was moving on and to what, e.g. the C# dynamic keyword in the case of IronPython.

ASP.NET, on the other hand, is a huge part of the server-side story for Microsoft and MVC is clearly the thing they’re focusing on. It’s the common thread for custom servers for both UI and API on both Windows Server and the Cloud and a big focus in the tooling for VS11.

Further, Scott has a track record with making OSS work from Microsoft, including NuGet and the user contributions that it takes.

And finally, both Scott Hanselman and Phil Haack, respected, active community members, not only drove these projects but have endorsed them.

Those three things add up to Microsoft pulling the rabbit out of the hat for me.

1 comment




Building Windows 8 Apps with JavaScript

Brandon Satrom and I are writing a book on Metro/JS apps for Win8, with Don Box. All of the content on this page is subject to change.

winjs book cover

Read Online

Purchase

Table of Contents

Samples

Most of the chapters have several source code samples that accompany them, which you can download and use how you see fit. Enjoy!

10 comments




WinJS Promises: then and done

As of the Windows Consumer Preview (aka Win8 Beta), the WinJS promises object has a “done” method as well as a “then” method. The “done” method is just like “then” except that it turns unhandled errors into exceptions. If you read no further, know this:

Always call “done” as the last promise method in your promise chain.

Let’s say you have a promise implementation that makes failure a strong possibility:

  1. var prom = new WinJS.Promise(function (c, e, p) { e("#fail"); });

A fastidious developer will always pass in an error handler whenever then call the “then” method of a promise:

  1. prom.then(..., function (m) { content.innerText = "Handled: " + m; });

However, in the case that the developer doesn’t pass in a error handler function when calling “then”, the error will silently drop on the floor:

  1. prom.then(); // error? what error?

I realize that the web was built around the idea that page errors should just silently whistle into the wind, but as an app developer:

Errors should be loud.

So, I want my errors to be loud, I should default to using the “done” method on a promise instead:

  1. prom.done(); // error == BOOM!

When I call the “done” method and an unhandled error is detected, WinJS throws an error that not even a try-catch handler will stop from showing in the developer’s face:

image

Personally, I’d prefer to be able to catch such errors in try-catch blocks, but this behavior is far preferable to the error being ignored. Of course, if I care that much, I can provide an error handler function when calling done:

  1. prom.done(..., function (m) { content.innerText = "Handled: " + m; });

And finally, if I want to chain my promises, I just need to put the “then” methods in between so the errors flow, but the “done” method should always be last:

  1. var app = WinJS.Application;
  2. app.onactivated = function (eventObject) {
  3.   // start the download
  4.   downloadStatus.innerText = "downloading posts...";
  5.  
  6.   // process the declarative controls
  7.   WinJS.UI.processAll()
  8.   .then(function () {
  9.     // use the WinRT to download the RSS
  10.     var syn = new Windows.Web.Syndication.SyndicationClient();
  11.     var url = new Windows.Foundation.Uri("http://blogs.msdn.com/b/oldnewthing/rss.aspx");
  12.     return syn.retrieveFeedAsync(url);
  13.   })
  14.   .done(processPosts, downloadError);
  15. };

This is actual code from an app that pulls down an RSS feed after the processAll method is completed in the “then” method on line 8, which returns another promise on line 12. That promise is handled by the “done” method on line 14. If there had been an error in the download and as a developer, I’d forgotten to provide the “downloadError” error handler, I’d have gotten a giant exception dialog that would’ve encouraged me down a different path.

Thanks to Josh Williams from the WinJS team for reminding me of the “done” method.

0 comments




What’s New in the Beta Metro/JS Templates for VS11

The Consumer Preview of Windows 8 (aka the Win8 beta) is now available for download, along with the matching Visual Studio 11 beta. You can download them both from the Developer Center for Metro style Apps and at least when I did the downloading this morning, it was smooth and worked well. In case you’re interested, I downloaded the ISO, not the setup, and I am currently writing this blog entry in Windows Live Writer running inside a WMWare Workstation 8.0 virtual machine running on the Windows 7 host OS running inside Boot Camp on my MacBook Pro. As someone said to me this morning: “That’s a lot of VMs!” Maybe so, but the Win8 and VS11 betas are running surprisingly well inside of my Inception-box.

Metro/JS Templates for VS11 in BUILD

If you played around with the Metro/JS templates in VS11 from the BUILD conference in September, you’ll have noticed that the generated apps were compliant with the Windows 8 UX style guidelines, but that two of the templates – Grip and Split – generated large amounts of code. That’s because these are pretty much the biggest apps that Microsoft has ever shipped as templates. They each have multiples pages and they work hard at being simple but feature complete Metro style apps.

However, as well as the BUILD templates implemented the Win8 UX, their code wasn’t the greatest, for the following reasons:

All of these reasons meant that the functionality of the generate Grid and Split apps made for an instructional start to building your own Metro style apps, assuming you were willing to wade through a great deal of code. The new templates in the Win8 beta solve nearly all of these problems.

Get-VS-11-BetaMetro/JS Templates for VS11 Beta

Out of the box, the Metro/JS templates in the VS11 beta (made available today, Feb 29, 2012), get more betterer as they get more complex.Let’s start simple and work our way up.

image

Blank Application

The Blank Application template is almost the smallest Metro/JS app you can build, except that it includes a reference to the Microsoft Windows Library for JavaScript (aka WinJS):

image

And to be clear, this is a brand new feature. Including WinJS as a reference instead of dropping the code into each project means that MS can shipped a single shared implementation instead of every app in the store duplicating the code. If you want to duplicate the code into your project, you can do so, but you’ll also have to update the URL references to the JS and CSS files from your HTML files, like this snippet from the generated default.html:

default.html
  1. <!-- WinJS references -->
  2. <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
  3. <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
  4. <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

In addition to the new syntax with the leading double-slashes, that the number of WinJS files to include is a far smaller number in the Beta. Now it’s just base.js and ui.js, which makes it easy to decide which one(s) you want and in what order to include them, fixing a common problem in the BUILD bits.

One other thing that’s new in the Blank Application template is that there are stubs for implementing tomb-stoning to easily save and restore your app’s session state in the default.js:

default.js
  1. var app = WinJS.Application;
  2.  
  3. app.onactivated = function (eventObject) {
  4.     if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
  5.         if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
  6.             // TODO: This application has been newly launched. Initialize
  7.             // your application here.
  8.         } else {
  9.             // TODO: This application has been reactivated from suspension.
  10.             // Restore application state here.
  11.         }
  12.         WinJS.UI.processAll();
  13.     }
  14. };
  15.  
  16. app.oncheckpoint = function (eventObject) {
  17.     // TODO: This application is about to be suspended. Save any state
  18.     // that needs to persist across suspensions here. You might use the
  19.     // WinJS.Application.sessionState object, which is automatically
  20.     // saved and restored across suspension. If you need to complete an
  21.     // asynchronous operation before your application is suspended, call
  22.     // eventObject.setPromise().
  23. };

The handling of the terminated state in the onactivated event on line 3 and the checkpoint event handler on like 16 are for reactivating and saving your app state respectively.

And finally, the handy TODO comments are something you’ll find sprinkled throughout the templates based on usability feedback conducted to determine what developers really need help with as they add their own functionality to the app.

Fixed Layout Application

Moving up the complexity scale, the Fixed Layout Application template is meant to do just what it says – provide a jumping off point for apps that are logically fixed layout. The crux of this code is the use of the ViewBox control in the default.html:

default.html
  1. <body>
  2.     <div data-win-control="WinJS.UI.ViewBox">
  3.         <div class="fixedlayout">
  4.             <p>Content goes here</p>
  5.         </div>
  6.     </div>
  7. </body>

Line 2 wraps the content of the app in a ViewBox control, which will scale everything inside of it to the size of the content, which is defined in the default.css file with the fixedLayout style:

default.css
  1. .fixedlayout {
  2.     -ms-grid-columns: 1fr;
  3.     -ms-grid-rows: 1fr;
  4.     display: -ms-grid;
  5.     height: 768px;
  6.     width: 1024px;
  7. }

You’ll see in lines 5 and 6 that the height and width of the div contained in the ViewBox is 768x1024, which means that the content can be created using absolute positioning and sizing. The job of the ViewBox is as the app is resized, either the computer’s resolution changes or more likely the app is moved between landscape, portrait, split and full sizes, the ViewBox will scale the content to take up as much room as possible, keeping the aspect ratio constant and scaling the content such that the app itself can think of itself as logically 768x1024 (or whatever the top-level div’s size is). This is very handy for building things like casual games where you want scaling, but generally not flowing – you want to control where the Scrabble tiles are or the tic-tac-toe pieces and it’s much easier to do that with a fixed size.

And now that I’ve described it, I’ll tell you that this template is the only one that’s structurally identical between BUILD and Beta. Still, it is useful.

Navigation Application

The next one up the ladder is the Navigation Application template, which is where we get the Back button and the support for moving HTML fragments into and out of the DOM just like the user was logically navigation page-to-page. In the BUILD bits, this navigation functionality was packaged in the default.js file, but in the Beta, default.js is just the same as the simpler templates. Instead, the navigation functionality is packaged into a new file: navigator.js. The reason this file is separate is to make it clear if you’d like to implement a different navigation policy, e.g. MVC, then this is the file to start with. Further, while this functionality would seem a shoe-in to be included in WinJS, it’s not quite “baked” enough, which means that MS hasn’t yet decided that this is “the way” to do navigation.

Still, it’s “a way” to do navigation in a Metro/JS app and a pretty useful one. Essential the way it works is that there is a singleton PageControlNavigator in the default.html file that holds the pages as they’re swapped in. The default.html is also where navigator.js is included:

default.html
  1. <script src="/js/navigator.js"></script>
  2. ...
  3. <div id="contenthost" data-win-control="Application7.PageControlNavigator" data-win-options="{home: '/html/homePage.html'}"></div>

The navigator.js file defines the PageControlNavigator control, which holds the logical pages as the user clicks around in the application. The home parameter is where to start the navigation. Navigation is to a Page, which is really a mapping between an HTML file and a set of events to handle over the lifetime of that Page:

homePage.js
  1. // This function is called whenever a user navigates to this page. It
  2. // populates the page elements with the app's data.
  3. function ready(element, options) {
  4.     // TODO: Initialize the fragment here.
  5. }
  6.  
  7. WinJS.UI.Pages.define("/html/homePage.html", {
  8.     ready: ready
  9. });

Of course, navigating to the home page is going to be rare compared to navigating between pages. The easiest way to get a new page to add to your app is to right-click on your project in the Solution Explorer and select Add | New Item:

image

The last item three item templates on the list are for shell contract implementations, which are beyond the scope of this blog post, but the first one is a Page Control, which gives us a triad of HTML, JS and CSS that fits exactly into the navigation model provided by the PageControlNavigator control:

page2.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>page2</title>
  6.  
  7.     <!-- WinJS references -->
  8.     <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
  9.     <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
  10.     <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
  11.    
  12.     <link href="page2.css" rel="stylesheet">
  13.     <script src="page2.js"></script>
  14. </head>
  15. <body>
  16.     <div class="page2 fragment">
  17.         <header aria-label="Header content" role="banner">
  18.             <button class="win-backbutton" aria-label="Back" disabled></button>
  19.             <h1 class="titlearea win-type-ellipsis">
  20.                 <span class="pagetitle">Welcome to page2</span>
  21.             </h1>
  22.         </header>
  23.         <section aria-label="Main content" role="main">
  24.             <p>Content goes here.</p>
  25.         </section>
  26.     </div>
  27. </body>
  28. </html>

 

page2.cs
  1. .page2 p {
  2.     margin-left: 120px;
  3. }

 

page2.js
  1. // This function is called whenever a user navigates to this page. It
  2. // populates the page elements with the app's data.
  3. function ready(element, options) {
  4.     // TODO: Initialize the fragment here.
  5. }
  6.  
  7. function updateLayout(element, viewState) {
  8.     // TODO: Respond to changes in viewState.
  9. }
  10.  
  11. WinJS.UI.Pages.define("/page2.html", {
  12.     ready: ready,
  13.     updateLayout: updateLayout
  14. });

Navigating to this new control defined by these files is a simple matter of calling the navigate method:

homePage.html
  1. <a onclick="WinJS.Navigation.navigate('/page2.html')">Page 2</a>

As far as the user is concerned, the anchor tag shows up as a link like any other:

image

Clicking on “Page 2” fires the onclick event, which calls the navigate method, passing in the path to the HTML file and causes the Page control defined in page2.html, page2.js and page2.css to be loaded:

image 

In addition to whatever content on your Page control, notice that the Back button shows up automatically. The Back button manages navigation via clicking, touching and the browser keys; Ctrl+Left Arrow and Ctrl+Right Arrow work as Back and Forward respectively.

Grid and Split Application

At this point, we’ve covered almost all of the core concepts that make up the Grid and Split applications: they bring in WinJS by reference, they use controls and they use navigation via the Page controls. In fact, even though the Grid app has three pages and the Split app has two, they’re really just the navigation template with the pages to implement the Grid and Split app patterns that MS decided were the major app patterns appropriate for Win8. However, the Grid and Split application templates do have two major features that the other templates don’t have: support for multiple view states and a centralized data model.

Multiple view state support means that as the app is moved between portrait, landscape, full and split, the app adjusts itself to look good in all states. The view state management is mostly handled with CSS styles associated with media modes, like in the Split App’s itemsPage.css:

itemsPage.css
  1. ...
  2. @media screen and (-ms-view-state: snapped) {
  3.     .itemspage .itemslist .win-vertical.win-viewport .win-surface {
  4.         margin-bottom: 30px;
  5.     }
  6. ...

In Metro/JS apps, MS has provided a media query predicate called -ms-view-state, which can be one of the four view states and the styles in the media query block will be applied when the app moves to that state. In addition, if you want to handle the view state change in JS, you can do so with updateLayout event in your Page control, like this snippet from itemsPage.js:

itemsPage.js
  1. // This function updates the page layout in response to viewState changes.
  2. updateLayout: function (element, viewState) {
  3.     var listView = element.querySelector(".itemslist").winControl;
  4.     if (viewState === Windows.UI.ViewManagement.ApplicationViewState.snapped) {
  5.         listView.layout = new ui.ListLayout();
  6.     } else {
  7.         listView.layout = new ui.GridLayout();
  8.     }
  9. }

In this case, the updateLayout event is called when the control is initially created and as the app moves through the view states so it can change the layout style for the ListView control showing the contents of the page:

imageimage

Landscape vs. Snapped view state layout for the itemsPage ListView control

The other major feature of the Grid and Split app templates – and this feature is new in the Beta bits – is the centralized data model, which is where the data for all pages comes from. This data model is defined in data.js and it contains the static group and item data as you just saw. The core of the data is exposed from data.js like so:

data.js
  1. WinJS.Namespace.define("data", {
  2.     items: groupedItems,
  3.     groups: groupedItems.groups,
  4.     getItemsFromGroup: getItemsFromGroup
  5. });

These three members of the data object are used throughout the templates, e.g. in the itemsPage.js ready event handler:

itemsPage.js
  1. // This function is called whenever a user navigates to this page. It
  2. // populates the page elements with the app's data.
  3. ready: function (element, options) {
  4.     var listView = element.querySelector(".itemslist").winControl;
  5.     ui.setOptions(listView, {
  6.         itemDataSource: data.groups.dataSource,
  7.         itemTemplate: element.querySelector(".itemtemplate"),
  8.         oniteminvoked: this.itemInvoked.bind(this),
  9.     });
  10.     this.updateLayout(element, Windows.UI.ViewManagement.ApplicationView.value);
  11. },

Notice that the data.groups property is used on line 6 to perform a data binding operation. That data binding is against the dataSource property of the object returned from data.groups, which itself is created by a method on the WinJS.Binding.List object that holds the grouped item data. It’s this binding list, a new feature in WinJS for the Beta, that makes it easy to move from the static data provided by the templates and dynamic data that your app defines.

The binding list is a binding data source, which means that as you add items to it, it notifies any control that happens to be bound to it. This is especially handy when your app starts up with zero data, but you need to initialize the ListViews such that as the data is available (perhaps from an asynchronous network call), it will be shown.

If you open up the data.js, you’ll see the static sample data:

static sample data
  1. // Each of these sample groups must have a unique key to be displayed
  2. // separately.
  3. var sampleGroups = [
  4.     { key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },
  5.     ...
  6. ];
  7.  
  8. // Each of these sample items should have a reference to a particular
  9. // group.
  10. var sampleItems = [
  11.     { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
  12.     ...
  13. ];

The group data has a unique key, a title, a subtitle, a background image and a description, which are all fields that the data templates used in the Split and Grid apps depend upon (although you can change them if you like). The item data has a reference to the group to which it belongs, a title, a subtitle, a description, a background image and the content for the item itself.

The code that populates the binding list with the sample data looks like this:

statically bound data
  1. var list = new WinJS.Binding.List();
  2. var groupedItems = list.createGrouped(groupKeySelector, groupDataSelector);
  3.  
  4. // TODO: Replace the data with your real data.
  5. // You can add data from asynchronous sources whenever it becomes available.
  6. sampleItems.forEach(function (item) {
  7.     list.push(item);
  8. });

As the comment makes clear, it’s this code you’re most likely to want to change. Instead of pulling in static data from the sampleItems array, we want to pull the items in asynchronously, perhaps from an RSS feed or two just like my earlier post:

dynamically bound data
  1. var list = new WinJS.Binding.List();
  2. var groupedItems = list.createGrouped(groupKeySelector, groupDataSelector);
  3.  
  4. // RSS feeds
  5. var feeds = [
  6.     { key: "feed1", title: "Scott Hanselman", subtitle: "a blog", backgroundImage: darkGray, description: "a blog", url: "http://feeds.feedburner.com/ScottHanselman" },
  7.  
  8.     { key: "feed2", title: "Raymond Chen", subtitle: "a blog", backgroundImage: lightGray, description: "a blog", url: "http://blogs.msdn.com/b/oldnewthing/rss.aspx" },
  9.  
  10.     { key: "feed3", title: "Chris Sells", subtitle: "a blog", backgroundImage: mediumGray, description: "a blog", url: "http://sellsbrothers.com/posts/?format=rss" },
  11. ];
  12.  
  13. feeds.forEach(function (feed) {
  14.     WinJS.xhr({ url: feed.url }).then(function (request) { processPosts(feed, request); });
  15. });
  16.  
  17. function processPosts(feed, request) {
  18.     // parse the RSS
  19.     var nodes = request.responseXML.selectNodes("//item");
  20.     for (var i = 0, len = nodes.length; i < len; i++) {
  21.         var node = nodes[i];
  22.         var item = {
  23.             group: feed,
  24.             title: node.selectNodes("title")[0].text,
  25.             subtitle: node.selectNodes("pubDate")[0].text,
  26.             description: "a post",
  27.             content: node.selectNodes("description")[0].text,
  28.             backgroundImage: feed.backgroundImage
  29.         };
  30.         list.push(item);
  31.     }
  32. }

In this case, our group data is a set of RSS feeds, being careful to continue to use the same group field names so I don’t have to update the data templates in the rest of the app. When the app loads, I still create a binding list, but instead of filling it directly, I start an async xhr call (the WinJS XMLHttpRequest wrapper) for each feed, creating an item for each RSS post I find upon a successful completion. Because I’ve left the data model alone and because I’m using the binding list, that’s all I have to change and now the entire app has been updated to support that data:

image

The items page with the set of feeds in the Split app template

image

The split page with the posts from the selected feed

Where Are We?

As you can see, the Metro/JS templates in the VS11 beta start simple and add features with navigation, pages with specific app pattern functionality, multiple view state support and a unified data model. The main difference is the Beta versions of this templates is that code has been simplified, beautified and pushed into WinJS as much as possible to make the inside of your app just as pretty and easy to use as the outside.

Translation

This article has been translated into Serbo-Croatian by Jovana Milutinovich. Enjoy.

1 comment




Editor’s Note, Telerik Newsletter, February 2012

Hello, all, and welcome to the February, 2012 edition of the Telerik newsletter! As the newest employee at Telerik, I’m still learning all of the good stuff we’re doing just in the area of developer tools.

For example, the features in JustCode that fix up my using statements (Ctrl+Shift+U) and show me a type’s shape and implementation via the JustDecompile integration (F12) are now ingrained into my fingertips, but I just learned (JustLearned!) that if I want to get completions on types that aren’t even listed in my using statements, I can use Ctrl+Alt+Space and keep right on coding, which is one of a ton of new features in the 2012 Q1 release. More new features in the Just family of tools include a new decompilation engine in JustDecompile to more completely handle new .NET constructs, a new “Largest Memory Retainer” view in JustTrace to find memory leakers and the ability write your very own JustCode extensions. And the Reporting and OpenAccess ORM tools have great new features coming, too!

On the controls side, for which Telerik is very well-known, we have new features in the ASP.NET AJAX and MVC suites, XAML Silverlight, WPF and Windows Phone 7 suites and even the WinForms suite. For example, one of the more amazing controls for me is that RadFileExplorer, which provides an entire logical way to explore files over the web, however you’d like to expose them, and is now updated with thumbnail image support. Plus, AJAX adds support for client-side data binding, exporting to Excel for RadTreeList and nearly complete support across the entire suite for OData. Further, MVC, Silverlight and WPF all get much enhanced data visualizations with charting and diagramming.

However, my favorite set of additions in the controls suite has to be focus on the end-to-end app building support from the WP7 team, including handling ratings, tooltips and the new Application Building Blocks, which includes components for sending diagnostic data back to the developer, implementing trial feature and app expirations and a helper for implementing LiveTiles. This set of components came directly out of the experience the WP7 team had in building and shipping the Tasks apps, which started as the ToDoLists sample. The WP7 team that working hard to make mobile developers happy, even providing guidance on how to build apps your customers will love and how you can make money on your apps.

All of this mobile experience is pouring directly into a whole new set of controls, tools and components that we’re building for Windows 8. Even today, JustCode already support the Visual Studio 11 and our controls have a Metro style theme built right in. Of course, we’re not going to stop there; we’re already spinning up a team dedicated to helping you build end-to-end mobile apps on Windows 8. We’re working closely with Microsoft to make sure we release our Visual Studio 12 extensions and support when VS12 ships, but you’ll see more from us even sooner than that. Stay tuned!

Really, there’s too much good stuff to list, so if I were you, I’d hang out on the Telerik blogs and on the @Telerik twitter feed to see what’s coming up. Even better, check out the upcoming webinars to see the new features in action and install the free trials. And, if you’re got questions, even with the trials, drop us a line on our support center and we’ll get you answers right away. Or, if you’d like to talk to me directly, feel free to drop me a line. We care deeply about making sure our customers get when they need, so keep those cards and letters coming!

1 comment




The Windows Libraries for JavaScript: Part I

DISCLAIMER: This post is targeted at the //build/ version of the Windows Developer Preview (aka Windows 8). Things are likely to change with future releases. On your head be it.

In the last post in this series, we looked at getting started building Metro style apps built using JavaScript (Metro/JS apps) with Microsoft Visual Studio 11 for the Windows Developer Preview (aka VS11) and Microsoft Expression Blend 5 Developer Preview (aka Blend).

In this installment, we’re going to take a look at the library that brings WinRT and the web platform together: the Windows Library for JavaScript (aka WinJS) and build an app while we’re doing it.

The Need for WinJS

While it is the case, as you’ll see, that a Metro/JS apps have the same access to the underlying Windows platform as any other language projection (like Metro/VB, Metro/C# and Metro/C++ apps), it’s also the case that HTML/JavaScript programmers have a certain style that they are used to programming in. In some cases, those habits need to change because Metro/JS apps aren’t web sites or even web applications; Metro/JS apps are native applications that happen to be built with HTML, JavaScript, CSS, SVG, etc.

However, in many cases, existing JavaScript habits are good ones and should be encouraged. Towards that end, Microsoft engineers have built the Windows Libraries for JavaScript (WinJS), which is a set of reusable JavaScript and CSS files which were created specifically to make it easier for you to build Metro/JS apps with the right Win8 “feel” to them.

The easiest way to bring WinJS into your project is to create an application using any of the Metro/JS project templates, since all of them include the WinJS files:

clip_image002

WinJS is defined by the files under the winjs folder. The Blank Application project template produces an application with an empty window, but it does it with style; specifically the style that makes a Metro/JS app look like a Win8 app. Of course, the styles alone can’t make everything right – you’ll also need the right layout, behavior, etc. As an example of how to build a Metro/JS apps that’s slightly more exciting than the one we’ve been looking at so far, let’s build one of the most famous members of the Windows team – Raymond Chen.

Mr. Chen is a developer on the Windows team that brought you the Windows Developer Preview (aka Win8). Further, he’s the author of the most excellent book “The Old New Thing” based on a blog of the same name:

clip_image004

Chen’s blog is famous for digging into the forgotten nooks and crannies of the Windows platform. And for our purposes, Chen’s blog is an excellent target for our sample because he’s chosen a blogging platform that exposes the full text of his posts in a programmatic form (both RSS and Atom) so that we can build a Win8 app to show them.

Any blog displayed in the browser is essentially the title, date and content from each of the latest blog posts. To start, we need to download the data for each of his posts. To do that, we first need to know where to put that code.

The WinJS.Application object

The Blank Application template-generated default.html loads a minimal set of WinJS JavaScript and CSS files:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>RssReader</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!-- RssReader references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
</body>
</html>

Updating the sample with some slightly more interesting HTML:

<!DOCTYPE html>
<html>
...
<body> <h1>The Old New Thing</h1> <div id="downloadStatus"></div> <div id="posts"></div> </body> </html>

Here we’re setting the header text of our app and creating two div elements as placeholders: one for the status of our RSS download and one for the data from the RSS when we get it. Also, let’s replace the contents of default.css with styles to match Chen’s blog:

body {
    background-color: #fff;
    color: #000;
    font-family: Verdana;
    padding: 8pt;
}

a:link, a:visited, a:active {
    color: #700;
    font-weight: inherit;
}

h1 {
    text-transform: none;
    font-family: inherit;
    font-size: 22pt;
}

#posts {
    width: 99%;
    height: 100%;
    overflow: auto;
}

.postTitle {
    color: #700;
    font-size: 1.2em;
    font-weight: bold;
}

.postDate {
    color: #666;
    font-size: 11pt;
}

.postContent {
    font-size: medium;
    line-height: 18px;
}

To support app lifetime, Win8 provides a set of app-level events. The generated default.js file subscribes to the app’s mainwindowactivated event and then starts the WinJS application:

(function () {
  'use strict';
  // Uncomment the following line to enable first chance exceptions.
  // Debug.enableFirstChanceException(true);

  WinJS.Application.onmainwindowactivated = function (e) {
    if (e.detail.kind ===
Windows.ApplicationModel.Activation.ActivationKind.launch) {


// TODO: startup code here } } WinJS.Application.start(); })();




  

The contents of the generated default.js file are contained within a self-executing anonymous function declaration (that is a mouthful – it’s fun to use a language with key concepts missing).

By default, any function or variable defined outside of a function in your JavaScript files is global across your Metro/JS app. Variables and functions defined within a function are only visible within that function. The template uses this outer function declaration to help you follow good JavaScript design patterns, ensuring that your functions and variables do not pollute the global namespace.

After grabbing the Application object from the WinJS namespace, the code subscribes to the event fired after the application and its resources (like default.html) have been loaded. This is a good place to do initialization, as we’ll see.

For any of the application events to fire, you need to let the application know you’re ready to receive them, which is what the call to the start method does.

The mainwindowactivated event handler is the perfect place for us to kick off the download of the data from Chen’s blog.

Async HTTP using WinJS.xhr

The xhr function in the WinJS namespaces provides a series of options for downloading data in both text and XML formats using HTTP. The name of the xhr function stands for XMLHttpRequest, which is the name of the object that sparked the AJAX/Web 2.0 revolution around 2005 (although the object has been part of Internet Explorer since version 5.0 released in 1999). The xhr function provided with WinJS is a wrapper that takes a number of options, including which HTTP verb to use (GET by default), which HTTP headers to include (none by default) and which URL to retrieve data from:

WinJS.Application.onmainwindowactivated = function (e) {
  // start the download
  var chen = "http://blogs.msdn.com/b/oldnewthing/rss.aspx";
  downloadStatus.innerText = "downloading posts...";
  WinJS.xhr({ url: chen }).then(processPosts, downloadError);
}

Instead of providing the option to retrieve the data synchronously or asynchronously the way the XMLHttpRequest object does, xhr forces an asynchronous call so that the UI will not be blocked while data is retrieved. You’ll see this all over the Win8 programming model as reflected into Metro/JS and it helps you make more responsive programs. In our case, because we don’t know how long the request is going to take, we’re setting the text content of the downloadStatus div to indicate progress.

Asynchronous functions from WinJS return an object called a promise, which represents results to be provided at some time in the future. The promise object exposes the then method, which takes an optional three functions, one for success, one for failure and one for progress.

The call to the xhr function returns the promise immediately, at which point we set the functions to call in the case of success or failure, ignoring progress:

function processPosts(request) {
  // clear the progress indicator
  downloadStatus.innerText = "";

  // parse the RSS
  var items = request.responseXML.selectNodes("//item");
  if (items.length == 0) {
    downloadStatus.innerText = "error downloading posts";
  }

  for (var i = 0, len = items.length; i < len; i++) {
    var item = items[i];

    // append data to #posts div
    var parent = document.createElement("div");
    appendDiv(parent, item.selectNodes("title")[0].text, "postTitle");
    appendDiv(parent, item.selectNodes("pubDate")[0].text, "postDate");
    appendDiv(parent, item.selectNodes("description")[0].text, "postContent");
    posts.appendChild(parent);
  }
}

function appendDiv(parent, html, className) {
  var div = document.createElement("div");
  div.innerHTML = html;
  div.className = className;
  parent.appendChild(div);
}

function downloadError() {
  downloadStatus.innerText = "error downloading posts";
}

When the xhr call has completed successfully, the processPosts function is called with a request object which has all the information as if we’d use the XMLHttpRequest object directly. The property we care about is responseXML, which contains the RSS data we requested. From the RSS, we use an XPath expression to select the set of item nodes, extracting the title, pubDate and description data to be used to create a div element per item, with div elements for each of the pieces of data we’re showing, styled appropriately.

For readers of The Old New Thing, the output should look pretty darn familiar:

clip_image006

At this point, you may worry about whether our use of the xhr function will actually work, since a page provided by a web server would fail. The reason this works is because Metro/JS apps run in a secure sandbox and are, by default, allowed the ability to make cross-domain HTTP requests even though web pages are not.

Actually, it’s not quite true that Metro apps are allowed access to the Internet by default – it’s just that Metro app project in VS11 are provided that access by default, as it’s such a common need.

Where Are We?

At this point, we’ve built a working Metro/JS app that does a real thing using WinJS. In the next installment, we’ll look at how WinJS provides features to make DOM manipulation better.

Portions Copyright © 2011 Microsoft Corporation. Reproduced with permission from Microsoft Corporation. All rights reserved.

0 comments




Metro style JS Apps in VS11 & Blend

DISCLAIMER: This post is targeted at the //build/ version of the Windows Developer Preview (aka Windows 8). Things are likely to change with future releases. On your head be it.

In the previous post in this series, we discussed how to build a deploy a Metro style app built with JavaScript completely from the command line. That’s a useful exercise to prove that there’s no real magic, but I don’t expect most people to do things that way. I expect most people to use Visual Studio.

Visual Studio 11

Microsoft Visual Studio 11 Express for Windows Developer Preview (aka VS11) is the premiere tool for developing applications for Windows and has been for quite a while. It provides project management for keeping your application’s source files together, integrated build, deployment and launching support, HTML, CSS, JavaScript, graphics and Metro style app manifest editing, debugging and a whole lot more. Visual Studio 11 Express comes for free and includes everything you need to build, package and deploy your Metro style apps.

Out of the box, VS11 provides several project templates to get you started:

image

The most basic template is the Blank Application project template. Running it produces a project file (.wwaproj) along with nearly the same set of files we used to create the first sample project from the command line. The Blank project template also creates some additional files, which we’ll discuss presently.

clip_image004

The format and the contents of the package.appxmanifest file is the same as the appxmanifest.xml file we’ve already seen, but the .appxmanifest extension allows the file to have a custom editor in VS11:

clip_image006

If you open the provided default.html, you’ll see it’s a nearly empty vessel, waiting to accept your creativity. The provided default.js (under the js folder) is similarly nearly empty, with just some skeleton code that we’ll discuss later.

To debug your application, choose Debug | Start Debugging, which gives you the kinds of debugging tools an experienced Visual Studio user is used to:

In addition to debugging your application on the local machine (which is the default), you have two other options: remote machine and the simulator. You can change these options by choosing Project | Properties and selecting the debugger to launch:

clip_image008

The idea of remote machine debugging is that you can develop on a high-powered developer machine but debug on a more modest consumer-grade machine, like a tablet. This is handy to make sure your application works well on the type of machines you’re targeting.

The simulator option, on the other hand, is meant to let you run another little machine on the machine you’re already running. The simulator is a remote access session that’s configured to allow you to simulate various resolutions, landscape and portrait rotations and touch, even if you’re not using a touch-capable device:

image

And as that if that weren’t enough, Visual Studio is not the only tool you’ve got in the drawer. If you’d like a WYSIWYG design experience for the visual portion of your application, you’ve got Blend.

Expression Blend 5

Previous version of Blend focused on the XAML developer. Microsoft Expression Blend 5 Developer Preview (aka Blend), however, adds HTML support for building Metro style JS apps specifically. Blend comes with the following features for designing and building Metro/JS apps:

Here’s Blend in action on the “Hello” sample:

image

Those of you familiar with Blend will notice many similarities between the XAML version and the HTML version.

Where Are We?

At this point, you have all you need to know to get started building Metro/JS apps using HTML5, CSS3, JavaScript, SVG, etc. (assuming you know HTML5, CSS3, JavaScript, SVG and et cetera). Next time, I’ll introduce the library built to bridge the two worlds of the WinRT and the web platform – WinJS.

Portions Copyright © 2011 Microsoft Corporation. Reproduced with permission from Microsoft Corporation. All rights reserved.

1 comment




Your First Metro style App in JavaScript

DISCLAIMER: This post is targeted at the //build/ version of the Windows Developer Preview (aka Windows 8). Things are likely to change with future releases. On your head be it.

A “Windows Metro style app” is an application built for the devices running the new Windows user experience of Windows 8. A Metro style app built using JavaScript is a first class Windows application built with the technologies of the web, e.g. HTML, CSS, JavaScript, JSON, SVG, etc. Unlike a web site, a Metro JS app is not deployed page-by-page from a web server, but rather installed locally on the user’s machine. Like any other first class Windows app, a Metro JS app has access to the underlying platform and is able to share information with other apps.

Like any web site, a Metro JS app starts with an HTML file:

<!DOCTYPE html>
<html>
<head><title>Hello, Win8</title></head>
<body><h1>Hello and welcome to Metro style Win8!</h1></body>
</html>

This HTML, if it were loaded in the web browser, would result in the world’s most boring web site. Also, surfing to a web page in the browser is not at all how your customers will execute a Metro style app. Instead, they’ll install it from the Windows Store and execute it from the Start Screen:

image

Further, a web page (or series of web pages, styles, code, resources, etc.) is not a Metro JS app. A Metro JS app includes these things, but also includes metadata and resources:

The manifest file is an XML file called appxmanifest.xml and a minimal one looks like this:

<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">

  <Identity
    Name="hello"
    Version="1.0.0.0"
    Publisher="CN=Microsoft Corporation, O=Microsoft Corporation,
L=Redmond, S=Washington, C=US
" /> <Properties> <DisplayName>Hello</DisplayName> <Description>Hello</Description> <PublisherDisplayName>csells</PublisherDisplayName> <Logo>images\storelogo.png</Logo> </Properties> <Prerequisites> <OSMinVersion>6.2</OSMinVersion> <OSMaxVersionTested>6.2</OSMaxVersionTested> </Prerequisites> <Resources> <Resource Language="en-US" /> </Resources> <Applications> <Application Id="hello.App" StartPage="default.html"> <VisualElements DisplayName="Hello" Logo="images\logo.png" SmallLogo="images\smalllogo.png" Description="Hello" ForegroundText="light" BackgroundColor="#0084FF"> <SplashScreen Image="images\splashscreen.png" /> </VisualElements> </Application> </Applications> </Package>

The manifest has things in it like the name of the application, the description for the application, a reference to the images and, most importantly, the name of the HTML file that represents the app’s start page.

With the manifest and supporting files in place, getting your super exciting app registered with the system is a matter of starting up PowerShell (which you can do from the Start Screen by typing “powershell”), and importing the “appx” module (Figure 1).

image

If you’re not familiar with it, Windows PowerShell is the next-gen command line shell built into Windows. Out of the Win8 box, it comes with the “appx” module, which allows you to manage the modern applications installed on your computer:

The “appx” part of the command names come from the packaged form of a Metro style app, which is called an “appx” after the file extension. To create one, you can use the “MakeAppx.exe” command-line tool available via the Developer Command Prompt available on the Start Screen. The job of MakeAppx.exe is to package your application, manifest and all, into a single file with a “.appx” extension. An appx file is a file in the Open Packaging Conventions (OPC) format, which essential means it’s a .zip file with a few extras. If you’re going to package and sign your application for submission into the Windows Store, you may decide to use MakeAppx.exe and SignTool.exe as part of that process.

However, to simply test an application on your developer box, Add-AppxPackage gives you all you need:

image

In addition to taking a path to a .appx file, the Add-AppxPackage command allows you to pass in the path to a manifest file using the -Register option, which gives you the ability to install your application for testing without going through the extra step of packaging:

image

You can double-check that your application has been installed using the Get-AppxPackage command.

Once your application has been installed, you can see it in the shell:

image

Launching it will you show the inspirational “Hello” message displayed full-screen without any Windows chrome.

Where Are We?

After seeing what files and tools used to build and install a Metro style app, you’re probably already hoping for a tool to help you create, edit, package, launch and debug. For that, we’ve got Microsoft Visual Studio 11 Express for the Windows Developer Preview (aka VS11), which we’ll talk about next time.

Portions Copyright © 2011 Microsoft Corporation. Reproduced with permission from Microsoft Corporation. All rights reserved.

0 comments




GUI REPL for Roslyn

If you recall from REPL for the Rosyln CTP 10/2011, I’ve been playing around building a little C# REPL app using Roslyn. That version was built as a Console application, but I’ve refactored and rebuilt it as a WPF application:

image

You can download the source code for both the Console and the WPF versions here:

RoslynRepl Sample Download

The benefit of a real GUI app is that output selection makes a lot more sense and that you could imagine real data visualization into data controls instead of just into strings. However, implementing a REPL shell in a GUI environment requires doing things considerably differently than in a Console app. Besides the stupid things I did, like doing a lot of Console.Write, and things that don’t make sense, like #exit or #prompt, there are a few interesting things that I did with this code, including handling partial submissions, rethinking history and rewiring Console.Write (just ‘cuz it’s stupid when I do it doesn’t mean that it shouldn’t work).

Partial Submissions

In this REPL, I decided that Enter means “execute” or “newline” depending on whether the submission is complete enough, according to Roslyn, to execute or not. If it is, I execute it, produce the output and move focus to either the next or a new submission TextBox. If the submission isn’t yet complete, e.g. "void SayHi() {", then I just put in a newline. Further, I do some work to work properly with selections, i.e. if you press Enter when there’s a selection, the selection will be replaced with the Enter key.

So far I like this model a lot, since I don’t have to something like separate “execute” and “newline” into Enter and Alt+Enter or some such.

Rethinking History

In a GUI shell with partial submissions and multi-line editing, the arrows are important editing keys, so can’t be used for access to previous lines in history. Further, a GUI apps makes it very easy to simply scroll to the command that you want via the mouse or Shift+Tab, so there’s not a lot of use for Alt+Arrow keys. Pressing Enter again replaces the old output (or error) with new output (or error):

imageimage

Currently when you re-execute a command from history, the command stays where it is in the history sequence, but it could as easily move to the end. I haven’t yet decided which I like better.

Redirecting Console.Write

Since this is a REPL environment works and acts like a shell, I expect that Console.Write (and it’s cousins like Console.WriteLine) to work. However, to make that work, I need to redirect standard output:

Console.SetOut(new ReplHostTextWriter(host));

The ReplTextWriterClass simply forwards the text onto the host:

class ReplHostTextWriter : TextWriter {
  readonly IReplHost host;

public ReplHostTextWriter(IReplHost host) { this.host = host; } public override void Write(char value) { host.Write(value.ToString()); } public override Encoding Encoding { get { return Encoding.Default; } } }

The hosts implementation of IReplHost.Write simply forwards it onto the currently executing submission (the ReplSubmissionControl represents both a submission’s input and output bundled together). You’ll notice that the TextWriter takes each character one at a time. It would be nice to do some buffering for efficiency, but you’d also like the output to appear as its produced, so I opted out of buffering.

However, one thing I don’t like is the extra newline at the end of most string output. I want the main window to decide how things are output, setting margins and the newline looks like a wacky margin, so the trailing CR/LF had to go. That’s an interesting algorithm to implement, however, since the characters come in one at a time and not line-by-line. I want separating newlines to appear, just not trailing newlines. I implement this policy with the TrimmedStringBuilder class:

// Output a stream of strings with \r\n pairs potentially spread across strings,
// trimming the trailing \r and \r\n to avoid the output containing the extra spacing.
class TrimmedStringBuilder {
  readonly StringBuilder sb;

  public TrimmedStringBuilder(string s = "") {
    sb = new StringBuilder(s);
  }

  public void Clear() {
    sb.Clear();
  }

  public void Append(string s) {
    sb.Append(s);
  }

  public override string ToString() {
    int len = sb.Length;

    if (len >= 1 && sb[len - 1] == '\r') {
      len -= 1;
    }
    else if (len >= 2 && sb[len - 2] == '\r' && sb[len - 1] == '\n') {
      len -= 2;
    }

    return sb.ToString(0, len);
  }
}

Usage inside the ReplSubmissionControl.Write method is like so:

public partial class ReplSubmissionControl : UserControl {
...
  TrimmedStringBuilder trimmedOutput = new TrimmedStringBuilder();

  public void Write(string s) {
    if (s == null) { trimmedOutput.Clear(); }
    else { trimmedOutput.Append(s); }

    consoleContainer.Content = GetTextControl(trimmedOutput.ToString());
  }
}

Now, as the input comes in one character at a time, the trailing newlines are removed but separating newlines are kept. Also, you may be interested to know that the GetTextControl function builds a new read-only TextBox control on the fly to host the string content. This is so that the text can be selected, which isn’t possible when you set the content directly.

Right now, there’s no support for Console.Read, since I don’t really know how I want that to happen yet. Pop-up a dialog box? Something else?

Completions, Syntax Highlighting and Auto-indent

I was a few hundred lines into implementing completions using Roslyn with the help of the Roslyn team when I realized two things:

  1. Implementing completions to mimic the VS editor is hard.
  2. Completions aren’t enough – I really want an entire C# editor with completions, syntax highlighting and auto-indentation.

Maybe a future release of Roslyn will fix one or both of these issues, but for now, both are out of scope for my little REPL project.

2 comments




Moving to the Cloud Part 2: Mostly Sunny

In part 1 of this now multi-part series (who knew?), I discussed my initial attempts at moving my digital life into the cloud, including files, music, photos, notes, task lists, mail, contacts, calendar and PC games.There were some issues, however, and some things that I forgot, so we have part 2.

Before we get to that, however, it’s interesting (for me, at least) to think about why it’s important to be able to move things into the cloud. Lots of vendors are busy making this possible, but why? There are backup reasons, of course, so that a fire or other natural disaster doesn’t wipe out all of the family pictures. There are also the ease of sharing, since email makes a very poor file sharing system. Also, multi-device access is certainly useful, since the world has moved into a heterogeneous OS world again as smartphones and tablets take their place at the table with PCs.

For me, however, moving my data into the cloud is about freedom.

The cloud enables me to get myself bootstrapped with data associated with my personal or business life, using whatever device or OS I feel like using that day. It provides me freedom of location or vendor.

The cloud is still forming, however, so hasn’t really been able to make this a seamless experience, which is why I’m onto part 2 of this series.

Mail, Contacts and Calendar

Hotmail is a fine system for online access to mail, contacts and calendar that integrates well with Windows Phone 7. However, the integration with desktop Outlook and my custom domain isn’t good enough yet to rely on. The primary problem was the Hotmail Outlook Connector, which isn’t ready yet for prime time. It worked great with calendar and contacts, but fell down badly when it came to large email folders that I moved from my PST file. It never showed the sync’ing progress as complete, which made me uncomfortable that it never actually completed sync’ing and therefore my data wasn’t safe. Also, when I sent an email from Hotmail, either via the web or via Outlook, it showed the reply address as hotmail_44fe54cff788bdde@live.com. I assume the latter would’ve been fixed with Windows Live custom domains, but the former was the real deal-killer for me.

Also, I heard that Google Apps is the way to go, but that also requires some special software to enable sync’ing with desktop Outlook – I wanted something that was native to both Outlook 2010 and Windows Phone 7. Further, it cost money, so if I was going to pay, I wanted something that Microsoft was going to integrate well with.

So, I bit the bullet and hooked myself with the latest in hosted Exchange – Microsoft Office 365. That’s what I’m using now and just like the on-premise Exchange that worked great for me as a Microsoft employee, I’ve been very happy with it. However, because of the way I was using it, it was a pain to configure properly for use in hosting my csells@sellsbrothers.com email.

The easy way to configure Office 365 is to let it be the DNS name manager, which lets it manage everything for you, including your web site (via SharePoint), your mail, your Lync settings and any future service they care to tack on. However, that doesn’t work for me, since I didn’t want to move my 16-year-old web site into SharePoint (duh). Instead, I wanted to leave my DNS name manager at securewebs.com, which has been a fabulous web hosting ISP for me.

A slightly harder way to configure Office 365 for use with your domain is to only be used for selective services, e.g. set the MX record for mail, but don’t mess with the CNAME record for your web site. This would’ve been nice, too, except I don’t want to move all of the email accounts on sellsbrothers.com – only csells. Why? Well, that’s a family matter.

Over the years at family gatherings, to seem geek cool, I’ve offered free email boxes to my relatives. “Oh? You’re moving to another ISP again? Why don’t you move your email to sellsbrothers.com and then you can keep the same email address forever! And the best part is that it’s free!”

Now, of course, I’d recommend folks get an email address on hotmail or gmail, but this all started before the email storage wars back when you needed an actual invitation to set up a gmail.com account. Now I’ve got half a dozen family members with “permanent” and “free” email boxes and I don’t want to a) move them, b) charge them or c) pay for them myself on Office 365.

As cheap as you might think I am, it’s really migration that I worry most about – having successfully gotten them set up on their phones and PCs with their current email host, I don’t want to do that again for Outlook or migrate their email. Maybe it’s easy, maybe it’s hard. We’ll never know ‘cuz I’m not doing it!

So now, I have to make csells@sellsbrothers.com sync with Office 365 and leave everyone else alone. This is the hardest way to use Office 365 and involved the following:

Obviously, this is a crappy configuration experience, but no amount of manual updates to Outlook provided by the Office 365 site seemed to help. It was nice that the WP7 Outlook was much easier, although I’d really loved to have just told desktop Outlook that I was an Office 365 user and had it figure out all the touchy config settings.

Everything seems solid except one minor annoyance: when I do a Reply All, csells@sellsbrothers.com stays in the list because my mail programs don’t know that my csells@sellsbrothers.com and csells@sellsbrothers.onmicrosoft.com email addresses are logically the same. I assume if I was hosting my MX records at Office 365, this problem, along with the crappy config experience, would go away.

The good news is that I’ve got access to my full range of Mail, Contacts and Calendar from the web, my phone and my desktop, including multi-GB email folders I’ve copied over from my PST file, all for $6/month. Had I to do it over again, I’d have long ago moved my family to hotmail and avoided the config nightmare. I may yet do just that.

Encrypted Files

With my mail et al sorted, my next fix from last time was the lack of confidence in my most sensitive files with Dropbox. Dropbox can be hacked or subpoenaed like anyone else, so I want a client-side encryption solution. Dropbox may someday provide this themselves, but currently they gain a great deal of storage savings by detecting duplicate blocks amongst their users, saving significantly on uploads and storage, which client-side encryption disrupts. In the meantime, I really want an app that encrypts on the client and drops my data into Dropbox, which BoxCryptor does nicely.

In addition to supporting Windows, BoxCryptor also supports MacOS, iOS and Android, although not WP7 yet. Further, it’s free for 2GB and only a $40 one-time fee for unlimited data, so it’s cheap, too.

I also looked at SecretSync, which has a similar cross-platform story and pricing model (although it’s $40/year instead of $40/once), but it requires Java and I don’t put that on my box. For an open source solution, you may be interested in TrueCrypt.

imageFinancial Data

I’m a mint.com user. I like the idea of an all-up look at my finances across 29 online financial accounts. However, as a backup of that data, I wrote a mint.com scraping tool that downloads the CSV transactions export file and digs current snapshot data out of the homepage HTML. The format on the web site is constantly changing of course, so it’s a support problem, but having that data even a little messed up over time is way better than not having it at all, so I’m happy. The data itself goes into CSV files that I can query with LINQPad and that are stored in my Dropbox folder, which keeps them sync’d.

Books and Bookmarks

I can’t believe I missed this last time, but one of the big things I keep in the in the cloud is my set of Amazon Kindle books. I think that the proprietary format and DRM of Kindle materials will eventually open up because of competition, but until then, Amazon has been a great steward of my online books and bookmarks, providing me clients for all new platforms as well as their own e-ink-based hardware. I have an extensive book collection (this is just part of it), but am adding to the physical part of it no more.

Further, in the case that I have the “what the hell was that book I used to have?” moment after I finally truck all of my books off to Powell’s, the Brothers Sells have scanned all of the ISBN numbers from my 500+ books into LibraryThing. I won’t have the books anymore, but at least I’ll be able to browse, refresh my memory and add the books to Kindle on demand. The reason I picked LibraryThing is because it was easy to get all of the book metadata from just an ISBN (so it’s easy to spot data entry errors early), it’s easy to export from in a CSV file and, should I decide, easy to user their API.

App Specifics

In addition to the big categories, several apps keep data important to me:

Things Left On The Ground

As you may have surmised, I don’t put a lot of sentimental value in physical things. They’re not nearly as important to me as people, experiences or data. However, there are some things that I’d want to rescue in case of disaster given the chance:

As hard as I try, I can’t think of anything else. Should I have to jam, my plan is to place these few items into safe keeping and sell, donate and/or toss the rest.

Where Are We?

As I write this, I’m sitting in a Starbucks in Sandy, OR, 20 minutes from a cabin I’m renting for a few days. When I’m done here, I’ll explore the town, see a movie and make myself some dinner. I won’t worry about my phone, my laptop or my home being lost or destroyed, since 98% of the possessions I deem most valuable are being managed by cloud vendors I trust.

The cloud doesn’t just represent a place to backup or store data – it represents a way of life.

My data stores a lifetime of experiences, people and knowledge. By keeping it safe and available no matter where I go, I gain the freedom to wander, to experience new physical places and new hardware and software solutions, all without being unduly burdened.

Creative work requires a comfortable place to labor filled with the tools and the materials the worker needs to be creative. Today my tools are an Apple MacBook, Windows 7, Office 2010, Visual Studio 2010 and a Samsung Focus. Yesterday those tools were different and I’m sure they’ll be different again tomorrow. However, while other people build up their place with comfortable things around them – a bookshelf for reference, a comfy chair, knick-knack reminders of events or trips – my place is a lifetime of data and anywhere that provides access to electrons and bits.

Having my data safe, secure and available makes me feel comfortable, creative and free.

3 comments




Sells Manor: Running 64-bit Win8 on My MacBook Air

With the exception of //build/, I haven’t really been a public part of the Microsoft developer community for about a year. So, to make up for some lost time, I’m giving a talk about some of the //build/ bits at the Portland Area .NET User Group first thing in the new year. This means that I need a running installation of the Windows 8 Developer Preview on my new laptop, ‘cuz THE MAN took my old laptop back when I handed in my badge (although, to be fair, they paid for it in the first place : ).

My constraints were as follows:

So, with all of that in mind, of course I started with Hanselman’s Guide to Installing and Booting Windows 8 Developer Preview off a VHD post. If you’re willing to build a new VHD, that’s the way to go. However, I was able to use the techniques I learned from that post, especially the comment section and a couple tips from my friend Brian Randall to make my existing Win8 VHD work. Some of this may work for you even if you don’t have a MacBook Air.

Getting Windows 7 Running on my MacBook Air

I started with a virginal MacBook and used the built in Boot Camp to create a Win7 partition, point to a Win7 Ultimate ISO I have on a network share for just these kinds of emergencies and get it installed and running. It wasn’t seamless, but Bing was helpful here to straighten out the curves.

Replacing the Boot Manager

The way I like to create VHDs is via Windows Server 2008 and Hyper-V. Once I have the VHD, I drop it onto the c:\vhd folder on my computer, do a little bcdedit magic and boom: when I reboot, I’ve got a new entry from which to choose my OS of the moment.

However, Win8 doesn’t boot from the Win7 boot manager, so the first thing I needed to do (as implied by the comments in Scott’s post) was use bcdboot to replace the Win7 book manager with the Win8 boot manager. To do that, boot into Win7 and fire up the Disk Management tool (Start | Run: diskmgmt.msc). Select your BOOTCAMP drive and choose Action | Attach VHD. Choose the path to your VHD and you’ll get another virtual disk:

image

In my case, C was my Win7 Boot Camp HD and F was my Win8 VHD. Now, start an elevated command prompt and use bcdboot to replace the Win7 boot manager with the Win8 book manager.

DISCLAIMER: I’m stealing the “works on my machine” graphic from Hanselman’s site because this action replaces a shipping, maintained, supported boot manager with one that is still in “developer preview” mode. Make sure you have your computer backed up before you do this. I am a trained professional. Do not attempt this at home. All stunts performed on a closed course. Some assembly required. Void where prohibited. I’m just sayin’.

image

Now that you’ve got the right boot manager in place, getting Win8 to boot requires bcdedit.

Getting Windows 8 to Boot

Scott’s post on booting to VHD involves bcdedit, which describes adding a new boot option in the “Setting up your Windows Boot Menu to boot to an Existing VHD” section:

image

Use bcdedit to point to the Win8 VHD.

Logging into Windows 8 on a MacBook

Now when you boot your MacBook, you’ll choose to boot to your Windows partition as you always have (which should just happen automatically), but then the Win8 book manager will kick in and you choose your Windows 7 install or your new Windows 8 install. Booting into Windows 8 shows you the login screen as normal, but now you have another problem.

The MacBook keyboard comes without a Windows Delete button. Oh sure, it’s labeled “delete” in trendy lowercase letters, but it’s really the equivalent of the Windows Backspace button. And that’s a problem, because you need to press Ctrl+Alt+Del to log into Win8.

Of course, Apple thought of that, so they created the Boot Camp drivers for Windows that maps fn+delete to Delete, but you can only install them after you’ve logged in.

So how do you log into a MacBook without a Delete button? Easy. You attach an external USB keyboard, press that three-fingered salute and login as normal.

Once you’re in that first time, you can install the Boot Camp drivers and never have to use the external keyboard again.

Installing the Boot Camp Drivers on Win8

When I created the Boot Camp USB to install Win7, it came with a set of drivers in the WindowsSupport folder with a wonderful setup.exe that makes Windows run great on the MacBook. Unfortunately, when you try to run it, you get a message that says you can’t:

Untitled

If you search the internet, you can find folks that have gotten past this by tricking setup.exe into thinking it’s running on Win7, but you’ll also find that those tricks don’t seem to work for 64-bit installs on MacBook Air, i.e. the one I was doing. However, this is where Brian had another suggestion: you can edit the Boot Camp MSI itself.

DISCLAIMER: This is something that I made work surprising well on my own personal MacBook Air, but I provide no guarantee that it won’t cause your computer to burst into flames on an international flight causing your body to be lost at sea. These techniques are not supported by Microsoft, Apple or the American Dental Association. You’ve been warned.

You may wonder, “To what MSI is Mr. Sells referring?” And I answer: WindowsSupport\Drivers\Apple\BootCamp64.msi. This is the 64-bit MSI with the check in it for Windows 7. To make it work for Windows 8, you need to edit the MSI and change the version number. And to do that, the easiest tool I know of is the unsupported, discontinued Orca MSI editor from Microsoft, now hosted on technipages.com. Running Orca allows you to edit BootCamp64.msi and change the Windows version part of the LaunchCondition from 601 (Windows 7) to 602 (Windows 8):

orca

Once you’ve changed this version, WindowsSupport\setup.exe seems to run just fine, installing the keyboard entries that allow you to login and the control panel that allows you to customize everything.

Where Are We?

Starting from a Boot Camp installation of Windows 7 on my MacBook Air, I showed you how I was able to get Windows 8 booting from a VHD. It wasn’t pretty and it required tips from all over the internet. I gather them here today so that future anthropologists will know how hard we worked to enable the coming of our robotic overlords. If you’re able to use these instructions to expedite their arrival, I’m sure they’ll take that into consideration when they’re sorting us into work details.

P.S. This post is dedicated to Jerry Pournelle. I used to pour over his Byte magazine column every month like he was the computer Sherlock Holmes.

0 comments




Moving My Data To The Cloud: Stormy Weather

For years, I’ve maintained a single “main” computer. It was the computer that was the central authority of all of the personal data I’d accumulated over the years and from which it made me uncomfortable to be separated. Because I needed a single computer for everything, it had to work on my couch, on a plane, on a desk and everywhere else I ever needed to go. Also, it couldn’t have a giant monitor or multiple monitors, because it had to go everywhere. All of this was because I needed all of my data with me all of the time.

My process for moving to a new computer used to include a lot of manual copying of files from the old D hard drive (D is for Data) to my new hard drive, which was also carefully partitioned into C for Windows, Office, Visual Studio, etc. and D for a lifetime of books and articles, coding projects and utilities I’ve collected over the years, e.g. LinqPad, Reflector, WinMerge, etc. This is 30GB of stuff I wanted access to at all times. I was also backing up via Windows Home Server, keeping photos and music on the WHS box (another 30GB), then backing that up to the cloud via KeepVault. And finally, as I upgraded HDs to go bigger or go to solid state, I kept each old HD around as another redundant backup.

All of that gave me some confidence that I was actually keeping my data safe right up until my Windows Home Server crashed the system HD and I found out that the redundancy of WHS doesn’t quite work the way you’d like (this was before I installed KeepVault). This was a first generation HP Home Server box and when it went down, I took it apart so I could attach a monitor, keyboard and mouse to diagnose it, pulled the HDs out so I could read what files I could and ultimately had to drop it off in Redmond with the WHS team so I could get it up and running again.

There are some files I never got back.

KeepVault gave me back some of the confidence I’d had before WHS crashed, but they didn’t provide me a way to see what files they were backing up, so I didn’t have the transparency I wanted to be confident. Further, they don’t have clients on every kind of platform like Dropbox does.

Of course, simply sync’ing files isn’t enough – sync’ing my 10GB Outlook PST file every time I got a new email was not a good way to share 20 years of contacts, email and calendar items.

The trick is to sync each kind of data in the right way, be confident that it’s safe and have access to it across the various platforms I use: Windows, Windows Phone 7, iOS and possibly Android (you know, if I feel like walking on the wild side!). And since I’m currently under employed (my new gig doesn’t start till the new year), I figured I’d do it once and do it right. I almost got there.

Files

Let’s start easy: files. Dropbox has made this a no-brainer. You install the software on any platform you care to use, drop everything you want into the folder and it just works, keeping files in sync on the cloud and across platforms, giving you adequate (although not great) status as it does so. Most platforms are supported natively, but even on platforms that aren’t, there are often alternative clients, e.g. I’m using Boxfiles for Windows Phone 7. When I gave up my Microsoft laptop, instead of doing the dance of the copy fairy to my new Mac Book Air, I installed Dropbox on both computers, dropped everything I want backed up and sync’d between computers into the Dropbox folder. 36 hours and 30GB later, all of it was copied into the cloud and onto my new laptop, at which point I reformatted my Microsoft laptop and handed it into my boss.

Further, as a replacement for WHS and KeepVault, I now keep all of the files that I was keeping just on my WHS server – photos and music primarily – into Dropbox.

image

This keeps me the confidence I need to know that my files are safe and backed up to the cloud, while making it very easy to keep it backed up locally by simply running Dropbox on more than one computer at my house. If at any time, I don’t want those files on any one computer, I tell Dropbox to stop sync’ing those folders, delete the local cache and I’m all done.

There are two tricks that I used to really make Dropbox sing for me. The first is to change my life: I no longer partition my HDs into C and D. The reason I’d always done that was so that I could repave my C with a fresh Windows, Office and VS install every six months w/o having to recopy all my data. Windows 7 makes this largely unnecessary anyway (bit rot is way down on Win7), but now it doesn’t matter – I can blow any computer away at will now, knowing that Dropbox has my back. In fact, Dropbox is my new D drive, but it’s better than that because it’s dynamic. The C drive is my one pool of space instead of having to guess ahead of time how to split the space between C and D.

The other thing I did was embrace my previous life: I wanted to keep D:\ at my fingertips as my logical “Data” drive. Luckily, Windows provides the “subst” command to do just that. Further, ntwind software provides the fabulous VSubst utility to do the mapping and keep it between reboots:

image

Now, I’ve got all the convenience of a dedicated “data” drive backed up to the cloud and sync’d between computers. Because I needed 60GB to start, I’m paying $200/year to Dropbox for their 100GB plan. This is more expensive than I’d like, but worth it to me for the data I’m storing.

There is a hitch in this story, however. Right now on Dropbox, data and metadata is available to Dropbox employees and therefore to anyone that hacks Dropbox (like the government). I don’t like that and for my very most sensitive data, I keep it off of Dropbox. When Dropbox employees themselves aren’t able to read Dropbox data or metadata, then I’ll move the sensitive data there, too.

Music

I’m not actually very happy with how I’m storing music. I can play all my music on any PC, but I can only play it one song at a time on my WP7 because there’s no Dropbox music client. I could use the Amazon cloud drive that provides unlimited music storage for $20/year, but there’s no WP7 client for that, either. Or I could spend $100/year on Amazon and get my 100GB of storage, but their client isn’t as widely available as Dropbox. Ironically, Dropbox is using Amazon as their backend, so hopefully increased pressure in this space will drop Dropbox’s prices over time.

Photos

I’m not using Facebook or Flicr for my photos simply because I’m lazy. It’s very easy to copy a bunch of files into Dropbox and have the sync’ing just happen. I don’t want to futz with the Facebook and Flickr web interfaces for 15GB worth of photos. Right now, this is the digital equivalent of a shoebox full of 8x10s, but at least I’ve got it all if the house burns down.

imageNotes and Tasklist

For general, freeform notes, I moved away from Evernote when they took the search hotkey away on the Windows client (no Ctrl+F? really?) and went to OneNote. The web client sucks, but it’s better than nothing and the Windows and WP7 clients rock. I have a few notes pinned to my WP7 home screen that I use for groceries, tasks, etc., and I have all of my favorite recipes in there, too, along with my relatives’ wi-fi passwords that they don’t remember themselves, a recording of my son snoring, etc. It’s a fabulous way to keep track of random data across platforms.

On the task list side, I only sorta use OneNote for that. I also send myself emails and write little TODO.txt files every time I get a little bee in my bonnet. I’ve never found that the Exchange tasks sync well enough between platforms to invest in them. Maybe someday.

imageMail, Contacts and Calendar

And speaking of Exchange, that’s a piece of software that Microsoft spoiled me on thoroughly. This is sync that works very well for contacts, emails and calendar items. IMAP does email folders, but server implementations are spotty. For years, I used Exchange for my personal contacts and calendar, only keeping my personal email separate in a giant PST file, pulling it down via POP3. This can sorta be made to work, but what I really wanted was hosted Exchange.

However, what I found cost between $5 and $11 a month per user. I’d probably have gone with Office 365 for sellsbrothers.com mail, even at $5/month except for two reasons. The first is that Microsoft requires you to move your entire DNS record to them, not just the MX record, which means there is all kinds of hassle getting sellsbrothers.com working again. They do this so that they can get all of the DNS records working easily for Lync, Sharepoint, etc., but I don’t want those things, so it’s just a PITA for me. If they change this, I’d probably move except for the other problem: I’m not the only user on sellsbrothers.com.

For years to be the big shot at family gatherings, I’ve been offering up permanent, free email addresses on my domain. That’s all well and good, but now to maintain my geek cred, I need to keep my mom, my step-mom, my brother, my sons, etc., in an email server that works and one that they don’t have to pay for. So, while I was willing to pay $5/month for hosted exchange for me, I wasn’t willing to pay it for my relatives, too!

One option I tried was asking securewebs.com (my rocking ISP!) to upgrade to SmarterMail 8.x, but that didn’t work. I even footed the one-time fee of $200 for the ActiveSync support for SmarterMail, but I couldn’t make that sync from Outlook on the desktop or the phone either.

Eventually I made an imperfect solution work: Hotmail. The nice thing about Hotmail is that it’s free for 25GB (yay webmail storage wars!) and it syncs contacts, mail and calendar items just like I want. Further, with some effort (vague error messages are not useful!), I was able to get Hotmail to pull in my personal email. And, after installing the Outlook Hotmail Connector (explicitly necessary because my Windows Live ID is not a @live.com or an @hotmail.com email address), I was able to sync almost everything, including the folders I copied from my giant PST file, via hotmail to both my desktop and phone Outlook. However, there are a few downsides:

The good news is that this all works for free and my relatives continue to have working email. The bad news is that it doesn’t work nearly as well as the Exchange server I’m used to. Hopefully I will be able to revisit this in the future and get it working correctly.

imagePC Games

I purchase all of my games via Steam now and install them as the mood strikes me. I love being able to reinstall Half-Life 2 or Portal on demand, then blow it away again when I need the hard drive space. Steam is the only viable app store for Windows right now, although I am looking forward to have the Microsoft app store in Windows 8.

imageBackups

I no longer maintain “backups” in the sense that I can slap in a new HD, boot from a USB stick and have my computer restored in 30 minutes or less (that never worked between WHS and Dell laptops anyway). I’ve had HD problems, of course, but they’re so rare that I no longer care about that scenario. Instead, what I do is keep all of the software that I normally install on a file server (the new job of my WHS box). If the file server goes down, then most of the software I install, i.e. Windows 7, Office and Visual Studio, is available for download via an MSDN Subscription. The rest is easily available from the internet (including Telerik tools and controls!) and I just install it as I need it.

Where Are We?

In order to free myself from any specific PC, I needed to pick a new centralized authority for my data: the cloud. The experience I was after for my PCs was the same one I already have on my phone – if I lose it, I can easily buy a new one, install the apps on demand and connect to the data I already had in Exchange, Hotmail, Skydrive, etc. Now that I’ve moved the rest of my world to Dropbox, I can treat my PCs and tablets like phones, i.e. easily replaceable. It’s not a perfect experience yet, but it’s leaps and bounds ahead of where it was even a few years ago.

Hardware and software comes and goes; data is forever.

13 comments




Goodbye Microsoft, Hello Telerik!

I have gotten to do a ton of really great things at Microsoft:

Those and dozens more have all been extraordinary experiences that have made my time at Microsoft extremely valuable. But, like all good things, that time has come to an end.

telerikLogo-web-450x180pxAnd now I’m very much looking forward to my new job at Telerik!

Telerik is an award-winning developer tools, UI controls and content management tools company. They’re well-known in the community not only for their top-notch tools and controls, but also for their sponsorship of community events and their free and open source projects. Telerik is a company that cares about making developer’s lives better and I’m honored that they chose me as part of their management overhead. : )

My division will be responsible for a number of UI control sets – including WinForms, WPF, Silverlight and ASP.NET – as well as a number of tools – including the Just line, OpenAccess ORM and Telerik Reporting. I’m already familiar with Telerik’s famous controls and am now ramping up on the tools (I have been coding with JustCode recently and I like it). My team is responsible for making sure that developers can make the most of existing platforms, knowing that when you’re ready for the next platform, we’ll be there ready for you.

These controls are already great (as is the customer support – holy cow!), so it’ll be my job to help figure out how we should think about new platforms (like Windows 8) and about new directions.

And if you’ve read this far, I’m going to ask for your help.

I’m going to be speaking at user groups and conferences and blogging and in general interacting with the community at lot more than I’ve gotten to do over the last 12 months. As I do that, please let me know what you like about Telerik’s products and what you don’t like, what we should do more of and what new things we should be doing. Telerik already has forums, online customer support, blog posts and voting – you should keep using those. In addition:

Feel free to reach out to me directly about Telerik products.

Of course, I can’t guarantee that I’ll take every idea, but I can guarantee that I’ll consider every one of them that I think will improve the developer experience. I got some really good advice when I first arrived at Microsoft: “Make sure that you have an agenda.” The idea is that it’s very easy to get sucked into Microsoft and forget why you’re there or what you care about. My agenda then and now is the same:

Make developers’ lives better.

That’s what I tried to do at Intel, DevelopMentor and Microsoft and that’s what I’m going to try to do at Telerik. Thanks, Telerik for giving me a new home; I can’t wait to be there.

40 comments




Roslyn Syntax Visualizer Tools

As I do more with Roslyn, I find I want more information about what I’m parsing and how it’s represented in the Roslyn object model. I could, of course, have built myself a little OM dumper for Roslyn, but instead I dug through the samples and found two cool ones built right in, both provided in the Documents\Microsoft Codename Roslyn CTP - October 2011\Shared folder.

Both Roslyn visualizer samples show a set of objects from the syntax part of the Roslyn API and the associated properties for the currently selected node as well as the associated text. The difference is only where the text comes from, a syntax tree or a text file.

Syntax Debugger Visualizer

The SyntaxDebuggerVisualizer sample (fully described in the associated Readme.html) allows you to create a new Visual Studio visualizer such that you can hover over a node from the syntax tree, click on the magnifying glass in the data tip and get this:

SyntaxDebuggerVisualizer

The text comes from the syntax tree parsed in the program. As each node in the syntax tree in the visualizer is selected, the associated properties are showed below and the range of text is shown on the right.

Syntax Visualizer Extension

The SyntaxVisualizerExtension sample (also described in its own associated Readme.html) shows the syntax tree from the current C# or VB file that’s open in Visual Studio. You get to the visualizer by loading the SyntaxVisualizerExtension sample project, starting the app (under the debugger [F5] or not [Shift+F5] as you choose), which starts another copy of Visual Studio. In this instance of VS, open a C# or VB source file and choose View | Other Windows | Roslyn Syntax Visualizer, which shows the following:

SyntaxVisualizerExtension

This version of the visualizer works just like the other one except that it gets the text from the current source code file. As you open different files, the visualizer window updates itself. As you change the selected node in the visualizer’s syntax tree, the associated code in the file is selected.

Both of these tools are very helpful for understand what’s been parsed by Roslyn. I personally like the debugger visualizer, as it’s always available without starting up a new instance of VS, but honestly I’m happy to have either, let alone both!

Update: Plus, there’s a cool tree view, too. Check it out!

0 comments




REPL for the Rosyln CTP 10/2011

I don’t know what it is, but I’ve long been fascinated with using the C# syntax as a command line execution environment. It could be that PowerShell doesn’t do it for me (I’ve seriously tried half a dozen times or more). It could be that while LINQPad comes really close, I still don’t have enough control over the parsing to really make it work for my day-to-day command line activities. Or it may be that my friend Tim Ewald has always challenged csells to sell C shells by the sea shore.

Roslyn REPL

Whatever it is, I decided to spend my holiday time futzing with the Roslyn 2011 CTP, which is a set of technologies from Microsoft that gives you an API over your C# and VB.NET code.

Why do I care? Well, there are all kinds of cool code analysis and refactoring tools I could build with it and I know some folks are doing just that. In fact, at the BUILD conference, Anders showed off a “Paste as VB” command built with Roslyn that would translate C# to VB slick as you please.

For me, however, the first thing I wanted was a C# REPL environment (Read-Evaluate-Print-Loop). Of course, Roslyn ships out of the box with a REPL tool that you can get to with the View | Other Windows | C# Interactive Window inside Visual Studio 2010. In that code, you can evaluate code like the following:

> 1+1 2
> void SayHi() { Console.WriteLine("hi"); }
> SayHi();
hi

Just like modern dynamic languages, as you type your C# and press Enter, it’s executed immediately, even allowing you to drop things like semi-colons or even calls to WriteLine to get output (notice the first “1+1” expression). This is a wonderful environment in which to experiment with C# interactively, but just like LINQPad, it was a closed environment; the source was not provided!

The Roslyn team does provide a great number of wonderful samples (check the “Microsoft Codename Roslyn CTP - October 2011” folder in your Documents folder after installation). One in particular, called BadPainting, provides a text box for inputting C# that’s executed to add elements to a painting.

But that wasn’t enough for me; I wanted at least a Console-based command line REPL like the cool Python, JavaScript and Ruby kids have. And so, with the help of the Roslyn team (it pays to have friends in low places), I built one:

RoslynRepl Sample Download

Building it (after installing Visual Studio 2010, Visual Studio 2010 SP1, the Visual Studio 2010 SDK and the Roslyn CTP) and running it lets you do the same things that the VS REPL gives you:

RoslynRepl

In implementing my little RoslynRepl tool, I tried to stay as faithful to the VS REPL as possible, including the help implementation:

replhelp

If you’re familiar with the VS REPL commands, you’ll notice that I’ve trimmed the Console version a little as appropriate, most notably the #prompt command, which only has “inline” mode (there is no “margin” in a Console window). Other than that, I’ve built the Console version of REPL for Roslyn such that it works just exactly like the one documented in the Roslyn Walkthrough: Executing Code in the Interactive Window.

Building a REPL for any language is, at you might imagine, a 4-step process:

  1. Read input from the user
  2. Evaluate the input
  3. Print the results
  4. Loop around to do it again until told otherwise

Read

Step 1 is a simple Console.ReadLine. Further, the wonder and beauty of a Windows Console application is that you get complete Up/Down Arrow history, line editing and even obscure commands like F7, which brings up a list of commands in the history:

replbeauty

The reading part of our REPL is easy and has nothing to do with Roslyn. It’s evaluation where things get interesting.

Eval

Before we can start evaluating commands, we have to initialize the scripting engine and set up a session so that as we build up context over time, e.g. defining variables and functions, that context is available to future lines of script:

using Roslyn.Compilers;
using Roslyn.Compilers.CSharp;
using Roslyn.Compilers.Common;
using Roslyn.Scripting;
using Roslyn.Scripting.CSharp;
...
// Initialize the engine
string[] defaultReferences = new string[] { "System", ... }; string[] defaultNamespaces = new string[] { "System", ... }; CommonScriptEngine engine = new ScriptEngine(defaultReferences, defaultNamespaces);
// HACK: work around a known issue where namespaces aren't visible inside functions
foreach (string nm in defaultNamespaces) {
  engine.Execute("using " + nm + ";", session);
}

Session session = Session.Create();

Here we’re creating a ScriptEngine object from the Roslyn.Scripting.CSharp namespace, although I’m assigning it to the base CommonScriptEngine class which can hold a script engine of any language. As part of construction, I pass in the same set of assembly references and namespaces that a default Console application has out of the box and that the VS REPL uses as well. There’s also a small hack to fix a known issue where namespaces aren’t visible during function definitions, but I expect that will be unnecessary in future drops of Roslyn.

Once I’ve got the engine to do the parsing and executing, I creating a Session object to keep context. Now we’re all set to read a line of input and evaluate it:

ParseOptions interactiveOptions =
new ParseOptions(kind: SourceCodeKind.Interactive,
languageVersion: LanguageVersion.CSharp6);
... while (true) { Console.Write("> "); var input = new StringBuilder(); while (true) { string line = Console.ReadLine(); if (string.IsNullOrWhiteSpace(line)) { continue; } // Handle #commands ... // Handle C# (include #define and other directives) input.AppendLine(line); // Check for complete submission if (Syntax.IsCompleteSubmission(
SyntaxTree.ParseCompilationUnit(
input.ToString(), options: interactiveOptions))) {
break;
}
Console.Write(". "); } Execute(input.ToString()); }

The only thing we’re doing that’s at all fancy here is collecting input over multiple lines. This allows you to enter commands over multiple lines:

replmultiline

The IsCompleteSubmission function is the thing that checks whether the script engine will have enough to figure out what the user meant or whether you need to collect more. We do this with a ParseOptions object optimized for “interactive” mode, as opposed to “script” mode (reading scripts from files) or “regular” mode (reading fully formed source code from files). The “interactive” mode lets us do things like “1+1” or “x” where “x” is some known identifier without requiring a call to Console.WriteLine or even a trailing semi-colon, which seems like the right thing to do in a REPL program.

Once we have a complete command, single or multi-line, we can execute it:

public void Execute(string s) {
  try {
    Submission<object> submission = engine.CompileSubmission<object>(s, session);
    object result = submission.Execute();
    bool hasValue;
    ITypeSymbol resultType = submission.Compilation.GetSubmissionResultType(out hasValue);

    // Print the results
    ...
  }
  catch (CompilationErrorException e) {
    Error(e.Diagnostics.Select(d => d.ToString()).ToArray());
  }
  catch (Exception e) {
    Error(e.ToString());
  }
}

Execution is a matter of creating a “submission,” which is a unit of work done by the engine against the session. There are helper methods that make this easier, but we care about the output details so that we can implement our REPL session.

Print

Printing the output depends on the type of a result we get back:

ObjectFormatter formatter =
new ObjectFormatter(maxLineLength: Console.BufferWidth, memberIndentation: " ");
...
Submission
<object> submission = engine.CompileSubmission<object>(s, session); object result = submission.Execute(); bool hasValue; ITypeSymbol resultType =
submission.Compilation.GetSubmissionResultType(out hasValue); // Print the results if (hasValue) { if (resultType != null && resultType.SpecialType == SpecialType.System_Void) { Console.WriteLine(formatter.VoidDisplayString); } else { Console.WriteLine(formatter.FormatObject(result)); } }

As part of the result output, we’re leaning on an instance of an “object formatter” which can trim things for us to the appropriate length and, if necessary, indent multi-line object output.

In the case that there’s an error, we grab the exception information and turn it red:

void Error(params string[] errors) {
  var oldColor = Console.ForegroundColor;
  Console.ForegroundColor = ConsoleColor.Red;
  WriteLine(errors);
  Console.ForegroundColor = oldColor;
}
public void Write(params object[] objects) {
  foreach (var o in objects) { Console.Write(o.ToString()); }
}

void WriteLine(params object[] objects) {
  Write(objects);
  Write("\r\n");
}

replerror

Loop

And then we do it all over again until the program is stopped with the #exit command (Ctrl+Z, Enter works, too).

Where Are We?

Executing lines of C# code, the hardest part of building a C# REPL, has become incredibly easy with Roslyn. The engine does the parsing, the session keeps the context and the submission gives you extra information about the results. To learn more about scripting in Roslyn, I recommend the following resources:

Now I’m off to add Intellisense support. Wish me luck!

4 comments




Telerik: Best tech support response ever

I was playing around with the Telerik WPF controls the other day and I ran into an “issue.” It wasn’t a bug, just a bet peeve of mine, so knowing that two friends of mine, Stephen Forte and Doug Seven, both work at Telerik, I thought I’d report it. I created an account on their support web site and dropped in the following message:

From: Chris
Date: 11/17/2011 10:59:38 AM

when I'm choosing setup options in the Telerik installer, I can select options by clicking on the little, tiny box but I cannot select options by clicking on the wide, giant checkbox label. I'd really love to be able to do the latter as well as the former. thanks!

Within 24 hours, I got the best developer tech support response I’ve gotten in 30 years in this industry (damn, I’m old):

From: Telerik Admin
Date: 11/18/2011 8:09:42 AM

Hi Chris,
A very valid point indeed, thanks for sharing your opinion!
The thing is a bit tricky in terms of UX actually and I'd love your input here. Let me add some details:
The idea is that the click on the label is used for highlighting the item (thus change the displayed images) and the click on the checkbox is used for checking it.
Now, there are three approaches (different than the current one) of which I like none (maybe prefer the third actually):

1. The label click both highlights and checks/unchecks the checkbox. I don't like this one for two reasons: 1) if Telerik've set an item to be checked by default, we don't want the customer to uncheck it mistakenly and 2) if the item is unchecked by default, the customer might just want the original stuff and he'd need a second click to uncheck it back.

2. Use double-click on the label to check/uncheck the checkbox. Don't like it for it's not intuitive and noone would use it. As an example, the Windows Platform Installer has such a feature and we discovered it a year after its initial release - when we started checking it deeper.

3. Only check/uncheck a checkbox on label click if the item has already been highlighted. The drawback of this approach is that you would need two clicks to have the item state changed the first time you're on it. But still, this one seems kinda reasonable.

How do you find these?
Thanks,
Erjan Gavalji
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

I have since learned that the Telerik developers support their own software and the benefits are obvious:

Erjan from Telerik – you’re my new hero. Thanks for answering my question so thoroughly. I have confidence that you’ll take my initial feedback and my reply to this email (show selection when you click on the checkbox label like the VS2010 installer does) and make the product even better.

It’s no wonder Telerik is an award winning software vendor. You have to love a company that’s willing to be open with their developers.

Update: as of a few days later, a new installer was posted that included my fix suggestion. Wow!

3 comments




Mary Sells, 1921-2011, Rest In Peace

Mary Hohnke Sells died on a Monday afternoon on the last day of February, 2010 in her home in Fargo, ND. She had just turned 89 years old on the 18th of February. She passed away peacefully in her sleep during an afternoon nap, having been tucked in by her daughter-in-law earlier that day. She’s survived by her son J. Michael Sells, her daughter-in-law Charlene Schreiber, her grandson Chris Sells and granddaughter-in-law Melissa Plummer and her two teenaged grandsons, John Michael Sells and Thomsen Frederick Sells. She was the last of four siblings; John, Shirley and Jim have all gone ahead of her to prepare the way.

Mary died a much beloved mother, grandmother and great grandmother as well as a dear friend to most everyone she met. She was generous of spirit, baking and cooking for her friends and family almost right up until the day she died, making sure her loved ones stayed plump in her love. She was talented in the kitchen, keeping her family recipes close to her heart for only those most special in her life. She was also a mischievous soul, taking advantage of her quick mind and her family’s sympathy for her ailments in later years to cheat outrageously at games of all kinds.

Mary was born in 1921, making her a child of the Great Depression. She graduated from Fargo’s Central High School in 1940, after which she pursued a course of study in Radiology Technology. She attained her national certification in 1946 and held it for 60 years. She married her late husband John Dickenson Sells in 1946, being secretly thrilled but outwardly scandalized when he insisted on public displays of dancing and other such tom-foolery. John worked for the Northern Pacific Railway and Mary worked in multiple clinical locations as she moved with her husband to sites ranging from North Dakota to Washington state. Her first child, Mike, is 61 and a successful draftsman at a local civil engineering firm. Her second child, Gretchen, died when she was only 15 in 1969, taking some of the light from Mary’s eyes. Her husband John was soon to follow, dying in 1971 of complications following gall bladder surgery.

None of this stopped Mary from living her life, however, having gone to Seattle in 1978 to be closer to her sister Shirley and to follow her career, then moving back Fargo in 1983 to be with her son and grandson. Before her move to Seattle, Mary helped take care of her grandson during the summers when he would visit. She was a second mother to him, doting on him and spoiling him thoroughly his whole life with food and attention. Till the day she died, Chris was her “baby boy,” in spite of his age of 41 and his height of 6’5”.

Mary was a member of the Mecca Chapter of the Order of the Eastern Star and received a 50-year membership acknowledgement for her many years of service. She was a life-long member of St. Mark’s Lutheran Church, an active member in the Women of the Evangelical Lutheran Church in America and a church quilter for most of those years. Mary was also an active member of PLS and enjoyed those friendships immensely.

Later in life, when her sister Shirley was diagnosed with cancer, Mary and she, both in their 70s, made sure that Shirley’s “bucket list” was fulfilled, which included wine tours, roller coasters in Las Vegas and even, for Mary, an incident on a tipped raft in the Rouge River in Oregon. She lived a full, rich life on her own terms, never shy about what she wanted for herself and others, and always ready with advice, wanted or not.

Mary died in her own home while she still had the faculties to interact with the ones she loved, as she wanted. She will be deeply missed and felt daily in the hearts and minds of those she left behind.

6 comments




The Basics of EF Validation: IDataErrorInfo

When you’re adding or updating data in your database, you really want to make sure that the data being sent to the database is good and true. Often, that’s something that can be checked in the database itself. The first thing you’ll want to do is make sure that the database has validation constraints set on the columns, like nullability or max data sizes. If you’re going EF model-first, you can set these properties on the properties of your entities. If you’re not, you can set these properties in the database or get even fancier and write triggers that check the validity of the data. Finally, you can disable insert, update and delete altogether in favor of stored procedures, changing your EF mapping to generate calls to those instead. The nice thing about checks in the database is that no matter how the data gets there, whether it’s via your EF-based app or not, the checks happen.

However, if you’d like to also put checks into your EF code, perhaps because you’d like to avoid a round-trip to the database for bad data, you can do so in your EF-enabled language of choice, e.g. C#.

Imagine a very simple EDM to describes web advertisements:

image_thumb4

All properties on our entity type get a generated On<<PropertyName>>Changing and On<<PropertyName>>Changed method. If you want to check one property in isolation, it’s easy to provide an implementation of your partial method of choice, e.g.

namespace EdmTest {
  partial class Ad {
    partial void OnLinkChanging(string value) {
      if (!value.StartsWith("http://",
StringComparison.InvariantCultureIgnoreCase)) { throw new ArgumentOutOfRangeException("Link must start with 'http://'"); } }
} }
Here we’ve made sure that whenever we set the Link property, it must be of a certain format. If we were to violate that restriction, things go boom:

clip_image002

As MVC translates the form fields into values on the Ad object that is passed to the controller’s Create method, setting the Link property with a bad value triggers the exception:

// POST: /Ad/Create
[HttpPost]
public ActionResult Create(Ad ad) {...}

MVC catches the exception before the Create method is even called and the view shows the error message. Notice that the error message is not what we provided, however.

Further, sometimes there are problems on an object’s state that span more than one property. Unfortunately, because such a constraint can’t be checked on any single property change, we need to at least check it at the object level, not just at the property level.

For both of these issues, we have IDataErrorInfo.

IDataErrorInfo

The IDataErrorInfo interface was introduced back in the mists of time with .NET 1.x for use specifically with data binding in Windows Forms. I wouldn’t recommend that anyone invest in anything but maintenance on their WinForms apps, but ASP.NET, the Windows Presentation Foundation (WPF) and Silverlight all support IDataErrorInfo . Data binding is involved enough and GUI-framework-specific enough that you’ll need to read up on it in your favorite GUI-framework-specific book, but the IDataErrorInfo interface is exactly what we need even without data binding:

namespace System.ComponentModel {
  public interface IDataErrorInfo {
    string Error { get; }
    string this[string columnName] { get; }
  }
}

Notice that IDataErrorInfo exposes error descriptions at both the object and the property/column level. It’s easy to implement this standard interface on our example Ad class:

partial class Ad : IDataErrorInfo {
  public string Error {
    get {
      // Check the ad for errors
      if (string.IsNullOrEmpty(Title) && string.IsNullOrEmpty(ImagePath)) {
        return "Must set Title or ImagePath";
      }
      return null;
    }
  }




public string this[string columnName] {
get { // Check any specific property for errors switch (columnName) { case "Link": if (Link != null && !Link.StartsWith("http://",
StringComparison.InvariantCultureIgnoreCase)) { return "Link must start with 'http://'"; } break; } return null; } } }

Because each of the generated entity classes is partial, you can provide your own implementation to be merged with the generated implementation, in our case the IDataErrorInfo interface implementation. Now, when MVC hydrates an object that implements IDataErrorInfo, it’ll check to see if there are problems. To check, our controller provides the ModelState property, which itself provides the IsValid flag:

// POST: /Ad/Create
[HttpPost]
public ActionResult Create(Ad ad) {
  try {
    if (!ModelState.IsValid) { return View(); }
    ...
  }
  catch {
    return View();
  }
}

// POST: /Ad/Edit/
[HttpPost] public ActionResult Edit(Ad ad) { try { if (!ModelState.IsValid) { return View(); } ... } catch { return View(); } }

In addition to the IsValid flag, the ModelState provides a list of property name/error message pairs that show in the code that the view generator spits out when it’s creating forms, e.g.

...
<% using (Html.BeginForm()) {%>
<%: Html.ValidationSummary(true) %>
...
<%: Html.TextBoxFor(model => model.Link) %>
<%: Html.ValidationMessageFor(model => model.Link) %>
...

It’s in the ValidationSummary helper that shows object-level errors and the ValidationMessageFor helper that shows property-level errors:

clip_image004

clip_image006

There are other means of validation that you will want to investigate, like the validation attributes supported by MVC and SilverLight, but IDataErrorInfo is the one with the broadest reach. It’s also the one that’s simplest for you to check yourself if you’re not getting the automatic support you want from your GUI framework. For example, because the SaveChanges method on the context base class is virtual and because we’ve got the Object State Manager, we can check ourselves for object errors using IDataErrorInfo:

using System.Data.Objects;

namespace AdMan.Models {
  partial class sbdbEntities {
    public override int SaveChanges(SaveOptions options) {
      // Make sure we're detecting all changes. base.SaveChanges
      // does this, but that may be too late.
      DetectChanges();
// Get all the new and updated objects var objectsToValidate = ObjectStateManager. GetObjectStateEntries(EntityState.Added | EntityState.Modified). Select(e => e.Entity).OfType<IDataErrorInfo>();
// Check each object for errors foreach (var obj in objectsToValidate) { // Check each property foreach (var property in obj.GetType().GetProperties()) { var columnError = obj[property.Name]; if (columnError != null) { throw new Exception(columnError); } }
// Check each object var objectError = obj.Error; if (objectError != null) { throw new Exception(objectError); } }
// All clear return base.SaveChanges(options); } } }

Here we’re overriding the SaveChanges method we’ve been calling all this time to take advantage of the IDataErrorInfo interface. The first call to DetectChanges is to make sure we’ve gotten all the changes into the Object State Manager (only necessary if you’re using EF POCO classes). The call to the GetObjectStateEntries method on the ObjectStateManager class produces all of the added and modified objects, their state, what the old and new values are, etc. We pull off each one of the entities that implement IDataErrorInfo and call the methods to check for property and object-level errors. If we find one, we throw an exception, otherwise we let the call to SaveChanges through.

This code isn’t needed if you’re already using a GUI framework that supports IDataErrorInfo, but it’s still handy to know you can roll your own code into SaveChanges if you need to.

Where Are We?

IDataErrorInfo is the core of data validation support in GUI libraries since .NET 1.x and while there are simpler ways to do it for individual libraries, IDataErrorInfo works just fine with MVC and EF, two of the most popular GUI libraries we’ve got just now.

1 comment




2611 older posts       No newer posts

Powered By ASP.NET

Hosted by SecureWebs

Mensa

IEEE