In this tutorial we will be exploring the CreateJS suite of libraries. CreateJS is suite of JavaScript libraries and tools for building rich, interactive experiences with HTML5. The CreateJS suite is divided into four libraries.

• EaselJS - Makes working with HTML5 canvas easy.
• TweenJS - For tweening HTML5 and JavaScript properties
• SoundJS - Lets you easily work with HTML5 audio
• PreloadJS - Lets you manage and coordinate loading of assets

The first library we will look at is EaselJs. Lets get started!

EaselJS Explained

EaselJS is a library for working with the HTML5 canvas. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier. Getting up and running with EaselJS could not be easier. You'll need to define a canvas element in your HTML and reference it in your JavaScript. EaselJS uses the notion of a Stage which is the top level Container for the display list ( the stage will be your canvas element). Below is an HTML fragment and the corresponding JavaScript needed to setup EaselJS.

<canvas id="testCanvas" width="600" height="300"></canvas>

To reference the above canvas you would use the following.

 var canvas = document.getElementById("testCanvas");
     var stage = new createjs.Stage(canvas);

Drawing With the Graphics and Shape Classes

EaselJS comes with a Graphics class that exposes an easy to use API for generating vector drawing instructions and drawing them to a specified context. The commands are very similar to the normal HTML5 Canvas, while EaselJs adds some of its own new commands as well. If you are not familiar with HTML 5 canvas and the drawing commands, you may want to watch the Canvas Essentials course that was recently released. You will normally not use the Graphics class by itself, but rather access it by the Shape class. Below is a JSFiddle that uses that Shape class to do some drawing.

As you can see in the above code the commands are chainable ShapeObject.graphics.setStrokeStyle(1).beginStroke("rgba(0,0,0,1) etc.. You may also have noticed a call to stage.addChild() within the functions. Anytime you want to put something onto the canvas, you must call stage.addChild(). Within the drawShapes() function, there is a call to stage.update(). To be able to see your changes, you must call stage.update() after each change to the canvas. There is a way to not have to repeatedly call stage.update() and that is by using the Ticker Class. The Ticker provides a centralized tick or heartbeat broadcast at a set interval. Listeners can subscribe to the tick event to be notified when a set time interval has elapsed. Below is how you would use the Ticker class to automatically update the stage.

 createjs.Ticker.addEventListener("tick", handleTick);
     function handleTick(event) {
       stage.update()
     }

The Shape class comes with a whole slew of properties you can adjust such as x,y positions, alpha, scaleX,scaleY and quite a few others. Below is a demo showing some of these properties.

Within the drawTheShapes() we generate 15 circles with a line drawn through them, being able to chain the drawing commands makes this dead simple. Then we randomize the shapes position, scale, rotation, and alpha.

You can attach events to the shapes such as click, mousedown/over/out, etc, by using the on() method. In this demo when you click on one of the shapes an alert is thrown up, and on mouseout we log a message to the console. To allow for mouse events on the stage mousedown/over/out etc, you must call stage.enableMouseOver(frequency) where frequency is the number of times per second to broadcast the mouse events. This operation is expensive, so it is disabled by default.

The Text Class

EaselJS ships with a Text class that makes it very easy to create text, and to change properties on that text. You call the constructor passing in the text, a font, and a color i.e. new createjs.Text("Hello World", "20px Arial", "#ff7700") Like the Shape class, it comes with a variety of properties and methods. Below is a demo utilizing the Text class.

Similar to the last demo, we create 25 TextFields, and apply some random values to their properties.

Demo Project - Hangman

The following demo is a hangman game created using the Shape and Text Class we have discussed so far in this tutorial.

To draw the hangman we use a combination on lineTo(), moveTo(), and for the head we use the arc() method. Within the drawCanvas() function, we call the clear() method on the hangmanShape.graphics which clears out any previous drawings we have done into this shape. We change the TextFields color depending on whether player has won or lost their game.

Bitmaps

You can use images by utilizing the Bitmap class. A Bitmap represents an Image, Canvas, or Video in the display list, it can be instantiated using an existing HTML element, or a string (Base64). For example new createjs.Bitmap("imagePath.jpg").

<

Very similar to previous demos we create three bitmaps here, and give some random properties to them.

We are using the Shadow class to create some shadows. The shadow class takes as parameters, the color, offsetX, offsetY, and size of the blur effect etc. myImage.shadow = new createjs.Shadow("#000000", 5, 5, 10). You can apply shadows to any Display Object so this would work for text as well.

Sprite and SpriteSheets

A Sprite displays a frame or sequence of frames (like an animation) from a SpriteSheet instance. A sprite sheet is a series of images (usually animation frames) combined into a single image. For example, an animation consisting of eight 100x100 images could be combined into a 400x200 sprite sheet (four frames across by two high). You can display individual frames, play frames as an animation, and even sequence animations together. To initialize a Sprite instance you pass in a SpriteSheet and optional frame number or animation to play, for example, new createjs.Sprite(spriteSheet,"run"). The data passed to the SpriteSheet constructor defines three critical pieces of information:

• The image or images to use.
• The positions of individual image frames. This data can be represented in one of two ways: As a regular grid of sequential, equal-sized frames, or as individually defined, variable sized frames arranged in an irregular (non-sequential) fashion.
• Likewise, animations can be represented in two ways: As a series of sequential frames, defined by a start and end frame [0,3], or as a list of frames [0,1,2,3].

Below is some sample code that would initialize a "character" sprite.

var data = new createjs.SpriteSheet({
    "images": ["path/to/image.png"],
    "frames": {"regX": 0, "height": 96, "count": 10, "regY": 0, "width": 75},
    "animations": {"walk": [0, 9]}
    });
    character = new createjs.Sprite(data, "walk");
    character.play();

Here is a demo using the Sprite and SpriteSheet Class. You need to click on the stage, and then you can use "A" to move left, and "D" to move right. One thing to note about this demo is that I have Base64 encoded the images and they are included by the "imagestrings.js" external resource. Because we are using a SpriteSheet and interacting with the mouse the canvas gets tainted from cross domain images policy (CORS). By using Base64 strings we can overcome this. If this were hosted on your own domain you would use the Bitmap class as usual by passing a element, or path.

Within the setup() function we are creating the spritesheet. For the "images" key I am passing in characterImage which is a Base64 encoded string. For the "frames" key the character images are 96 pixels high, 75 pixels wide, and there are ten frames(separate images). Below is the image we are using for the spritesheet so you can visualize what it looks like.

For the "animation" key we define a "run" animation that is from "frame" zero to nine. Lastly, we create the character from the spritesheet.

When you move the character left or right we call character.play(). and when you stop moving the character we callcharacter.gotoAndStop(0). Since we only have one "animation" we can just call play() and gotoAndStop() if you had a number of animations you would use a combination of these two plus gotoAndPlay().

Container

The Container Class is a nestable display list that allows you to work with compound display elements. For example you could group arm, leg, torso and head Bitmap instances together into a Person Container, and transform them as a group, while still being able to move the individual parts relative to each other. Children of containers have their transform and alpha properties concatenated with their parent Container. Below is a demo utilizing the Container Class. Click on the stage to move the container by 20 pixels.

Here we are creating three bitmaps and adding them to the container, we are then able to move them all in one go by moving the container, and even though they are in a container you could still move them each individually.

Cache()

The cache() method of the display object draws the display object into a new canvas, which is then used for subsequent draws. For complex content that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), this can provide for much faster rendering because the content does not need to be re-rendered each tick.

The cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually update the cache by calling updateCache() or cache() again. You must specify the cache area via the x, y, w, and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates. Caching should not normally be used on the Bitmap class as it can degrade performance, however if you want to use a filter on a Bitmap then it must be cached.

Due to size restraints on the JSFiddle embeds I will not be providing a demo for this method, but will link you to a demo on the CreateJs website.

Filters

The Filter class is the base class that all filters should inherit from. Filters need to be applied to objects that have been cached using the cache method. If an object changes, you will need to cache it again, or use updateCache(). Note that the filters must be applied before caching. EaselJS comes with a number of pre-built filters. Note that individual filters are not compiled into the minified version of EaselJS. To use them, you must include them manually in the HTML.

• AlphaMapFilter : Map a greyscale image to the alpha channel of a display object
• AlphaMaskFilter: Map an image's alpha channel to the alpha channel of a display object
• BlurFilter: Apply vertical and horizontal blur to a display object
• ColorFilter: Color transform a display object
• ColorMatrixFilter: Transform an image using a ColorMatrix

The demo below uses the Color Filter, when you click on the stage it removes the green channel from the image. The Color Filter has the following parameters.

ColorFilter( [redMultiplier=1] [greenMultiplier=1] [blueMultiplier=1] [alphaMultiplier=1] [redOffset=0] [greenOffset=0] [blueOffset=0] [alphaOffset=0])

The red,green,blue, and alpha Multipliers are expected to be a number from zero to one, and the red, green, blue, and alpha Offset are expected to be a number from 255 to 255.

We create a regular bitmap object, apply the filter, and the cache the bitmap.

Final Demo

I've created one final demo, that we will build on in the next part of this series, by adding sound, preloading the assets, and using tweens.

In this demo we are utlizing the Bitmap, Text, and Shape, classes to create a Space Invaders type game. I won't be going over every step here since the purpose just to show how to tie the concepts together, but if you have any questions about the code feel free to ask in the comments. The collision detection is provided by osln via Github.

Conclusion

In this tutorial we have taken a look at EaselJS and have made a couple of demo applications. I hope you have found this article helpful and that it gets you excited about using EaselJS. Thanks for reading!

Meet Caroline... She is a Theatre major and a current Undergraduate Research Award (URA) scholar. Her research focuses on the 18-30 year-old age group and trying to understand their seeming disinterest in patronizing live theatre performances.

How did you find your mentor for year research, scholarship, or artistic project?
I took a class taught by Dr. McCully in my freshman year and was enthralled by her extensive expertise and unique perspective on the theatre. I knew that I wanted to work with her from that moment, so we began a correspondence and she helped me to develop this research idea.

How did you know this was the project you wanted to do?
It’s been a passion of mine for a long time to eliminate or reduce the current stigma carried by live theatre – that it is an elitist art form for the educated and wealthy. Determining the most effective methods to engage a very underrepresented demographic seems to be an appropriate first step.

Do you get course credit for this work?
No, but I will receive a notation on my transcript from the Shriver Center and I am developing a relationship with a potential future employer.

How much time do you put into it?
It varies at this point, but once it gets into full swing, it will be at least 10 hours a week.

How did you hear about the Undergraduate Research Award (URA) program?
I started my undergraduate career as an Interdisciplinary Studies major, and it was recommended as a resource to aid in the completion of the required capstone project. Then, when I switched my majors, I still wanted to complete the project and the URA program still made sense to help make that happen.

