As promised, I’m back to tell you about more of the important work that we’ve done since //build/. In part 1 of this post, I covered DirectX and XAML integration, improvements to the Blend designers, CSS independent animations, and more. But I’m sure you’re eager to dig into more of what’s new, so let’s jump right in.

Tile and toast notifications

Tiles and toasts are key parts of our Metro style design principles. They allow you to see important info at a glance, even when your app isn’t running. We received a lot of feedback from you about the tile and toast notifications development experience – a large portion of that feedback was centered on creating and updating tiles. In response to this we improved the tile experience in 3 ways:

  1. We introduced polling APIs to update tiles. You can use the new periodic tile notification API to tell Windows to poll your cloud service for tile content specific to your app. This is the easiest way to keep your app’s tile alive with activity using content from the web. The JavaScript snippet here shows how to start polling for your app’s tile: 

    // update the tile with a poll URL
    var polledUri = new Windows.Foundation.Uri("http://www.fabrikam.com/tile.xml");
    var recurrence = Windows.UI.Notifications.PeriodicUpdateRecurrence.halfHour;
    var tileUpdater = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication();
    tileUpdater.startPeriodicUpdate(polledUri, recurrence);

    The content returned from your web service must conform to the tile XML schema. Note that tile badges can also be updated via polling.

    For more info on updating your tile check out these links on the Dev Center:
  2. We made it easier to create beautiful tile and toast content. Another piece of feedback we received was that working with XML through the Notification APIs was unnecessarily complex. To make it easier to work with tile and toast notifications we introduced a notification template object model, which is a library that ships as part of the Windows SDK. The library adds constructors (and IntelliSense) for tile and toast notification templates. Here’s a quick example in JavaScript: 

    // create the wide template
    var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWideText03();
    tileContent.textHeadingWrap.text = "Hello world! My very own tile notification";

    // create the square template and attach it to the wide template
    var squareTileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquareText04();
    squareTileContent.textBodyWrap.text = "Hello world!";
    tileContent.squareContent = squareTileContent;

    // send the notification
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());

    As an added bonus, this object model is structured so you can use it in your server-side code too.

    To see the new object model in use and grab it for your own project, check out the App tiles and badges sample. Look for the NotificationsExtensions project in the sample.
  3. We updated the catalog of available tile templates and added the ability to update both the wide and square representations of the tile. Now, you can update both the smaller and larger view of your tile using text and pictures. The example we just showed you demonstrates the use of one of our new tile templates (TileSquareText04). You can see the full list of available templates in the article Choosing a tile template.

JavaScript tools

Since //build/, we heard a lot of developer feedback about the experience of building a Metro style app with JavaScript. For Windows 8, JavaScript is a first class citizen on the platform and we want to make sure it is a first class citizen in our tooling too. With the Consumer Preview release, if you create a new Metro style app using HTML, CSS, and JavaScript, you will notice many improvements throughout Visual Studio and the Windows Library for JavaScript (WinJS). For example, the templates for JavaScript-based Metro style apps are more readable and use the new APIs.

In addition to this, we improved both the performance and accuracy of JavaScript IntelliSense in VS:

  • Improved results in the completion lists, goto definition, and parameters.
  • Improved IntelliSense accuracy through a more complete representation of the DOM, so you get statement completion against the DOM.
  • The JavaScript editor now supports the ”smart” indent style, which more intelligently chooses the caret location on new lines based on the surrounding context.
  • Finally, we improved JavaScript IntelliSense extensibility in VS, making it easier to augment IntelliSense for any JavaScript library, such as jQuery.

We greatly improved our JavaScript diagnostic tools and debugging experience too:

  • With the styles window in the DOM explorer you can copy and add new rules and rule properties to test the effects of style modifications on running apps. You can also link to the originating CSS file directly from the rule.
  • In addition, the DOM explorer has a new tab (called Events) that enables you to find the source location of event handlers associated with DOM elements.
  • VS now visualizes scopes, prototypes, function grouping, and exceptions in the watches and local windows.
  • We added support for first chance exceptions for JavaScript.

C++ data binding

In the world of connected apps, data binding is essential, and we heard we needed to make it easier in C++. To implement it, you had to write a lot of interfaces and that led to a lot of boilerplate code for C++/XAML. In the Consumer Preview, we addressed that and now all you have to do is add a [Windows::UI::Xaml::Data::Bindable] attribute to the class that the data needs to be bound to. The XAML looks exactly the same. Here is an example that shows the change:

C++ Header

namespace SimpleBlogReader
{
   //To be bindable, a class must be defined within a namespace.
   [Windows::UI::Xaml::Data::Bindable]
   public ref class FeedItem sealed
   {
   public:
      FeedItem(void){}
      ~FeedItem(void){}
      property Platform::String^ Title;
      property Platform::String^ Author;
      property Platform::String^ Content;
      property Windows::Foundation::DateTime PubDate; 
   };
}

XAML

<TextBlock x:Name="TitleText" Text="{Binding Path=Title}" 
           VerticalAlignment="Center" FontSize="48" Margin="56,0,0,0"/>
   

HTML/JavaScript controls

In the Consumer Preview, we simplified the common controls that almost all apps need to use. These controls are a core part of Metro style design. They give your app consistency with the rest of the system, and allow users to seamlessly switch between their apps and Windows. The HTML/JS ListView and AppBar are two controls that we made major improvements to.

