A developer's blog on AIR, Flex, Flash, and other Adobe technology

I recently had the opportunity to modify an application that Rick Rocheleau wrote to demonstrate the printing improvements in AIR 2. With the AIR 2 Release Candidate publicly available, it seems like a good time to let developers experiment with the new and improved APIs. I’m releasing the source code for a version of Rick’s app that I modified to use Flex 4, which also includes some helpful comments for developers.

Here’s a screencast that summarizes the application and some of the AIR printing APIs:

What I demonstrate in the video–and what you can try for yourself by downloading the code and/or AIR file–is a Flex 4 (Spark) group that lays out text in a printable area; this area is constrained by the paper selection, and will print to any attached printer exactly as it appears on the screen. The printing APIs in AIR 2 let you hand it any sprite, which will get passed along to the system in either vector (PrintMethod.VECTOR) or bitmap (PrintMethod.BITMAP) modes. AIR 2 has increased performance for both these modes, and also adds vector printing support on Mac. There’s also a new printing mode called auto (PrintMethod.AUTO) that will leave the mode decision up to the runtime; this has the advantage of not requiring you to guess which mode is best for printing the user’s content. In auto mode, the runtime will choose between vector or bitmap mode for performance and speed. In this application the appearance of a translucent watermark on the content will cause the runtime to choose bitmap mode, and its absence will result in it choosing vector mode.

Another notable improvement is the ability to get a list of printers from the system without having to start a PrintJob first; you can use this information to create a drop down box of choices for the user, and set which printer should be used for future jobs. You can also set the paper size, change orientation, receive information about the printable area based on your paper selection, and gain more control over the printing UI. You can choose to display the page setup dialog (without needing to start a PrintJob), and you can also choose to print by displaying the native system UI or suppress the native UI and send the job directly to the printer. The latter of those two options is useful if you want your application to control all aspects of the page/printer setup, and/or if you want to streamline the printing process for the user.

I encourage you to watch the screencast to learn more, and to check out the source code and application:

AIR 2 will give you more control and performance with printing; AIR 2 is not yet a final release, and this printing app is just a demo. If you believe you’ve found bugs in either, don’t hesitate to report them here. I’ll make sure they’re addressed. I’m also eager to hear about your ideas or improvements for the printing app.

Update 1: I uploaded new versions of the AIR file and source code, which should fix a problem with running or compiling the code using AIR 2 Beta 2.

Update 3: We just released an AIR 2 Release Candidate (May 11th, 2010), and I’ve updated the post to point you to this version. I’ve also updated the AIR file and code, so that it’ll work with AIR 2 RC (and not AIR 2 Beta 2).

Desktop or web applications written in Flex can currently display localized strings with relative ease (using tools such as data binding and the ResourceManager), but localizing an app involves more than just translating the strings: there are a number of languages that are written Right-to-Left instead of Left-to-Right, and this preference influences how the developer should design the application.

There is an upcoming feature in the Flex SDK that allows you to mirror your layout on the fly: you’ll be able to set a property during compile-time or runtime that will propagate a change down to every child UIComponent, resulting in a layout that RTL users are more familiar with.

Here’s a screencast demonstrating this feature. I’ve localized my Google Finance AIR application into Arabic, although I don’t actually speak the language; I used Google Translate, so I take no responsibility for its content. Feel free to correct my mistakes.

If you’re curious, Flex makes the change under the hood by setting:

element.x += width;
element.scaleX *= -1;

This horizontally moves the component and then flips it around the vertical axis. Though as a developer, you can just set:

layoutDirection = "rtl"

on a root component, and the change will propagate to that component’s children. This setting won’t propagate across open windows, so it’s necessary to change the property manually for all windows that you wish to modify.

By the way…
There’s an Easter Egg in the latest version of ShareFire. No one has found it yet, so I thought I’d tell you that the first three people to find it and respond will receive some Adobe stuff! (If you want it.) We have:

1st: Two Adobe mugs and an Adobe thermos

2nd: An “Adobe Standards” briefcase

3rd: An Adobe license plate cover and an Adobe sticker sheet

If you think these choice of gifts is odd, you’re right….They’re some swag/schwag we had in the office, and I got the sticker sheet at Adobe MAX.
If you find the Easter Egg, record some evidence (a screenshot) and email me at dkoestle@adobe.com; I’ll let you know if you’re one of the first three to respond, in which case you can tell me where to send the prize. As always, you can grab the latest version at sharefirereader.com. ShareFire IS an open source project, but you won’t find the secret in the code until either the promotion ends or the prizes are given away.Terms and Conditions apply. Please read them.

