Why Native Extensions for AIR

With the release of the RC builds of AIR 3.0 and Flash Player 11 on labs more details about the coming runtimes is being discussed publicly. I want to focus on one of the new features called Native Extensions for AIR, Oliver Goodman does a great job explaining the feature and some of the details of how it works. To get more information you will not want to miss MAX 2011 in LA.

Now to the why. Why would you use Native Extensions for AIR? Let us start at the beginning with content. Content and its requirements drive decisions about where you want to take your application. Does it require specific features that are not cross platform? Does it need to be multi-screen? Does it need to have a reasonable ROI on UI and business logic across multiple screen?

With the current release of AIR (2.7) a lot of high quality content can be built across screens (ie: CaltrainTimes), but with AIR 3.0 the possibilities grow even larger. Now when you need that one specialized feature across certain screens or all screens with AIR 3.0 you have the flexibility to look at Native Extensions as an option to extend AIR. My use case was creating an application for mobile devices that acts like a point of sale system, basically being able to take credit card transactions on the go. AIR is great for the use case to encapsulate my UI across the various platforms along with having all my business logic for the transaction with the merchant gateway. But what was lacking was the ability to interface with the various card reader device accessories.

View the whole post »

Adding Android Development Tools (ADT) to Flash Builder 4.5.1

I am looking at doing some Android development to extend my AIR applications (AIR Native Extension). There is not a lot of public information on AIR Native Extensions but you can check out some information here. For those that really want to start playing with it right now you can apply for the private prerelease program here : https://www.adobe.com/cfusion/mmform/index.cfm?name=prerelease_interest

In the rest of this post I’ll explain how to get the Android Development Tools (ADT) working inside of Flash Builder 4.5.1. The first thing to do is get the Android Development Tool’s Eclipse update url: https://dl-ssl.google.com/android/eclipse/

View the whole post »

Designing and Skinning Mobile Applications Link Roundup

I gave a session to the Adobe community as part of the Tech Wednesdays series. The topic was on “Designing and Skinning Mobile Applications”, which by it self is a huge topic. I wanted to post a bunch of links I used or I think are good for more detail while designing mobile applications. This list is not meant to be comprehensive or complete but just a snapshot of stuff I talked about.

Mobile App Development section on ADC
http://www.adobe.com/devnet/devices/mobile-apps.html
Design tips for creating mobile RIAs
http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html
Designing Great Mobile Icons
http://swfhead.com/blog/?p=1145#more-1145
Flex Skinning Links:
http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html
http://www.asfusion.com/blog/entry/mobile-itemrenderer-in-actionscript-part-1
http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html
http://blogs.adobe.com/jasonsj/2011/05/comparing-css-media-queries-vs-application-scaling.html
Mobile UI Components Platform Tweaks
https://github.com/renaun/FlexExamples
https://github.com/olsonjj
http://madskool.wordpress.com/2011/05/27/madcomponents-sans-xml/
http://www.riagora.com/2011/05/dynamic-ui-patterns/
http://www.riagora.com/2011/05/pull-down-to-refresh/
Contextual Applications
http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/flashplatform/pdfs/afp_design_guidelines.pdf

PlayBook (.bar) Application Signing Roundup

NOTE: There is an AIR application that was created to help with signing and other Tablet OS common commands. Check it out here.

I wanted to post a round up post to both serve as an overview for new people but gather a bunch of info in one place for others that might have been through the process.

RIM’s development model requires signing. You need signing to get .bar applications on the device, both for developing and when you submit to the app store. It might be a bit confusing because the processes for both are similar but different, and I haven’t even thrown the “debug token” process into the mix.

So the goal of this post is to take you from code to device (both development workflow and App World ready) all through links and info available on the web. First some definitions and overview.

Handy Definitions:

  • signing – The process of signing the .bar file, in PlayBook world includes requesting keys from RIM, creating a cert, registering csj files, and multiple csj files for different signing processes.
  • PIN – PlayBook device identification number that you will retrieve from the physical device. Also a term for the passwords from signing keys.
  • .csj files – files used in the signing process RDK (for apps) and PBDT (PlayBook Debug Token) used for the “debug token” process.
  • vendor – The account you have with RIM, its not just a developer account but the account that is tied to payments and App World submissions, they have a slightly different process for individual vs cooperation.
  • debug token – This provisions a device to allow .bar apps to work on a particular device that has the token to run with out signing of the .bar file. A token can be configured to have multiple device PINs. The tokens expire after 1 month.
  • BlackBerry Tablet OS plugin – A Flash Builder plugin provided by RIM to allow for a bunch of UI dialogs to help with signing, build/packaging, csj registering, and debug tokens.
    BlackBerry Tablet OS for AIR SDK – Copies over the AIR sdk and adds BlackBerry Tablet OS specific tools (see next).
  • blackberry-airpackager, blackberry-deploy, blackberry-signer – The command line tools provided in the BlackBerry Tablet OS SDK that are used for building, packaging, and signing .bar applications. Same tools used in the BlackBerry Tablet OS plugin as well.

