To everyone who joined @mjconnection and I (@codefoster) at the Windows 8 App Accelerator the last 3 days, thanks for bringing all the energy, questions, and app ideas! I know I had a great time.

I promised everyone that I would provide a list of resources that we brought up in class. If you think of any more that I missed, feel free to leave it in a comment and I’ll merge it into this list.

Keep me posted on the progress of your apps!

Metro Tile Sources

The Noun Project - this is a great collection of icons that represent things… you know… nouns

Icon Finder - find icons on the web and get either the PNG or the ICO file

Icons8.com - a cache of free glyphs that work well with Windows 8 Metro style tiles and art

The XAML Project - more

SyncFusion Metro Studio - more

http://raphaeljs.com/icons/ (broken)

Visual Studio Add-Ins

Debugger Canvas - use this to visualize your code and your call stack while you’re debugging. It even supports visualization of multi-threaded stacks and recursive functions.

Bug Aid - some more great help visualizing C# entities while you’re debugging

ReSharper 7 EAP - perhaps the biggest source of developer joy you can ask for

Art Tools

Inkscape.com - this is an awesome vector based graphics tool. If you’re still using a bitmap based image editing tool for generating app art, you should stop in your tracks and learn to use vector.

Kuler - a color palette picker.

ColourLovers.com - again

colorschemedesigner.com - again

App Stats

None of these support Windows 8 yet of course, but they were mentioned in class so I thought I should include them…

App Annie

Distimo

Other

txt2re.com

Abstract

It may not be clear immediately how variable scopes work when you’re creating a Windows 8 app using HTML and JavaScript. Even if you’re very proficient at writing JavaScript code, you might not know where you’re supposed to write it! Let me take a stab at clarifying…

When you first look at a JavaScript page in a Windows 8 project you see something like this…

(function (){
    "use strict";

    function ready(element, options){ }

    function updateLayout(element, viewState){ }

    var myLocalFunction = function(){
        log('myLocalFunction called');
    }

    WinJS.UI.Pages.define("/html/page1.html", {
        ready: ready,
        updateLayout: updateLayout
    });
})();

…and what you’re seeing is kind of a cool little trick that’s not new to a seasoned JS scripter. Notice that what you have is a function wrapped in parenthesis and followed by what I like to affectionately call a football - that’s the empty parenthesis [()] that we developers hardly notice anymore. To make it a little bit more clear…

(function () { ... })();

So it’s a function that is defined AND called. But why? I’ll tell you.

It’s because when you declare things in a function, they are scoped to the function. They are visible and available within the function but not beyond. The code you write in this function is not available globally, and that’s a good thing. Windows 8 apps may get pretty big and namespace conflicts would be likely. If you declare the variable foo in more than one place but each globally, then they will start conflicting and causing some runtime errors that would be very difficult to debug.

So where should we declare our variables so that we have access to data but only in the scope we need? I’m glad you asked. Let’s look at the scopes available to us and what they might be used for.

Global Scope

Variables are said to be in global scope when they are defined outside of any function definition. Unlike C++, JavaScript does not support simple block quoting (blocks of code are surrounded by mustaches { }). This code snippet should make this clear…

(function () {
    "use strict";

    function ready(element, options){ }

    function updateLayout(element, viewState){ }

    WinJS.UI.Pages.define("/html/junk.html", {
        ready: ready,
        updateLayout: updateLayout
    });

    //this is local scope
    var myLocalVariable = "value";
})();

//this is global scope
var myGlobalVariable = "value"; 

Some developers would argue that global scope should never be used, but I think there’s a time and place for almost anything and that goes for global scope. At the end of the day, you as the developer are responsible for making sure that your app works and that defects are not introduced because of globally scoped variables.

Page Scope

I’m using the term page scope to refer to the variables that are defined in the wrapper function that you’ll find on the Windows 8 code behind JavaScript file – the myPage.js file behind your myPage.html.

