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″>

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.

The most important question to me, why he post such a public letter dedicated on Flash?

He fears.

A large number of devices, from Google, HP (with Palm), RIM, and other big companies, attacking the market share of iPhone, iPad very soon, with Flash. It’ll be threat for his early comments on Flash. He fears his words broken.

His App Store was a great success, but his decision to kick CS5 out from iDevices, which also drive away developers who planned to write apps with Flash. Instead he hoped us developing with Apple-C (yes we can, but we choose not), lots of CS5 developers will develop apps for his competitors. He fears his store no longer moving to next billions.

As one of the greatest CEO in the world (yes exactly he is, with great respect), he fears the decision to reject Flash, Flash designer/developer community is a fault, he’s now on the top of mountain, higher risks than his days in the valley. He fears he’ll no longer Mr. Jobs the Great.

We believe in Choice

Mr. Jobs believe in choice, other than Flash, developers can write application with Apple-C, or Javascript. We too, we believe we have options to use better tools at our hands, not forced to use specific technologies. If Mr. Jobs did the right decision, there will be a number of developers use Flash to develop apps quickly, if we find some performance or other problems, we can rewrite with Apple-C not Flash for best user experiences for consumers (we can even write with assembly).

Otherwise, the choice for iDevice, return -1.

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.

The following code is how it to be used in Flash/Flex application:

That simple? Sure it is.

Don’t forget, in AIR applications, using SQLite we MUST use asynchronous connections for user experiences. The framework will do rest hard jobs for you.

Framework Features:

• SQLConnection instances reused.
• SQLStatement instances reused.
• Statements executed in queue automatically, no extra control required.
• Dealing with SQLite locks inside framework.
• Feedback(result/fault) functions can be reused, similar with pureMVC’s handleNotifications.
• Support to run feedback functions not original object, i.e. a view sent a query then closed, after query complete, run feedback function in another object/view.
• All statement/connection objects managed and resources can be cleaned.

SQLite Performance Best Practices

It’s important to get benefit of maximum performance of database, SQLite has its own specifications. One of them, Adobe has already documented, is the cached statements, cached statements can be reused and increase performance largely.

The second one, I didn’t see anyone mentioned it (maybe I missed), is the lock system of SQLite.

SQLite has a special lock system, have a look the figure followed:

Here’s several important rules about SQLite lock system:

• A connection can have only one transaction (working statement) at a time.
• SQLite can have multiple read transactions(read statement) and one single write transaction(write statement) at the same time.
• When the write transaction working or waiting, no more new connections can work.
• The waiting write transaction will be executed only after all other read transactions complete.

The third one, using SQLTransactionLockType.IMMEDIATE for write transaction can improve performance when necessary.

My solution implement first and second, the last one I didn’t find a good solution to use it in asynchronous connection mode, will talk it later.

Framework Structure

The framework include three major classes:

• SQLManager
• ConnectionPool, manage and reuse connections for statements.
• StatementManager, add/remove statements.

These object classes/interface used by the framework:

• SQLiteStatement, after an operation finished, it run feedback based on caller and function(string). Feedback function can be different to the original view(object).
• SQLiteConnection
• CachedStatement, statement cannot to be run immediately will be cached as a CachedStatement in waiting list.
• ISQLResponder, optional interface for caller view/object.

Framework workflow

• Create instance for a database file (file can not exist even)
• Add statements when needed, statements will be initialized.
• View call for execute one or several statements with statement_id, set result/fault function, and flag whether need to ignore fault (if ignore, sqlite will continue to run waiting statements)
• SQLManager get statement instance, or cache your request to a waiting list if already used.
• SQLManager ask ConnectionPool to apply a SQLiteConnection for statement to execute.
• Statement try to execute, if SQLConnection not connected, waiting for that connection and execute.
• Statement completed/fault, call feedback function with statement_id (if asked), and execute next waiting statement if exist.

The framework keep minimum instances of SQLConnection and SQLStatement, and easy to be removed as they’re managed for garbage collection.

I’m not going to publish source code right now as it’s not a complete framework yet.

• Take out top menu item background.
• Add filter to top item label.
• Change top item rollover background.
• Set minimum width for top item.
• Set minimum width for drop down menu.
• Skinning for dropdown menu in CSS.

Full example source code download here.

File list:

• MenuBarSkin.mxml, with menu style and menuBar style especially fillColors, fillAlphas.
• AppMenuBar.as, extend MenuBar class, getMenuAt() to set minimum width for drop-down menu, updateBackground() was to remove the background.
• AppMenuItem.as, extend MenuBarItem, set top item label dropshadow filter and set minimum width for top item.
• MenuItemSkin.as, replace default up/down/over halo skin.

Full source code download here.

My working project with this docking manager:

We have several Flex developers, I have to use some of my time review code for other developers even rewriting some of buggy code. The designer working on Flex Builder for skinning will run the application on his Mac a few days a month, until he ran Flex Builder we knew the application got crash on Mac. I had to use several hours to find and fix the problem. A month and more later he opened his FB again and the application crash again.

Crash Reasons?

Totally three Mac-only crashes I fixed. Now I work remotely at home and using my own Macbook so there will no more ‘silent’ Mac-only crash will happen. Here’s reasons I found which caused Mac-only crashes:

• SQLite database object AMF3 deserialization, in a special case of object serialized with a single object to be stored several times into database table.
• A fault application menu was added.
• SQLite database, a write transaction was added into a function which has several read transactions running in parallel. Also, it seems several ‘select all’ read transactions at the same time cause occasionally crash as well.

Avoid Mac-only Crashes

• If application need to be run on Mac, have at least one developer working on Mac. Fixing a Mac-only bug after several weeks is hard than regular bugs. For agile development, bug should be find as soon as possible, if a month later find application cannot be run on Mac, a senior developer have to use at least several hours if unlucky.
• Be careful when working on SQLite database. The first crash was because of an unsafe usage of reference, reuse a single object reference sometime cause unknown issues like this; for 3rd crash, although SQLite can have a single write transaction to be run at the same time of several read transactions, as ‘writer’ will wait for an exclusive lock until all ‘readers’ complete, SQLite engine inside AIR might not handler it correctly, at least on Mac.

Using encryption with SQL databases

Introducing Adobe AIR 1.5

New Feature Requests

We all understand application development change very often. It happens for every team, bosses will add new features never discussed before and marked as ‘very important’. Problem is, for a desktop application, new features usually means redesign at least some parts of UI, also can break user experience if no enough usability discussion and clearly understand what user will expect (which very often is different with the new feature defined), not only designer but also developer have to change a lot. For example, add some new feature without enough space on UI, new behavior in one component which UI should update other relative components at the same time. Not only we need time for new features, bad definition can result arguments between team members and boss, which actually conflict between what boss expect and what user expect in real application.

Designer and Usability

Designers has a good feeling of usability, problem is designers not the person produce the application, and usually designers can design single UI but not the running UI, so it quite often developers have to feedback some design problems. For me I will try to discuss thoroughly before write code, understand what designers want and what will happen in real application that can affect user experiences. Discussion of user experiences between designer and developer should be as early as possible.

Also, designer have to test application from time to time, to find usability problem early and try to fix it.

Junior Developer and Usability

Juniors usually need time to learn and get improved, thinking about usability also hard for them. Problem is user experience is about whole application not parts which experienced developers working on, without fix major usability problems, application can never give anybody good user experiences. Try to ask new developers to catch up more tasks than what they can without fix enough usability problem, is a disaster for the whole application sadly.