After some delays due to the excitement and aftermath of MAX 2009, I’m happy to announce that a new version of ShareFire is ready. ShareFire is a feature-rich feed reader written in Adobe AIR, and it allows you to easily share stories across Twitter, AIM, email, and social networking sites. I created it with my boss Christian Cantrell when I was interning at Adobe, and I’ve had some time to add features to it and maintain the code. Some of the new features are:

Import from Google Reader

English spell checking of Tweets and AIM messages, using the free Adobe Labs project Squiggly

UI improvements to the Tweet window and the post display (which now displays the author’s name, if available)

Last night the AIR 2 Beta became publicly available on Labs! There are already some great tutorials, articles, and other information on the new features. To learn more about AIR 2, I recommend my colleague’s post from last night: AIR 2 Public Beta Resources.
The feature I’ll focus on, however, is accessibility support, which allows you to create applications that visually impaired users can use. Screen readers such as JAWS and NVDA can connect to your application and read off visual content. Using this feature in conjunction with existing Flex components is straightforward; I’ve written an article that shows you how to use AIR 2 and Flex to create accessible applications, and beginning to intermediate Flex users may also enjoy the tips on the Cairngorm framework, data binding, and using the Encrypted Local Store.
If you wish to use AIR 2 but need your own custom components, I recommend watching this presentation from Adobe MAX 2009, which goes into depth on AIR 2 and ActionScript accessibility.
Finally, I’ve created an open source application that you can use as a starting point for your own programs: QuothTheTwitter demos how to build an accessible Twitter client in AIR 2. It’s quite simple at the moment, but incorporates many of the best practices I mention in my ADC article.

I’ve been quite busy these last two weeks: first with the impressive and massive Adobe MAX, and then a week of personal traveling around the country.

I co-presented on Accessibility in AIR and Flex with Michael A. Jordan at MAX, and briefly showed off a simple Twitter client written in Adobe AIR. AIR 2.0 will include accessibility support on par with the Flash Player, meaning you can create your own Accessibility Implementations in AS3 and/or leverage 28 of the existing Flex components which have accessibility support built-in. Even if you’re not targeting visually disabled users, a lot of the design practices used in creating an accessible application will enhance your program’s usability and polish. I recommend checking out our MAX presentation on Adobe TV: http://tv.adobe.com/watch/max-2009-develop/building-accessible-flex-and-adobe-air-applications/

Michael and I have provided some resources to help you with accessibility in Flash, Flex, and AIR. Michael’s provided the slides for the presentation here: http://www.majordan.net/max2009/, as well as some very helpful source code for creating your own accessibility implementations.

Yesterday I open-sourced my AIR 2.0 demo app and put it on Google Code. You can access it here: http://code.google.com/p/quoththetwitter/. You’ll have to wait for the public beta of AIR if you’re not on the prerelease list (http://prerelease.adobe.com) to try Quoth The Twitter with a screen reader, but you can still use the application to learn about using CSS to provide a high contrast mode, using data binding to allow the user to change the application-level font size in real time, and to experiment with creating an application that can be used solely with the keyboard. It can also be an excellent starting point for creating a full-featured, accessible Twitter client written in Adobe AIR.

If you’ve created an AIR, Flash, or Flex app and dealt with text and user input, you’ve probably looked around for a spell checking solution. There have been some great third-party spell checkers for some time now, with the widest-adopted perhaps being Grant Skinner’s Spelling Plus Library.

Today, however, you can use a spell checking engine called “Squiggly,” released by Adobe and available for free on Adobe Labs! It’s important to note that Squiggly is a preliminary release and is officially unsupported. If you need support or a commercial solution, I recommend checking out Grant Skinner’s SPL.

Squiggly works with AIR, Flex, or pure AS3 apps.
You can see a live demo here.

Using it in your project is quite easy, and requires two things:

A compiled dictionary (usa.zwl is included)

The AdobeSpelling.swc library

The dictionary: You have two choices. You can either use the English dictionary that ships with Squiggly, or use the DictionaryGenerator.air utility to compile your own from a word list. Note that the spell checking heuristics used to determine alternate words is currently based on English phonological rules…meaning that if you pick a non-English dictionary, the suggestions won’t work. Multi-lingual support is planned for future releases. In either case, take the dictionary.zwl and put it in your application path. For example, in a folder called “assets.”The library: Place AdobeSpelling.swc in your project’s libs folder, or be sure to append its location to the library path.

You can now call the Squiggly APIs from your application.
If you want to create a spell-checking enabled Halo TextArea or RichText, use the included SpellUI.enableSpelling function, like so:

