How to use Flex SWCs in Flash CS3

I’ve recently talked to a few people who’ve experienced issues trying to use Flex SWCs (created in Flex Builder) in Flash CS3, so I thought I’d post what I know on the topic.

For starters, you can’t have any Flex dependencies. This is AS3 and Flash territory-only, friends.

Second, CS3 only supports SWCs that have components (display objects) you can drag to the stage. You’re out of luck with utility classes.

But even components won’t show up automatically. To see them in CS3 you need to specify a manifest file. This lets CS3 know which classes in your SWC can be instantiated as components.

For the uninitiated, you can go here for an example:
http://code.google.com/p/cimlogbook/source/browse/trunk/manifest.xml

In Eclipse, open the Properties for your Flex Library project and select Flex Library Compiler, then specify your manifest file under Compiler options.

Once you’ve built your SWC, drop it in the CS3/en/Configuration/Components folder and it’ll show up in the Components panel. Then you should be good to go!

Adding Channel Definition Timeouts

Following up my post last week on creating channel definitions, I realize I forgot to add one key piece of code – timeouts!

Why are these important?

For starters, the connection timeout prevents you from waiting until the end of time to get a response from the remote destination. Since you typically connect when your application first loads, this can result in an unnaturally long startup time when the remote destination is slow or unavailable.

Not having a connection timeout also causes failover (e.g. from RTMP to polling) to take a really long time.

Similarly, the request timeout helps prevent your application from appearing unresponsive. Better to handle slow asychronous calls with progress indicators rather than simply hope they’ll return in a reasonable amount of time.

So without further ado, here are the lines to add to your channel definitions for connection and request timeouts:

// sets the connection and request timeouts var connectTimeoutInSec : Number = 3; var requestTimeoutInSec : Number = 10; rtmpChannel.connectTimeout = connectTimeoutInSec; rtmpChannel.requestTimeout = requestTimeoutInSec; pollingChannel.connectTimeout = connectTimeoutInSec; pollingChannel.requestTimeout = requestTimeoutInSec;

The actual values are arbitrary, so you should adjust them as needed.

Original post: Creating FDS Channel Definitions in AS3

Creating FDS Channel Definitions in AS3

Anyone familiar with Flex Data Services knows about services-config.xml.

This file usually contains security constraint definitions, channel definitions, and logging settings that each of the services can use. (more here)

It’s one of those config files that always feels more complicated than it needs to be, and to top it off, it’s a compile-time resource. This limits its flexibility, especially when it comes to channel definitions.

Why should you have to recompile your application whenever your channel definitions change? Let’s declare them in AS3 instead!

Here’s an example of two channel definitions from a services-config.xml file:

<channel-definition id=”cf-polling-amf”     class=”mx.messaging.channels.AMFChannel”>     <endpoint uri=”http://{server.name}:80/flex2gateway/cfamfpolling”         class=”flex.messaging.endpoints.AMFEndpoint”/>     <properties>         <polling-enabled>true</polling-enabled>         <polling-interval-seconds>2</polling-interval-seconds>     </properties> </channel-definition> <channel-definition id=”cf-rtmp”     class=”mx.messaging.channels.RTMPChannel”>     <endpoint uri=”rtmp://{server.name}:2048″         class=”flex.messaging.endpoints.RTMPEndpoint”/> </channel-definition>

Now let’s look at the same two channel definitions in AS3:

var serverName : String = parameters.serverName; var pollingChannel : AMFChannel = new AMFChannel (“cf-polling-amf”,     ”http://” + serverName + “:80/flex2gateway/cfamfpolling”); var rtmpChannel : RTMPChannel = new RTMPChannel (“cf-rtmp”,     ”rtmp://” + serverName + “:2048″); pollingChannel.pollingEnabled = true; pollingChannel.pollingInterval = 2000; var channelSet : ChannelSet = new ChannelSet (); channelSet.addChannel (pollingChannel); channelSet.addChannel (rtmpChannel);

At first glance this code doesn’t appear to offer any advantage over the channels defined in services-config.xml. However in the AS3 code, the server name for the channels is passed in as a flashVar to the application.

This allows your application to determine at runtime which channels to use, and it also eliminates the need to compile the XML file into your application.

Two wins in my book.

Addendum: Adding Channel Definition Timeouts

Using LiveCycle Data Services with Custom Components

LiveCycle Data Services. I’ve mentioned it before.

It can be an indispensable tool. But like any good black box, getting it to work properly is a huge pain in the ass.

One of the biggest benefits of LCDS is paging. Paging lets you dynamically load data as soon as it’s accessed within a collection. This is great for large data sets, and the beauty of this approach is that you don’t have to do anything special for it to work.

Create a collection, bind it to your view, and connect it to a data service. As you interact with the view, LCDS will automatically retrieve the data in the background.

Beautiful, right?

But let’s say you want to use a custom component instead of a standard List or DataGrid to display your data. This is where the magic breaks down.

You see, LCSD only works “as advertised” when you use built-in components. Any Flex component that can accept an ICollectionView as a dataProvider has specific logic to handling paging.

This is because paging is just a series of asynchronous remoting calls performed behind the scenes. When a component tries to access data that isn’t available, an ItemPendingError is thrown and a remoting call is made to retrieve it.

Since there’s nothing to access right away, the component will substitute a placeholder in lieu of the actual data. When the remoting call returns, the component will then swap out the placeholder for the data.

This is all fine and good, even though it does reveal somewhat how the sausage is being made. You just don’t get any of this for free if you use your own custom component.

However this doesn’t mean it’s impossible. You just have to support the asynchronous method in which the data is accessed – something I’ll detail in a future post.

(cliffhanger)