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).

Building XUI on OS X from the source

I’ve been using XUI for a while now and figured I would get stuck in with contributing, but not having seen JS source like this before actually getting the js file out of the source wasn’t as easy as I thought.

For those that are still struggling.

First you need to open the terminal and go to a directory of your choice.

$ cd /repos

Next clone the git repository

$ git clone git clone git://github.com/brianleroux/xui.git

Change to the newely created git repository

$ cd xui

Now this is what got me stuck if you run rake now, just like the readme file suggests you will get an error similiar to below

No such file or directory - /Library/WebServer/Documents/repos/xui/packages/emile/emile.js

To rectify this you need to run the commands below to initiate the submodules.

$ git submodule init
$ git submodule update

That will ensure you have a full git repository of XUI with the submodule repositories as well. The last thing you need to do to get a clean build is download Webkit and make sure its in your applications folder. When you run rake Webkit is used to run some automated tests of your built JS files.

Lastly then make sure your in the main project directory and run.

$ rake