I recently posted about BackBase, an expensive (for commercial use) AJAX development thingy*. Well Google have produced something similar for free Google Web Toolkit.

Although the end results are the same (as far as the user is concerned) there are important differences. The BackBase software is entirely client side. You write server stuff as normal, output BackBase code and the browser with JavaScript handles everything. The Google system is client and server orientated and odes more work on the server. The server also has to be running Java. It also has better browser support.

This could be a reason for me to learn Java, something I’ve managed to avoid for quite a while now…

* It’s actually an XML based markup language combined with a real time JavaScript processing engine.

I’ve created a clever German flip card gadget for Google homepage. It displays a German word for a few seconds and then shows it’s translation. And then repeats with a new word. The vocabulary is very small at the moment but it will increase by at least one per day.

At the moment it also limits itself to 5 words per viewing. That is after showing five cards it loops (if it didn’t you’d never actually begin to memorise them).

Google Homepage

To use Google personalised homepage, you must have a Google account. When you have one, go to “Personalised Home” (links for that and to create an account are in the top right corner of Google’s homepage).

Adding the Gadget

From your personalised homepage, click “Add Content”, then “Create a Section” and then put the following URL in the box: http://www.oliverbrown.me.uk/gadgets/flip.xml . Then just click “Go” and you’re done :)

If anyone is interested I might extend the idea to be more flexible.

If you use Google personalised homepage, you can add Google gadgets to them. A Google gadget is just an XML file (or more usually the XML output of some dynamic page) that is displayed. There is a well developed API and you can do quite a lot of nifty stuff with them. But they don’t seem to be that popular (searching for Google gadgets, with Google gets very few relevant results).

There are quite a few in their gadget directory but very little mention of them outside Google…

BackBase is another AJAX toolkit. This one is different though. It’s not really an AJAX toolkit, more a toolkit powered by JavaScript taking advantage of AJAX.

The clue is the price. Yes it has a price - $2000 to be exact. There is a “community edition” that is free for personal use though. Anyway, I don’t have time to run down all the features but basically it defines a whole new bunch of tags allowing you to create complicated content in a declarative HTML style way. These tags are then translated into proper XHTML on the fly by the back end JavaScript engine. Since the clever work is actually handled by the browser, you’re free to use whatever you like on the server (PHP, Ruby) including static HTML pages - outputting BXML is no different to outputting HTML. In fact BXML has a very ASP.NET feel to it and embedding BXML into an XHTML page along with ASP content could have the ultimate cleanness about it (syntax isn’t one of my complaints about ASP.NET).

It should be noted that Microsoft are working on Atlas which could be something very similar but I haven’t looked into it… It all seems very clever.

From a theoretical programming point of view, JavaScript is immensely cool. You can do some amazing things with it. Although I’m not entirely sure whether you should.

For example I had a bunch of elements on a page I needed to update using AJAX. I needed a function I could pass the URLs and ids of elements to replace with those URLs and then have it perform each replacement in turn (I’ve seen IE have problems with simultaneous AJAX requests).

First I replace a simple replace_id function that accepts three arguments. An element id, a URL to GET to replace its contents with and finally a function to be called when it’s all completed.

And then things got silly.

function chain_replace(urls, ids) {
    id = 0;
    next_id = function() {
        if (id < = ids.length) {
            return function() {
                replace_id(urls[id], ids[id++], next_id());
            }
        }
    };
    next_id()();
}

Now the next_id()(); bit towards the end should be a clue that something a little odd is going on. But I must confirm that this code does actually work. With enough arguments it might make the browser explode with some sort of call stack problem though…

I announced limited support for mobile devices viewing the blog recently. That support basically only covered phones with Opera Mini.

Well now I have a WML theme installed so you should be able to view the site with any WAP device.

You can force WML output with any browser though (although most browsers do not understand WML).

Detecting Mobile Phones

You’re first instinct is probably to check the user agent. Although it’s true there are fairly consistent ways to detect a phone from the user-agent there is a better way.