The interesting thing to note is that these page scope variables are not even available on the HTML page itself. If you define a variable in your JS file and then attempt to access it from a script block on your HTML file, it will be “undefined”. Remember, that what happens in a function… stays in a function.

So, the page scope function is essentially all of the code that you want to run when your page is loaded, and it includes some cool tricks to allow you to specify functions that will run when your page is “ready” or when the layout is changed (when Joe User turns his tablet sideways).

So what if you want to write a function and then you want to call that function from your page (say when a button is clicked)? That’s where you use namespace scope - another term I’ll take ownership of – patent pending.

Namespace Scope

If you’ve determined that you want to be a good citizen and avoid global scope, but you want to actually use some of the brilliant code you’ve written in your page’s JS file, then defining your code in a WinJS namespace is a great way to do it.

Check out the following definition…

WinJS.Namespace.define("ordersPage", {
    calculateTotal: function () {
        //implementation
    }
});

Let me unpack that for you. Namespaces don’t exist in JavaScript proper, but we’re using WinJS here. Remember, WinJS is just a JavaScript library that Microsoft wrote that plays very well with Windows 8. After you use the above code to define a namespace, your namespace is available for you globally. So whether it be from your HTML page, from your JS file, from another HTML page, or from anywhere in your app really, you’ll be able to call your function like this…

ordersPage.calculateTotal()

Now we’re cooking with Crisco! Now we are good citizens and we have the ability to architect our application in a way that is consistent and sensible and logical.

Conclusion

Now you know where your code should go when you’re writing a Windows 8 app to make sure it’s available where you need it and no further.

Make sure you follow me on Twitter (@codefoster) if you want more tips and tricks with Windows 8 as well as other musings that at least I would consider pertinent and helpful. Happy coding.

I’m really not sure how I missed this little trick all these years. Sometimes I spend significant bits of time doing something the hard way before I just take 20 minutes out of my day to ask or research the easy way.

I’ve known about .ics internet calendars for a long time. I’ve clicked on many. I have chosen to open them and that’s been fine, but only today I learned that I can add a reference to an .ics file in Outlook and from that point forward have a dynamic link to that internet calendar instead of a one-shot static view of those events.

I used this trick to bring all of my Meetup groups into my Outlook as a calendar that I can overlay with my Exchange and Live calendars. Now I’m sittin’ pretty.

Here are the steps…

1. Get the URL to your online .ics file on your clipboard
2. In Outlook right click on Other Calendars and Add Calendar
3. Choose From Internet…
4. Now just paste in your URL and the rest should be self-explanatory

Ready, go!

I’m really not sure how I missed this little trick all these years. Sometimes I spend significant bits of time doing something the hard way before I just take 20 minutes out of my day to ask or research the easy way.

I’ve known about .ics internet calendards for a long time. I’ve clicked on many. I have chosen to open them and that’s been fine, but only today I learned that I can add a reference to an .ics file in Outlook and from that point forward have a dynamic link to that internet calendar instead of a one-shot static view of those events.

I used this trick to bring all of my Meetup groups into my Outlook as a calendar that I can overlay with my Exchange and Live calendars. Now I’m sittin’ pretty.

Here are the steps…

1. Get the URL to your online .ics file on your clipboard
2. In Outlook right click on Other Calendards and Add Calendar
3. Choose From Internet…
4. Now just paste in your URL and the rest should be self-explanitory

Ready, go!

In antiquity, I selected DOM objects on my HTML pages by using the document.getElementById method, and I always hated it. I hated it because it was one of my very few options for find the element I wanted and it was so narrow. So it was a great breakthrough to me to see how it worked in the jQuery library. CSS selectors are an awesome way to specify exactly which elements I want whether it’s one or many.

So when I saw my first Windows 8 HTML/JS example and it was using getElementById I panicked some. I didn’t want to go back in time! My first thought was “I don’t want to use this.” My second thought was “Actually I do, but can I use jQuery?” (the answer to which is yes). And finally, after some research, I realized that even without the aid of jQuery we’re in good shape thanks to some functions built into WinJS. There are a few though so I want to just enumerate what we’ve got.

