Click on any phrase to play the video from that point.
[Adobe Developer Connection]
Hi, I'm Adobe Developer Evangelist Kevin Hoyt.
In this series, I've been walking you through getting started with
the PhoneGap and the PhoneGap APIs.
In this session, we're going to take a look at how to use the connection API.
What is the connection API?
Well, one of the reasons you might build a native application instead of just using
HTML, Java Script, and CSS in a browser is to be able
to actually the application while you're offline.
It might be helpful in that situation to know whether or not you have
a connection to the internet and can do anything with data.
Maybe, if you have a really slow connection, maybe you don't want to do anything.
You say, hey, this is better left for wifi because you're transferring a large video
that you just shot or something along those lines.
The connection API is what helps us understand the types of connections
that we have or our device has to the network.
We're taking a look at Dreamweaver here where all the magic happens.
We've got some code on the left side, but just kind of familiarize yourself
with the UI over here on the right. We've got Live View going.
You can see it's got a title bar at the top here with "Connection,"
and then at the bottom it's got a "Check Connection" button.
There's this kind of square area here in the center,
and that's actually just a placeholder for an image.
Once we've determined the type of connection we have, it will display an appropriate image.
I'll just show you some of the options here.
There essentially is a 2G option.
In this case, I'm going to use the GSM logo for that.
There is a 3G option, and in this case I'll use the 3G fireball graphic.
If it's 4G, which is technically Lte, we'll use the Lte logo.
And if it's connected to the Ethernet, I'll show a picture of Ethernet.
And if it's connected but we don't know exactly how, then we'll get a question mark.
Then the last type of data connection you can get from this particular API is if there is no connection.
Of course, in this case, we've got good old Macaulay Culkin there from Home Alone.
Ah! No connection.
Those are the types of connections we can get.
Let's go ahead and take a look at the code and see the application in action.
Now, when PhoneGap starts up--that is to say your application starts up,
and the native application starts up, your web browser starts up, your page is loaded.
PhoneGap can communicate to the native system appropriately.
That's going to launch the device-ready event, and that's what we're going to tap into first.
As soon as that has happened, I'll go ahead and call this connection function,
which is a custom function I wrote to be reused
whenever I needed to check the connection, so we'll launch into that guy.
Then there's this button called "check" which we can use intermittently
to check the connection on the device just in case it might be changing
or if we go in and out of a tunnel, whatever the case may be.
We'll listen for the touchstart on that, and then we'll called the connection function again.
I want to say that I'm using the touchstart here because touch events tend to be more
responsive on mobile devices than your traditional click event.
The connection function couldn't be simpler, really. It's just a simple switch command.
Just like with all the other PhoneGap APIs, when we want to leverage into that API,
there is the navigator object and then there is the whatever--
dot accelerometer, dot compass, dot camera,
or in this case, dot network.
So we're going to navigator dot network dot connection type--connection dot type--
and from there, we'll get a variety of strings back.
when call across to the native device it will tell us the state of our network.
The type of unknown is going to get that question mark.
The Ethernet is going to get the picture of the Ethernet.
The connection dot wifi is going to get a picture of the wifi logo.
And 2G, 3G, 4G and good old Macaulay Culkin with none.
So those are the different values.
That connection object is a PhoneGap API object
that has those constants set up there for you to use, and they do return strings.
If you're interested in what the actual strings are,
it's the whole idea of having constants to abstract you from that.
But if you're interested in the strings,
those are actually called out in the PhoneGap documentation proper.
Once we've determined what type of connection we are have,
we're going to use the same code essentially to say the image connection,
which is that square in the center of our user interface,
set the attribute of source equal to this particular png
that represents that state of the connection.
That's all there is to the code.
Let's go ahead and drop off the next code here,
and we'll go ahead and run that in the iPhone simulator.
And so we can see here that in this case the iPhone is connected via wifi,
which it stands to reason as the simulator is relying on my machine,
which is connected via wifi.
So we can see that wifi is good to go there.
If I actually come back over to Xcode and stop the simulator version
and push this out to my device.
I'll go ahead and run this,
and it's going to kick it out to my handy-dandy iPod sitting over here.
And unlock, and you can see that we are connected via wifi.
Now, for now I'm going to go ahead and just jump out to the settings here,
and I want to turn wifi off.
I come over here to wifi, turn it off, and then I go back to my PhoneGap application,
and I'll check the connection again.
So now we can see what kind of connection we have.
Again, that's important because one of the main reasons you might want to
use web standards build a native application versus using the browser
is that it's to be able to function offline.
To know what type of network connectivity you have can be very important.
So that's using the network connection API of PhoneGap.
Yet still more APIs to cover down the road.
Come on back. I'll be waiting.
[Adobe Developer Connection]
