Update: the easy reliable way to update AIR 2 SDK actually you can grab Flex SDK 4.1: http://renaun.com/blog/2010/06/flex-4-1-includes-flash-player-10-1-and-air-2-0/

Following original post on issues when updating with AIR 2 SDK package directly:

I decided to update AIR 2 on Flash Builder 4 for new features, but got some troubles.

Had a quick look on AIR 2 release notes. Downloaded the new AIR 2 SDK on my iMac and extracted on desktop.

Copy-and-paste on Mac = Fail

For my Mac (snow leopard), the folder to be updated:

• Mac Flash Builder 4: /Applications/Adobe Flash Builder 4\sdks\4.0.0

In the release notes, Adobe recommend to use command line for Mac OS update, but I think it would be the same to copy/paste with extracted SDK. So I made a backup of 4.0.0, and overwrite directly on top of 4.0.0 folder with new AIR 2 SDK.

Then I opened Flash Builder, well, Flex SDK 4 broken.

Looked into the 4.0.0 folder, surprised to me some original files of Flex SDK 4.0.0 missing after copy-paste.

Then I redo 4.0.0 from backup, this time no longer copy with whole folder but copy files for each folder, except air folders.

Reopened Flash Builder, now I can add Flex SDK 4 successfully.

Snow Leopard File Permission @ Sign with AdobeAIRSDK.tbz2 Package

Whether there’s any difference between copy-and-paste and command line extract? I opened Terminal to see whether something special I could find. What I saw actually, all new files of AIR 2 SDK, had a different file permission flag like this one: -rw-r–r–@

A @ sign!

What’s @ sign means? “The @ sign simply means there is a resource fork added to the file, completely normal for files living in an HFS+ file system under OS X, especially Snow Leopard which even keeps compressed data in resource forks. You go jacking with Snowie’s resource forks and you will get yourself in a heap of trouble.” “This attribute is added so that it can ask for user confirmation the first time the downloaded program is run, to help stop malware. Upon confirmation the attribute should be removed and then the program will run normally.”

I tried again with command line, same as release notes, but, the @sign still exist.

What I can say, @ sign may wouldn’t cause any problem, but who knows, it better to take it out.

So here’s what I did. In Terminal jump to the sdk4.0.0 folder:

• ls -ald@ *tbz2
• xattr -d com.apple.quarantine *tbz2
• ls -al
• tar jxvf *tbz2

For some reason, the @ sign come with a extended attribute value “com.apple.quarantine”. Once remove this attribute value from the package, after extract all new SDK files no longer have a @ sign.

Don’t forget update project-app.xml

This is a important step but in the release notes, it belongs to “Flash Professional CS4″ section.

The problem is, each AIR project has an application descriptor file app.xml in source root folder, my AIR project created before AIR SDK update, so it was using old namespace, if you run your application for any new class, i.e. ServerSocket, it will give you an error:

VerifyError: Error #1014: Class ServerSocket could not be found.

The reason simply because old AIR project using old SDK namespace, you need update project-app.xml to:

• <application xmlns=”http://ns.adobe.com/air/application/2.0″>

I googled for methods to render PDF in AIR with Flash. But most of examples were for Flex applications. Actually it also very simple to render PDF with Flash (pure ActionScript project instead of Flex project).

The most important thing for rendering PDF in Flash, the stage scale mode must be NO_SCALE, while by default, a pure ActionScript AIR application running in SHOW_ALL mode.

PDF in AIR Application, Limitations

Although PDF and Flash both technologies from Adobe, in AIR seems they’re separated, PDF always render on top of AIR stage, not really added into display list inside Flash. PDF can be controlled through Javascript, but nothing else. Very limit functionality.

AIR 2 support to open PDF files with native default application, which might be more friendly for users than put PDF inside an AIR application.

Recently I changed my job to part time, so got some spare time in my own project and some researches on Flex developments. I’m happy with that as I found more and more solutions in these days when I’m not pressed by full-time tasks as a major/lead developer and the only senior/firefighter for a team.

What I get most excited is getting some more ideas on interface design methods for Flex/AIR applications. I’m not a designer, most of my time focus on Flex/Flash coding and I constantly feel bad especially interface design in Flex. Not only Flex itself has no good work flow yet designers can easy to work, also it very hard for team/companies to find a really good designer for Flex projects.

Ok, I’m talking here is another optional approach in interface design for Flex. See follow I did in my own Flex/Air project:

Have you seen somewhere like this? Well, I don’t have designer on my own project, but like good designs when I write codes and testing, so I ‘borrowed’ some graphics from CS4 for use temperorily. It looks beautiful isn’t it? I hate any bad ugly designs in development, man, it’s Flash platform. I like beauties when I’m working and that’s why I choose to work as my career.

Requirements to make it?

The example above I used three images:

• left highlight skin image
• right skin image
• dropdown button image

Scale9Grid bitmap class, you can get from bytearray.org. (I made some small modifications so its Scale9Bitmap class in this example. May write a new UIComponent-based class myself from scratch later when have time.)

How to make it?

The example above is the dock header, each one is a single object based on UIComponent. I show here how to make the right skin inside that component.

createChildren function, load bitmap with url:

Complete handler:

updateDisplayList function:

The component wouldn’t create bitmap until loader complete, then insert into bottom layer as its the background image. (In this example I put another skin image above so it will be inserted into layer 1 when the bottom layer has already added, that’s why I use a flag _rightSkinLoaded.)

The bitmap wouldn’t renderer until invalidation display list is called, which make maximum performance based on Flex framework. In updateDisplayList function, two skin images will be scaled with scale9Grid rectangles, that’s where the magic happens.

There’s one more thing, to get best result in my example, scale 9 bitmaps works better when positioning in pixels, I use int(xx) as followed:

Discussion

There already lots of approaches for interface design/skinning, like Flex/CS4 skinning kits, Degrafa. These approaches ‘work’ but I myself much like use scale9grid bitmap inside component directly. Here’s what I think:

• Any designer can make graphics design, can support developers easy to use this approach, in case of scale 9 grid can work perfect (I think most standard interface components?).
• Degrafa can be hard to ‘code’ graphics result what designer expect, but image with scale9 rectangle easy.
• Less code (code lines after compiling) and better performance. If there’s tons of components in your application, you have to take care of performance. If you can, don’t use CSS skins for highly reused components.
• Bitmap don’t need to be embedded, which make less size of application and less compiling time if there’s many bitmaps.

Of course, this is just an optional approach for Flex interface design, as scale 9 slices may not work in some designs.