The JavaScript Way

Of course, you can still use document.getElementById, but that always makes me feel like I’m regressing. :)

So first, we have the JavaScript functions querySelector and querySelectorAll. These are part of the W3C recommendations, and show up as part of the JavaScript language. You can read extensively about the W3C recommendation here.

querySelector is the single and querySelectorAll is the plural. If you know that you want a single element (even if there are multiple that match your query) then use the former, and if you know your query will be returning more than one then use the latter.

One thing to note about these JS functions is that they exist both on the document object as well as on the element object. So, we can query the document to find all matching results in the entire document, or we can just query a single element to find all objects under it. Keep in mind also, that you can enter multiple CSS selectors in the query that you pass in. Just separate them with commas and the query will be performed with a logical “or” operation to give you the union of all of your queries.

var myDiv = document.querySelector('#myDiv'); var allDivs = document.querySelectorAll('div');

The result of the singular querySelector function is a DOM element. The result of the plural querySelectorAll function is a staticNodeList.

The WinJS Way

Next, we have the methods that WinJS provides for selecting elements. They are in the WinJS.Utilities namespace and they are id() and query(). These WinJS functions actually just wrap the formerly mentioned querySelector and querySelectorAll functions, so keep this in mind. You might ask why we would use them if they are just wrappers for the JS functions. The answer is that their return result is a QueryCollection object that has all sorts of friendly functions hanging off making certain operations on a collection of elements quite easy.

The id and query functions work mostly as you might expect. id selects an element by its id, but you do not specify a hash symbol on the query. The query function, then, takes a query that you’re expecting to return multiple elements and the query syntax for it is the same syntax that querySelectorAll uses, so anything that works in one works in the other.

var u = WinJS.Utilities; var myDiv = u.id('myDiv'); var allDivs = u.query('div');

The result in both cases here is a QueryCollection.

The jQueryWay

Finally, if you want to bring a jQuery library into your project then the terse $('<query>') selector syntax will also do just fine.

var myDiv = $('#myDiv'); var allDivs = $('div')

The result of these jQuery function calls is (like practically all jQuery functions) another jQuery object. If you want the actual DOM element for the singular call, use the get function, and if you want an array of all of the DOM elements for the plural call, use the toArray function.

Conclusion

So you’ve seen that there are, as always, many ways to skin a cat. The deciding factors regarding which to use in my opinion are:

• What result type works best for you? Do you want an actual DOM element (or list of DOM elements) or would a QueryCollection or jQuery object give you more functionality?
• Is your app exclusively on the Windows 8 client platform? If so then you’re certainly going to want a dependency on the WinJS library and thus the WinJS method might be your best bet.
• Have you already decided to take a dependency on the jQuery library? Are you already really familiar with using jQuery?

It’s good to have choices. Happy selecting.

Is there anything better than joining a bunch of other people that like writing software to talk about writing software? Yes. There’s beer and sandwiches for one, and for two there’s conjoining on the subject of Windows 8 which is an exciting new software development opportunity.

Alex Golesh (@DevCorner) is a Microsoft MVP and did a smash bang job of presenting on even some of the less beginner and more intermediate parts of Windows 8 development (which is new to us all by the way). Alex’s experience includes a ton of XAML and C# development and he was able to bring all of that into Windows 8.

Next month at vNext (April 10). My colleague, MJ (@mjconnection), and I are going to continue the discussion with more of a HTML5/CSS3/JavaScript view of Windows 8 development. If you’re in the area, you should totally stop by.

When you’re developing a JavaScript app for Windows 8, you need to know about the local context and the web context, and this table (from here) does a great job of summing up the technical differences between the two.

As you can see, some of the things we as web developers have come to accept as restricted (I’m thinking of windows.close and cross-domain XHR requests) are allowed in the local context.