One of the many under-utilised headers that browsers always send (well 99.99% of browsers you encounter will) is called Accept. This is just a list of MIME types that the browser can handle. Since all mobile phones (as well as PDAs can display WML pages, we’ll use this as the basis to detect mobile devices. The MIME type for WML pages always seemed rather odd to me: text/vnd.wap.wml.

if (strpos($_SERVER['HTTP_ACCEPT'], 'text/vnd.wap.wml') !== false) $mobile = true;

Now we need to find out if the phone can accept XHTML Basic (or XHTML Mobile Profile or whatever) in pretty much the same way:

if (strpos($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml') !== false) $xhtml = true;

Many “real” browsers are inconsistent with regards to the MIME type for XHTML. As far as I know since mobile phones do not have any sort of backwards compatibility issues they all use the proper application/xhtml+xml.

I tried validating the markup and my site and found a few errors (nobr tag not allowed, span tag not allowed inside a ul and few others) so I fixed them and I’m XHTML 1.1 compliant once again. That is the home page and a few random pages I tried are compliant. There are probably some posts with random stuff that isn’t…

The main reason I did it was for the sake of any mobile browsers that might complain really loudly about bad markup. So I started reading about XHTML Basic what exactly was and wasn’t allowed. Well I couldn’t find anything useful so I just tried validating as XHTML Basic 1.0. I had to remove script tags, style attributes, replace i with em and again, a few other minor things. The end result is that an XHTML Basic version of the site is available to mobile browsers. Since I don’t have a mobile browser to test it on I can’t guarantee I’m detecting them properly yet. If you want to see what it looks like though, just go to Oliver Brown - Basic.

Then I discovered that it’s mainly PDAs that use XHTML Basic and that mobile phones tend to want XHTML Mobile Profile (XHTML MP also called WAP 2.0). Just changing the doctype was enough to get XHTML Basic to validate as XHTML MP. You can check it out at Oliver Brown - Mobile (it looks the same as Basic).

Just to let you know, when browsing the other versions manually all the links bring you back to the normal site - you actually need a browser detected as being a mobile phone for it to work properly.

Okay, “every” is overstating it. The site has always looked how it should in Firefox (and Mozilla variants) and Opera as well as almost right in Internet Explorer. And although I didn’t look in depth it seemed fine on Safari when I used a friend’s Mac.

Well now it looks how it should in IE too. Although I did have to do a pretty nasty hack of sorts (but I remain XHTML compliant).

IE supports “conditional comments”. They’re HTML comments in a specific format which IE interprets as special. Overall this is quite a clever idea since the other browsers see them as normal tags and technically my site isn’t using any no standard markup.

The dodginess in IE (if you hadn’t noticed or don’t use IE) is that the graphic behind the Google links bar was 1px to the left. So all I did was put a style definition inside an IE conditional comment to nudge it to the right: <!--[if IE]><style> #linksbar { background-position: 1px 0 } </style><![endif]-->

Apparently you can do cleverer things with the comments like so conditionals on specific version of IE but that’s getting a little silly and if you want that much control it’s probably better to do it on the server so you don’t send every version of a page to every browser…

For more information, check out conditional comments on Quirks Mode.

Although I haven’t been writing much about programming and computers lately, I have still been reading.

XForms is another thing, like Mono, that I found out about quite a while ago that has recently resurfaced as possibly useful. XForms is a whole rethink about how information should be collected and sent of the web. The keyword here is information. HTML forms don’t really send information, they send data. There is no real structure to what is sent - all you have is name/value pairs (although depending on the capabilities of the server you can at least send variable length arrays with the foo[] naming convention).

XForms improves on this by separating forms into different parts, primarily models and user interface (well technically what I’m referring to as models is split into abstract models and instances but that’s like talking about classes and objects). The models are just chunks of XML that are sent to the page. The user interface (essentially just input tags like the HTML equivalents) modifies this XML and then sends it back.

The structuring of the data may well be enough to warrant the adoption of XForms, but it’s a little better than that. When I say the XML (or more correctly the model) is modified by the user interface, the modifications are held in memory by the client (probably a browser) and any references to the model should change accordingly. This allows some stuff that would usually require clever AJAX, complete calls to the server or at least just plain JavaScript can be done fairly trivially.

There are a lot more possibilities, this really is just the tip of the iceberg. To find out more, search for XForms :P

There is a problem though, support in browsers. You can get a plugin for IE6 that handles XForms but requires the page include the plugin. You can get an extension for Firefox that handles it “natively”. Neither work that well and when I tried it neither worked properly with a page intended for the other (IE obviously couldn’t use a page without the plugin and the plugin stopped the XForms working for Firefox). But the same was true (if not worse) for JavaScript when it first came out.

I’ve added two new public static function to [ExtendXML](/exml.txt). The first one is registerTagClass. This takes two arguments, the first is a tag name and the second is a class (that extends ExtendXML. This will make all children of that tag name become that class instead. The second is registerTagCallback. This takes one argument, a callback. That callback must take one argument, a tag name and must return the class (as a string) that those tags should become.

If for example you were parsing HTML and you wanted all paragraph p tags to be handled by ParagraphXML, you could use: ExtendXML::registerTagClass('p', 'ParagraphXML');

A word of warning, it’s case sensitive. If a callback is registered this will be used regardless of any calls to registerTagClass.

If you’ve never used callbacks before, they take one of three forms. Either a string that is the name of a function, an array with the first element a class name (as a string) and the second element a static method of that class (as a string) or finally, as an array with the first element an object and the second element a method of that object.

EXML, ExtendXML, SimpleXML, XML, parsing XML, PHP5, callbacks, programming, coding, parsing HTML, OOP