Customising your Native Applications' View for Motorola WebKit

An overview of the RhoElements performance improvement drive

The great thing about an open developer community is the ability to interact and work at a group and individual level with many of the developers out there. It really allows us to prioritize product feature sets and focus on the things that the greater community feels are a priority. It also allows us to get real-time feedback on the product and address any concerns that may arise in a more agile process. The RhoMobile Suite team really prides itself on being agile and producing a product that not only meets the needs of those developing enterprise cross-platform applications, but also does so with the utmost level of quality and performance.  Recently there have been concerns that HTML5 cannot deliver a performant application but with the right techniques it can be done.

Introduction

In the third of a series of blog posts we will start to tackle Native Applications on Motorola devices, by that I mean applications developed in RhoMobile Suite using the Model View controller paradigm making use of the built in JQueryMobile library and CSS which ship with the product.  I'm not going to take a 'deep dive' here, this blog is designed to improve the out of the box experience with RhoMobile Suite 2.x all the way to the upcoming 2.2 & I'll highlight a few gotchas and tips to deliver an immediate performance perception improvement.  This blog has been designed to address performance concerns I've been hearing from customers using Motorola WebKit running on Windows Mobile / Windows CE but can apply equally to any supported device or platform.

This is just an overview and first step, over the coming weeks and releases we'll be making further improvements to the performance and developer experience.

Modifying your CSS

There are two ways you can improve the out of the box experience and the first of these is by modifying the default CSS. 

You will find your application's css file in its \public\css directory and if your application uses Motorola WebKit the framework will select the 're_webkit.css' styles.  The problem with 're_webkit.css' is it is based heavily on the android.css and relies on lots of 'hover' styles, unnecessary in mobile applications.  The first suggestion is to customize the default CSS file to match your company's style and making all hover styles equivalent to the up style, doing so will ensure a smoother scrolling performance.

The videos below show a native application with the default styling on the left and some customized styling on the right:

Default Styling 'out of the box'		Modified Styling
A native application built without modification to the default style		The same native application built with modified styling to remove hover parameters.  Notice the improved scrolling performance.  Also notice that I'm an engineer and not a designer!

You can download the css file used in the video on the right at the bottom of this blog post (re_webkit.css), bear in mind that I am not a designer and this CSS was created solely to show the performance difference, it is left to the far more talented and creative reader to improve on this design.

Modifying the default JQueryMobile settings

It is possible to modify the behaviour of JQueryMobile to improve the performance on Motorola Windows Mobile / CE devices and also to improve user perception.

The JQueryMobile settings which can be configured are listed at http://jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html; that API is actually specific to JQM 1.2.0 but will be largely identical to the version used in RhoMobile Suite (currently 1.0.1).

Native applications written in RMS provide a really convenient hook to configuring JQM; in your application's layout.erb file you'll see: