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

SWF Encrypt

For a long time I was impressed by SWF Encrypt, although it’s not a real encryption, should be something interest if it can obfuscate code well for me.

Sothink Decompiler

In AS2 days I used to use the free Flare written by Igor Kogan, it was a great tool to help to search where co-workers hide their code inside FLA files. But now I need a AS3 version it no longer support. I read a post by Lee Brimelow about Sothink decompler several months before, so I would like to give it a try.

Test

SWF Encrypt trial version let me try 25 times, I made a secure swf from my AIR swf file.

Sothink Decompiler can read my origin AIR swf file easily, include almost all assets and code packages. Unfortunately the trial version do not let me check source code.

I found code structure in Sothink quite clear and accurate matching my own code base. I decided to buy it as the price not a problem $79.

Result

From my original AIR swf file, Sothink can read almost all my code, that….hell!

From secure AIR swf file, Sothink again, read most of my code, only several properties and function names hide.

Conclusion

First, the dark side, our code is definitely not safe.

Second, I do not feel SWF Encrypt doing its own job, I hope it can at least change my property/function names so even decompilers can take out all code, still hard to understand. SWF Encrypt really hide several properties/function names, but only very few of them.

Third, I found Sothink useful. Flex framework itself is a giant code base, Sothink decompiler code give some other code we cannot see and realize in MXML files.

Update: finty is right. I forgot Flex compiler can generate source code itself.

You can download source code from here. (Need some tweaks to fit your own application for sure.)

Here’s how it works:

• (Run once and comment it out) Create syslog database file and table. (I use some code to create and run once only, when I need update my table structure, rebuild database again.)
• Initialize SyslogService instance in preinitialize process of application. (it will open SQLConnection and compile statement to be used later.)
• Call static function from any points, i.e.:
  • SyslogService.log(SyslogLevel.INFO, 'Application start.');
• If statement is executing, push log data into stack and insert after.

Update (September 3):

I don’t have time to test completely. If you got database open error, just add open listener before execute the statement. Code is just simple like this.

if(!sqlConnection.connected)

sqlConneciton.addEventListener ...

Because the connection and statement will be reused all the time, you need to detect only once.

Every statement has an associated connection object, a statement represents a single ‘compiled’ SQL statement. There’re two methods to execute SQLStatement instance in AIR, one execute a single statement each time, another use .begin() .commit() to execute multiple statements, as a transaction. For SQLite engine, they both transaction, the single statement operates in autocommit mode by default.

SQL statement execution process: Statement+SQL -> Compilation -> Byte Code (with parameters) -> execution -> Finalization

Use parameters for statements is highly recommended. One important benefit Adobe might not documented: SQLite takes care of escaping the string values binding to parameters, helping avoid syntax errors and SQL injection attacks, i.e, it will convert ‘ to ”.

Transaction and Locks

• Multiple read transactions (SELECT), one single write transaction (INSERT/UPDATE/DELETE) at a time.
• When write transaction is writing (exclusive locked), no new transactions can connect.
• Write transaction will wait for any running read transactions to finish before writing.

Each transaction (or SQLStatement execution in autocommit mode) transit from one state to another state.

A default SELECT statement run in path as followed: Unlocked -> Pending -> Shared -> Unlocked

Two SELECT statements grouped with .begin() and .commit() in a single transaction:

Unlocked -> Pending -> Shared -> Unlocked

Two SELECT statements run in turn:

Unlocked -> Pending -> Shared -> Unlocked -> Pending -> Shared -> Unlocked

A write transaction (i.e. UPDATE) by default (autocommit mode):

Unlocked -> Pending -> Shared -> Reserved -> Pending -> Exclusive locked(commit) -> Unlocked

A write transaction with ‘BEGIN IMMEDIATE’:

Reserved -> Pending -> Exclusive locked(commit) -> Unlocked

The ‘Reserved’ state is a tricky state that may a place to improve performance. It actually store modifications in a memory cache, and create a rollback journal file for possible crash recovery. In this state the write transaction get real work done without affecting other read transactions. That’s how ‘multiple reader, one writer’ works.

After the write transaction get it work done, it begins trying get a Pending lock to move to Exclusive commit state, where (Pending) no more new read/write transactions (they have to wait in queue), the write transaction need to wait any other transactions still working to finish. Only after anything else cleared, this transaction enter into Exclusive state.

The ‘Exclusive’ state is to flush the modifications from cache to database file.

SQLConnection has a property cacheSize that affect write transaction. In ‘Reserved’ state if page cache fills up, it have to move to ‘Exclusive’ state before finish its own task. The bigger cacheSize the more modified pages can store and minimize the time to be used in ‘Exclusive’ state. (sqlite_analyzer can dump detailed statistics helpful for adjusting cacheSize)

What happens to Flash community for Flash developers? What’s the direction of future Flash developments?

(‘Flex’ means Flex framework projects in this post not include Flex pure actionscript projects)

Flex changing Flash developments

When ActionScript 3 came with Flex 2 two years before, there’s a strong signal from Adobe, Adobe has great interests to grasp methodologies from Java world, Agile developments into the new generation of Flash. The new AS3 API then has two parts from Adobe:

• Flash Player API. The same part that Flash developers coding in AS2 with Flash IDE (technically new VM for sure), now what Flash developer relying on using Flash CS3 IDE (there’s still components in Flash CS3, I wonder whether they really useful).

• Flex framework. Visual components and layout containers, styling, event/handler pairs, utility classes, data collections, service/remoting classes, code templates/code injection with MXML scripts and meta data.

I know some Flash developers, likely refuse to touch the AS3 Flex framework API, refuse the heavy weight kbytes for web applications. Though it has to say, Flex changing Flash developments.

The more Flex accepted by the industry, the more it changes Flash developments even without using Flex.

In sport games, when a challenger got higher score than a former champion, the latter will lose his gold. The only choice he had to fight for another higher score to regained the winner position. Today Flex was accepted by the market, and most important, for clients and end users, Flex equals to Flash, both Flash SWF files running with Flash player VM or AIR. So some situations will be, if something can be done well in Flex, like better usability, accessibility, functionality, will be requested by clients: ‘I like the way of that Flash, do this for me can you?’

So in some means, Flex pushing Flash applications to be more complicated than before. The more complex, the more code, and better light-weight architecture, with reasonable design patterns, will be necessary for lots of future AS3 Flash applications.

Second, Flex will change Flash projects by developers. The community now not only has traditional Flash developers, Flex developers, but also between them, there will be a number of Flash && Flex developers. When these developers join in a Flash project team, experiences from Flex developments and some techniques used in Flex framework which can be found from source code, will be introduced into Flash AS3 projects. For example, early last year I read a mailing list post from a developer of Adobe Flex team (should be James Ward if not wrong), said ‘Flex has better solutions to deal with text renderering’, so when a Flash project has the needs of text renderering optimization, how about to get some ideas from Flex framework source code how Adobe teams improved that?

Flex acceptance

Flex has been accepted well in the industry which no one can ignore.

• Development teams favor more Flex.

  • MXML and meta data, better readability, less code to maintain
  • Force developers to code under predefined architecture, components/containers, event/handler, developers can be replaced easier by new members.
  • Possibility for test-driven development and continuous integration, depends on team members’ experiences and time.

• Lower budget required.

  • No need developer hours/QA for components/containers offered by Adobe.
  • Fast mock-up with MXML design view, easy to throw away if not fit.
  • Flex SDK is free and Flex Builder 3 free for educations, means more cheap developers in the future.

• Accepted by market.

  • There’re many cases where functionality more important than preloading speed even remote websites.
  • Local networked enterprise applications don’t care how much kbytes.
  • AIR applications don’t care size.

Future Changes?

So Flex has lots of benefits that Flash project couldn’t have today, what about the old Adobe rumor? Flash IDE for designers, Flex for developers?

I never agree with this. Flash development will not, and never can be replaced by Flex (framework) wholly.

• Limitation of Flex framework

Flex framework was planned for enterprise solutions, even today Internet quite faster than several years before, even Flex 3 introduced RSL solution to reduce kbytes absolutely, in many case, preloading speed can still be a problem to end users, would lose their satisfaction whatever realized or not.

Other cases if end users change their habits, say, some guys using iPhone/iPod more often? Most of Flex applications will be immediately not runnable in those devices. Techniques used by Flex framework to improve development effectiveness are double-edged sword, such as MXML/meta data, which auto-generated source code, automatic components/containers size-measurement, will consume more kbytes/memory than real necessary.

• Open source light-weight Flash framework for better, faster, lighter Flash applications

There’re already some open source AS3 framework emerged, some for dedicated usage like PV3D, some for light-weight architecture like pureMVC. I think there will be finally one or two mainstream open source Flash frameworks to be used as light-weight alternate to Flex framework (i.e. heavy components like DataGrid not necessary for most of Flash projects), lighter and more freedom to build Flash applications with Flash IDE or Flex pure ActionScript projects.

Open source framework could be faster to change than Flex framework because of less backward compatibility required, result will be Flex framework possibly sometimes get contributions from open source Flash framework by community.

RSL solution for open source Flash framework? How about share unique URLs, i.e. http://osflash.org/share/osrsl_01.swf.

There will be also needs of some external development tools, such as dynamic mock-up, open source automation test tools to be used to improve effectiveness in Flash developments.