Well, it took a little longer than I planned, but here is the first of the additional labs exercises I promised during my Adobe MAX workshop.
The lab is going to focus on checking if the app has access to a network, and handling the static Google map if the user is not online.
First we need to add is this to our config.xml file:
<feature name="http://api.phonegap.com/1.0/network"/>
This will allow our application access to the network status information.
Now, open the app.js file (which is located in the js folder). On the first line, add this:
var isConnected = true;
We are going to use this variable to hold the status of our network state.
If you are familiar with the $(document).ready that is typically used in many web apps, there is a similar api call to test if the mobile device is ready:
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
Just like you have to wait for an HTML’s DOM to be ready, we also must wait for our device to be ready. Once the device is ready, it will fire ’deviceready‘ event, which we will then call our onDeviceReady function.
// PhoneGap is loaded and it is now safe to make calls Cordova methods
function onDeviceReady() {
checkConnection();
}
Our onDeviceReady function currently only makes a call to the checkConnection function, but later labs will add other features.
PhoneGap API: Connection
The checkConnection function makes our first PhoneGap API call: navigator.connection.type. The Connection API allows us quickly check the network state and cellular network information. Possible values it can return are:
- Connection.UNKNOWN
- Connection.ETHERNET
- Connection.WIFI
- Connection.CELL_2G
- Connection.CELL_3G
- Connection.CELL_4G
- Connection.CELL
- Connection.NONE
Note: For iOS, the actual network type is not known (2G,3G,4G).
function checkConnection() {
var networkState = navigator.connection.type;
if (networkState == "none" ) {
isConnected = false;
}
}
So, if the application is not on a network, the isConnected variable is set to false. To test this, enable Airplane mode on your device, then run the application again.
Now that we have our initial network status, we can modify our park details template to either show a map if we are connected, or a message that we are unable to show a map.
Still in the app.js file, locate the code that generates the Park Details. It will begin with:
$('#parkDetailsPage').on('pagebeforeshow', function(event) {
Since Javascript is a dynamic language, we can easily add a new property to our park details object. In this case, we will append our connection status to the object.
currentParkData.isConnected = isConnected;
Why are we doing this? Don’t we have a globally scoped variable that has our connection status? Yes, but we are going to leverage some additional functionality in the Mustache templating engine.
Template Partials
What good is a templating system if it can’t have its own templates? That is what partials are html fragments that can be mixed into your template. When you make your call to Mustache to render your html, you pass your partial object as your third parameter. In our case it will look like this:
parkDetailsHTML = Mustache.to_html(parkDetailsTemplate, currentParkData, mapPartial);
Partials are stored as an object using a key name / template structure. Here is what our mapPartial looks like (this is located in the templates.js file):
var mapPartial = {online:'<h3>Park Location</h3><p id="parkMap"><img src="http://maps.google.com/maps/api/staticmap?center={{lat}},{{lon}}&zoom=10&markers=color:green|{{lat}},{{lon}}&size=400x400&sensor=true" width="400"></p>', offline: '<h3>Park Location</h3><p id="parkMap">Unable to display park map.</p>' };
Since it is an object, we can pass in more than one partial to Mustache. In this case, we pass in one partial for the online case, and one partial for the offline case. Now we need to modify the main portion of the template to use the partials.
To have Mustache use the partial, simply insert {{>partialname}} into the section of your template. Remember that isConnected property we added to the data set that our template is going to use? Well, Mustache also has the ability to work with conditional sections. Conditional sections only render if the condition evaluates to true. A conditional section begins with {{#condition}} and ends with {{/condition}}. “condition” can be a boolean value or a function returning a boolean.
Open the templates.js file and change the map portion of our existing template to this:
parkDetailsTemplate += '{{#isConnected}}{{>online}}{{/isConnected}}{{^isConnected}}{{>offline}}{{/isConnected}}';
What this snippet is saying is if the user is connected ({{#isConnected}}), then insert the online partial ({{>online}}). If the user is not connected ({{^isConnected}}) then insert the offline partial ({{>offline}}). The {{/isConnected}} tag tells Mustache that this is the end of the conditional check.
With these few changes, our app can now test the connection status and easily adjust its templated output.
You can download the completed files from my GitHub repo.
The next lab will look at using the GPS sensors and calculating distance to each park.
I released a new version of ConfiGAP 1.2.4 today. There are several changes made to the application. In watching one of my students try to use the application on an older laptop, I noticed that the Save button was not visible. This issue made the application unusable. I had two choices; either add Open/Save menu items or find a new spot for the Save button. I decided to do both.
