Click on any phrase to play the video from that point.
[metallic humming]
[ADOBE DEVELOPER CONNECTION]
Hi. I'm Adobe Developer Evangelist Kevin Hoyt.
You want to get started with PhoneGap, and I want to help you.
This time I'm going to talk about how to build an application with PhoneGap for Android.
So before you get started, there's probably a few other parts and pieces
you'll want to go get.
The first one is Eclipse. [Eclipse - eclipse.org/downloads]
Eclipse is a Java authoring IDE.
Java is the language that's used in Android.
That tool will help you set up things like virtual devices.
And if you want to really get down into the guts of how PhoneGap works,
we have a very helpful tool to help you modify some of the configuration settings
and things like that.
Another thing you're going to need is the Android SDK.
[Android SDK - developer.android.com/sdk]
And then finally, once you've got Eclipse downloaded and the Android SDK
at your ready, you'll want to go ahead and pull in the Android developing tooling for Eclipse.
[Android Development Tools (ADT): developer.android.com/sdk/eclipse-adt.html]
That's a plug-in to Eclipse that will enable you to have gooeys,
or user interface dialogs, for managing the different virtual devices
you want to test against and things like that.
So go ahead, step away, download them.
I'm not going anywhere. I'll be right here waiting for you.
All right. Welcome back. Good job.
You got it all downloaded, you got it all installed.
Now it's time to take the next step and leverage PhoneGap.
With the PhoneGap distribution is included a variety of different folders.
I have it unarchived here,
and you can see different folders for Android, Bada, iOS, BlackBerry, and so on.
In this case we're going to be targeting Android, so let's go into the Android directory.
There's a variety of different files here.
There's a jar file, which is a Java library;
there's the PhoneGap JavaScript library which we'll be using;
there's the Read Me file--always important to follow,
and we'll actually take a look at that in a minute; a sample directory,
so that's what a sample Eclipse project will look like all configured properly and set up;
and then there's an XML directory which has some files
that describes what plug-ins we're using in the case of PhoneGap
to access additionally the features that PhoneGap APIs don't already cover.
We're going to go ahead and jump over here to Eclipse,
and I want to go and start a new project.
When I start a new project, it's going to ask me what type of project I want to use.
We'll go ahead and select Android Project,
and then we'll go ahead and give it a name.
I'll call this GapDemo here, and we'll put it in a directory I have set aside
for this particular Android project.
We'll go out here, Video and Android, so I'll put it in this directory, keep it nice and separate.
We'll go Next, and then we are presented with the options of build targets.
These are the different versions of Android you might want to try to test against or build against
to see how your application behaves on those particular device operating system versions.
In this case I have with me today a Droid X running Android 2.2.3,
so we'll go ahead and select Android 2.2 for me to test against with this one.
We'll go Next, and then it's going to want to know the application name.
Hey, a GapDemo sounds good to me.
The package name, this is a reverse domain,
so it's going to take the domain that you would normally assign yourself
and reverse it up and maybe add some additional qualification in there.
And then create an activity.
An activity is kind of a main starting point for any Android application.
We want to go ahead and create that starting point as well.
We're going to go ahead and tweak it a little bit in a moment.
I want to say GapDemo. I want to remove the word Activity.
It's just a personal preference. You don't have to do that if you don't want.
Then we'll go ahead and say Finish.
So that sets up our Android project, but it doesn't set up our PhoneGap project.
Let's go through the files that were just created and set up that PhoneGap content.
Here in my GapDemo I'm going to create a new folder,
and that's going to be called libs for libraries, and then we'll finish that.
Then over here in my finder where I went into the PhoneGap distribution,
went into the Android directory and was talking about those files earlier,
we're going to leverage that phonegap 1 1 0 jar,
drag and drop that guy into the Library folder.
Eclipse will ask us if we want to move it or copy it.
In this case I'd like to go ahead and copy it.
And now we have that set up.
The other thing I want to do is in the assets folder
I want to create another subdirectory in there called www,
and that's where we're going to put all of our HTML, JavaScript, and CSS
to actually work with the project.
And then there's this resources directory here,
and the resources directory is where we're going to put that XML folder
that came with the PhoneGap distribution that says what plug-ins we're using.
So we'll go ahead and grab the XML folder,
drag and drop that over into the resources folder.
So now we've got that in there,
and now let's take a look at our actual activity
or that main starting point for our Android application,
because we want to modify that to be a PhoneGap Android application.
If we open up that Java file--don't be scared; there's only a few lines
and the instructions are pretty easy--we're going to remove this link for activity.
Again, activity is a starting point, but we're not going to use
the baseline Android starting point; we're going to use the PhoneGap starting point.
So let's take off that line and put in import com.phonegap.*
And then it'll say public class GapDemo extends Activity.
Well, it's not going to be activity anymore.
The PhoneGap project actually subclasses activity
and adds all the additional hooks you need into that subclass.
And so we're going to go ahead and use DroidGap,
which is the base class for a PhoneGap Android project.
We get the method to get called when the application creates,
tell it to call super or all the parent classes,
and then there's this line called setContentView.
We don't want setContentView because we don't have another Android view to show.
We're actually just going to use the web browser as our view.
I want to use a line from the PhoneGap project, and that's super.LoadUrl,
where LoadUrl is a method that's inside of the DroidGap class
and what file it's going to point at--
in this case, the asset folder, www/index.html
That should look pretty familiar. That's that www directory we just created.
And yet we have also still to create an HTML file to put in there.
Let's save that.
You'll notice there's all kinds of squigglies here.
Stuff just doesn't look right.
The reason all those red squigglies are there, those errors,
is because we haven't told the project where to find the library,
the library that we included earlier.
Let's go over to our GapDemo project here,
and we'll modify the build path.
This build path says, "Where do you want the compiler to look?"
We're going to configure the build path to include a jar file--
in this case one in GapDemo, libs, phonegap jar,
and that's that jar file we dragged in from the PhoneGap distribution
into the libs directory.
And we say OK and it'll go ahead and be ready for us to go.
We're missing a semicolon there.
Now our project is compiled.
The last thing we need is that index.html file we're going to develop with Web standards.
Let's go in here and put in a new file.
We'll put in index.html
It's going to open it up in the internal Eclipse browser.
I don't want to do that. I actually want to go in and edit it with the text editor here.
We'll of course be using Dreamweaver and all of its great features
for the rest of these demonstrations, but for now let's just put in html and body.
We'll say Hello world, close off the body, close off the html,
and now we have an HTML file there.
I'll right click on that GapDemo project one more time
where we have a Run As option,
and I'm going to run it as an Android application,
because while this is a PhoneGap application leveraging Web standards,
it's still at the foundation an Android application.
So we'll go ahead and run that,
and what it's going to do is actually compile it, build it all up,
and then put it on the emulator, so we'll have the emulator running here.
Let's switch over and let that work its magic.
GapDemo launches, and we have our base application with the words Hello world.
So now that has actually pushed our application off to the emulator.
What about the device? What about the actual physical device?
I'll take my handy-dandy Droid X here, we'll plug this into the USB port,
and now if I come back to Eclipse and tell it to run this application over again,
I get a new dialog box that says, "Where do you want to run it?"
So you could have multiple Android devices attached, you can have the emulator running,
and it wants to know which one you want to use.
In this case I want to use this Droid X device.
I'll say OK, and then it will go through the same compilation process,
it'll send it over to the device, I'll unlock the device,
and then we have Hello world there ready and running for us.
See the words Hello world? That's what we went ahead and created.
And so now we have our PhoneGap application running on Android device as well.
So that's how to get your applications started on Android with PhoneGap
and configure all the parts and pieces for PhoneGap.
The next part is really where we start to unleash the creativity
and the capabilities of PhoneGap--that is, getting into the native APIs
and really starting to leverage some of that magic.
That's where it gets exciting. It's going to be a lot of fun. Come on back and we'll see you then.
[ADOBE DEVELOPER CONNECTION]
[metallic humming]