What academic background did you have before you applied for the URA?
I have taken many theatre classes, with a good deal of business classes (like management, entrepreneurship, and marketing) mixed in.

Was the application difficult to do?
The hardest part was deciding exactly what the project should be. Once I had that figured out, the application came fairly easily.

How much did your mentor help you with the application?
I made a rough draft and my mentor helped me shape and polish the application to be the best it could be.

What else are you involved in on campus?
I am involved in the Theatre Department and the Musical Theatre Club, and I work at the Campus Information Center. I’m also in an off-campus a capella group.

What is your advice to other students about getting involved in research?
Don’t allow yourself to be limited by traditional definitions of research. You can complete research in any field, with a wide variety of projects. Let your imagination run wild, and then the nice people in the URA program can help you focus.

What are your goals for after graduation?
I plan to get a masters degree in arts administration and then work in a local theatre for a few years, while I learn all that I possibly can. Then I will open my own theatre company.

Read her abstract here...

This is the third installment in a series covering four ways to develop a mobile application. In previous articles, we examined how to build a native iOS and native Android tip calculator. In this article, we’ll create a multi-platform solution using PhoneGap.

Adobe’s PhoneGap platform enables a developer to create an app that runs on a variety of mobile devices. The developer accomplishes this largely by writing the user interface portion of their application with Web technologies such as HTML, CSS and JavaScript. PhoneGap’s development tools then bundle the HTML, CSS and JavaScript files into platform-specific deployment packages. PhoneGap supports a wide variety of platforms:

• iOS
• Android
• Windows 8
• Windows Phone 7 and 8
• BlackBerry 5.x+
• WebOS
• Symbian
• Tizen

For this article, we’ll focus on getting our sample FasTip application running on iOS and Android:

As with the previous articles in this series, all of the code for our application may be obtained from a GitHub repository.

Applications built with PhoneGap use the mobile platform’s Web view to render content. As such, the content will appear nearly identical on each platform, much as any Web page would. While you can style the controls differently on each platform, take care in doing this. This issue is covered in detail in the section below on multi-platform considerations.

Plugins: Closing The Gap On Native Features

PhoneGap essentially wraps a Web view of your HTML, CSS and JavaScript in a native application. This is required because the Web view in an application does not inherently support many device features, such as access to the file system or the camera. PhoneGap has a bridging mechanism that allows JavaScript running in the Web view to invoke native code contained in the application. PhoneGap comes complete with plugins to support device capabilities such as the following:

• accelerometer,
• camera,
• contacts,
• file system,
• media playback and recording,
• network availability.

A full list of capabilities for each platform is available on PhoneGap’s website. If these capabilities aren’t enough, PhoneGap may be extended with plugins that enable the developer to access more device features, including these:

• barcode scanning,
• Bluetooth,
• push notifications,
• text to speech,
• calendars,
• Facebook Connect.

In previous versions of PhoneGap, a GitHub repository contained a set of prebuilt plugins. With the arrival of PhoneGap 3, a new plugin architecture has resulted in the old repository being deprecated. A registry has been created for all plugins compatible with PhoneGap 3.

Some command-line tools are also provided to make it easy to add the plugins to the repository for your project. We’ll see these later on in this article. PhoneGap also publishes documentation and examples on how to write your own plugins. Of course, development of plugins assumes familiarity with the native platform on which the plugin is to be supported.

An HTML, CSS And JavaScript Foundation For Mobile Development

The majority of PhoneGap’s capabilities lie in non-visual components — things that access the file system, network availability, geolocation, etc. PhoneGap does not provide much assistance with building the user interface itself. For this, you must rely on the HTML and CSS foundation that you’ve built yourself or on a framework. Applications written for mobile browsers must respect the limitations of the given mobile platform (processing speed, screen size, network speed, touch events, etc.).

Unless you have been working with HTML and CSS for a long time and are well aware of these issues, developing an effective mobile application without some sort of framework can be daunting.

Fortunately, some mobile frameworks have arisen to help with this. Here are just some of the offerings in this area:

• jQuery Mobile
• Ionic
• Sencha Touch
• Kendo UI Complete
• AppGyver’s Steroids
• Enyo
• TopCoat

These frameworks vary from CSS-oriented libraries (like Topcoat) to complete MVC-based libraries with sets of mobile UI controls (like Sencha Touch). Discussing the differences between these frameworks in detail is beyond the scope of this article and would require an entire series of articles. Visit the websites above and try some of the demonstrations on several mobile devices.

One distinction to be made is that some frameworks support a wider variety of devices and device versions than others. Some mobile frameworks are built on a particular MVC platform. For example, Ionic is built on the AngularJS framework. This might make a particular library more attractive to developers who are already familiar with the respective MVC framework.

Frameworks such as Sencha Touch abstract the DOM from the developer through the use of APIs, freeing the developer from having to worry about details of browser vendor implementations. Sencha also provides graphic development tools, such as Sencha Architect, to aid the development process. Sencha provides commercial support and training, too, which are worth investigating.

I’m often asked to recommend a framework for mobile development. But the right tool depends largely on your application’s functionality, the mobile platforms you need to support, your demand for commercial support and your experience with Web and mobile development in general. I’m encouraged by some emerging frameworks, particularly Ionic, but as of the time of writing, Ionic is still in the alpha stage. If you are looking for something with a longer track record, then Sencha Touch or, for some cases, jQuery Mobile might be appropriate.

To be expedient and because of the wealth of tutorials and documentation available, I’ve written our FasTip application in jQuery Mobile, which provides a wide range of support for mobile devices. It’s a good choice for applications that do not require significant customization to the user interface. The simplicity of our application makes it well suited to jQuery Mobile.

