Other

Microsoft vs. Apple - Differences in Tablet Philosophy

Microsoft and Apple have a long and tangled past. From most perspectives, the two would certainly be considered competitors, but when fitted with the right glasses (rose) one can also choose to see the two technology giants collaborating to add enjoyment, value, education, and information to the lives of billions. I used to teach high school and there were occasions when both companies made significant donations to classrooms to bring better education to my students.

But right now I want to talk about a fundamental difference in how each company appears to approach the tablet market.

There’s nothing special about a tablet. It’s just a form factor. Phones are this big… tablets are a bit bigger… desktop monitors a bit bigger still. They’re just screens. Sometimes they’re sideways and sometimes they’re upright. Sometimes they’re stationary and sometimes they’re on the move. Imagine for a minute where our children and their peers will find screens - in the kitchen, in the car, on the bus, on the train, and hopefully rolled up in their book bag. Remember… it’s just a screen.

Apple threw some words toward Microsoft recently saying that tablets and desktops are fundamentally different and that attempting to put the same OS on both devices would end up degrading the user’s experience. I suppose Apple is saying this precisely because they have a different OS their tablet than their desktop.

I see the Windows 8 strategy as relieving. It can be nothing but easier for devices to collaborate when they are running the same bits. I have Windows 8 on my TV, on my work PC, and on my tablet. We’re still in beta and already the experience is nothing short of delightful.

I look forward to the many more device form factors that are inevitably to come!

Giveaway - Visual Studio Windows Decals

I’m giving away one large (8.5” x 11”) Visual Studio 2012 logo window decal and one small “I heart VS2012” decal. I’m sure these will be all over the place soon, but you can be the first around if you’re the lucky winner.

To enter just follow me (@codefoster) on Twitter and retweet this tweet. I’ll randomly select a winner on June 7.

iPazzPort Giveaway

A what?! It’s an iPazzPort. I ordered one recently and I was sent two. Not a bad deal, but I really only need one, so I decided to give one away to one of my Twitter followers. It’s new in the box. Read on for details. First, what is it…

I have a media center PC. Actually, it’s just a PC that I hooked up to my 37” LCD TV and installed Windows 8 on. I like the start screen tiles on my tablet and my PC, but they’re awesome for a media PC too! I put all of my media related programs on the start screen and now it’s super easy to launch whatever I want.

The device…

Well, I had a little remote control for the PC, but it decided to quit working a few weeks ago, and my wife asked if I could find a good solution. I think I did!

I found and ordered this iPazzPort. On one side it’s a full Windows keyboard including the win key (which is important), arrow keys, and all of the symbols and function keys. Next to the keyboard are buttons to control a gyro mouse, so you can just swing the device around in the air to move your mouse. You can hit a key to switch mouse modes so that you can either hold it the long way or the short way (when you’re using the keyboard). Then if you flip the device over, it has a few basic television remote buttons that you can train with your real TV remote. Finally, there are buttons on the side that act as page up and down which comes in extremely handy for web browsing and such. It has a rechargeable battery, so you just plug it into your computers USB port every few days to charge it up.

The giveaway…

So I sent out a tweet. You can find it here. If you retweet that and follow me on Twitter then you’ll be entered to win. I’ll keep it open until Thursday, May 31. I’ll draw a winner at random on that day and announce them on this blog post and on Twitter by noon Pacific time. If you’re the lucky winner and you live in the United States, I’ll mail you the iPazzPort.

Get That WinRT Documentation Local

If you haven’t seen the modified help system in Visual Studio 11 then prepare to be impressed. Now when you go to the Help menu, you can choose Add and Remove Local Help Content. Upon doing so, you’ll be presented with a very helpful dialog box.

From here it is very easy to figure out how to choose which categories of help content you want to be installed locally and where it will be installed from.

I just installed all of the WinRT and JavaScript help content so now I can read it disconnected. Woohoo.

All About Scope

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.