Pitfalls of loading Flex modules

I’ve just run into two issues for Flex module loading. Maybe it helps somebody…

Hungry garbage collector

When loading modules, it’s important that you keep a reference to the IModuleInfo instance. I did store them in a Vector and thought everything works that way. What I forgot was a subtle timing issue: I checked the Vector for loaded modules after I pushed a new loading job into Vector. So it could happen that right after pushing the job into Vector, it got thrown into the garbage.

Stale Expires HTTP headers

Another nice one are HTTP caching headers: By mistake, I assigned all Flex modules a fixed Expires HTTP header. It expired this morning and loading modules became a seemly random process: The first module loaded successfully, but the second and third failed. When the same Flash Player instance loaded the module a second time, everything worked well. Well, after some debugging, I found the culprit in the HTTP header. After removing the Expires header, everything runs smoothly again.

Let me know if you have other stories about module loading.

Mocking in Flex/ActionScript has arrived: mockito-flex

The announcement of Google Chrome OS is certainly a bing bang in the IT world. However, this didn’t made my day but the public release of mockito-flex. It’s been quite painful to create mock objects up to now in Flex. mock-as3 was best until I read on InfoQ about mockito-flex. It’s based on asmock but the syntax feels very much like mockito for Java (which is in my opinion the best mock library in Java). The documentation is still sparse, so below are all the things I need to know:


given(mockie.foo(10)).willReturn("10")
given(mockie.foo(10)).willThrow(new Error("oups"))
given(mockie.foo()).will(new GenericAnswer(incrementCounter))
verify().that(array.push("1"))
verify().that(array.pop())
verify().that(mockie.baz(eq("one"), any()))
verify().that(mockie.baz(argThat(new GenericMatcher("two", contains)), eq(10)))
verify(never()).that(testClass.foo())
verify(times(3)).that(testClass.foo()) // atLeast(4), atLeastOnce(), once()


Cheat sheet: Flash Player HTTP talking with HTTPService, URLLoader and friends

HTTP communication with Flash Player is messy and very uncomfortable: There are a few classes to know, HTTP headers are never available and different bugs in different browser don’t help either. So I’ve started to compile a cheat sheet for Flash Player and started another one for Adobe Air.

Leave a note if you want to contribute to the Google doc.

Migrating to Flex 4 (Gumbo): Neither epic fail nor seamless

There has been some debate about whether the migration to Flex 4 is an epic fail or a breeze. As often, the truth is somewhere between. Here is my experience with porting BlocStac.com, an application with roughly 90′000 lines of code including tests, 2 libraries and 8 modules plus 2 Air helper applications.

A good start for the migration is an Adobe article by Joan Lafferty. I also appreciate the information in Adobe’s Wiki. What also helps is that the term “gumbo” works nicely for search. What definitely doesn’t work is searching the Adobe’s forum: you can’t search within the current forum and selecting a single forum in advanced search is impossible due to the sheer number of more than 500 forums.

Skinny CSS, fat Skins

All definitions of borders and paddings in CSS are happily ignored in Flex 4. Using the compiler option “theme=path/halo.swc” is not an option as having components with halo skins and spark skins is not acceptable. What I’ve done so far:

1. Move all padding declartions in CSS files into the layout objects of components.
2. Write custom skins for all components that require border settings. Because I could not believe that one (after all, it’s quite a lot of work), I asked on the forum. Peter deHaan from Adobe gave a fast and helpful answer. I love this level of support.
3. global does not work yet, “*” is also of no help. Still investigating this one.
4. Rename “background-color” to “contentBackgroundColor” (does anybody know the reason for this change?)
5. Add namespace to CSS

If anything could be called an epic fail, it might be CSS migration. I had to recode pretty much everything defined in CSS and CSS is now pretty sparse. I’m not even sure whether CSS is still worth the concept in Flex 4.

Flex-Mojo, AdvancedDataGrid, etc

Some other issues I hit:

