GC

Handling Screen Orientations with xUI

Handling cross device screen orientations with the xUI framework is a breeze. xUI handles all the hard stuff for you all you need to do is register for an event change and react to it, xUI takes care of all the cross-device complexities for you.

x$('body').orientationchange(function() {
    alert('Orientation changed to: '.window.orientation);
});

Above attaches the body to the ‘orientationchange’ event, within in here your free to do what you like to react to the change.

What I have been doing is toggling a css class on the body tag and adjusting fixed width elements in my style sheet where I need to. Of course if you can devise a layout which doesn’t have any fixed width elements and everything is in %’s then you can leave this bit out. Your probably still need to react to the change however if you need to change the width of any full screen images for example. Below changes the css class of the attached element (body) when the orientation changes.

var current_orientation; // Cache orientation.

x$('body').orientationchange(function() {
    var newOrientation;

    switch (window.orientation) // Switch out the windows orientation
    {
        case 0:
        case 180: // Upside down.
            newOrientation = 'portrait';
            break;
        case -90:
        case 90:
            newOrientation = 'landscape';
            break;
    }

    if (current_orientation != newOrientation) // Ensure the new orientation isn't the same as the current.
    {
        x$('body').addClass(newOrientation);
        x$('body').removeClass(current_orientation);

        orientation_str = newOrientation; // Cache current orientation for comparison,
    }
});

The above code will change the class of the ‘body’ tag when the orientation changes from landscape to portrait. Using this you can alter the layout of your application depending on the devices orientation.

xUI Plugins

Below is a template for plugins with xUI the awesome jQuery like mobile JS framework. This might be an un-documented feature of xUI at the current version. Check the latest version on git, which is what I am using for this (1.0.0) and I have already written compiling building it on os x. Although it’s an undocumented “feature” as such, it’s basically supported because of xUI’s JavaScript architecture. I haven’t really got time to explain this now, but check out Pro JavaScript Design Patterns which will unlock OO JavaScript for you!

xUI JavaScript plugin template.

(function(x$) {
  x$.fn.myPlugin = function()
  {
    return this.each(function()
    {
      console.log('myPlugin!');
    });
  }
})(x$);

Update 17/04/2010: After sifting through the new xUI source it seems this is an implemented, feature although the how and why it works you should definitely read the above book (Pro JavaScript Design Patterns).

Apple HTTP Live Streaming Specification

A word on Apple’s HTTP Live Streaming Protocol. Firstly if you intend to implement this you must ensure your app meets all the criteria in this specification or your app will be rejected from the App Store – end of.

I only wish this document was there when I first sent my app to Apple. Admitedly I would imagine that had I taken the time to read the entire submitted specification on the IETF I probably would have know this.

Secondly what is very interesting is that when you read Technical Note TN2224 on the ADC they explicitly say that if your app does not meet this specification it will be rejected – an Apple first?