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.

ConfiGAP 1.3.11 released

ConfiGAP

I released an update to ConfiGAP today. One of my users found a couple of issues that snuck in. The first was the size value for retina iPad splash screens. There was conflicting documentation on the size, but I think I have the proper value. The other was an issue with setting the icon and tile images for Windows Phone.

I also added support for PhoneGap 3.4. Now PhoneGap Build has NOT enabled support for this version yet, but I figured it should occur really soon. Well, on April 8th, PhoneGap Build announced support for PhoneGap 3.4 :)

If you find an issue, or have a comment, please drop me an email.

 

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.

Edge Reflow (Preview 7) Released

welcome-project-1024x456

Adobe just released Preview 7 of Edge Reflow! There are some really nice improvements in this version. Here are some of the hilights:

New Starter Experience

There are now 11 short tutorial videos (done by Paul Trani) to walk you through each step in creating a responsive design in Reflow.

Form Elements

You can now add forms to your design with the new Form Elements, including buttons, select drop-downs, text inputs, check-boxes and radio buttons.

Links

Reflow now can create links across multiple pages to show navigation.

Insertion & Groups

The team has introduces a more intuitively way to move objects in the layout with the new insertion caret. Also, working with groups (command/ctrl G) and elements within groups is now much easier and more intuitive

Lynda.com

I am very excited to announce that I am developing my first course for lynda.com! It is quite an honor to be to working with such a talented group of people. A big thank you to James Williamson, who helped craft my demo movie. My initial effort will be “Up and Running with PhoneGap Build”.

This going to be a fun and exciting challenge. One the first challenges will be creating the sample app to showcase the service.