Windows 8 Adventures: setting properties from the HTML

Yesterday I’ve started playing with the Windows 8 developer bits and I’ve decided to follow the JavaScript online docs. Windows 8 introduces lots of new things, but I’ve decided to start simple. It didn’t take long until I got into trouble though…One of the first controls that got me into trouble was the TimePicker control. The quick start docs are enough to start working with most of its features. And everything was fine, until I’ve tried running this code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Win8Tests</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script type="text/javascript" src="/WinJS/js/base.js">
</
script> <script type="text/javascript" src="/WinJS/js/ui.js">
</
script> <script type="text/javascript" src="/WinJS/js/binding.js">
</
script> <script type="text/javascript" src="/WinJS/js/controls.js">
</
script> <script type="text/javascript" src="/WinJS/js/res.js">
</
script> <script type="text/javascript" src="/WinJS/js/animations.js">
</
script> <script type="text/javascript" src="/WinJS/js/uicollections.js">
</
script> <script type="text/javascript" src="/WinJS/js/wwaapp.js">
</
script> <!-- Win8Tests references --> <link rel="stylesheet" href="/css/default.css" /> <script src="/js/default.js"></script> </head> <body> <div id="timer" data-win-options="{current: '12:15', disabled: true}" data-win-control="WinJS.UI.TimePicker"> </div> </body> </html>

Before talking about the problem, lets try to understand what’s going on here…

I’ve started by adding several (probably all?) of the client JavaScript libraries which will let me use the Win RT API from JavaScript (notice that I’ve included more libraries than needed for this small demo, but at least I know that all the required libraries have been included and I’m not missing any script reference). If you’ve just started looking at Windows 8 HTML code, then you’re probably wondering why we have all those data-XXX attributes applied to the div.

In the previous example, they’re used for transforming a simple div into a Windows 8 TimePicker control. You see, if you choose to build an Win RT app with HTML and JavaScript, you can reuse most (if not all!) of the traditional HTML controls. But there’s more: you can also use the new Windows 8 controls. One of the options for instantiating these controls is to apply the data-win-control attribute to a div and specify the type of control that should be created (in the previous example, we’ve used the WinJs.UI.TimePicker control). Notice that opting for this strategy means that you’ll need to call the process or the processAll method from your JavaScript code. I’ve decided to call the processAll method from the DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", function (e) {
    WinJS.UI.processAll();
});

Alternatively, you can instantiate a control from your JavaScript code, but we’ll leave that for a future post. Going back to our HTML code, it shouldn’t be surprising to discover that the data-win-options attribute is used for initializing the properties of the control from the HTML markup. In our example, I’m trying to disable the control and set the time to 12h15. The problem is that I was always getting the default 12h00 time (btw, if you don’t set any value, you’ll end up with the current time):

timepicker

hum…what’s going on here? Shouldn’t this work? According to the docs, string properties can be wrapped in ‘ ‘ and it should work without any glitches. Unfortunately, the problem was rather simple: it’s a limitation of the current build and “You can always use the standard American English in this release”. And yes, changing the way date, time and number are formatted (in the regional settings of the control panel) solved the problem. Anyways, I’m living in Madeira (still part of Portugal, I believe – sorry, local joke :)), so I really want to see my data formatted in Portuguese. So, how can I solve this problem without changing the locale? Well, one solution to the problem is to work with the Promise object that processAll returns. Here’s a modified version of the JavaScript I’ve used initially:

document.addEventListener("DOMContentLoaded", function (e) {
    WinJS.UI.processAll()
                .then(initializePicker, Error);
});
function initializePicker() {
    var picker = WinJS.UI.getControl(document.getElementById("timer"));
    picker.current = new Date(2012, 3, 1, 12, 15);
}

One of the interesting concepts of Win RT is that most operations that “take time” are asynchronous. processAll must go through all the DOM and initialize all the Windows 8 controls it finds. That’s why it’s an async operation and, like all asynchronous operations, it ends up returning a Promise object. After getting a Promise object, we can configure it to invoke a callback method when the encapsulated operation is done. In our case, we’re also passing an error function that should be invoked if the “encapsulated” operation generates an error (notice that we can still pass one additional function, that would be called for progress feedback). Our initializePicker function is rather simple: we’re getting a reference to the Windows 8 control (notice the WinJS.UI.getControl method) and creating a new Date object (with the correct time) that is used for initializing the TimePicker’s current property.

And that’s it for now. Stay tuned for more!

Advertisements

~ by Luis Abreu on January 3, 2012.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: