These notes are taken at Adobe MAX 2009.

You can use HTTPService, WebService, RemoteObject components in Flex to pull data in different ways. Now what about ColdFusion 9?

ColdFusion’s Flash Remoting has been improved. So Flash applications that have ColdFusion 9 as a backend will interact much faster, and it can handle circular references.

There is now direct data translation between ActionScript and CF types, instead of previously having an intermediate Java layer that handled this. This involves changes in services-config.xml, but no code changes are required in your apps. Support for the old style remoting is still present for backward compatibility.

So how much faster is it? Drastically faster. Easily x9 faster, and that increases as the number of transactions occurs, according to the whitepaper Adobe has released about it.

BlazeDS. ColdFusion 9 is now integrated with BlazeDS as the default installation.

Configuration File. Services-Config.xml is now split into 4 files. There are a handful of ColdFusion-specific properties under the channel definition now. An “enable-small-messages” property is there and should be set to “false”. This is important for the new Flash Remoting in CF9, because BlazeDS’s default is “true”.

There is an AMFChannel component in Flex for the new Flash Remoting (Note: You can alternatively tell the AMFChannel component to have enableSmallMessages=”false”). Finally, the endpoint class is changed for the new CF9 one.

Offline AIR apps with ColdFusion 9

Now the fun stuff. ColdFusion 9 has an ORM for AIR! Build offline AIR apps without the SQL mess and conflict handling. There is a CF-AIR persistent framework for SQLite on the client side. CF keeps track of all updates to local database and synchronizes with the server, including conflict resolution.

By having ORM on the client- and server-side, these two are integrated through the CF-AIR persistent framework.

In the application code for the demo, there were customer.cfc and address.cfc persistent objects. Then a sync CFC is used for providing the fetch and sync functions for communication with the AIR client.

Step #1: Create the persistent CFCs.

Step #2: Create the sync CFC. He called it custmgr.cfc. The CFC has implements=”ISyncManager” as an attribute. Then you have fetch() and sync() methods that handle the transactions. Here you can provide your logic for handling certain scenarios, such as conflicts.

Step #3: On client side, create equivalent AS classes that map to the CFC via the [RemoteClass(alias="")] metadata tag.

Step #4: Use the CF-built AIR libraries provided to fetch data from server, with the SyncManager component. It’s very simple, practically just point it to the sync CFC and do a fetch() method. To work with the database, you then openSession() and can create new AS objects and call save() on the session to insert/update/etc. Finally, using commit() will commit the results and invoke the sync() process.

On the client side, it can receive conflict notification and receive both versions of the data so that you can decide what to do with the conflict.

It is very exciting to have some help implementing synchronization without having to purchase LCDS. Using the CF9/AIR integration libraries will be very nice.

These are notes from Adobe MAX 2009. This session will help us see what problems we may encounter moving to Flex 4, as well as what new features we can use.

Packages. The old mx packages are still there. But now everything new is in the spark packages. Why two different packages? At first, they had them all in the same package, but the component had a prefix for the new version. It wasn’t received well. So instead, Adobe just put the new components in new namespaces.

The MX namespace is also called “Halo”. Don’t consider it a “legacy” namespace. These are still fully supported. Spark is all of the new stuff. The general MXML has a new 2009 namespace, but the legacy namespace is still supported.

Graphics

You can add graphic primitives enabling you to draw lines, ellipses, and curves, directly within the MXML. With the new FXG file format, you can import a graphic in as a vector graphic that appears as code. Cool. Using a static FXG image is great for icons or other static simple images, because its rendering is faster than an MXML graphic container.

Flex States

Instead of using AddChild and RemoveChild for changing states, you have includeIn=”" and excludeIn=”" attributes that go directly on components. What’s more, you can set various attributes of a component for the different states by using a dot notation. For instance, title.mystate=”Title”. This seems like a pretty drastic change.

With states, you have to use the OLD way with the 2006 namespace, and you have to use the NEW way with the 2009 namespace.

Skinning

Components all have separate skin files. This will allow you to create a custom skin for any component easily.

Common migration issues

Type selectors need namespaces now in your Flex CSS. For instance, if you’re styling a button, Flex doesn’t know if it is a Spark button or a Halo button. So you need to define the namespace in your stylesheet and update your selectors accordingly.

You must compile against Flash Player 10. This won’t be an issue if you use Flash Builder 4 with Flex 4.

Application.application should now be renamed to FlexGlobals.topLevelApplication. Just a direct rename.

RSLs are on by default.

The “Declarations” tag is a problem child. In Flex 4, anything that is not a display object or default property must be within the fx:Declarations tag. Even tags like RadioButtonGroup. Formatters, Effects, RPC stuff, Validators, etc. need to go in the Declarations.

“If Looks Could Kill.” The default theme is now Spark, which looks different than the old Halo theme. You can switch back to the Halo theme. To do so, turn on “Use Flex 3 compatibility mode” in the project properties, or go into the “Flex Theme” panel and change the theme (this is the preferred way).

If moving to Flex 4, try to use as many Spark components as you can. They should play nicely with MX components. You can intermix them together. Caveats: (1) The graphic primitives cannot go in an MX component, just wrap them with a group; (2) you cannot put MX components in Spark containers; (3) MX effects do not work on Spark graphic primitives; (4) MX navigators (ViewStack, Accordion, etc) should use NavigatorContent component.

Other things to watch out for:

• Spark components don’t support the Halo theme.
• Cannot create spark component based itemRenderers for MX List based components
• APIs between MX and Spark components are different (e.g. addChild vs. addElement)!
• When using MX and Spark components together, you may see a text difference since they are themed differently. There is a TLFText theme that can help with this.

So, migrating an app from Flex 3 to Flex 4 is a bit of a slippery slope. And even just beginning to use Flex 4 with current Flex 3 knowledge will require a bit of a slowdown as you undo some of those brain synapses to do things the new Flex 4 way. But these changes going forward are good for the Flex framework.

It wasn't readilly apparent to me how to loop through some datagrid rows in Flex. Finally, I came across Abdul Qabiz's DataGridDataExporter class, which basically does just that.

The key is to set up a cursor that will loop through the Data Provider for the datagrid.

Something like this:

That's all there is to it.

Note to self (the Flex newbie): Test your HTML wrapper for your SWF files to make sure that the user experience is a good one when you're setting up your Flex apps on your site! I took the HTML wrapper generated by Flex Builder and modified it to fit into my page. While doing so, I forgot to include the playerProductInstall.swf file with my app, so when a browser with an older Flash Player viewed the page, the JavaScript I had in place to call playerProductInstall.swf would hang since it couldn't find it. The detection for when no Flash Player is present at all (or only a really old version) was also a bit ungraceful.

But I was clueless to these poor experiences since I hadn't tested these scenarios. Fortunately, my app was just released, and only to a beta crowd.

To test the absence of Flash Player, you can download a Flash Player Uninstaller and uninstall Flash Player. I'm not sure what the best way is to install and test an old version of the Flash Player; I just had a virtual machine that had an old version on it, so I used that because it was convenient. If you google for "download flash player 8", there are some non-Adobe links that appear to be valid links, but I did not try these.

Adobe has a Flash Player Detection and Installation support page that is helpful as well.