1. Flex-mojo: VELO does a great job at bringing maven to the Flex world. It took him only a few hours to include Flex 4beta1 in flex-mojo 3.3-SNAPSHOT and fix an issue with unit testing. Though I hope Adobe offers a maven repository some day… vote for SDK-12730!
2. AdvancedDataGrid: TypeError: Error #1007: Instantiation attempted on a non-constructor. at mx.controls::AdvancedDataGridBaseEx/getSeparator()… brought me to Matt Chotin’s answer that it’s not available in Flex 4beta1 (4.0.0.7219). Au contraire, the only Flex4 version that has a working datavisualization library is Flex 4beta1. It comes bundled with Flash Builder beta1 but the library is not compatible anymore with current builds.

Is it worth the pain?

Not yet. Not having AdvancedDataGrid is a show stopper for BlocStac.com. All the work for CSS is unfortunate but it probably leads to better code (though not sure yet). If it brings Flex really forward, it’s fine. After all, I rather see an evolving eco system that let die out obsolete concepts than e.g. the Java language that drags everything along.

No free lunch: EditImage’s Matrix Transformations

There is no free lunch in life. It’s pretty much the same with image manipulation in Actionscript. There is no way around linear algebra. Well, the good news is that it’s linear by definition. The bad news is that it becomes a bit quirky in Actionscript. With the following links, I hope to answer some questions I regularly get asked for the EditImage component.

What you should know

An excellent starting point is Senocular’s introduction in transformation matrices. This should give you enough motivation to muddle through affine transformation and friends in vector calculations. Should you loose your patience while repeating or learning, go to the hands-on matrix transformation page of Adobe.

Once you are a champion in linear algebra and the matrix API of the Flash Player, you need to know that Adobe’s transformation matrix is the tranpose of the matrix that is usually used in math. Philip Kromer explains it on his blog. The same guy has also written a very usefull demo.

Adobe Cocomo RTMFP enables “Skype” without installation

Yesterday, the blog of the Adobe Cocomo team announced a limited service for RTMFP. The entry is very informative and straight; so go read it! RTMFP stands for Real-Time Media Flow Protocol and is well explained in these FAQ. From an end user perspective, RTMFP seems to be as relevant as for example the move in imaging from CCD-sensors to CMOS-sensors: Both technologies can deliver great result, but with CMOS it gets much easier over the years and it is also much cheaper.

Hopes are, that RTMPF can lower costs of high bandwidth audio and video conversations mainly between two users while featuring a higher quality than a server based communication. The only party-stopper might be restrictive firewall rules. In fact, if I were an IT administrator I would block all those outgoing connections.

To start a connection between two users, you need something like a dating service. Adobe Stratus does this job exclusively. Once you know each other, the service is only loosely involved with your interaction.

What’s missing at first glance is the ability to store those streams. I think it is the same problem as with direct communication to Cocomo. You can persist objects but no streams. While it’s fine to start with a proprietary protocol, I hope Adobe releases the specs as soon as possible. I hope to see RTMFP soon in Wowza and Red5.

Multi-touch for Adobe Flex: Introduction in Hardware and Software

I’m convinced that keyboards and mice are going to be complemented with multi-touch screens in a staggering short period. This believe drives me to check the current state of the technology. I split the analysis into three areas: the hardware, the “software engine room” and “user gestures and applications”. Because we need a presentation wall at Faindu, I confine all aspects to large screen applications.

Generally, NUI Group is the hot spot. For diving into the technology, I also found the master thesis of Laurence Muller published this September quite useful.

Multi-touch Screens

All commercial hardware I found starts with a price tag of several 1′000 €. And until the 3D-camera sits in every laptop, we will need to settle for 2D surface interaction. There is a thread on NUIgroup that summarizes nicely the following four technologies. All four options are based on the same physical principle: finger tips or any other objects emit infrared (IR) light and are tracked by an IR-filtered camera. Those artifacts detected by an image processing algorithms are called “blobs“. The tracked object could actively emit light with an IR-LED but this required the user to wear gloves or something like a mini-torch. Because this is not geeky enough, all principles rely on reflecting IR-light on the object. So the real challenge is to illuminate several objects on the surface with evenly distributed intensity and indirection.

