PhoneGap

PhoneGap Day(s) and a Call for Speakers

phonegapThe PhoneGap team just announced the dates for PhoneGap Day(s). This year PhoneGap Day will be held in San Francisco on October 24th and Berlin on September 26th. As before, there will be full day workshops on the day before. For more information, visit the web page: http://pgday.phonegap.com/

I attended last year’s PhoneGap day in Portland, and can easily say it was a great event. I am looking forward to attending it again.

In addition, the call for speakers is open as well. I am working up a few topics that I plan to submit. What is nice is these talks are short and sweet (about 20 minutes), so it is perfect for . Hope to see you there!

Creating App Store Ready Apps with PhoneGap

5
I recently gave an online presentation on “Creating App Store Ready Apps with PhoneGap” to the Creative Cloud Lovers User Group. So if you are interested in knowing more about PhoneGap and PhoneGap Build, some spend an hour with me. Here is the blurb about the presentation:
So, you have a Creative Cloud subscription… great! Did you know you have the capability to create “app store ready” applications using PhoneGap Build, a part of that Creative Cloud subscription?Join us online to see how PhoneGap (a.k.a. Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript.

Learn how PhoneGap works, and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API (Application Programming Interface), how the software components interact, and walk you through how to work with the JavaScript methods.

PhoneGap allows you to create interactive, feature-rich mobile applications (and if you subscribe to the Creative Cloud, you already own it!). You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.

Edge Animate & PhoneGap Build

On the PhoneGap Build forum, someone was inquiring about how to have an Edge Animate animation play audio when used within a PhoneGap application. For those who are not familiar with Edge Animate, it is an animation design tool from Adobe that uses web standards for the animations. Their most recent release added the ability play audio with the animation.

Since I am familiar with both tools, I thought I would create a simple demonstration of how to have an Edge Animate composition working in PhoneGap.

Although HTML5 does have an <audio> element, PhoneGap’s web view will not enable the audio to function. Instead we will need to rely on the Media API to do the actual audio playback.

EdgeAnimation

I first created a simple animation. A cloud floating across the screen, and when the Starling bird is tapped, it will play a tweet sound effect, and fly off screen. Once I have my animation completed, the next step is to publish it for the web.

We can now make some various edits to the index.html file and the index_edgeActions.js file.

Let’s update the index.html file first.

Within the <head> portion of the file, include a meta viewport element. This will ensure that the webview will be properly sized.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Next, we need to include the reference to the PhoneGap library. Add the following at the end of the <head> section.

<script src="phonegap.js"></script>

Go ahead and save this file.

Now, we need to make some changes to the index_edgeActions.js file. Depending on how complex your animation is this file might be quite complex, but I kept this animation very simple so you can understand what you have to modify.

We first need to comment out the audio playback calls that Edge Animate uses.  Comment out this line of JavaScript:

sym.$("tweet")[0].play();

Now add this JavaScript:

playPGAudio(getPhoneGapPath() + 'audio/tweet.mp3');

For your animation will need to locate all the instances where Edge Animate plays audio and make the change from calling it’s playAudio function to our PhoneGap friendly audio function. This sample animation only has one audio event.

This new function will use the Media API plugin to play the audio instead. At the end of the file, we need to add two functions. The first function is the playPGAudio. Since the Edge Animate library already uses playAudio, we need to have our function use a different name.

This function will take the url of our media file, then trigger the play method.

// Play audio
//
function playPGAudio(url) {
 // Play the audio file at url
 console.log('playPGAudio');
 var my_media = new Media(url,
   // success callback
   function () {
     console.log("playAudio():Audio Success");
   },
   // error callback
   function (err) {
     console.log("playAudio():Audio Error: " + err);
   }
 );
 // Play audio
 my_media.play();
}

The other function we need to include a helper function that will assist in locating the audio file’s full file path.

function getPhoneGapPath() {
var path = window.location.pathname;
 path = path.substr( path, path.length - 10 );
 return 'file://' + path;
};

Save this file.

The final piece of the puzzle is to ensure that our config.xml has to include the Media plugin and the File plugin references, as well as enabling any device permissions that might be needed. I naturally used ConfiGAP to create my config.xml file. I opted to skip defining app icons and splashscreens.

The entire project is then uploaded to PhoneGap Build and a native app generated. Once installed on my devices, I have a bird animation flying, tweeting away.

This sample project is available from my GitHub repo.

UPDATE:

I posted an update on this here.

 

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.