Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A case study in webview based android app development

November 07, 2012

A case study in webview based android app development

jquery mobile, phonegap, cordova


November 07, 2012


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

    View Slide

  2. Environments / Tools

    Ubuntu Linux

    Aptana Studio 3

    Google Chrome


    View Slide

  3. Libraries

    Phonegap / Cordova

    Jquery Mobile

    Jquery Tmpl

    Jquery Validate

    MobileScroll - date/time select

    View Slide

  4. 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...

    View Slide

  5. Google chrome?

    It does support WebSQL

    The business logic could be tested in desktop
    first, without the boring compiling time

    View Slide

  6. 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

    View Slide

  7. The dirty parts

    View Slide

  8. 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

    View Slide

  9. Rev #46

    Prevent the app being terminated when the orientation


    public void onConfigurationChanged(Configuration

    View Slide

  10. Rev #63

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

    View Slide

  11. Rev #91

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

    View Slide

  12. Rev #127


    After executing the script, you must remove
    the following items:
    – Collat
    – Comments
    – Fix auto increasement fields

    View Slide

  13. 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

    View Slide

  14. Rev #160

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

    View Slide

  15. Rev #166

    You just have to wait...
    setTimeout(function() {
    }, 500);

    View Slide

  16. Rev #172

    In sqlite, you usually have n+2 tables
    – sqlite_master
    – sqlite_sequence

    View Slide

  17. Rev #194

    disable page transition
    – $.mobile.defaultPageTransition = 'none';
    – $.mobile.defaultDialogTransition = 'none';

    View Slide

  18. Rev #234

    use mobiscroll to replace datebox

    Datebox is powerful, but slow on mobile

    Mobiscroll make the date/time picker work as

    View Slide

  19. Rev #242

    Copy/Paste => Modify => Cleanup

    3 days => 3 hours => 3minutes

    View Slide

  20. Rev ?

    To be continued

    View Slide