• Diffused Illumination, DI: Several IR-lamps spot form the the back onto the surface.
• Diffused Surface Illumination, DSI: Tim Roth introduced the DSI technology. Contrary to what the name implies, the setup is very similar to FTIR
• Frustrated Total Internal Reflection, FTIR: While DSI relies on scattering the light in the material, FTIR uses optical reflections at the surface. Think of a thick telceom multimode fiber that is pressed into a flat form. A nice diagramm of Jeff Han’s former group, comprehensive instructions pdf by Harry van der Veen and other instructions by Christopher Jette.
• Laser curtain or Laser Light Plane (LLP): One or several lasers span a curtain of light beams one millimeter in front of the screen. It was introduced by AlexP (update, newest post) on the NUIgroup forum and very well explained by Georg Kaindl.

If security issues can be resolved, LLP is my clear favorite.

Software on the “operating system” level

With “operating system” (OS) I mean the software that reads the data from the camera/s, processes it and sends the appropriate events in Actionscript. For the mouse or keyboard, this is on the operating system level, so I name it that way. TUIO is the standard for the communication between the multi-touch screen and applications.

• Touchlib: The software library touchlib seems to be the standard. How to setup a touchscreen. There is also WiimoteTUIO that tracks up to all four points of Wii Remote.
• tbeta: tbeta is a recently released package by NUIgroup. It looks quite handy and there is a getting started guide.
• IDEO: The well-known design firm compiled on the basis of processing an OS stack for Flash called ideo-multitouch.
• simtouch: TUIO message simulator for AS3 development.
• Processing: not sure what it is or rather what it isn’t.
• [Added 12th Dec 2008] wiiflash puts all events of a Wii remote into Flash Player.

I will explore tbeta and IDEO in more depth.

User gestures and Flex multi-touch applications

Apart from Bill Buxton’s page that also features an excellent overview, I could not find yet a lot of research about gestures. I want to know what people intuitively understand. Wiping horizontally with two fingers means to most users…? Tipping with three finger should do…? And the combination with two hands? Anyway, there are may applications around:

• A blog of Harry van der Veen list three Actionscript applications developed by the NUIgroup.
• Multi Touch Flickr Viewer lets you play with images.
• mapstouch is an Air application and lets you navigate google maps. It is based on touchlib.
• sparsh-ui is developed at the Iowa State University and features a gestures server. However, I could not find an Actionscript API.
• There are no Flex components optimized for the multi-touch paradigm yet.
• Website that collects videos of multi-touch applications.

Streaming server, RMTP, AMF3, HTTP is for…??

A comment of Fer triggered me to write up a short summary for what all these technologies are for. We are only talking about how Flex/Flash Player can communicate to servers. Communication between Flash Players, .swf-files within Flash Player or the Flash Player and the operating system is not touched. I’m gonna structure this after a totally subjective weighting of use cases:

Text that is not changed every minute

Use XML (or JSON) over HTTP for sending and receiving text between Flex and the server. They are THE standard protocols everybody knows and there is no reason to prefer any other protocol. While there are some cavities, HTTP may be suitable for 95% of all use cases. There are very interesting posts about the performance of AMF3, however I bet that your use case does not profit enough. I even wonder (because I don’t know), if an optimal configuration of application caching, HTTP caching and HTTP compression could reach higher performance numbers than with any proprietary protocol. But the engineering costs and support costs will increase with any other protocols than XML/JSON and HTTP (note that this is not specific to AMF3).

Products: Any web server on earth

Images and binaries such as file.doc that are not changed every minute

Same as above, use HTTP.

Suitable products: Any web server on earth

Text that is changed within 1 minute

Typically, these are for example text chatting or a white board application. For this purpose, all the real time protocols fly! Use any of Adobe’s RTMP protocol in combination with all those nice helper technologies such as Remote Shared Objects.

Suitable products: Adobe BlazeDS, Adobe LiveCycle Data Services, Red5, Wowza Media Server Pro, WebOrb, GraniteDS, RubyAMF, AMfPHP, PHPObject, SabreAMF, DjangoAM, …

Audio or video chat, Hugo to Tony and Tony to Hugo

Two parties send a video stream to each other. There are not so many alternatives as above:

Suitable products: Adobe FMS, Red5, Wowza Media Server Pro

Audio or video broadcast, Hugo to many people