PhoneGap Or Cordova: What’s In A Name?

In the process of learning about PhoneGap, you’ll encounter the name Cordova. In fact, the command-line tool that we’ll use in just a moment to create our PhoneGap project is named Cordova. Simply put, Cordova is the open-source project that is the basis of PhoneGap. Think of it as the engine that drives PhoneGap.

In most cases, the names may be used interchangeably. With “PhoneGap” already being trademarked, a new name was needed when the project was open-sourced — hence, Cordova. “PhoneGap” continues to be used by Adobe for commercial products. Most people still refer to
the project as a whole as PhoneGap.

Installing PhoneGap

With the introduction of version 3, installing PhoneGap’s tools and setting up projects have been greatly simplified, thanks to the new command-line interface (or CLI). The command-line tools are based on Node.js; thus, you must install it before installing PhoneGap. Once Node.js is in place, simply run one command for the node package manager to install PhoneGap’s tools:

    npm install -g cordova
    

Native SDKs: The Rest of the Equation

The command-line tools provide only the PhoneGap portion of the tools that are necessary for development. You will still need the mobile SDKs for the platforms that you wish to support. For this article, we’re mostly concerned with iOS and Android. For iOS, you’ll need to install the same developer toolset that we used when building native Objective-C applications.

Refer to the earlier article on native iOS development for instructions on installing those tools. This will give PhoneGap the tools necessary to compile and build your app into something that can be deployed to an iOS device. Likewise, to build applications for Android, you’ll need the Android SDK.

The previous article on native Android development provides some assistance in locating these tools and installing them. In addition, you may wish to consult PhoneGap’s documentation for details on installing for Android and iOS.

FasTip In PhoneGap

Given that FasTip is such a simple application, we don’t have to leverage much of PhoneGap’s functionality to access device features. Most of our time will be focused on the Web components needed to build the user interface. Unlike with native platforms, there is no vendor-supplied integrated development environment (IDE) for PhoneGap that is similar to Xcode or Eclipse.

Developers may use whichever IDE they please. I use JetBrains’ excellent WebStorm IDE for Web development because it suits PhoneGap development nicely. We’ve developed much of the FasTip application in WebStorm and tested it on the desktop version of Google’s Chrome browser, before packaging it for mobile devices in PhoneGap.

The figure above shows the FasTip application loaded in WebStorm. Note that relatively few files make up this project:

The user interface is shaped by index.html. This one file contains all of the HTML used by this application. The HTML starts out with this head section:

    <head>
      <meta name="viewport"
        content="initial-scale=1, minimum-scale=1, maximum-scale=1">
      <meta charset="utf-8">
      <title>FasTip - Tip Calculator</title>
      <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.0.css">
      <link rel="stylesheet" href="css/app.css">
      <script src="js/jquery.js"></script>
      <script src="js/jquery.mobile-1.4.0.js"></script>
    </head>
    

The viewport meta tag scales the width of the page to match the width of the device’s browser. If this is not present, then the mobile browser wouldn’t know that the page is optimized for mobile use and would zoom out to display the page as though it were on a desktop browser.

Next, we load two style sheets. The vast majority of the CSS is contained in the jquery.mobile.css file, with a few minor application-specific CSS overrides in the app.css file. The head section then loads the scripts needed to support jQuery and jQuery Mobile.

Navigating Screens, jQuery Mobile-Style

Unlike our native apps, in which we had separate view controllers or activities for each screen, here we’ll place the HTML markup for both screens in one file. jQuery Mobile supports the concept of a page being divided into sections that make it appear to the user as though they are navigating between screens. In fact, the user would never leave this single Web page.

    <div data-role="header">
      <h1>FasTip</h1>
      <a href="#settingsPage" id='settingsButton' class="ui-btn-right&quot
        data-role="button" data-icon="gear">Settings</a>
    </div>
    <div data-role="content">
      <form>
      <div data-role="fieldcontain">
      <label for="billAmount">Bill Amount:</label>
    

Above is the code in the HTML file for the header of the main input form for the tip calculator. Note that many of the HTML elements have data- attributes. Pay particular attention to the data-role attribute, which indicates to jQuery Mobile the purpose of the various elements on the page. The data-role="header" attribute defines the upper part of the page, which looks something like the UINavigationController in iOS apps. The data-role="content" attribute is the main content of our page and displays the main form of the tip calculator.

For our native iOS and Android apps, we had to write some code to enable the user to navigate between pages. In PhoneGap, a simple HTML anchor tag takes the user to the settings page:

    <a href="#settingsPage" id='settingsButton' class="ui-btn-right"
      data-role="button" data-icon="gear">Settings</a>
    

Further on in the HTML, we see this:

    <div data-role="page" id="settingsPage" data-add-back-btn="true" >
      <div data-role="header">
       <a href="#mainPage" class="ui-btn ui-icon-delete ui-btn-icon-left"
        data-rel="back">Cancel</a>
       <h1>FasTip - Settings</h1>
      </div>
      <div data-role="content">
    

This div element defines the boundary of the settings page in our application. The page has a div in it for the header and the content, just like the main page. Note how the first anchor tag in the header div defines the “back” and “cancel” button that enables the user to return to the first screen. The data-rel="back" attribute signifies that the link should close the current page and navigate to the main page, just like hitting the “back” button in a Web browser. In fact, pressing the dedicated “back” button on an Android device would perform the same function.

