Adam Kinney – Design Developer

The WinJS Animation library provides some pre-scripted animation functions that allow you to easily reproduce the signature animations of Metro-style apps.  Since there is no “Animated Application” template (and I don’t think there should be).  I thought I’d share the first couple of steps needed to use the library in your own application.

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. In default.html, add an element to be animated.  I chose a header taking advantage of the provided classes of the theme CSS.

<h1 class="pageTitle win-title">First Animation</h1>

3. Next add a reference to the Animation library which is defined in the “animations.js” file under the ”winjs/js” folder.  Additionally if you open this file, you will find in the comments at the top that this library is dependent on the “base.js” file and the “ui.js” file.  The first file is already referenced but “ui.js” needs to be added.  Add the references to your default.html file, like the following:

<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>
<script src="/winjs/js/animations.js"></script>
<script src="/winjs/js/wwaapp.js"></script>

4. Switch over to default.js, and in the onmainwindowactivated method add the following code to locate the element and run the page enter animation.

var pageTitle = document.querySelector('.pageTitle');
WinJS.UI.Animation.enterPage(pageTitle);

Its important to notice the namespace is “Animation” and “Animations”.  One reason I was prompted to write this post is because the Windows 8 dev center example code erroneously uses “Animations”. Certinaly frustrating when you’re just getting started.

Run. Run the example and you should see after the app starts up, the page title slides into view with a short animation.

What about chaining a second animation after this first animation? Since animation functions return promises its very to do so.  Check it out.

5. Add another element below your first in default.html. Let’s use the fadeIn function this time, so set the opacity to “0″.

<h1 class="pageTitle win-title">First Animation</h1>
<p style="opacity:0">My hidden content</p>

6. Now go back to default.js and add a then call on enterPage. Inside define a function that locates the second element and calls fadeIn.

var pageTitle = document.querySelector('.pageTitle');
WinJS.UI.Animation.enterPage(pageTitle).then(
    function() {
        var p = document.querySelector('p');
        WinJS.UI.Animation.fadeIn(p);
    }
);

Run.  Now when you run the app, after the page title slides in, the paragraph below should fade in to view.

And that’s it to getting started! If you look at the WinJS.UI.Animation namespace you’ll find the other available scripted animations.

Looking through the “animations.js” file, I found it interesting to not that the available functions actually make a call to the Win.UI.executeTransition function, so if you’re looking to run some custom animations you can do that too.

I’m sure I’ll be posting more about the Animations library soon.  I’m not sure what everything does yet, but it sure is fun to poke around.

Please excuse the superfluous exclamation point in the title, this is not a true emergency.

Most JavaScript developers have moved on from debugging with the alert function, but sometimes the quick and very dirty function comes up as an old instinct. This instinct will be squashed if you attempt to use alert or its siblings, confirm or prompt, when beginning your Windows 8/WinJS education.  A call to one of these functions will cause the Visual Studio debugger to break and throw an undefined exception.

Thankfully there is a JavaScript console available in Visual Studio so you can simply call console.log(). The following steps will take you that far:

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. Add an element to your default.html page providing something to click on. You could go with boring old text, but I went for a leaf image (pictured above, download) and i gave it an ID of “leafImage”.

3. Next add an event handler in the onmainwindowactivated function in default.js. You can remove the ActivationKind check as it doesn’t matter for this sample.  Now when adding the eventHandler I skipped over ‘click’ and instead attached to ‘MSPointerDown’ fully embracing the new Input system of Windows 8:

leafImage.addEventListener('MSPointerDown', function(){
    //alert('leaf pointerdowned');
    console.log('leaf pointerdowned');
});

Run. Now if you run this code, you will see your text or image and once you click it with a mouse or tap it with your finger the event will fire. Alt-tabbing over to VS you should see the text logged in your JavaScript Console.

This does mean you need to alt-tab to see the information, but what about showing the info in the app?  You could use the other method of a debug div element sitting in your HTML that you can write to.  That still works perfectly fine.

Another option available is the MessageDialog, especially if this info is not just debug info but rather some information you want to share with user.  Possibly even allowing the user to make a choice or give their opinion. To use the Message Dialog you can use the following code:

leafImage.addEventListener('MSPointerDown', function(){
    //alert('leaf pointerdowned');
    console.log('leaf pointerdowned');

    var md = new Windows.UI.Popups.MessageDialog('Ready for Monday?');
    var result, resultOptions = ['Oh yeah!', 'Nooooo!'];
    var cmd;

    for(var i = 0; i < resultOptions.length; i++) {
        cmd = new Windows.UI.Popups.UICommand();
        cmd.label = resultOptions[i];
        cmd.invoked = function(c) {
            result = c.label;
        }
        md.commands.append(cmd);
    }

    md.showAsync().then(function (c) {
        console.log('answer: ' + result);
    });
});

And now let’s break it down.

4. (Line 5) Notice the MessageDialog is from the Windows namespace and not WinJS. This is an example of the native WinRT-integrated-frameworks-in-action.

5. (Line 10-15) a UICommand is added for each child of the resultOptions array.  Adding the label in invoked handler can also be set in the constructor.

6. (Line 18) Notice the use of the promise object with the then function.  This is how asynchronous methods are handled in WinJS, which is already an existing popular JS pattern in libraries like jQuery for example.

7. (Line 19) For some reason the event arg c is always equal to the last UICommand added to the collection, resulting in the need for the separate result variable.  Based on the documentation I’m not sure if this is an error, but it seems like it should return the selected UICommand instead.

Run. Running the app and clicking the image I found two different results. The left image is run from VS and shows the MessageDialog with a black background.  The right image is the app run in Interactive Mode in Blend showing the MessageDialog with a green (and I believe the correct) background.

Additionally while running the app in Blend I noticed that there was no JavaScript console there.  Let’s hope one is added before Blend 5 ships, as that will make debugging across the tools simpler.

Overall it is just a “Developer Preview”, but so far exploring Windows 8 has been a lot of fun. Expect more posts in the future.  This stuff is not well documented and I’m happy to share and get feedback on how things currently work.