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:



Archived Comments
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!!
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!!
It'd be cool if u can package a .apk for us Android users. :)
I did. Click the Download link.
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.
Glad to hear it Sam. Today my goal is to figure out how to sign the app and place it on the market.
It is now released in the market:
https://market.android.com/...
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
I'd recommend making a virgin PG project, then copy over my assets folder.
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
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.)
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.
Well, I've been blogging about it and learning. That's my plan - and it works out well as an evangelist. ;)
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
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.
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;
Wow... um... no idea really. Try deleting EVERYTHING but my index.html file then.
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!
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.)
Btw, check out my blog entry from yesterday. It's very close to what you asked for:
http://www.coldfusionjedi.c...
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
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.
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/...
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.
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?
So to be clear, the initial page looks ok, and when you go into a sub page, it does not, right?
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..
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.
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/...
How can I do video player ? I tried with video tag but didn't work.
Can u give me a simple demo for Contacts?
My most recent demos are here, https://github.com/cfjedima.... And you can search my blog for 'cordova'.