Click on any phrase to play the video from that point.
[metallic humming]
[ADOBE DEVELOPER CONNECTION]
Hi. I'm Adobe Developer Evangelist Kevin Hoyt.
In this series we've been working through the APIs offered by PhoneGap,
the capability to build native applications but with web standards.
In this particular session we're going to talk about accessing the device particulars.
This is helpful, for example, in presenting the correct UI for that type of device
or knowing the version of the device so that you don't go for features
that might be offered by PhoneGap that aren't actually available on the OS for that device.
So this is kind of an informational object but very helpful.
Also I think it's helpful, for example, to know that you might be running on iOS
and not then showing the title bar at the top, for example, if you're running on Android
where that title bar would seem foreign, and be able to make those modifications.
So let's jump on into Dreamweaver and see how this code works.
I've got here some code, a split view with code on the left.
And the code is pretty straightforward.
There's really just a few labels and inputs that actually show some of the various values
that come off of the device API.
And then on the other side I have a live view active with the application,
and you can see those fields.
There's the model of the device, the operating system name of the device,
the version of the operating system, the identifier for the device itself--
the UUID or the unique identifier--and then the PhoneGap version that you're running
for this particular application.
So you can access all those from this device API.
Let's go ahead and switch over to code view here and take a look at this JavaScript.
This really couldn't be simpler.
We have a document, and we're going to bind the deviceready function.
Deviceready again is that point where the application has started,
the WebKit instance has started, and the PhoneGap communication
between the WebKit instance and the actual native application has been established.
That deviceready event gets fired, and that's where we want to do our initialization.
In this case there's no need for us to watch any values like an accelerometer
or a compass or to worry about different options that we might choose to call
when we go to capture a camera photo and things like that.
This is just, give me the device information, so really straightforward.
We're just going to launch this application.
As soon as it's ready we're going to go ahead and communicate across PhoneGap's APIs
to access that device information and display that in the user interface.
And so we've got txtModel.
We're going to put the device.name
and then txtSystem where we use device.platform.
The version of the operating system would be device.version.
The UUID is going to be device.uuid as a unique identifier used for this device.
And then device.phonegap is where we find the version of PhoneGap.
And those are really all the device properties that you get,
which is actually a pretty good amount of information, to be sure.
You can do a lot of interesting things with that information.
The device property is again offered by PhoneGap
and lets us actually then be able to access those properties.
So that's all there is for those different device properties.
Let's head on over to Xcode here, go ahead and run this in the simulator.
It starts up, and we can see here that the model of this device is iPhone Simulator.
[chuckles] That's true. Operating system is also iPhone Simulator,
which I find interesting in terms of the labels that iOS uses to put on there.
Version information here. In this case it's version 4.3.2.
And of course if we look back in Xcode here, we're using iPhone 4.3.2 Simulator,
so that would stand to reason that the version of our OS is 4.3.2.
Identifier. The unique identifier for the device is right here.
I haven't listed it all.
It's been truncated by the edge of the field, but that's that information if you want to get it.
And then the PhoneGap version in this case is 1.1.0.
And that's all there is for that.
I just want to say that you see here iPhone Simulator and iPhone Simulator
both for the model of the device and the operating system,
but I wonder what would happen if we took a look at the application on an actual device.
Let's go ahead and stop the simulator, go ahead and move our selection
over to the actual iPod Touch.
We'll go ahead and run this guy.
That'll kick it off to my iPod Touch.
We've got our fields there.
And this is interesting: the model is Kevin's iPod Touch.
That is the label that I've chosen for my particular device,
and that's the one that if you plug it into iTunes,
this is the one you actually see.
The system is iPod Touch, version 4.3.5, the identifier for the device, and PhoneGap 1.1.0.
So now we can use that information about the device to do other things
inside of our application.
So that's leveraging the PhoneGap API to determine device information.
There's just a bunch of other options you can do,
a bunch of different types of native integration you can do.
Check out the rest of the series to find out more information about those.
Of course we'll have lots more great examples coming soon as well.
Until then, I'm Kevin Hoyt.
[ADOBE DEVELOPER CONNECTION]
[metallic humming]