If you’re not using Flex or you’re designing your own components, you can call the underlying engine by creating a SpellingDictionary and SpellChecker object. To check a given word, for example:

Note that loading the usa.zwl dictionary is an asynchronous event, and is accomplished by using a URLRequest and waiting for Event.COMPLETE to be dispatched.

Squiggly is highly optimized and very fast, and future versions will only improve upon this beta. Please try it out and post your comments or problems in the forums, which I and other Adobe employees will be monitoring.

I’ve been working on a demo application to show off a new feature in AIR, and this sort of work has me interacting with the Adobe bug databases quite often. One of the things you may not realize is that the public has read and write access to the Flash Player, Flex SDK and Flash Builder bug databases; more than that, every submitted bug is read by Adobe employees at bug review meetings, and bugs that have more votes are recognized as being important to the community.

Here are some pending issues in the bug database that I care about. If you also want these bugs fixed, you should vote on them (or submit some of your own):

Flash Player:
“Allow fullscreen mode to stay active on one monitor while the user is working on another”
I’ve seen users of MLB.TV find the current behavior especially annoying: Flash Player will close full screen mode if you interact with another monitor.https://bugs.adobe.com/jira/browse/FP-1723

Flex SDK:
“Clicking and holding on a DropDownList doesn’t select an item”
This affects all the drop down lists you see in Flex applications. When you click and hold a drop down list and let go of the mouse button when you’re over an item, the item isn’t selected and the menu doesn’t close. This is different than the behavior of native drop down lists in OS X, Windows XP, and Linux.https://bugs.adobe.com/jira/browse/SDK-22208

One of the issues you may encounter when updating an AIR project in Flash Builder is what appears to be corruption of your Encrypted Local Store. This might manifest itself as a vague “general internal error” when your application attempts to read from or save to the ELS:

Error: general internal error
at flash.data::EncryptedLocalStore$/processErrorCode()
at flash.data::EncryptedLocalStore$/getItem()
…

When you run a new project and attempt to access the ELS, Flash will search the ELS directory with a case insensitive search, creating a new ELS if it doesn’t find an appropriate app ID. This is important to note, as the data you encrypt and save is keyed to a case sensitive copy of your application ID! Thus, if you migrate a Flex project with an application ID that varies only in case, Flash will find the ELS directory but fail to decrypt it, as your application ID is different than the key used to encrypt the ELS.

Flash will also fail to decrypt the ELS if your username (or perhaps user information) has changed, or if something serious happens to your keychain.

In XP I’ve read that the files are either in C:\Documents and Settings\[username]\Application Data\Adobe\AIR\ELS or C:\Documents and Settings\[username]>\Application Data\[app ID]\ELS. On Vista I’ve read that it’s in C:\Users\[username]\AppData\Roaming\Adobe\AIR\ELS.

Your solutions are:
1. If you want your new application ID to be the same as your old one, make sure it doesn’t vary in case
2. If you want a new application ID, changing the case is not sufficient, as Flash performs a case-insensitive search while looking for the ELS
3. Remove the ELS data and allow Flash to create a new store. E.g., delete ~/Library/Application Support/Adobe/ELS/[app id]. You will lose any encrypted information

Today Adobe released beta versions of Flash Builder 4, the Flex 4 SDK, and Flash Catalyst. Builder is a development environment for creating Flex, AIR, and ActionScript applications; Flex is the collection of open-source components with which you can populate your application; and Flash Catalyst aims to allow designers and developers to rapidly create the Flex interface and code, respectively.

I recommend checking out the Catalyst beta in particular, as it’s a brand new product that should be put through its paces. It remains to be seen how far designers can go with it, but you can already import Photoshop and Illustrator projects and convert artwork into components, which a developer (using Flash Builder) can import and flesh out into a working application. I’m doing the development side of things with an internal Adobe application, and importing an FXP from Catalyst has removed some of the difficulty in laying out a UI in FB. I find the combination of assets from Catalyst with Flash Builder 4’s Design View to be preferable to Flex 3 and embedding skins only in CSS, for example. Catalyst exports components that use the new skinning architecture.

One thing I’ve noticed about the pre-release versions of Catalyst: don’t uninstall it on OS X by dragging it to the trash; it’s possible that a future installer will tell you “beta or pre-release versions of the following products are installed on this machine, and must be uninstalled before this application can proceed.” If you find yourself in this situation, try the following steps:

Browse to /Library/Application\ Support/Adobe/Installers

Open the numbered folders

Run the Uninstall.app that has the Flash Catalyst icon

If that fails to uninstall Catalyst, try Setup.app instead

We should see some very compelling Flex and AIR apps in the near future.