Overview:

  • Get an Vendor account with RIM (more then a couple hour process)
  • Request signing keys (more then a couple hour process), this PIN (password really) needs to be remember.
  • Create certificate (cn value is important)
  • Register signing keys properly.
  • Create and upload a debug token with PBDT signing key if you want to develop with none signed apps. With debug token on devices all you need is author/authorId correct in .bar file, note tokens expire in a month.
  • Sign .bar application, make sure its in production mode.

Here is the links that get into the details of the overview above:

RIM’s docs on signing your application with Flash Builder 4.5. My note here is read through all the doc pages first before starting and pay attention to the notes and details.
RIM’s documentation on debug tokens.
Julian Dolce showing off debug tokens and how they work

Command line walkthrough on how to sign your .bar applications. (might be dated)
Command line walkthrough on how to sign your .bar applications. (might be dated)

How to verify your BAR file is fully signed

TroubleShooting

RIM’s knowledgebase for signing related issues/questions. Here are some common issues that I see people have:

  • Code signing request failed because this file has been previously signed
  • When creating a Debug Token from Flash Builder, the process fails with exception “Unable to parse issue date from debug token” (locale is not English)
  • Debug token shows as not valid when uploaded to the BlackBerry PlayBook
  • Code signing request failed because Application-Development-Mode is present and not set to [false]
  • “Unable to register client ‘,’ (ID:) because they have exhausted their registration attempts”

RIM’s release notes on common issues. If you see any of the following errors click on this link for sure:

  • Attempt to rename [value1] to [value2] failed
  • Code signing request failed because Application-Development-Mode in Manifest is present and is not set to false
  • Code signing request failed because Common Name in developer certificate is not [value]
  • Code signing request failed because this file has been previously signed
  • Code signing request failed because Package-Author in Manifest is not set to [value]
  • Code signing request failed because value of Package-Name in Manifest is not allowed
  • -cskpass and -csjpin must be specified if -register is specified
  • cskpass required
  • Developer certificate and private key not found in keystore or store password not supplied
  • Incomplete certificate chain
  • Key associated with [value] not a private key
  • Keystore load: store password incorrect
  • keytool error: java.io.FileNotFoundException: certificate.p12 <Access is denied>
  • keytool error: java.io.IOException: Incorrect AVA Format
  • keytool error: java.lang.Exception: Key pair not generated, alias already exists
  • Missing parameter for [option_name] option
  • No BAR file or CSJ file specified
  • No key name specified
  • No manifest
  • Only one of -setup, -register, or -verify can be specified
  • Server is not responding
  • Unable to open BAR file

Enhanced Video Performance with Flash Player 10.3 and Android 3.1

The mobile and tablet landscape is a demanding fast pace environment. People want great experiences, especially good high quality video experiences with low battery impact. I was asked to create a video showcase the latest video performance with Flash Player 10.3 and Android 3.1 (using Motorola Xoom devices). Check out the video here:

Enhanced Video Performance with Flash Player 10.3 on Android 3.1

It is also an area of discussion by industry leaders like Tim Siglin. Tim published a white paper recently titled:

The Right Fit? Video Playback Performance on Android Handset and Tablet Devices Using Adobe Flash Player 10.2 and 10.3

Tim used a half dozen devices using Flash Player 10.3/10.2 on different Android OSes (up to 3.1) resulting in some interesting conclusions. Tim tested away with the focused on the idea of finding a consistent media for Android with high quality and great performance. The highlights (full quote at the end of the post) include Flash Player’s strength of media player experience, high FPS, low battery impact, and codec flexibility. With specific gains on the newer devices making use of GPU improvements and devices running Flash Player 10.3 and Android 3.1.

A big part of this enhanced video experience is the work around the StageVideo APIs. You can also experience great video performance on Desktop with the latest Flash Player.

