Click on any phrase to play the video from that point.
[Adobe Developer Connection]
[Kevin Hoyt Developer Evangelist] Hi, I'm Developer Evangelist Kevin Hoyt.
Now, in previous sections we've learned about PhoneGap
and how to configure your PhoneGap for both iOS and Android development.
Now, we're going to fly ourselves back to the Powerhouse,
back in Dreamweaver here where we can actually start building out
all the codes that support those applications.
So, in Dreamweaver, if we take a look over here,
I've got some HTML, a few script blocks already involved in it,
and some CSS, the PhoneGap library.
I'll be using jQuery here for this particular demonstration,
and then an empty script block, and that's where
our magic is going to happen here in a minute,
and then we have a div that I'm using to head off of
the top of the application, just to say what it is, and we'll call it--
this is for the accelerometer,
and then we have a panel here that let's us see the acceleration of the device,
both in the X, Y, or all 3--in the X,Y,and Z coordinates,
and then a button here that we can use to start watching that accelerometer
and get the data off the of it or stop,
and over here next to that code, I've got live view turned on
with the 320 x 480 box setup for my viewing space,
and we can see with the--generally speaking what the application
is going to look like once it's actually pushed to the device.
So in using accelerometer here,
the first thing you need to do is go ahead and listen for PhoneGap being ready.
I like to go ahead and use a little jQuery magic for that.
We'll say, "Document and bind for device ready."
Then, that's going to expect a function. [typing on screen]
We'll go ahead and put that in.
So now PhoneGap has started.
The web get instant have started,
and the communication channels from the JavaScript into the
native code and native API features of PhoneGap has been established,
so now it's time for us to go ahead and start leveraging that.
So in this case, we're going to leverage the accelerometer.
So I'm going to say, "var watchid" and initially we're going to say, "0,"
so we're going to set--it's usually kind of--just as you would in JavaScript set
an interval and then use an ID to clear that interval later.
We're going to do kind of the same thing here.
We're going to say--we're going to watch button watch.
You'll see the code intelligence there, offered by Dreamweaver to help me out.
If that is clicked on--in the device world click,
you can still use click but more efficiently--more efficient it's going to be
to use the touch event.
So in this case, it would be touch start would be the equivalent
for the mouse down,
and so I'm going to go ahead and use that instead of click here,
and say "function."
So hey you just click on the button.
Let's go ahead and start watching or stop watching as the case may be,
and in fact that's the very first thing I want to do here.
I want to say, "if watchid=0" which means it's not currently watching,
then we want to go ahead and start watching.
So we'll say, "watchid=" and then we're going to use this term,
"navigator.accelerometer.watchacceleration."
Now, you can see all the code hinting that I get there from Dreamweaver.
We've included that PhoneGap library.
It sees that code, knows how to work with it,
and is going ahead and prompting me for the appropriate parts and pieces.
So great to have that code intelligence,
and then we'll say, "Hey, if it's a successful watch, then we're going to get
a--then we're going to get a value back in acceleration values from the device,"
and then we'll be able to leverage those, and so we'll go ahead and use that.
If there's a problem, and it can't communicate
with the accelerometer for whatever reason,
we want to catch that as well.
So we can go ahead and just put an error function in here,
and then, finally, we want to pass along some options;
that is how often, in this case, how often to watch the device for accelerometer updates.
We'll go ahead and tell it that we want the frequency to be 100--every 100 milliseconds
to check the accelerometer.
Now you can go as low as 40 or as high as you want.
If you go over more than 1 second, PhoneGap will still
poll the accelerometer every second,
but it will only send a call back every how many ever
time duration you've set over 1 second.
So if you've set, for example, 5 seconds, it will still poll every second,
but it will only make the call back every 5 seconds.
In the case of an error,
there are multiple ways you can deal with that.
I want to say, "console.log" so those console messages still work.
You can also still use alert,
or you can simply put stuff in the HTML; however you're kind of
more used to debugging.
I'm going to go then next, and put the acceleration notes in here.
So hey acceleration has come back, let's go ahead and populate the fields.
In this case, we're going to say, "txtX"
which is the X field I've set up for monitoring the acceleration.
We want to set the attribute of value to acceleration,
which is an object we're going to get back from PhoneGap.x,
and then I want to say, "Hey, txty for attribute value,"
and that's going to be acceleration--
acceleration.y, and at this point, I'm just going to go ahead
and take the line and copy it for Z and acceleration Z,
and so now as the updates come in, we can go ahead and populate those text fields
to show--in this case to show what they are.
Generally speaking, you'll probably want to do something with that
like twist part of the Y or modify it, transform it in some way, shape, or form.
If watch ID is not equal to 0,
that means that it's already being activated,
and so we're going to put a little L statement in here,
and in this case, we'll go ahead and say, "Navigator reaching out to PhoneGap
accelerometer clear watch,"
and then we'll go ahead and clear that watch ID.
Probably will want to let the user know what's going on,
so let's also go ahead and say, "btnWatch.html stop watching
when we start," and then let's go ahead over here,
where we actually stopped, and let the user know that they can start watching.
"btnWatch," set the HTML to watch accelerometer,
and we also want to make sure we clear off that watch ID.
So now we have our application running, and then we go over here
to X code, and I'll go ahead and run--
run this application.
So I'll bring that up.
It puts it on the device in the simulator here,
and we can see the fields.
We click the watch accelerometer button,
and it goes to stop watching, but you notice none of the acceleration values change.
That's because the simulator doesn't actually have an accelerometer built into it.
So we want to go ahead and push it off to the actual device to see that in action.
So I'll say, "Stop watching," and
then we'll come off too, and stop that.
So we'll select the ipod touch,
run it on the ipod touch,
and then it's going to kick it off to this ipod touch,
and starts it up.
We'll say, "Watch accelerometer,"
and the little values in there are now reflecting the tilt
of our application.
We'll say, "Stop watching," and we're good to go.
So that's what it's like to use the acceleration--
accelerometer API as part of PhoneGap,
and in this case, you've learned it from HTML and JavaScript.
We've published in this case to iOS.
That same functionality will work wherever PhoneGap is supported,
and in devices that have accelerometers.
We've got lots more API to cover.
So, come on back, I'll be waiting.
[Adobe Developer Connection]
