jQuery Mobile

Atom Autocomplete Packages

atom_logo

After a few fits and false starts, I have finally been able to port my various code hinting modules that I wrote for the Bracket editor to the Atom editor. I switch between these two editors and not having my code completion functionality for my various frameworks was frustrating.

Luckily, I found the autocomplete-html package that is now built into the Atom editor by default. What was an added bonus, the tag and attribute sources were actually from the Brackets repo! Thus meant once I understood the Atom packaging publishing flow, I should be able to port each of the Brackets extensions.

To install the package, go to Atom > Preferences > Install. Then enter the package name and press enter.

The available packages are:

autocomplete-ionic-framework
Ionic Framework element and attribute autocompletions

autocomplete-onsenui
OnsenUI Framework element and attribute autocompletions

autocomplete-jquery-mobile
jQuery Mobile Framework element and attribute autocompletions

autocomplete-zurb-apps
Zurb Foundation for Apps element and attribute autocompletions

autocomplete-angular-material
Angular Material element and attribute autocompletions

autocomplete-polymer-project

Polymer Project element and attribute autocompletions

Enjoy!

 

jQuery 2.0 Development Cookbook

jQuery 2.0 Development Cookbook The problem with frameworks that have been around for sometime, is you have to be careful of the solutions that might exist for a particular problem you might be having. jQuery is certainly one of those frameworks that has a long legacy. The jQuery 2.0 Development Cookbook aims to solve some of these issue by collection a nice set of solutions to many standard problems using the newer 2.x branch of jQuery.

Leon Revill takes the reader from some of the more basic solutions, such as standard DOM manipulations, through more and more advanced solutions. The later chapters of the book being to touch on the basics of both jQuery UI and jQuery Mobile.

One issue I did have with the book is the author did spend a modest amount of time covering some server side portions. I appreciated the effort to introduce the reader to some more topics, but wish the he had just pointed the solution. I also would have like to have seen more advanced recipes that really show the capabilities of using jQuery

Overall, found the book useful as a traditional reference for working with jQuery 2. New developer to the jQuery framework will find this reference useful, and intermediate developer might pick up a trick or two as well.

(Disclaimer: The publisher supplied a copy for review)

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.

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.

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.

 

My jQuery Mobile & PhoneGap Build sa

Adobe MAXJust found out that a third session of my workshop “Creating Mobile Applications with jQuery Mobile and PhoneGap Build” has been added to the schedule at this year’s Adobe MAX! This session will be held on Wednesday at 4pm.

Hope to see you there.

Here is the details on the workshop:

Discover how jQuery Mobile and Adobe PhoneGap Build, part of the Adobe Creative Cloud, make for a powerful combination when creating mobile applications with HTML, JavaScript, and CSS. This session will show how to make the most of these tools when using them together in mobile development. This workshop will cover:

  • The basics of developing a PhoneGap application based on jQuery Mobile
  • How to use the jQuery Mobile framework to write a mobile web app that works on all popular smartphone and tablet platforms
  • How to customize the application using Adobe Fireworks
  • How to make an application more flexible by using a templating system
  • Taking the application native by using PhoneGap Build and enabling device-specific features

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!