Using Astra Outside of Flash

Many of us Actionscript developers are self-described purists who eschew the trappings of Flash to the Designers who tread not in our world of text editors and command line compilers. OK, who are we kidding. You can’t do complex Flash development without loading up Flash every once and a while. Even if you spend most of your time in a text editor, the Flash development tool is a necessary part of the development process at times. 

Coming from a Java background where every library can be discovered on a class path and compiled into a single distributable archive, Actionscript programming still perplexes me a bit when it comes to using a button or a UIComponent. Of course these are component classes that are immediately accessible within the flash environment, but step outside into the cold world of the command line and you will find these classes are verboten.

So what gives? From the command line you have access to some pretty serious components from the Flash libraries. There are flash.net.URLLoader and flash.display.Sprite, but there isn’t access to fl.controls.Button or fl.core.UIComponent. In the case of the UIComponent class, it actually extends Sprite! I hope that someone can fill in the logic here because I came late to the game and it bewilders me that Adobe continues to make developers jump through Flash to get access to some of these classes and not to others. The cynic in me thinks this is Adobe’s way of selling more Flash licenses.

Yahoo’s Astra Library

I really like Yahoo’s developer website. There are years worth of relevant and practical knowledge there in videos, articles, and code. One of the areas of special interest to me is the Flash APIs that Yahoo has released under the name of ActionScript Toolkit for Rich Applications, or thankfully by its acronym, ASTRA.

ASTRA includes several high level components for Flash developers and a separate set of components for Flex development. There are classes for animation and badges. Yahoo also provides APIs for their own mapping, social network, weather, and other services.

What caught my eye was their layout containers.

The Case for Layout Management

I had come to Flash by way of Flex. Flex development has many similarities with Java client development, especially today with the marriage of XML and GUI found in JavaFX or the GUI builders in Groovy. Anyone who has developed a complex (or even simple) GUI knows how layout managers simplify a tremendous amount of tedious coding, especially if the application is resizable and/or dynamic.

At a previous Flex consulting job, I had noticed the customer was manually positioning components on the screen using X/Y coordinates. They weren’t even repositioning or resizing these components when the user stretched the window. In fact, they dealt with this shortcoming by making the window a fixed dimension. Never mind the average user had a large screen and the application ended up occupying a small corner and it had horizontal and vertical scrollbars so the content could be managed. It only took an hour to introduce Flex’s layout managers to the application, and the users were ecstatic.

I don’t know how common it is, but I often see developers crafting GUIs who are more adept on the server side of the coding equation. There are exceptions of course, but I think every developer who is creating a GUI has to put themselves in the shoes of a user. Not just every once and a while, but the entire time they are building the GUI.

Layouts in Flash

Flex has some great layout containers, very similar to Java’s. They can be nested to provide an infinite number of layout permutations. Never again should a developer code a window that cannot be smoothly resized with all the components reacting intuitively to a change in width or height. Seems like a pretty fundamental function for a GUI development environment, right?

Wrong!? Flash is probably the most visible GUI development platform in the world, and imagine my surprise the first time I went looking for a BorderLayout container. And there wasn’t one. I looked at a lot of code examples of some highly respected developers, and I was a bit surprised to find they mostly laid components out by hand. They manipulated the dimensions and position of components manually. This isn’t particularly difficult for a few components, but it becomes very troublesome when there are dozens of components and nested containers.

In fact, it’s precisely why layout containers exist in Flex, and more importantly to Flash developers, it is why Yahoo introduced the layout containers in Flash. The purpose of this blog post isn’t to show you how to use the Astra layout containers, but rather how to compile them in a manner that they can be used directly from Actionscript. For usage information, I highly recommend the examples included in the Astra download, especially the feed reader example.

Making ASTRA Layout Containers Accessible to Actionscript

Unfortunately (and inexplicably to me), Yahoo did not release the layout containers as a pure Actionscript library. This means you must use Flash to compile a swc library that can be linked with the command line compiler. Perhaps it is because the layout containers extend UIComponent, which I mentioned in the beginning was not immediately accessible outside the Flash IDE.

Download the ASTRA library from Yahoo’s Flash developer site. The installation of the ASTRA extensions are documented on Yahoo’s site. Since I have Adobe’s Extension Manager installed, simply double clicking the file installed it.

 

From here, we need to open Flash and create an new Flash file (Actionscript 3.0). Once the file is created go to WIndow –> Components (Ctrl-F7) if not already visible. In this dialog, you should see the Yahoo component categories have been added.

 

In the components dialog, expand the Yahoo! Layout node and drag each of the layout containers (BorderPane, FlowPane, HBoxPane, TilePane, and VBoxPane) to the Library dialog.

 

It’s not necessary to add any of the library items to the stage. At this point, we can simply publish our FLA, ensuring we check the ‘Export SWC’ option. When published, the resulting library should weigh in at nearly 50K. Not the lightest library you will come across, but still pretty reasonable for applications without a critical size limitation.

Now that you have a swc file, all of the ASTRA layout goodness is available to you in your Actionscript code. For instance, if you are using the MXMLC compiler, include the new SWC using the -compiler.include-libraries switch.