Margus Pala is fixing IT!

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…)

With a few android projects in Eclipse I get compile error in AndroidManifest.xml every time I restart Eclipse. Errors are something like:

Description    Resource    Path    Location    Type
error: Error: No resource found that matches the given name (at 'label' with value '@string/share_name').    AndroidManifest.xml    /MobiwsaleAdmin    line 37    Android AAPT Problem

This project is done with PhoneGap and it includes also Barcode Scanner activities in AndroidManifest.xml. This error does not looks valid at all and compile error is resolved as a workaround by adding space somewhere, saving/recompiling and removing space saving/recompiling again. Result was exactly same as before but no compile error in this case.

Permanent solution was to remove such commented line from AndroidManifest.xml. It looks like commenting out is not perfect in AndroidManifest.xml file.

        <!-- android:label="@string/share_name" -->

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

First ensure that you have Basic PhoneGap application running on your android. Check this tutorial if needed. Official tutorial is not so good but might help you out if Phonegap Facebook tutorial here fails. For additional information go to https://github.com/davejohnson/phonegap-plugin-facebook-connect/blob/master/README.md.

1. Download PhoneGap Facebook plugin from https://github.com/davejohnson/phonegap-plugin-facebook-connect/tree/master/www
2. Move cdv-plugin-fb-connect.js into your android phonegap webroot assets/www
3. Include it in index.html <script type=”text/javascript” charset=”utf-8″ src=”cdv-plugin-fb-connect.js”></script>
4. Add <plugin name=”org.apache.cordova.facebook.Connect” value=”org.apache.cordova.facebook.ConnectPlugin” /> into res/xml/plugins.xml (more…)

This tutorial assumes that you have eclipse which is set up for regular android development and you can create new android projects. Phonegap files are now named cordova

1. Create new Android project in eclipse.
2. Download package and extract cordova-2.6.0.jar  from zip file from http://phonegap.com/download/
3. Add cordova-2.6.0.jar to your projects build path. In eclipse open project properties > Java Build Path > Add Jars
4. Change main Activity superclass to DroidGap
5. Replace setContentView(R.layout.main); with super.loadUrl(“file:///android_asset/www/index.html”);
6. Create folder xml into the project res folder. Add there plugins.xml and cordova.xml from the package you download before.
7. Add into AndroidManifest.xml <uses-permission android:name=”android.permission.INTERNET” /> and     <uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
8. Create folder www into projects assets folder.
9. Add index.html file into assets/www. File content is regular HMTL.

By now you can already run the program. Next steps are starting to use PhoneGap special HTML5 features and try accessing hardware. If It fails to run then make sure you have logcat view activated in eclipse or try in linux commandline: (more…)

I was wondering how much is loss in performance is one would write application in PhoneGap and javascript instead of native code. I wrote 2 very basic programs one in android and second in PhoneGap. This program did standard busy looping and common string operation indexOf in the for loop. One interesting issue i found is that when you use body onload and do not finish in time then you will get error “Application Error: The connection to the server was unsuccessful. (file:///android_asset/www/index.html)”

3 different loop times were measured in javascript and native android java. Examlpe Code in Android  was : (more…)

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

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.