Sat, Dec 17 2005 1:03 AM
Erwyn van der Meer
Cleaning up the Windows Media Center SDK JavaScript files
Since a couple of weeks I am very busy working on a new project. We are building a hosted HTML application for Windows Media Center Edition 2005.
One of the tricky aspects is that one of the requirements is that the site must be able to work with minimal changes in other interactive TV devices such as set-top boxes. We chose the route of strict separation of content and layout by authoring the pages in XHTML 1.0 Strict and CSS 2.1. On top of that we use JavaScript for things like focusing and selecting elements with a remote control.
The examples provided in the Media Center SDK use non-standard HTML coding like custom attributes that are not in the (X)HTML DTDs. For example, the SDK JavaScripts look for the MCFocusable attribute on HTML elements as an indication that the element can receive the focus. They also use .htc files. A much cleaner approach is to use CSS classes on elements to indicate behavior and to attach appropriate events like onmouseover using JavaScript after the page has been loaded. We use class=”bh_focusable” on elements to indicate that they can receive the focus. To be able to do this, we had to rewrite the JavaScript “engine” provided in the Media Center SDK.
One of the nasty things with the Media Center SDK JavaScripts is that they rely on the Quirks Mode rendering in Internet Explorer 6.0. We noticed that some things break when we put the XHTML 1.0 Strict DOCTYPE declaration on top of our XHTML files:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This puts IE 6.0 in (Almost) Standards Mode. We are still working on resolving some of these issues.
One issue we solved is the scaling behavior of the site when the site is not running full screen in Windows Media Center. The application can be running in a window that can be scaled by the user. You author a page as if the resolution is always 1024*768 pixels or 1366*768 pixels. In Quirks Mode the scaling is a simple as using document.body.style.zoom = nScale;. This scales all HTML elements on the page. But in Standards Mode absolutely positioned elements do not scale. We added code to the onScaleEvent function to walk the DOM tree and scale each absolutely positioned element individually. It was a bit tricky because these elements have to be repositioned as well, i.e., the left and top CSS properties have to be scaled. This involved storing the original positions using a expando initialPosition property on the HTML elements and using these for the scaling calculation.
Filed under: .NET, Work