More and more Ajax Web applications are targeting the mobile browser. The age of dull and slow web experiences are long gone and the demand for high response and high interactivity on the mobile phone is here. At the end we present the 10 key tenets for building these next generation mobile web applications.
Gaia Ajax on Mobile Devices in the Real World
Recently we delivered an Ajax Web Application with a Dual UI using templating techniques spiced with inspiration from Model View Presenter. The result was a single codebase with simple multi-device targeting. All built with open source technologies like Gaia Ajax, Castle ActiveRecord, Nhibernate, ZedGraph, NUnit and MySQL. And of course the solution worked nicely on Mono too :-)
We've tested Gaia Ajax on the following devices
All of them worked nicely with Gaia Ajax, except a few customizations for Opera Mobile. Let's have a look at how you can enable Gaia Ajax for this wonderful browser too, which by coincidence happens to be developed here in Norway too.
Fix for Opera Mobile
We use Prototype.js under the hood on the client side and unfortunately there's a small bug in Prototype that makes the Ajax engine break down on Opera Mobile. There are two ways to work around this problem.
- Embed the code snippet below somewhere on your ASP.NET page to override the Ajax.Request prototype implementation.
- Overwrite prototype.js in the Gaia.WebWidgets project and rebuild.
Code
1: <script type="text/javascript">
2: Element.observe(window, 'load', function() {
3: Ajax.Request.prototype.initialize = function(url, options) {
4: this.options = {
5: method: 'post',
6: asynchronous: true,
7: contentType: 'application/x-www-form-urlencoded',
8: encoding: 'UTF-8',
9: parameters: '',
10: evalJSON: true,
11: evalJS: true
12: };
13: Object.extend(this.options, options || { });
14:
15: this.options.method = this.options.method.toLowerCase();
16: if (Object.isString(this.options.parameters))
17: this.options.parameters = this.options.parameters.toQueryParams();
18: else if (Object.isHash(this.options.parameters))
19: this.options.parameters = this.options.parameters.toObject();
20:
21: this.transport = Ajax.getTransport();
22: this.request(url);
23: }
24: });
25: </script>
It's worth mentioning that this patch is only valid for Gaia Ajax since we know what we use.
Note! This is not a patch that should be applied to Prototype.js overall. 
Another 10 Key Reasons to use Gaia Ajax for Mobile Web Development
- Unified codebase
- Multi device targeting for broad reach
- No need to expose biz logic to client
- Single point of deployment
- Based on open standards
- Write applications in managed code (C#, VB.NET, Ruby.NET, IronPython, etc)
- No sync issues
- Minimal maintenance costs
- Rich user experience without the need for javascript
- No security hazards/breaches
Don't surrender to binary code distributions, but embrace open standards.