The Flash Player also runs great across supported platforms, like the PlayBook. One thing I love about the PlayBook is the video experience of running 1080p HD videos through the HDMI out of the PlayBook on a large TV screen. It looks really nice with high quality and all without draining the battery at a crazy rate. Don’t take my word for it, check out this blog/video post:

Taking HD Video and Mobile Apps to a New Level on the BlackBerry PlayBook

Quote from Tim Siglin’s white paper:

Our testing builds on our initial report on six Android handsets using Adobe Flash Player 10.1. Now our tests use Flash Player 10.2 (FP 10.2) on five Android handsets, as well as FP 10.2 and FP 10.3 on Motorola Android-powered Xoom tablet (using Android OS versions 3.0.1 and 3.1, respectively).

Our current testing finds that FP 10.2 on handsets and 10.3 on the Xoom:

• Provide a more consistent media consumption than Android’s built-in apps and services.
• Plays content at better frame rates than built-in apps and services, with minimal battery impact, yielding significant frames-per-second performance gains.
• Generate performance gains with the proper combination of Android OS and Adobe Flash Player.
• Plays content that some Android devices could not play unless a Flash Player plug-in is present.

In addition, we found dual-core-equipped devices with robust graphics processor units (GPUs) will perform significantly better—with much lower overall battery impact—than standard handsets.

Finally, we were impressed by Motorola’s Atrix, a handset offering stellar performance, albeit with a tendency to warm up quickly when the GPU was heavily utilized. The Motorola Xoom also gets high marks, generating large performance improvements when using FP 10.3 and Android OS 3.1.

Using Flash Builder 4.5 to Package Arbitrary SWFs for iOS, Android, and PlayBook

Note: Using non-mobile optimized SWFs will most likely perform poorly. For example using any SWFs created with Flex SDKs before 4.5 should really be done with Flex 4.5 or higher.

Do you want to create Flash/AIR content for the different devices and don’t know where to start? Maybe you have some old SWFs that you want to try on a device or get your SWFs from another source (like an already package apk that you want to try on iOS with out recompiling). Then you might want to read more. This post and video shows how to setup a project in Flash Builder 4.5 to package arbitrary SWFs for Android, iOS, and PlayBook (the currently supported plugins).

Using Flash Builder 4.5 to Package Arbitrary SWFs for iOS, Android, and PlayBook from Renaun Erickson on Vimeo.

The basic steps from the video are:

  • Create a new ActionScript Mobile Project and give it a name.
  • Go to Project -> Properties -> Builders.
  • Uncheck the “Flex” builder (but leave the “AIR application.xml Builder”)
  • Now copy your arbitrary swf (ie: myapp.swf) into the bin-debug folder.
  • Create an ActionScript class with the same name as the swf, (ie: myapp.as) in the default package space.
  • Right click on the myapp.as file and click on “Set as Default Application”
  • Now it will generate a myapp-app.xml, go and open and edit as you like.
  • Click on run configuration and package your app for you the platform you want.
  • Repeat steps to add more SWFs to package.

Photoshop Touch SDK contains an ActionScript 3 Library too

  • 11 Apr, 11
  • Comments Off
  • Flex

If you haven’t heard about the Adobe Photoshop Touch SDK go check it out. Adobe is releasing application three iPad applications using the Photoshop Touch SDK. This same SDK is available to developers to build their own applications that can drive Photoshop.

Daniel Koestler and I developed the AS3 library for Photoshop Touch SDK, which you can find in the SDK download under the sdk/samples/air/photoshoptouchsdk folder.

Along with the library you’ll find a few samples which I wanted to highlight. These three samples all leverage the Photoshop Touch SDK AS3 library using Flex, AIR, and/or Flash CS.

DeviceCompViewer (sdk/samples/air/psdocumentview)

This is a Flex 4.5 mobile application (the Flex 4.5 SDK will be available May) that lets you view all the open documents in Photoshop. It allows you to create a new document in Photoshop based on the dimensions of the device, and then view the document as you build out comps using the Photoshop’s LayerComp’s paradigm to view your progress.

Photoshop Touch Console (sdk/samples/air/photoshoptouchconsole)

This is an AIR desktop application that allows you to test out ExtendScript and Touch SDK specific commands before building out a full blown mobile application. It also shows that you can use the SDK on the desktop if you really wanted to. The source code is a good place to see how to use the AS3 library for Photoshop Touch SDK as it uses all the classes in the library.

