PhoneGap

Attending PhoneGap Day!

phonegap I am going to be at PhoneGap Day this Friday! So, what is PhoneGap Day?

PhoneGap Day is one part conference and one part celebration. Expect a fun and informative day packed with people who are using PhoneGap as part of their mobile app development. Meet members from the PhoneGap team, hear the latest PhoneGap news, and find out what’s coming next!

I will be showing my latest version of ConfiGAP as well 🙂

Advertisement

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.

ConfiGAP 1.2.4 released

ConfiGAPI 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.

There is now a Open and Save menu item available to you. I had originally had not plan to support native menus, since I hope to eventually transition this app from the desktop to an in browser app. But adding them was a fairly easy fix to apply.

Moving the Save button’s location proved to be a bit harder. I looked over each of the panels, the Splash Screens panel had too much content to allow the application’s vertical height to be reduced. So, I began exploring ideas on how to redesign this panel to allow this. Here is what the new screen looks like:

New Splash Screen Panel

This redesign now allows the application’s window to resized to a smaller size.

I also adjusted some of the options based on the changes with PhoneGap Build. The ChildBrowser Plugin is no longer used by PhoneGap 2.7 or later, so that plug in is now disabled. If you are still targeting older PhoneGap versions, you will be able use that plug in. Also, the Stay In Web view option for iOS is also disabled for newer versions of PhoneGap as well.

I expect I will have several more updates when PhoneGap Build begins to support PhoneGap 2.8. Stay tuned.

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/

More ConfiGAP updates

ConfiGAPOne of the missing feature in my ConfiGAP utility was the ability to manage the access elements. For those who do not know what the access elements are, here is the definition from the documentation:

The access element provides your app with access to resources on other domains – in particular, it allows your app to load pages from external domains that can take over your entire webview.

Although I do not have the interface controls enabled for this feature, I do have in the place the code to properly read an existing config.xml file that  contains access elements, and the ability to then resave the file with that data still intact. So I releasing this version with this simple support in place. I hope to have the completed version done in about a week. Again, thanks to all that have used ConfiGAP and found it useful.

I also tweaked the Android SDK selections as well. The old design just had an SDK number. Pop quiz, Android SDK 12 is also known as ______? Right, I can’t tell you either. So, the list now shows the SDK number and the matching version number & naming (FroYo, Jelly Bean, etc).

Review: Creating Mobile Apps with jQuery Mobile

0069OSAs an instructor of an introductory mobile application development course, I am always on the lookout for materials that can be used as resources for my students. Creating Mobile Apps with jQuery Mobile is just such a resource that I can recommend to my students. Shane Gliser begins the book by introducing the reader to the value of prototyping. I applaud him for reinforcing the idea that we should first spend some time with paper and pencil before we open our favorite editor (either code or design) to create our next mobile masterpiece. From there, the author lays down some foundational information on meta viewports, recent changes to the jQuery event model, and some CSS/media query structure. Then he takes the reader through the process of creating a jQuery Mobile app for a restaurant. Although he does touch on some jQuery Mobile basics, he does assume some working knowledge of jQuery Mobile, and HTML/CSS/JS in general. That might prove to be an issue to some.

What I did like is that he does address some common issues that new users to jQuery mobile might face, such as adding custom icons within jQuery Mobile, working with Google Maps, and form validation. I also enjoyed the fact that he introduces client-side templating to the reader. jQuery Mobile apps can become quite heavy with all the markup that is repeated.

However, I do wish the author had spent more time exploring the use of HTML 5 video with a jQuery Mobile app. He does cover HTML audio nicely, but the coverage of video did not address enough of the challenges of video playback in a non-Flash based world. I also found the section on HTML5 manifests a bit light. Manifest files can be a bit tricky to create and debug, so some guidance for the reader might have proved useful. The section on compiling your project with PhoneGap Build was another section that seemed far too short. Often, jQuery Mobile is part of a workflow that includes using PhoneGap as a solution to create a native application. It would have been helpful to guide a reader to some of the modifications one should make to have a better performing application.

Overall, I think the book is a nice companion to another Packt publication, jQuery Mobile Web Development Essentials written by Ray Camden and Andy Matthews (one of the technical reviewers) and think it will be a useful addition to those seeking to expand their use of jQuery Mobile as a solution to their mobile application toolkit.

Creating Mobile Applications with jQuery Mobile and PhoneGap Build

Adobe MAX

Where the world’s creative minds collide.

At this year’s Adobe MAX, I taught three workshops on Creating Mobile Applications with jQuery Mobile and PhoneGap Build. It was a lot of fun, and hopeful worthwhile for those who attended. As promised here are the files: the workbook, the slides, and the resources. Even if you did not attend, maybe the workbook and lab files might prove useful.

I will be posting enhancements to these files over the coming weeks to cover a few advanced features that I knew I would not be able to cover in the 90 minutes.

ConfigGAP updated

ConfiGAPOne of the challenges with a utility like ConfiGAP, is the variety of directory structures each project could have. You try to plan and test for what you think are the ‘probable’ structures, but you never know. I have been working on some improvements to the reading and writing sections of the app. One thing you have to remember is that the config.xml file needs to be included in the same directory as the index.html file when the entire package is zipped up and sent to the PhoneGap Build servers.

When loading a saved config.xml file, the application will scan for an index.html file. If one is not found, it will report an error. All the referenced assets need to based on the directory that the index.html file is located.

Another change I made was I dropped support for 1.9 and lower as a PhoneGap version. The PhoneGap Build team made the announcement that due so some new requirements from Apple, they decided to drop the older support.

I am starting work on adding the user interface to add in access elements. I hope to have this done shortly.

Thanks again to all that have downloaded and used ConfiGAP, and to those who have let me know of issues and suggestions. Keep ’em coming!