Other things like the ability to reference external script is not allowed from the local context. It’s easy, though, to just import your library of choice into your project and then reference it internally.

Take note of the difference in behavior between how WinJS behaves when it’s local versus when it’s in the web context (see same link as above).

For more information on the differences between the local and web contexts in Windows 8, see this MSDN article.

Anticipation. It’s good to wait. It’s good to hold on and hold out for what’s coming down the road.

I’m talking now about the Windows 8 Consumer Preview that is released tomorrow February 29, 2012. Along with Visual Studio 11, this new version of Windows is entirely exciting. If you weren’t at the //build conference and haven’t seen the keynote by Steven Sinofsky, watch it now. If you were there or you’ve already watched it online, then watch it again just like you watch your favorite movie again just before the sequel is released in the theater.

Windows 8 is a no-brainer in my book. It provides developer joy as well as user joy. It’s compatible with a plethora of computers already in the hands of computers as well as new and exciting devices on the shelf at your local tech store. It runs everything that ran before. It looks great and has a robust design language ready to support extend and launch your own personal or corporate brand. It is smaller in memory and CPU footprint and it appears to be entirely fast and fluid.

In short, it’s not a lateral step to move to a new device with Windows 8. It’s not a new device with a new OS and a new login. It’s an extension. A leap forward. It’s just plain exciting.

So let’s get excited, and let’s start building great apps for Windows 8! Let me know if you need any resources for getting started or for getting integrated into your local developer community for education and support in the process. Follow me on Twitter at @codefoster or email me at jeremy dot foster at microsoft dot com.

In case you didn’t know (as I didn’t until moments ago), if you throw a PropertyChanged event like this:

PropertyChanged(this, new PropertyChangedEventArgs(""));

…it means “all of my properties have changed”.

The empty string (or Nothing in VB) is responsible for this effect. I have added a Refresh method to my BaseViewModel that does this. Now a simple call to MyViewModel.Refresh() will tell my WP7 view that all of its underlying fields have been updated. This is going to come in quite handy for certain cases. I hope this helps you as much as it has me.

When it comes time to tackle a new (to you) technology, how do you begin? Do you read others’ experiences from blogs? Wait for screencast instructions from a site like Pluralsight?

There are a lot of ways to learn, but I’m reminded of the value of just going back to the spec. Sometimes the author of the blog article you’re reading is in your same boat trying to learn, and going directly to the spec, you might get to bypass a lot of wasted trial and error cycles.

I’ve spent a lot of time in the HTML5 spec the last while, and somewhat recently also the OData spec (which you can find at odata.org). I’ve read a lot of blogs and seen a lot of videos on the subject of OData, but when I finally found my way to the actual spec, I was pleased to find a very concise and obviously thorough coverage of the topic.

One of the little things I learned which has big implications for me is the ability to specify a query option called $inlinecount. With this query option specified, an OData query will bring back a count of all entities in the queried collection (applied after any filters) even if some limiting options such as paging or $top are included.

Take, for example, the following query…

http://services.odata.org/OData/OData.svc/Products?$inlinecount=allpages&$top=10&$filter=Price gt 200

The query should find the first 10 products whose price is greater than 200. If you’re retrieving these products to be displayed in a web page, however, and you need to worry about paging and you need to tell the pager how many pages to render, you’re going to need to know the **total **number of products that with a price greater than 200 even though this query only asks for the top 10 (don’t use $top for your paging, BTW, there’s a better way). The inclusion of inlinecount, in this query dictates the inclusion of the following element in the response…

<m:count>24</m:count>

With this additional information about the submitted query’s results, your pager now knows to render 3 pages (of 10).

Notice that the Price gt 200 filter did get applied before the result for inlinecount was calculated, so we did not receive back an inline count of all product entities.

This is certainly just a shallow glance at the topic. If you want more in-depth information about OData or about the inlinecount query option, you should go straight to the spec :)