A fun tidbit if you are new to ExtendScript and scripting for Photoshop is to use the Photoshop’s ScriptListener plugin. This plugin logs the JS equivalent of what you are doing in Photoshop, which helps finding commands that ExtendScript JS reference doesn’t discuss or implement. Then you can copy that JS code into the Photoshop Touch Console AIR app and see it work.

Here is a look at what the application looks like:

Photoshop Touch Console Application

Flash CS Photoshop Touch SDK Example (sdk/samples/air/flashcspstouchsdkexample)

This is a basic example of changing a few tool settings in Photoshop from a SWF file created with Flash CS. It’s purpose is to show how to hook up the appropriate libraries and how to use the Photoshop Touch SDK for AS3 library in a .fla project.

I will be showing off some custom AIR applications working with the Photoshop Touch SDK at WebDU and FITC Toronto, so if you are attending those conferences come say hi and get look at a cool SDK for developers to play with.

Digital Fun in the Digital Home: TV, Tablets, & Smartphones

Update: slides from WebDU are posted on SlideShare

I will be talking about a topic I am very interested in over the next couple of months at various conferences. I will be kicking off this presentation at WebDU in Australia on April 14th. The topic is the title of my post: Digital Fun in the Digital Home.

I will be going over the current landscape of Adobe runtimes across TVs, Tablets, & Smartphones. I will be exploring a lot of concepts for building application in the digital home setting. I’ll be showing off demos and then going into detail of the code.

Catch me at these up coming conferences:
WebDU April 13th-15th
FITC Toronto May 2nd-4th

If you are working on applications in this space or a development shop/agency with clients looking to do this I would love to chat with you. Hit me up on the blog comments or email at renaun (at) adobe (dot) com.

Tips for iOS AIR Development

With the update to iOS development with AIR 2.6 developers can now package iOS applications with the same tool, called adt, that is used for desktop AIR applications. The main difference with the iOS target is that some cross compilation is happening along with the packaging. This does take some time, but another part of the iOS development time suck is getting the packaged .ipa on the device.

If you are finding yourself deleting/removing your development application from iTunes or the device each time to test that application you will want to read on.

View the whole post »

Using BlackBerry ID in your PlayBook Application

The latest release of the PlayBook's BlackBerry Tablet OS SDK for AIR provides some new APIs. One of the newer BlackBerry APIs is around getting BlackBerry ID information. You can test the API calls that integrate the PlayBook user's BlackBerry ID information in your application.

This is what it looks like for a user to sign into their BlackBerry ID from the PlayBook simulator (this is a system dialog and developers can't change it):

BlackBerry ID PlayBook Sign In

To prompt the "sign in" dialog and receive the BlackBerry ID information for the user of the PlayBook see the following ActionScript API. I went ahead and wrote up some simple code to show how it works (also available in my github here):

PLAIN TEXT
XML:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       applicationComplete="windowedapplication1_applicationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
           
            import net.rim.blackberry.bbid.BBIDProfile;
            import net.rim.blackberry.bbid.UserProperty;
            import net.rim.blackberry.events.BBIDEvent;
            private var bbidprofile:BBIDProfile;

            protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
            {
                bbidprofile = new BBIDProfile();
                bbidprofile.addEventListener(BBIDEvent.SUCCESS, bbidOK);
                bbidprofile.addEventListener(BBIDEvent.ERROR, bbidFailed);
            }
           
            private function bbidOK(event:BBIDEvent):void {
                bbidprofile.getToken("BBIDv1", "urn:blackberry.com", gotBBIDToken, bbidFailed);
                bbidprofile.getUserProperties(["username"], gotProps, bbidFailed);
            }
           
            private function gotProps(properties:Array, data:* = null):void {
                for each(var prop:UserProperty in properties) {
                    log("Got user property: " + prop);
                }
            }
           
            private function gotBBIDToken(token:String, tokenResponseParams:Array, data:* = null):void {
                // Use token and tokenResponseParams (array of TokenParam) to make service call.
                log("gotBBIDToken: " + token);
            }
           
            private function bbidFailed(message:String, data:* = null):void {
                // Log error message and show the user an application error
                log("Error: " + message);
            }
           
            private function log(msg:String):void
            {
                output.text += msg + "\n";
            }

        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:TextArea id="output" width="100%" height="100%" />
</s:WindowedApplication>

Note signing into the Simulator with your BlackBerry ID doesn't seem to work for me, if it does work for you please let me know.