For this use case, there are actually two solutions: The progressive download of the Flash Player may be sufficient in many cases. This means that Flash Player starts to download a file and can start playing the video event if the download has not finished.

Suitable products: Any web server or e.g. directly from Amazon S3

If you want to jump to an arbitrary point in the video or audio or you want to broadcast live, you need a streaming server.

Suitable products: Adobe FMS, Red5, Wowza Media Server Pro

Final word

After this simplied explanation, I cannot let you go without saying that you should think through your use case thorougly and don’t take generall statement as above as a base of reasoning in any way.

10 wishes for the Flex ecosystem

Half way to Christmas, it’s about time to express your wishes… I wanted to list my more or less realistic wishes for the Flex world. Before we start, I also want to mention that the Flex eco-system has already made many, many wishes become true. To underline this with a current example, Flash Player 10 brings real text editing capabilities, loading files directly into the player or a simple typed array called ‘vector’.

1. Flash Player: HTTP service

This is on top of the list. In a RESTful world, a basically non-functioning HTTP service is just not bearable. I hope that Silverlight puts some heat on this issue.

2. Flash Player: Cache swf on client

Actually, that’s a security question. Because data transmitted over SSL does only get cached in memory (at least for Firefox), the entire application is downloaded after every restart of the browser. The only way around this massive penalty of start-up time is dropping the secure transmission.

The swz-files of the framework show that the technology in the Flash Player is ready. However, I also do not have an answer on how to sign only the good guy’s files. But hey, this is about wishes!

3. Flex Builder: Refactoring

Refactoring in Flex Builder compared to Java refactoring is far behind. For instance, moving a file into another namespace is just pure hand craft.

4. Flex Builder: Collapse license information

This is a “quick win”: Hide all legal stuff from the developer, like in Java. Because this is so easy, let’s add collapsing imports and a @SuppressWarning in the quick fix.

5. Compiler: Runtime compiler

Well, I have just found As3Eval what appears to be exactly the thing I’m looking for. Let me dive into this library before I express any wish. In the mean time, +1 for compile time.

6. Compiler: Mock objects

Drew Bourne made a fabulous job with mock-as3. I use it on daily basis. However, he also states the limit: For a non-trivial interfaces and classes creating these stubs manually is a pain in… To solve this, you either have to tweak the compiler or wish number 5 gets satisfied.

7. Community: Functional and integration test

While code coverage is with Flexcover on its way, functional testing in general is not yet very well developed. As little as I know about Mercury QuickText Professional, it smells like an old-fashioned, big, clunky, over-priced software piece. FunFx is neat and VisualFlexUnit is another try at testing visual components.

8. Community: Serious build tool

Adobe offers Ant. This is basically a fine choice because Ant integrates well with Eclipse and continuous integration servers. By no means am I an Ant expert, but it does not seem to be that difficult to create some reliable tasks for compiling. However, you rather stay away from Adobe’s implementation.

Antennae is better but it does not support modules and is generally overcomplicated. However, we use the filter functionality for unit tests. It’s very handy.

9. Community: Framework

Tony Hillerson has summed it up nicely. We currently use our own framework that has grown out of Cairngorm. Basically, we replaced the singletons with injected objects and added to the controller the ability to declare parallel commands. However, using a home-brewed framework is just not right.

10. Community: ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

Skip this nasty ; at the end of line! It’s just visual clutter with no advantage.

Free Flex component: EditImage 0.3

Demo / Source

Just an other alpha release of EditImage with some work in it:

• Introduced interfaces for EditImage and the tools
• Quite frequently, I use EditImage as an image display and non of the tools are needed. That is the reason I disabled all tools by default. They are not initialized until a tool is enabled.
• Squashed some bugs like correct resizing of EditImage and positions of cursor
• More refactoring and more API documentation
• First unit tests added but many more needed
• EditImage.swc, API documentation (/tmp/ant-doc/index.html) and link-report (/tmp/ant-swf/EditImageReport.html) included in EditImage.zip

What is still on the wish list?

• As reported by Gireesh, when snap to top/left is disabled, the image can be move to any position on the screen.
• More refactoring
• Plug in new tools such as adding shapes, drawing with a pencil, adding text