Archive for the ‘jquery mobile’ Category

PhoneGap application crashing when rotating

Wednesday, February 8th, 2012

I have seen some apps that crash when rotating from landscape to portrait or vice versa. Beginners might not have such problem as coping original PhoneGap examples with all bloating overhead works. On hte other hand some applications that I created as new project in eclipse and wrote PhoneGap app from scratch had the rotation crash issue.

It was tracked down to one line in AndroidManifest.xml. Make sure that you have (more…)

Quick drag-n-drop mockups in jQuery mobile

Wednesday, February 8th, 2012

While writing HTML in editor manually gives you most flexibility and works kinda well if you are seasoned professional then sometimes it is good to have a tool that can create you quick and dirty mockup of the jquery mobile app.

So far I have found http://www.mobjectify.com which is easiest tool for this. It enables you to create and download jquery mobile app without registration.

Review:

Plus sides:

  • No registration required
  • Intuitive to use, get started in 2-3 minutes
  • Shows result instantly with one click
  • Enables to change themes and CSS

Negative sides:

  • Objects cannot be rearranged
  • Does not have all HTML elements
  • Lacks place to put javascript logic

jQuery $.ajax statusCode and statusText

Wednesday, February 8th, 2012

It is bit tricky to get jQuery $.ajax call exact status. Turns out that error function first parameter has function statusCode() which returns object that contains status parameters. See code below and you will understand how to get hold of the statuscode and statustext values.

    $.ajax({
        type : 'POST',
        url : loginUrl,
        data : {
            username : $('input[name=username]').val(),
            password : $('input[name=password]').val()
        },
        success : onSuccess,
        error : function (xhr, text, err) {            
            alert(xhr.statusCode().status+" "+xhr.statusCode().statusText);
        }
    });

Jquery mobile mobileinit event not firing

Saturday, January 28th, 2012

Because Jquery mobile mobileinit event is triggered when mobile jquery starts to load then event listener must be binded before execution reach to loading jquery mobile javascript file.

Usually mobileinit event is binded using selector $ from jquery like this:

$(document).bind("mobileinit",onMobileInit);

This dictates JS files loading sequence in PhoneGap and websites to be something like:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Here binding to mobileinit is done inside custom-scripting.js

Source code for mobile jquery examples

Tuesday, November 29th, 2011

Any mobile jquery developer have visited http://jquerymobile.com/test/ . This website contains live showcase demo for most of the features in mobile jquery.

This website is nice but it lacks the full source code. There are snippets but these are not enough to build the same webpage and there is no information where to get the source code.

Actually these examples source code is publicly available in github. Please check https://github.com/jquery/jquery-mobile especially in docs folder where all the html files are located. Javascripts are in JS folder and which JS is used in any of these examples can be seen from head where all the includes are located.

See also mobile jquery and phonegap analysis compared to native code here

PhoneGap vs native Android and iPhone app performance and features

Friday, September 2nd, 2011

Overview

PhoneGap is mobile framework that allows developers to create HTML 5 and JavaScript pages and sun these inside mobile devices. Please bear in mind that “webserver” runs inside the device. It is also possible to display external pages using plugin called ChildBrowser. While PhoneGap does not support PHP it does support javascript libraries like jQuery mobile which enables you to script and create very good looking apps.

For beginners

When starting from scratch then learning development in phonegap is no easier than starting to learn for native android, iphone, windows phone, symbian or any other.

Features

Best feature ever with PhoneGap is that you can write app once and deploy this over 6 different platforms: Android, iPhone, WebOS(HP Palm), BlackBerry OS, Symbian and Samsung Bada. While this multiplatform support is working and widely advertised then in reality many features are not supported across all these platforms. Personally I am missing PhoneGap Facebook plugin support which extends only to android and iphone.

Permissions

Minimal requirement is internet. Even if your application does not send or receive a byte of traffic then because of internal workings of PhoneGap you must grant internet permission (android.permission.INTERNET). Other issue that bothers me is that on current implementation you cannot make camera pictures or photos without memory card write permission (android.permission.WRITE_EXTERNAL_STORAGE).

Plugins

PhoneGap is also extensible with plugins. Plugins are native code that will be called from Javascript. It is not too difficult to write plugin of your own if some features are missing that can be achieved only with native code.

One of the most interesting plugins is Analytics this allows you to track how users are using your app. There is not such feature for native apps that I know of.

Performance

I have noticed that on popular cheaper and slower phones with 600Mhz CPU there are some performance issues with mobile jquery and phonegap, you can test it on your own phone by browsing to http://jquerymobile.com/test/. Changing pages is not so smooth as it could be. On the other hand on more expensive phones these tweaks are hardly noticeable. I made some measurements on my own and PhoneGap is ca 3x slower than native code.

Conclusion

In conclusion it is recommended to use PhoneGap with simple apps to get best coverage over multiple platforms with least effort. If application logic needs more phone specific features then at first stage core app can be written in HTML5 and Javascript and extended with plugins which are written in native code by others or yourself. Demanding applications that rely heavily on phone builtin hardware is better to be written in native code, it makes app to perform better and it nothing beats native code in compatibility. Write your

Please comment ad hit +1 button above if this helped you.