October 4, 2011 (This post is more than 2 years old.)

Playing with PhoneGap? Try the Mega Demo

So yesterday was pretty exciting at MAX. I plan on doing a write up after everything is done, but I wanted to specifically talk a bit about the PhoneGap news. In case you didn't hear it, Adobe acquired Nitobi Software, the guys behind PhoneGap. PhoneGap allows you to take your HTML and JavaScript and deploy natively to the mobile platform. Between PhoneGap and Flex Mobile, you've got two really good options for mobile development. I've got a few blog posts planned for later in the week, but today I wanted to share a little project I've been working on called PhoneGapMega.

PhoneGapMega is simply a 'one app demo' for all (almost all, details below) of the PhoneGap APIs. I wanted an application I could run so that I could both learn about their APIs as well as see how the APIs work on a real device. It's Android only for now, but in theory should work fine on iOS as well. (I plan to build out an IPA after I get back from MAX.) Many of the code samples come straight from the PhoneGap docs themselves and some are new.

You can download the APK I've got attached to this blog entry, or, even better, hit up the GitHub repo I set up and download/modify the source yourself. (Note - the Github repo contains both the HTML source and files from my Eclipse project itself. In the future I remove that and just commit the HTML resources.)

Here's a few quick screen shots:

As I mentioned, the mega demo contains examples of almost all the APIs. The main one I'm missing now is a demo for the File APIs. I've got a basic idea of what I'm going to do there so I'll be adding that soon. I've also added a demo showing how you can call remote resources without worrying about the normal browser restrictions on 'out of domain' XHR calls. In this case, I'm calling a ColdFusion Component on my server.

I hope this is helpful for folks looking to explore PhoneGap. I'll also point out I'm definitely not the first to do this. You can download GWT Mobile PhoneGap Showcase for another example as well.

Download attached file.

Support this Content!

If you like this content, please consider supporting me. You can become a Patron, visit my Amazon wishlist, or buy me a coffee! Any support helps!

Want to get a copy of every new post? Use the form below to sign up for my newsletter.

Archived Comments

Comment 1 by Mike posted on 10/4/2011 at 6:24 PM

Ray, you rock! As always thanks for all of your hard work and great examples! I've been planning to upgrade to Dreamweaver CS 5.5 because of your presentation at NCDEVCON and its built in support for Phonegap and jQueryMobile and this post makes me feel even more confident that I'll actually be able to produce some apps with it! Thanks again!!

Comment 2 by SuperAlly posted on 10/4/2011 at 7:04 PM

This is very cool Ray. Thanks again for all the work you put into these posts, you're always making things a little easier for the rest of us!!

Comment 3 by Henry posted on 10/5/2011 at 2:45 AM

It'd be cool if u can package a .apk for us Android users. :)

Comment 4 by Raymond Camden posted on 10/5/2011 at 9:25 AM

I did. Click the Download link.

Comment 5 by Sam Farmer posted on 10/7/2011 at 5:22 PM

I installed the Phone Gap Mega app the other day. Been playing with it since and its a very cool way to see what the Phone Gap platform can do.

Comment 6 by Raymond Camden posted on 10/7/2011 at 5:25 PM

Glad to hear it Sam. Today my goal is to figure out how to sign the app and place it on the market.

Comment 7 by Raymond Camden posted on 10/7/2011 at 7:58 PM

It is now released in the market:

https://market.android.com/...

Comment 8 by Henry posted on 10/14/2011 at 4:05 PM

Thanks for this addition Ray. I have downloaded the .apk okay from Android Market and runs perfect. But setting up as project on Eclipse and running on connected device, get these error messages:
[2011-10-14 07:52:04 - cfjedimaster-PhoneGapMega-d25e0ac] Failed to install cfjedimaster-PhoneGapMega-d25e0ac.apk on device '100003df06c2': timeout
[2011-10-14 07:52:04 - cfjedimaster-PhoneGapMega-d25e0ac] Launch canceled!
Must any files be edited or should I import as certain type of project on Eclipse?
Thanks
Henry

Comment 9 by Raymond Camden posted on 10/14/2011 at 4:56 PM

I'd recommend making a virgin PG project, then copy over my assets folder.

Comment 10 by Henry posted on 10/15/2011 at 5:57 AM

Ray,

This error is thrown if you download the .apk and install it on the device before you run a live test where the mobile device is tethered to the computer running Android SDK in Eclipse. For those who see this error:
Re-installation failed due to different application signatures

Re-installation failed due to different application signatures.

You must perform a full uninstall of the application. WARNING: This will remove the application data!
Please execute 'adb uninstall [package name]' in a shell.
Launch canceled!

1) Open command prompt.
2) Go to [directory path]:\android-sdk-windows\tools
3) adb uninstall [package name]

Or you can always delete the app from the "Manage Applications" in your phone. Then install again.

Also, do you plan on building any cfapps with these plugins in the near future?

Henry

Comment 11 by Raymond Camden posted on 10/15/2011 at 6:22 AM

That _kinda_ makes sense. I signed the APK with my cert, and you are trying to replace a same named app with/o a signed cert at all. I think if you just change the app name in the Manifest then it should be ok. (But you may have 2 installs.)

Comment 12 by Henry posted on 10/15/2011 at 6:25 AM

Thanks,
Yea I just deleted the application from the device and wala!

Do you plan to build and cfapps around these plugins? They sure are easier than building apps with java!

Thanks again.

Comment 13 by Raymond Camden posted on 10/15/2011 at 6:29 AM

Well, I've been blogging about it and learning. That's my plan - and it works out well as an evangelist. ;)

Comment 14 by steve posted on 11/11/2011 at 12:40 AM

