A case study in webview based android app development Kiang @ ZF-TW / 2012-11-07 

Environments / Tools ● Ubuntu Linux ● Aptana Studio 3 ● Google Chrome ● mysql2sqlite 

Libraries ● Phonegap / Cordova ● Jquery Mobile ● Jquery Tmpl ● Jquery Validate ● MobileScroll - date/time select 

Why Aptana Studio 3 ? ● Netbeans was my favorite one before ● NBAndroid is not active development ● ADT in original eclipse is not good for developing webview based applications ● Aptana is perfect for javascript editing ● The default theme is good for my eyes... 

Google chrome? ● It does support WebSQL ● The business logic could be tested in desktop first, without the boring compiling time 

Why jquery mobile? ● I like AngularJS more … ● The designer have the UI first, based on jquery mobile ● JQuery Mobile Angular Adapter is not that reliable, at least the document … ● I don't have much experience in mobile environment. But I've been familiar with the coding style using jquery 

The dirty parts 

Rev #36 ● Get the token from remote site ● Save the token using window.localStorage.setItem('token', 'xxx'); ● A login page ● User could logout and then login again to get another token 

Rev #46 ● Prevent the app being terminated when the orientation changing ● AndroidManifest.xml

Rev #63 ● Enable the app for desktop(chrome) if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { document.addEventListener("deviceready", function() { startApp(); }, false); } else { $(function() { startApp(); }) } 

Rev #91 ● add page loading message if(i % 10 === 0) { $.mobile.showPageLoadingMsg("a", "Loading..." + i +' / '+ queries.length, true); } 

Rev #127 ● Mysql2sqlite https://gist.github.com/943776 ● After executing the script, you must remove the following items: – Collat – Comments – Fix auto increasement fields 

Rev #132 ● Once you used global variables, you just can't go back... ● Preload the data sets as it's annoying to deal with timing issue for sql execution ● In Single Page Application, global variable just like a session container, it will be there always ● I will try to have a better habit, next time XD 

Rev #160 ● You can't just change the value only, for jquery mobile UI components – obj.attr('checked', true).checkboxradio('refresh', true); – obj.html('xxx').trigger('create'); 

Rev #166 ● You just have to wait... setTimeout(function() { initVariables(); }, 500); 

Rev #172 ● In sqlite, you usually have n+2 tables – sqlite_master – sqlite_sequence 

Rev #194 ● disable page transition – $.mobile.defaultPageTransition = 'none'; – $.mobile.defaultDialogTransition = 'none'; 

Rev #234 ● use mobiscroll to replace datebox ● Datebox is powerful, but slow on mobile device ● Mobiscroll make the date/time picker work as expected 

Rev #242 ● Copy/Paste => Modify => Cleanup ● 3 days => 3 hours => 3minutes 

Rev ? ● To be continued