Experience in Building Mobile Application

I’ve finally completed my maiden HTML5 mobile application but have only managed to target it for Android.
You may download it from getjar.

Fundamentally, I’ve created the application due to a need to manage multiple library-loan accounts within the family. It is a hassle to check the accounts one-by-one for (near-) outstanding loans.

My experience in development follows:

What type of application should I build?

Criteria	Native App	HTML5 App	Mobile Website
Learning Curve	high	medium	low
Performance	good	reasonable	reasonable
Device feature accessibility	all	most	few
Connectivity tolerance	non-connected	occasional	mostly connected
Server requirement	NA	NA	Yes
Quirkiness	Low	High	Medium
Marketability (on app-store)	Yes	Yes	No
Portability	Low	Medium	High

Basic Requirements

1. Apache Cordova (PhoneGap) 1.5
2. jQuery 1.6.4
3. jQuery Mobile 1.0.1

Gotchas!

1. I wanted to structure the directories into /js, /css. The easiest way is to move all the javascript files into /js, the css files into /css, and more importantly, the jQM images folder into the /css (as the images are being referenced by the jQM css file)
2. Different browsers support HTML5 differently. E.g. input types number and dates are not widely supported.

Android Development

Pre-requisites

1. Eclipse – no questions about the need to use Eclipse.
2. Firefox with CORS plugin – CORS required in my case as the library loans website does not allow cross-origin requests. The plugin allows me to test without running the emulator.
3. Chrome (with start-up parameter  --disable-web-security) – similar reason as above. However, the WebKit-based browser like Chrome affords better testing as Android’s browser is also WebKit-based. 
4. Fiddler2 – to examine the HTTP requests/ responses. This also allows for request manipulation from the browser. (e.g. changing the user-agent)

iOS Development

Pre-requisites

1. MacOS 10.7 – no questions about the need to use MacOS.
2. XCode 4.3 – no questions about the need to use XCode.
3. Developer's license – required for publishing to the appstore.
4. PhoneGap 1.5 installation for iOS – basic requirement.

Debugging

1. Need to add WebView debugging in Classes/AppDelegate.m (see below)
2. To debug, open Safari and go to http://localhost:9999/

- (BOOL) application:(UIApplication*) application
didFinishLaunchingWithOptions:(NSDictionary*) launchOptions{    [NSClassFromString(@"WebView") _enableRemoteInspector];    :}

Gotchas!

1. All my javascript functions failed to execute! After much time spent troubleshooting, the reason was found to be due to my debugging statements! (see below)
2. All CORS failed until I added them into the whitelist (Cordova.plist -> ExternalHosts) - remember to clean build the project after adding into the whitelist
3. Input elements of type="number" produces unexpected results that had to do with regional settings (e.g. 12345 became 12,345)

if (console && console.log) console.info("...."); // failed in PhoneGap

Useful Tools

1. Safari

Useful Resources

1. http://wiki.phonegap.com/w/page/52010495/Getting%20Started%20with%20PhoneGap-Cordova%20and%20Xcode%204
2. http://hiediutley.com/2011/11/22/debugging-ios-apps-using-safari-web-inspector/
3. http://stackoverflow.com/questions/7814818/external-image-paths-still-doesnt-show-after-adding-it-to-external-list-on-phon
4. Cloud-based building: https://build.phonegap.com/

How to embed images in a HTML page without ActiveX

We have this requirement to ensure that the saved (X)HTML is completely self-contained.
This means that displayed images need to be embedded. Ideally, no additional plugin (e.g. ActiveX, Applet, Flash, etc.) is required.

Therefore, instead of using a img tag with the src attribute that refers to an remote image, the src attribute could actually embed the entire image that is encoded using Base64.

The magic is to use the data URI scheme.

E.g. <img src="data:image/png;base64, <Base 64 encoded data>">

This is supported in Gecko-based (Firefox) and WebKit-based (Android, Safari, Chrome) browsers. Trident-based (IE 8 and 9) are also supported.

Java Class Loading Error/ Exception

Have you encountered some class loading/ definition issues in Java recently?
To expedite troubleshooting such issues, you need to be aware of the 3 main Java errors/ exceptions and to be able to differentiate amongst them. They are:

1. java.lang.ClassNotFoundException
2. java.lang.NoClassDefFoundError
3. java.lang.UnsupportedClassVersionError

ClassNotFoundException

Happens when a class cannot be loaded at runtime. This offending class is usually not known a priori
This is often caused by the class loader not being able to dynamically load a required class. Examples of such offending class loaders are

1. Class.forName()
2. Classloader.findSystemClass()
3. Classloader.loadClass()
4. An IoC container (e.g. Spring)

The exception is thrown with the class that is not found. E.g.
 java.lang.ClassNotFoundException: oracle.jdbc.driver.OracleDriver

To resolve this, check the class against the classpath. The situation would be a lot more complicated when multiple class loaders come into play (E.g. when working with the Java EE containers)

NoClassDefFoundError

Happens when a class that existed at compile time could not be properly loaded at runtime.
The offending class was referenced in code (e.g. instantiated, static methods were called) and existed during compilation but now, could not be properly loaded.

There is a unique case to the NoClassDefFoundError where class initialisation fails.
E.g. java.lang.NoClassDefFoundError: Could not initialize class javax.swing.RepaintManager
This happens when the offending class is found but could not be properly initialised (due to exception/ error in the static initialiser or constructor)

Again in general, the fix could be simply making sure that the classpath contains the class definition. However, in the case of class initialisation failure, the solution would be far more complex.

UnsupportedClassVersionError

Happens when the class was compiled in a higher JDK version but running in a lower one.
To fix this, either:

1. recompile the offending class/ jar to the lower version, or
2. upgrade the JRE to the higher version