I'm 1 day into exploring phonegap and playing around with using eclipse. I downloaded a zip from the github repo, went to run it and getting an error:

Description Resource Path Location Type
Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define Lcom/phonegap/api/PhonegapActivity; megagap Unknown Android Packaging Problem

any advice on what I am doing wrong? I've basically installed everything and got the Helloworld app working with no problem, so I think I at least got through the setup successfully.

I created a new android project in eclipse and then copied the contents of the zipfile over... went to run > as android application and thats when I get errors in project... fix before you continue.

thanks

Comment 15 by Raymond Camden posted on 11/11/2011 at 1:35 AM

Did you download the entire github repo? If so - some of the "meta" files may not work well with the current release. Try using -just- my stuff under /assets.

Comment 16 by steve posted on 11/11/2011 at 1:50 AM

thanks for the reply. Yes, I did the whole zip.

I went, deleted my existing project, made a new one.

Went to the assets folder, copied the www folder, and pasted it right in the project.

Tried to run again, same error...

this is copy/paste from the console:
[2011-11-10 15:43:54 - Dex Loader] Unable to execute dex: Multiple dex files define Lcom/phonegap/api/PhonegapActivity;
[2011-11-10 15:43:54 - MegaAppTest] Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define Lcom/phonegap/api/PhonegapActivity;
[2011-11-10 15:46:14 - Dex Loader] Unable to execute dex: Multiple dex files define Lcom/phonegap/api/PhonegapActivity;

thanks
[2011-11-10 15:46:14 - MegaAppTest] Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define Lcom/phonegap/api/PhonegapActivity;

Comment 17 by Raymond Camden posted on 11/11/2011 at 1:55 AM

Wow... um... no idea really. Try deleting EVERYTHING but my index.html file then.

Comment 18 by steve posted on 11/11/2011 at 8:43 PM

Thanks for your help! I went back at it this morning, uninstalled the SDK, reinstalled it and it went smoothly.

Could you lend some guidance on a study path:
1) I need to get more familiar with jquery

my goal is to make a small app where a user loads their id/password on startup (maybe stores in a cookie for the future), then presses a button which sends that info to the server and the server spits back a string or picture (regular html stuff). I saw the remote call button which solves half the equation, I guess I just need to see how to append form data to the jquery call.

Thanks for all the time you spent on your blog. I find it be a invaluable resource!

Comment 19 by Raymond Camden posted on 11/11/2011 at 8:45 PM

It depends on how you best learn. Pakt Publishing has a "Learning jQuery" book. I just got a review copy of the 3rd edition. You can use the online docs if you want. I've done presentations on it and will soon have a course on Udemy. This will be a paid course, but like 20 bucks or so. (Well, 'course' is a bit much - more like a 1.5 hour introduction.)

Comment 20 by Raymond Camden posted on 11/11/2011 at 8:47 PM

Btw, check out my blog entry from yesterday. It's very close to what you asked for:

http://www.coldfusionjedi.c...

Comment 21 by Mosh posted on 3/15/2013 at 2:59 PM

I tried to build the git from the url in this post using phonegap.com, but the result is different from the .apk file, and it's not working. Just show the notifications page without jquery ui view, and without functionality. What can I do to get the same result from github and phonegap builder

Comment 22 by Raymond Camden posted on 3/15/2013 at 3:12 PM

I assume you mean PhoneGap Build. If so, you need to modify the line in index.html that loads js/iphonegap.js and change it to just <script src="phonegap.js"></script>. You need to ensure you do NOT upload the actual JS file. PhoneGap Build handles it.

Comment 23 by Mosh posted on 3/15/2013 at 4:47 PM

Dos'nt work. Here is the screenshot. https://www.dropbox.com/s/w... and this is the link of the git: https://github.com/moshfeu/...

Comment 24 by Raymond Camden posted on 3/15/2013 at 6:13 PM

Based on the screenshot it looks like jQuery Mobile isn't loading properly. I'd try to figure out that first. Open up the index.html in your desktop browser, use Chrome Dev Tools, and see if you see any broken loads.

Comment 25 by Mosh posted on 3/15/2013 at 6:25 PM

https://www.dropbox.com/s/u... It's look like OK.
Another thing.. the default page thats not to be load is the main index.html. But now, it's look the default page is 'notification/index.html'. Why is that?

Comment 26 by Raymond Camden posted on 3/15/2013 at 6:26 PM

So to be clear, the initial page looks ok, and when you go into a sub page, it does not, right?

Comment 27 by Mosh posted on 3/15/2013 at 6:33 PM

No.. In the app it's look like the first image. But in chrome on my PC it's look like the second image - OK. On my device the first page that show is the notification page and my PC I open what I want.
Thanks for your patience and kindness..

Comment 28 by Raymond Camden posted on 3/15/2013 at 8:31 PM

Um, I don't know. The fact that it shows up unstyled and on the wrong page just doesn't make any sense. I'd recommend starting over. Use *only* an index.html page with minimal markup, and slowly add back in stuff like the jQuery Mobile CSS/JS files. Maybe also confirm your .zip had all the subdirectories as well.

Comment 29 by Mosh posted on 3/16/2013 at 11:11 PM

I was merged this app with another that's worked. Now it's working!
Thanks for great example app. Here is the link: https://github.com/moshfeu/...

Comment 30 by Zfabi posted on 10/2/2014 at 5:19 PM

How can I do video player ? I tried with video tag but didn't work.

Comment 31 by Ashish posted on 10/13/2014 at 3:13 PM

Can u give me a simple demo for Contacts?

Comment 32 by Raymond Camden posted on 10/13/2014 at 3:14 PM

My most recent demos are here, https://github.com/cfjedima.... And you can search my blog for 'cordova'.

Support this Content!

Archived Comments

Webmentions