jQuery Mobile takes care of performing the transitions between these virtual “pages” in our application. Because much of the user interface and interaction between the controls is defined declaratively in our HTML, we have considerably less code to write to get the application running. All of our code is confined to a single app.js file that is just 41 lines long. The meat of our application starts with this snippet:

    $( document ).on( "ready", function(){
      $('#calcTip').on('click', calcTip);
      $('#saveSettings').on('click', saveSettings);
    
      var tipPercentSetting = localStorage.getItem('tipPercentage');
    
      if (tipPercentSetting) {
       tipPercent = parseFloat(tipPercentSetting);
      }
    
      $('#tipPercentage').val(tipPercent);
    });
    

When the document is ready, event handlers are attached to the buttons in order to calculate tips and save settings. In this example, we’re using HTML5’s localStorage object to persist the setting for a tip percentage. PhoneGap supports localStorage and will save the content in the proper directory of the native platform to ensure that the data is backed up with the device’s normal backup mechanism. When the user choses to save their settings, the following code is run:

    var saveSettings = function() {
      try {
       var tipPct = parseFloat( $('#tipPercentage').val() );
       localStorage.setItem('tipPercentage', tipPct);
       tipPercent = tipPct;
       window.history.back();
    
      } catch (ex) {
       alert('Tip percentage must be a decimal value');
      }
    };
    

Note the use of localStorage.setItem to write the tip percentage under the key of tipPercentage. Once the user has saved their tip percentage, they return to the previous screen. Because jQuery Mobile integrates with the browser’s History API when transitioning between pages, we can leverage the History API here and simply jump back to the previous page via window.history.back();. On Android where the device supports a “back” button, this will have the same effect as hitting the browser’s “back” button and moving back one screen.

For more complex apps, jQuery Mobile also enables you to dynamically load new pages, rather than place all of the markup in one file. This is the preferred approach if your application has several screens, because maintaining all of the markup in one file would become difficult and the mobile browser would have to parse that large document before rendering anything. Forcing the browser to process a large document would slow down the startup time of your application.

Calculating the value of the tip is done with the following code:

    var calcTip = function() {
    
      var billAmt = Number( $('#billAmount').val() );
      var tipAmt = billAmt * tipPercent/100 ;
      var totalAmt = billAmt + tipAmt;
      $('#tipAmount').text('$' + tipAmt.toFixed(2));
      $('#totalAmount').text('$' + totalAmt.toFixed(2));
    
    };
    

This is standard jQuery code for reading the bill amount, calculating the tip percentage and returning the results to the display fields on the page. When the user taps on the calcTip button, the calcTip function is invoked via an event handler that is attached when the DOM is loaded and ready:

    $( document ).on( "ready", function(){
      $('#calcTip').on('click', calcTip);
      …
    });
    

The interaction between the DOM and the HTML and CSS should be familiar to anyone who writes Web pages. Of course, other frameworks, such as Backbone.js and AngularJS, may be employed to bind data, render content from templates and so on. This is an important aspect of PhoneGap: It does not dictate that particular libraries or CSS be used. Use whatever tools you want to get the job done.

Getting Our Project Into PhoneGap

PhoneGap provides a command-line tool, named Cordova, to set up a new project, build an application, run the application and install plugins. Follows the steps below to set up a project in PhoneGap.

Step 1

To create our application, navigate to an empty directory and use the create command:

    $ cordova create fastip org.traeg.fastip FastTip
    

This command will create a subdirectory, named fastip, to hold our application files and to establish a new application named FasTip, with an org.traeg.fastip namespace.

Step 2

Switch to the fastip directory that PhoneGap has just created from the command above.

Step 3

We’ll need to tell PhoneGap which platforms we want this app to run on. We’re supporting iOS and Android, so run the following two commands to support them:

    $ cordova platform add ios
    $ cordova platform add android
    

Step 4

We can test our project to see whether PhoneGap has been properly initialized:

    $ cordova build ios
    $ cordova emulate ios
    

This will compile the application for iOS and then run it in the iOS simulator.

To run the application on Android, you would use the following commands:

    $ cordova build android
    $ cordova emulate android
    

Note the directory structure that PhoneGap has established:

    platforms/ios
    platforms/android
    

Note also that the sample code is copied by PhoneGap into the respective iOS and Android subdirectories. When you run the build operation, PhoneGap updates the respective build directories and places the updated files in a project suitable for each platform. If you examine the iOS directory, you’ll see that an .xcodeproj file has been created.

In fact, this project may be opened in Xcode, like any other iOS project. Similarly, the Android project may be readily imported into Eclipse. Do not change the contents of your application’s files in the platform directories, or else they will be overwritten the next time the build process is run.

Step 5

We can place the various files that comprise our application in the www folder directly in the project’s root. The next time the cordova build command is executed, the application’s content will be copied to the respective platform directories, and the application will be run with that new content.

Note that our Web application’s entire structure resides in this www directory. When you create a new PhoneGap project, it is preconfigured to run whatever is in the index.html file in the www directory. In addition to the Web files that we’ve added to the project, one more file is important to a PhoneGap application, config.xml. This file controls various options used in the build process, including the display of a startup splash screen, viewport scaling, supported device orientations, etc. The settings for this file will vary according to the platform, so review the settings for each.

Also, note that PhoneGap has a merges directory. In this directory you can place platform-specific files, which will be copied to the respective build directories. In this way, you can customize HTML, CSS and JavaScript files to each platform.

Considerations For Supporting Multiple Platforms

