This is a Phone Gap  tutorial Series in which I will create a phone gap application for each of the platforms it supports. It is mostly a journey of my own that you get to follow along on.  I will start with Windows Phone and then convert it to IPhone, IPad, Android, Blackberry, Symbian. We will discuss tips and tricks along the way.

In the last post Phone Gap Tutorial #2 we looked at everything that was created for us when you start a Phone Gap project for Windows Phone from scratch. As I said in that post :

The first folder you will notice is the GapLib folder. This contains the Phone Gap dll that is specific to windows phone. This .dll has some interesting side effects when it comes to submitting to the marketplace.

In this post, we will discuss those issues and show you want you need to do to get around them.

If we look at the Solution Explorer we can see that there is a folder with the WP7GapClassLib.dll which is all the code of phone gap. We can also see that there is a reference to it as well.

Normally, this would be fine but with Windows Phone and the Windows Phone marketplace, the source code from phone camp contains information on ALL the capabilities.  (Since this is what phone gap does, it connects your HTML to the native capabilities). Normally this would be great, but since during the Marketplace verification process it will detect capabilities and list them to the users who will download your application, we don’t want that.

Why don’t you want that?   Well, its simple, if you are writing an app that DOES NOT use contacts, or the phone dialer, or the camera, etc… you don’t want the marketplace to say you do because some users may stay away from your application because you pull to much of their data.

So how do you fix this?  Its easy.   First we remove the reference to WP7GapClassLib (Right click –> Remove), and delete the GabLib Folder

Next we want to add another project to this solutions.  (Right click on Solution in Solution Explorer –> Add Existing Project) and navigate to where you downloaded phone gap in the \lib\windows\framework folder.

You will notice that there are 2 projects in here

• WP7GapClassLib.csproj (This is the one with the FULL Source- we DON’T want this (see above))
• WP7GapClassLibBare.csproj (This contains the bare minimum for phone gap))  SELECT THIS ONE

Then add a reference to this project from your project (Right click on references –> Add Reference –> Projects Tab)

If you build and run the project, everything should run fine. BUT at this point you don’t have access to any of the capabilities of the native phone from you HTML.

To show you this simply, we will try to use the camera from our HTML 5 (Example borrowed from Phone Gap)

First add a call to getPicture to the onDeviceReady() method.

navigator.camera.getPicture(onSuccess, onFail, { quality: 50 }); 

Next, add the onSuccess and onFail methods we pointed to in the getPicture method.

function onSuccess(imageData) {
            var image = document.getElementById('myImage');
            image.src = "data:image/jpeg;base64," + imageData;
        }
        function onFail(message) {
            navigator.notification.alert('Failed because: ' + message); 
         }

Next, in the same document (in the body section), we will add a link that will call the showAlert() function.  

If you try to run this project now, it wont work. And if you look in your Output window, it will show the following.

And you should also get an alert in the emulator (from the onFail function)

That is because since we are only using the WP7ClassLibBare project, we need to add this functionality in if we want to use it. (This is what we want, add ONLY the capabilities that we need)

Right click on the Plugins Folder and select Add Existing Item.

Navigate to where you donwloaded phonegap and go to the \lib\windows\framework\PhoneGap\Commands folder.

Select camera and choose Add As Link.

Now run the code and you will see you have access to the camera. 

Now since we are not using the camera in this application right now, we are not doing anything special with this code. This was just to show you what you will need to do going forward to add functionality to your phonegap application as you build it.

In the next tutorial, we will begin to build the pages in our application and talk about making it METRO.

Other Posts in this Series

(This list will automatically grow as I write them)

[catlist name=phone-gap-tutorial]