Ext

If I had done the product marketing for the Wii web browser – and its probably a good thing I didn’t - I would have called it the “Wiib Browser”, however those smart guys at Nintendo came up with “The Internet Channel”. From a consumer standpoint their version is probably better, but enough about that.

The Wii’s browser is running on a custom built version of Opera 9. ExtJS supports Opera, so everything works the same as it would in a normal PC based web browser. With a complete JavaScript engine, its just as good as the full fledged Opera browser. Im not expecting any enterprise quality applications to be developed for use on the Wii, but it would be nice to use some of the ExtJS features to catch up on our blog, read the forum, or just drag windows around using the Wiimote (much more fun than it sounds).

What Do I Need to Do?

The things we have to take into account when creating an ExtJS site for the Wii are screen resolution, font sizes and input limitations. A typical Wii user is sitting further away from the screen than the PC user and to top it off the resolution is much less. The Wii in standard TV mode (480i/p) runs in one of two resolutions:

• 16:9 (800 by 472)
• 4:3 (800 by 628)

So we need to account for resolution, which is also not as straight forward as it should be. The Wii browser has a toolbar that may be shown all the time, or use an ‘autohide’ feature. The screen resolution is reported differently based on whether the toolbar is showing or not.

Another obstacle is that televisions tend to crop the edges of the screen off. The Opera Wii browser tries to compensate for this by adding space to the top and bottom of the screen. As you can imagine, an ExtJS viewport would have its edges off the sides of the screen, and the top and bottom are left with extra space.

Meet the Wii Layout

Ext.ns('Ext.ux.layout');
Ext.ux.layout.wii = Ext.extend(Ext.layout.FitLayout, {
    setItemSize : function(item, size){
        var viewSize = Ext.getBody().getViewSize();
        this.container.addClass('ux-layout-wii');
        item.addClass('ux-layout-wii-item');
        size.height = (viewSize.height-60);
        size.width = (viewSize.width-60);
        item.setSize(size);
    }
});
Ext.Container.LAYOUTS['wii'] = Ext.ux.layout.wii;<

Using a fit layout, centering it, and moving its edges inward does the trick. A bit of code to decide which layout to use based on the user agent, and were done.

    Ext.isWii = navigator.userAgent.toLowerCase().indexOf("wii") > -1;
    var layout = 'fit';
    var title = 'Normal';
    if (Ext.isWii) {
        layout = 'wii';
        title = 'Wii';
    }

Big Fonts

What would be considered a normal size font on a computer is rendered almost unreadable on a television, so we need to crank up the font size. This can be accomplished by using a “tv” targeted stylesheet.

<link rel=”stylesheet” type=”text/css” href=”wii.css” media=”tv” />

Input Limitations

There are some basic input limitations because there is no keyboard, so when designing Wii sites, we need to be sure to not require the use of combinations of keys, or special keys. For example, the functions keys are not available on the Wii, and pressing a ctrl combination would be impossible. Another thing to keep in mind is that the user cannot press enter, so things like form fields that perform an action on the enter key would be unusable.

Wii Migration

I cant imagine many of the typical ExtJS users updating their ExtJS applications to be Wii compatible, but what I do see is a way to improve the usefulness of the Wii. I could sit on my couch (remove the laptop from my lap) and use the rich ExtJS features I have grow accustom to.

See the Wii forum reader in action. If your viewing it from your computer then you will see a normal panel with grid, but from a Wii it will use the Wii layout along with larger fonts.

This entry was posted on Wednesday, June 4th, 2008 at 9:33 am and is filed under Ext JS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.