We’ve seen that, by using PhoneGap and a framework like jQuery Mobile, building a cross-device application is easy. One caveat with jQuery Mobile is that both iOS and Android users would see the same UX; that is, the UX would not be tailored to the respective platform, much like a Web page looks the same whether viewed on OS X or Windows.

Attempting to mimic the native platform controls in HTML and CSS is generally a bad idea. While you could approximate the look of the native platform, mimicking the feel of the platform is exceedingly difficult. The controls might not respond to taps and other gestures in exactly the same way. The result is usually a UX that just feels wrong. Successful PhoneGap projects generally eschew this approach in favor of a platform-independent UX.

If your project requires an experience that closely matches that of the native platform, PhoneGap might not be the right choice.

HTML5 capabilities vary widely across devices. While iOS and Android browsers are built on WebKit, some features are implemented only in the latest versions of the platforms. One useful website for checking browser version capabilities is Mobile HTML5. The browsers on some old platforms, particularly Android 2.x, have various rendering bugs, which could also hamper your development.

Frameworks such as jQuery Mobile and Sencha Touch take these compatibility issues into account. If you choose to roll your own solution, perhaps to gain greater control over the UX, then you will need to plan additional time for testing, particularly for old device versions, on which HTML5 support is less consistent.

jQuery Mobile makes it easy to get started and provides a good feature set for simple applications. Much of the functionality on the screens of our sample application is provided by jQuery Mobile itself, leaving us with less code to write. However, the speed of development with jQuery Mobile comes at the expense of customization. While jQuery Mobile does offer a “theme roller” tool to customize appearance, much of that is “chrome” related to colors and visual attributes like rounded corners.

Assess whether your application fits jQuery Mobile’s paradigm. The platform does offer some alternate layouts for things like forms, but the options are still somewhat limited. If your application requires a truly custom look or layout, then you might find jQuery Mobile too confining. Consider one of the frameworks suggested earlier. Or adopt a “best of breed” approach, mixing a CSS-oriented framework (such as Twitter Bootstrap, Zurb Foundation or Ratchet) with an MVC framework (such as AngularJS or Backbone.js).

Some of the large mobile solutions, such as Sencha Touch and Ionic, marry a powerful MVC platform to a set of prebuilt controls focused on mobile development. These tools are attractive and worthy of consideration. But bear in mind the different range of devices that each of these tools supports. At the moment, Sencha Touch supports more devices than Ionic, but jQuery Mobile supports even more. This should also factor in your selection process.

Using A Native Plugin

If you try our sample application on iOS 7, you’ll run into an issue with the device’s status bar that has affected many PhoneGap applications. That is, the status bar now overlaps the top of the application:

You could give the body tag a 20-pixel top margin to make the page clear the status bar, but that would cause problems on iOS 6 and Android. A cleaner solution is to use a native plugin that fixes this specific issue. To add the plugin to our sample project, we’ll use this command:

    cordova plugin add org.apache.cordova.statusbar
    

This pulls the necessary code from the plugin repository into our application. Now we’re ready to invoke the plugin in our code:

    $( document ).on( "deviceready", function(){
      StatusBar.overlaysWebView( false );
      StatusBar.backgroundColorByName( "gray" );
    });
    

This snippet of code waits for the deviceready event from PhoneGap, which tells our application that the PhoneGap environment has been initialized and is ready to receive commands from the JavaScript. The StatusBar object has been added to the window namespace via the PhoneGap plugin system so that we can access it via JavaScript.

The following screenshot shows the status bar overlay being turned off, as well as the background color of the status bar being changed to better fit our application:

Building In The Cloud

Generally speaking, to build an application for a particular platform, you must install the SDK for that platform on your machine. This could be a problem if, for instance, you’re on a Mac and want to target Windows tablets, whose SDK requires you to be on a Windows machine. Adobe offers a service named PhoneGap Build to help in this situation.

PhoneGap Build enables you to upload a ZIP file containing the HTML, CSS and JavaScript of your application. Additionally, PhoneGap 3 enables you to submit an application to PhoneGap Build right from the command line; from there, PhoneGap Build takes over and produces a deployment bundle for the desired platform.

Once the build process is complete, you may either download the deployment bundle and manually install it to your device or take a picture of a QR code on PhoneGap Build’s website and download the deployment package directly to your mobile device. What’s more, PhoneGap Build supports a feature named Hydration, which enables the application to download updates to the HTML, CSS and JavaScript files whenever it launches.

This means that testers will always be running the latest version of your application, without having to go through the traditional updating process. Note that, at least for now, Hydration is meant for development and testing — not for final production code that will be submitted to the app store.

Development in the Cloud

You can do more than simply compile and package your application in the cloud. Cloud-based Icenium provides a browser-based IDE that lets you edit code in a browser and immediately turn those edits into a deployment package. Using an application in the iOS App Store named Icenium Ion, you can dynamically load updates to your application as you change the code in the Web-based IDE.

In addition, Icenium bundles a license to Telerik’s KendoUI library. I’ve used this to make changes to an iOS PhoneGap application while on a Windows-based laptop. Icenium also offers a Windows desktop IDE named Graphite, which expands on the capabilities of the browser-based tool.

Another alternative to PhoneGap Build is AppGyver. It is not an IDE like Icenium, but it does offer a UX library, named Steroids, that facilities navigation between Web views using some native controls. Note that for page content itself, you must still use HTML and CSS.

The main downside to cloud-based development services is that they have limited support for PhoneGap plugins. However, new plugins are being supported all the time. Determine your application’s needs to see whether a particular cloud-based tool supports the plugins you require.

