Adobe

Adobe MAX Lab Update: #2

This additional lab is short one, but will add event listeners in the event the device loses or gains network access. PhoneGap has event listeners for a variety of device events such as:

  • deviceready
  • pause
  • resume
  • online
  • offline
  • backbutton
  • batterycritical
  • batterylow
  • batterystatus
  • menubutton
  • searchbutton
  • startcallbutton
  • endcallbutton
  • volumedownbutton
  • volumeupbutton

We will add our event listeners within the device ready function to listen for both the change from being online to offline, as well as the reverse.

function onDeviceReady() {
   checkConnection();
   document.addEventListener("online", onOnline, false);
   document.addEventListener("offline", onOffline, false);
 }

The two functions simply toggle the network state variable based on the network state.

function onOnline(event){
   isConnected = true;
}
function onOffline(event){
   isConnected = false;
}

If while using our application, we have a network status change, the application can properly respond to it. This may not seem like much, but defensive programming techniques can improve the overall user experience of your application. We all know that the best user experience will often win in a crowded marketplace.

The project files are available on my GitHub repo.

Adobe MAX Lab: Update #1

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.

Adobe CreateNow Camp Orange Country!

Had a wonderful time presenting at Adobe CreateNow Camp Orange Country. They certainly know how to run an event!

It was a pleasure talking with so many of the attendees about the various Edge Tools. As promised here is the presentation that I gave:

http://aj-software.com/presentations/edgetools/#/

If you have any questions on any the tools and services, please ping me. Also if you want to know more about the mobile schedule site I wrote, ask way…

Here are the urls that I used as well:

Edge Animate

http://pmkwilliams.com/
http://www.projectluna.com/

Edge Reflow

http://adventurecodemo.com/

TypeKit

http://welcometotakeout.com/
http://lostworldsfairs.com/eldorado/
http://lostworldsfairs.com/moon/
http://www.newyorker.com/

MAX session reviews

Thanks to all who took the time to submit session feedback for my three workshops at this year’s Adobe MAX. Overall, I am happy with the responses. There were some very nice comments from folks. Unfortunately, there were a few that did not have the best experience. To them, I am sorry. One of the challenges of this lab was trying to find a proper starting point to take you from a blank html document to a native app in 90 minutes. I wish I had more time to explore PhoneGap more, but alas we did not. To that end I am working on the follow on exercises that I promised. Another challenge with a lab like this is what is the audience’s background. For some it was too easy, for others too hard, but for most it was just right. I had hoped to get session feedback earlier (like years past), so maybe the Tuesday or Wednesday labs might have been tweaked, but no such luck.

To the one person who found the typo, sorry. I must have read over the lab a hundred times, and my brain just did not see it, nor did my reviewers.

But overall, I am pleased with the results of my workshop, and hopefully you are using the things you learned. If you have any questions on the workshop, feel free to ping me. And if you build something based on what you learns, please take a moment and share it!

Nerd Radio

nerd-radio-logoOne of the traditions I like to keep at Adobe MAX, is sitting down with the gang at Nerd Radio. This year I was again able to spend a few minutes talking with Garth and Leif about my workshops that I was doing at the conference, my latest side project (ConfiGAP), and hinted about a really cool project that I am working on for the day job. You can listen to my interview here. Make sure you take the time and listen all the great conversations they had throughout the entire conference.

Thanks again for having me on the podcast!

Adobe MAX 2013 is a wrap!

I will write more later on the show, but I want to jot down a few thoughts on the train ride back to San Diego. This year’s MAX was another memorable event. Obviously the focus of Adobe has shifted, but even so there was still a large collection of familiar faces mingling throughout the conference halls and after hour gatherings.

I am proud to have had the chance to present three workshops this time. For those who attended, I hope it was worth your time. I will be posting the slides and other materials shortly. In addition, I will post the ‘enhancements’ that I promised as well.

I am looking forward to next year’s event (where ever it maybe).

Adobe MAX is coming fast!

Adobe MAX

I have been selected to speak at Adobe MAX again. However, this time I am giving a 90 minute workshop entitled “Creating Mobile Applications with jQuery Mobile and PhoneGap Build“. In fact the response has been so good, they had to add a third session on Wednesday afternoon! If you are attending and wanted to take this workshop, maybe it can now work into your schedule.

I have had a lot of fun developing the course content. If all goes well, attendees will go from a blank html document to a working mobile application in 90 minutes! I have some great TAs, so if even you hit a snag, these fine folks will be able to get you back on track. It should be a fun workshop, and I hope that you can attend. If you are not sure about coming to AdobeMAX, there is a discount code available for $300. Leave me a comment and I will send it to you.

 

Adobe Developer Connection Articles

adc_featured

I recently had the good fortune to write two articles for the Adobe Developer Connection. The first article was on the just released Edge Reflow Preview. Edge Reflow is a new application designed to aid designers and developers in creating responsive web sites. I was a humbled to see that it is the featured article on the site.

The other article I wrote was Up and Running with Modernizr. (Yes, I picked the name as a nod to all my good friends at lynda.com 😉 ). Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

I had a lot of fun writing both articles, and had great support from the ADC staff (Brian & Julee) during the process!

Speaking at Adobe MAX 2013!

Adobe MAX

Well, I am happy to announce that I will be again presenting at Adobe MAX! This will make my third time. I am trying something new this time, I am leading two workshops on using jQuery Mobile and PhoneGap Build. These workshops are designed to introduce the key core concepts of these technologies to new users. I know it is still months away, but I am already hard at work creating what I hope is an informative and engaging workshop.

You can register for the conference at: http://max.adobe.com/

I hope to see you there!