ListView control

Based on feedback from the Developer Preview, we enhanced the WinJS ListView control to make item loading and templating easier and more flexible.

  1. We created a simple and powerful datasource called Binding.List, and designed it specifically for in-memory data.

    Binding.List exposes an API that almost exactly mirrors the JavaScript Array object, except that you need to call getAt and setAt to read and write items, because JavaScript doesn’t support overriding operators. Binding.List makes it really easy to work with in memory data, for example:     
    var data = [10, 20, 12, 7];
    var ds = new WinJS.Binding.List(data);
    ds.push(3);
    ds.splice(2, 1);

    var sorted = ds.createSorted(function (a, b) { return (a - b) });
    ds.push("1");
    console.log("original: " + ds.join(",") + "; sorted: " + sorted.join(","));

    This outputs: “original: 10,20,7,3,1; sorted: 1,3,7,10,20”

  2. We extended the ListView to support templating functions with multi-stage capabilities. Now you can write a templating function that presents item data in stages—the quickest data pieces (such as text) show instantly, and slower data (such as images) are presented when they become available. These enhancements allow for much smoother data loading for users of the apps you write.

AppBar control

After //build/, we got lots of feedback that AppBars were a challenge to work with. So, we took your feedback and reimagined the HTML AppBar so that it would be easier for you to use. The outcome is a more straightforward development experience. Take a look at this sample code to see what I’m talking about:

<div class="win-left">
    <button onclick="doClickPlay" class="win-command" role=’MenuItem’>
            <span class="win-commandicon win-large">&#xE112;</span>
            <span class="win-label">Play</span>                   
    </button>
</div>
<div class="win-right">
    <button onclick="doClickAdd" class="win-command" role=’MenuItem’>
            <span class="win-commandicon win-large">&#xE112;</span>
            <span class="win-label">Add</span>                   
    </button>
</div>
        

HTML AppBar buttons in Consumer Preview:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
play',label:'Play',icon:'play',onclick:doClickPlay,section:'selection',tooltip: 'Play'}">
/button>

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
id:'add',label:'Add',icon:'add',onclick:doClickAdd,tooltip: 'Add'}">
/button>

As you can see, you now create the buttons with a set of options rather than HTML elements. The creation of the buttons, their styles, icons, text, etc. are handled on your behalf. The AppBar scales properly when in snapped and portrait modes, automatically relaying out your buttons in the correct positions.

We made many more improvements to the HTML/CSS/JS AppBar than I have time to talk about here. Check out the Dev Center for full AppBar sample code and documentation.

Multi-language interoperability tooling

At //build/ we previewed the capability to create hybrid Metro style apps using a combination of languages, including JavaScript, C++, C#, and Visual Basic. With this release, you can directly build these types of apps in Visual Studio, for example, a JavaScript app that talks to a C# class library, or a C# app that consumes a C++ component. This way you can take advantage of the unique strengths of each language, reuse existing assets, and have team members with diverse skill sets contribute to the same project.

JavaScript 

var customers = new CSClassLib.CustomerRepository();
var filtered = customers.getCustomersByState("WA");

C#

public IEnumerable<Customer> GetCustomersByState(string state)
{
    return from c in this.Customers
           where c.State == state
           select c;
}

If you’re a C++ developer, you’ll see some of the most notable improvements, particularly around DirectX and XAML. DirectX is great for direct pixel manipulation and XAML is great for creating user interactions such as menus and heads-up displays. Like I described in Part 1 of this post, XAML apps can now use DX. That feature would not be complete without great tooling support. In response to your feedback, the Visual Studio beta now includes interop support between C++/XAML and DirectX.

Wrap up

Over these last two posts I’ve shown you a sampling of the changes you will see in the Consumer Preview. There are many more tweaks, improvements, and new features that make developing Metro style apps on Windows 8 an even better experience than it was on the Developer Preview.

For more info on all of these improvements, check out our revamped Dev Center on MSDN. If you’ve followed any of the links I posted for the highlighted topics you probably already noticed that the Dev Center is better than ever.

Here is what we’ve done to improve our documentation:

  • Completed the reference section for Windows Runtime (all APIs now have descriptions)
  • Added 30+ samples, in multiple supported languages
  • Improved documentation for samples
  • Increased the amount of WinRT pages that include code snippets
  • Significantly improved our UX guidance, including the addition of redlines, wireframes, and other reusable design assets
  • Improved navigation and increased search relevance
  • Added a new sidebar element that provides links to key APIs and a summary statement for conceptual topics.
  • Made the Getting Started and Quickstart tutorials more helpful in all supported languages

For a more detailed look at what’s coming in the tools story, check out Jason Zander’s blog entry. And there are a number of new language features in C# and Visual Basic for writing Metro style apps.

So if you haven’t already done so, download the Consumer Preview, install the new Visual Studio beta, grab some samples/docs from the Dev Center, and start building awesome apps. We’ll keep the blog posts coming to help make your development experience even easier.

-- Jake Sabulsky, Program Manager, Windows

This post was a group effort, thanks to Kevin Woley, Jonathan Aneja, Jonathan Garrigues, Jon Gordner, Ryan Demopoulos, Keith Boyd, and Ian LeGrow.