Debugging Your Application

In most cases, when attempting to debug an application, you’ll be mostly concerned with debugging the JavaScript, examining the console log and perhaps doing some interactive inspection and manipulation of the DOM. Unfortunately, there is no integrated way to debug across all platforms. However, there are several useful techniques, covered below.

Chrome DevTools

I generally find it easiest to work with Chrome DevTools by treating my pages as standard Web pages loaded in a desktop browser (although this doesn’t help with the portions of code that rely on PhoneGap plugins). Chrome DevTools provides an emulation panel that simulates the aspect ratios, touch events and more of various mobile device screens.

Apache Ripple

Apache’s Ripple is a NodeJS project that serves PhoneGap content in a desktop browser. Ripple enables you to experiment with different screen sizes and orientations. It also allows you to simulate geolocation coordinates and network connectivity events, as well as allows JavaScript code to invoke many of PhoneGap’s core plugins while running in a desktop browser.

Ray Camden has more information on using Ripple on his blog. Do not confuse this newer NodeJS-based version of Ripple with the outdated Chrome browser extension. The Chrome extension is no longer supported and is not compatible with PhoneGap 3.

Using Desktop Safari to Debug Web Views in iOS Apps

Starting with Safari 6, Apple has included support for using the Web inspector in desktop Safari to debug Web views running in the simulator. With your app running in the simulator, simply go to the “Develop” menu in Safari and look for the “iPhone Simulator” option. This will connect the Web inspector to the running instance of your PhoneGap application and will allow to you manipulate the DOM, set breakpoints in JavaScript, etc.

Using Chrome DevTools to Debug Web Views in Android Apps

Starting with version 4.4, Android’s Web view is now based on Google Chrome. With this change comes the ability to connect to the Web view from DevTools and to debug interactively, just like you can with iOS. If you don’t have a 4.4 device, fear not: It works with the 4.4 emulator as well. Note that you’ll need to add a special plugin to your PhoneGap project to enable Web view debugging on Android.

Web Inspector Remote

Web Inspector Remote (WEINRE) provides a partial set of debugging features, including DOM manipulation and access to the console. However, it does not support JavaScript debugging. Add WEINRE to your application by including a script tag in your application’s HTML and running a NodeJS server that this script connects to. The main advantage of WEINRE is that it works with earlier versions of WebKit on mobile devices and is one way of debugging cross-platform.

The PhoneGap wiki also has a page on debugging, with links to other tools.

Learning More

Much of the work you’ll do with PhoneGap requires a strong understanding of HTML, CSS and JavaScript. Consult resources such as Nicholas Zakas’ excellent book Professional JavaScript for Web Developers to build a foundation for development with PhoneGap. Of course, other resources exist for jQuery Mobile, AngularJS, Backbone.js and other frameworks. Google and Udacity have recently teamed up to offer an online course on mobile Web development, whose content applies to PhoneGap applications as well.

As for PhoneGap itself, the project has some introductory guides for each platform. And Adobe publishes a free monthly digital magazine, Appliness, covering Web and PhoneGap development. The PhoneGap wiki covers issues such as debugging and security. Finally, some great blogs by Adobe’s technical evangelists cover PhoneGap and Web development:

• Andrew Trice provides a lot of sample code, along with some great performance tips.
• Christophe Conraets has a number of articles on ways to structure an application using MVC frameworks. He also covers how to integrate with server resources.
• Raymond Camden offers a variety of articles on PhoneGap plugins and PhoneGap Build.
• Holy Schinsky has a series of articles on how to use and write PhoneGap plugins, as well as on how to incorporate push notifications.

If you’d like to further explore the marriage of native code and Web code to produce mobile applications, my Smashing Magazine article on “Mixing HTML5 and Native Code” might be of interest.

In the next and final installment in this series, we’ll explore another way to develop an application for multiple platforms, with Appcelerator Titanium.

(al, ea)

© Peter Traeg for Smashing Magazine, 2014.

Once a month, we’ll profile one of the amazing Phonathon students working in UMBC’s call center. This week, say hello to student caller and supervisor Jordan.

Jordan will be graduating in May of this year and has worked for Phonathon since September 2011. Jordan is from Bowie, MD, and is a Meyerhoff Scholar finishing his degree in computer engineering and mathematics. We sat down with Jordan to get to know him a little better and here’s what we learned:

Why did you choose to come to UMBC? What do you enjoy most now that you’re here?
I chose to come to UMBC because of the academic and scholarship programs as well as the diverse student body. Now that I’m here, I enjoy learning about the various cultural backgrounds of my classmates.

What activities do you enjoy outside of class?
When I’m not in class, I enjoy playing soccer and running around the Loop.

What do you like best about being a student caller?
The best thing about being a student caller is the opportunity to speak to a wide variety of UMBC alumni.

What are your plans after graduation?
My plans are to pursue  a career as a mathematician/computer scientist while pursuing a Ph.D. in mathematics.

Learn more about the great projects that Jordan and the other student callers fundraise for. 

For many of us, our early days are filled with animation. Cartoons made up a big part of my childhood, and many others whom I have conversed with over the years have shared similar origin stories. The bright colors, and often playful imagery has appeal across a range of ages.

Bringing that touch of whimsy from our youths into the now, to present content in a fun and engaging way, is one of the best ways of establishing an emotional connection with your audience.

So today we have another web design showcase to serve double duty as a source of inspiration to the readers and community, and as a means of highlighting some stellar work from the web design field at large. From examples that reflect the animations of our childhoods to those that more fall in line with the games and shows that have shaped our adulthoods, there is an animated gem or two that should appeal to and inspire everyone.

The styles may have changed, and grown up along with us, but the heart of the animated escapes remains the same as designers take the web to daring and bold new places with their animated works.

Noir Et Renoir

I love the way the Noir Et Renoir site starts black and white and slowly gains color as the lights in the windows come on. The interactive menu viewed through the windshield of the car is unique and adorable, whilst the information itself is presented in such a clean, minimalist way.

Barcamp Omaha

The Barcamp Omaha site keeps you delightfully entertained with a variety of animated monsters and aliens as you procede through its content, and the title created as a constellation adds a touch of extra whimsy.

Azahran Design Box

Azahran Design Box does a wonderful job staying true to their branding with sketchy cut out animations presented in cardboard boxes. Even offering a fun little interactive element to show you the services they provide.

Quechua

The Quechua site does a wonderful job of using its animation as a type of call to action. The animated bits direct your eye to the interactive elements of the site, and since these elements are used sparingly, it’s totally effective.

Parallax.js

Parallax.js uses its site as an example demonstrating how to use Parallax JavaScript on devices with a gyroscope. The cutout and pieced together look of the images works really well since this is a demo site, letting users know that this is just a fraction of what it can do.

Protect the Football

Protect the Football is a Buffalo Wild Wings sponsored game released to correspond with American Football season. The animated dropping intros set the mood and tone before launching you into the playful brand inspired game.

Goodtwin

Goodtwin uses it’s illustrated animation as a unique and quirky way to show how they can make your brand’s social profile continually rise.

inTacto 10 Years

inTacto 10 Years does a great job using an animated rocket ship to take us up and through space representing a timeline of technology development over the past 10 years.

Kick My Habits

Kick My Habits makes clever use of animation to create what is essentially a completely interactive, multi-page infographic which shows users the cost of their bad habits and where they fall among the general population.

Polecat

Polecat uses simple and colorful animations to illustrate the whimsical style of their work. The nature of the animations draws to mind those that one might expect from an app on their phone, stylistically tying the web design to the brand.

Octave & Octave

The Octave & Octave recruitment page makes creative use of animation for displaying the job openings they have, helping to make job hunting a little lighter a task than usual.

Milkable

Milkable uses subtle animation to highlight the fun and easy-going style of the team behind this brand, their fluid creativity and, well, as the site says, awesomeness.

DFDS Seaways

DFDS Seaways’ (The Smart Way To Travel) website uses an animated illustration to take you through the different travel options offered as well as compare the experience users will get traveling with them by sea, as opposed to by train or airplane.

Phileas & Fogg

Phileas & Fogg uses the beautiful image of a colorful hot air balloon floating over a vintage map to denote their purpose of flying a group of designers to the Costa Rica rainforests for 80 days.

Boris Etingof

Boris Etingof uses animation, among other accents, to give a pulse like touch to the interpretive constellation-esque designs in his experimental portfolio.

Axel Aubert

Axel Aubert uses both animation and perspective to display the menu of the site in an engaging way. He captures the attention of the user with this creative touch.

Hellohikimori

Hellohikimori uses some intense, and at times macabre, alien-like imagery in their animated background to introduce users to the talent this design agency is packing.

Michelle Lana

Michelle Lana uses animation as an enhancement to show off her illustration skills, keeping users thoroughly engaged as they scroll through her site. The childlike characters transport users back to the days of Saturday mornings in front of the tube.

Have you used animation in your work? Do you have a favourite site we’ve missed? Let us know in the comments.

Create Picture-Perfect Portraits With Beautune – only $14!

There are many folks in the US who feel strongly about illegal immigration.

Large numbers think immigrants should be denied the priviliges offerd to US citizens like owning US driving licences, collecting food stamps and using Medicare.

But what about having life-saving transplants? Is their a compassionate case to allow these?

Take the case of Mr. Rojas. 

Mr. Rojas didn’t jump a fence, or get smuggled into the country. He overstayed his work visa, like 40% of illegal immigrants in the U.S.

And he’s still working. But he is seriously ill.

Mr. Rojas is “an ideal kidney transplant candidate,” according to his nephrologist Venessa Grubbs. He doesn’t smoke, doesn’t use drugs, works as a dishwasher, has young children and a wife. He follows his doctor’s directions – easy on the potassium. He shows up for dialysis. He’s doing everything right under the circumstances.

“Even though transplant promises a significantly longer and better quality of life, I will not refer Mr. Rojas to the transplant center for evaluation, because the only detail that matters in this case is that Mr. Rojas is a poor, undocumented immigrant. And America does not give transplants to poor, undocumented immigrants.”

The stakes are high. Sarai Rodriguez, a twenty-five year old in need of a liver transplant, died after being refused a spot on the waiting list because of her undocumented status. 

In August of last year, twenty immigrants went on a hunger strike outside Northwestern Memorial Hospital in Chicago to protest the policy with little to show for their actions thus far.

So it seems the only way Mr. Rojas can get a transplant is by way of a miracle.

Such a miracle happened to Jesus Navarro. He finally received a transplant after a wealthy kidney recipient created a Change.org petition on his behalf.  100,000 signatures later Navarro’s hospital felt the pressure and performed the procedure.

It’s nice to think the public will come to the rescue of Mr. Rojas and others like him… but the odds are not good.

What to do? Should we lift the limits on such life-saving operations?