$> gem update puremvc-gen

to get the new version. If you’re installing for the first time, refer to the original blog post for instructions.

Once you have those programs installed, simply enter ($> just denotes you are at a prompt on the command line)

$> gem install puremvc-gen

and the tool will be installed. Read on to see how to use it…

Project Settings

Presently, there is one bit of configuration housekeeping that must be done to get started using the tool. Within the source directory of your project you will need to add a proj.properties file containing 5 property settings:

• app.prefix => what to prefix your Facade and application Mediator with
• project.name => the name of your main MXML file
• core.namespace => the namespace of the project
• core.dir => the directory corresponding to the namespace (this will eventually be inferred from core.namespace)
• pmvc.flavor => standard | multicore (although only standard is currently supported)

An example configuration for a project called MyDemo using the namespace com.mydemo.demo would look like:

Example proj.properties

app.prefix = Demo
project.name = MyDemo
core.namespace = com.mydemo.demo
core.dir = com/mydemo/demo
pmvc.flavor = standard

Using PureMVCGen

Validating Project Properties

If you are starting a new PureMVC project and you have the proj.properties file created in the source directory:

$> puremvc-gen check

will ensure that the properties are correctly set. If they have been, at the end of the ANT output, you should see:

Display showing properties have been validated

Generating the PureMVC Skeleton

To generate the PureMVC directories, main MXML file, Facade, main Mediator, StartupCommand, and PrepareActorsCommand classes, simply enter:

$> puremvc-gen init

After this was run successfully the directory hierarchy will look something like this:

PureMVC skeleton generated from demo project properties

Other Commands

I haven’t created any online documentation yet, but the tool has fairly decent instructions on the command line.

$> puremvc-gen help

A quick rundown of the command, proxy, and mediator generation commands:

• puremvc-gen new command => generates a simple command
• puremvc-gen new command -m (or –macro) => generates a macro command
• puremvc-gen new mediator => generates a mediator
• puremvc-gen new proxy => generates a proxy

All of these generation commands may be passed a -n option to specify the name for the class on the command line. Otherwise, ANT will prompt you to input the name.

Where to Git It

The project is hosted at github so feel free to checkout the source. I’ll update the README file eventually so that front page will have documentation as well.

The gem is also hosted at RubyForge so you can download it there if you’d like to build it manually.

The GitHub page will eventually include a Roadmap for planned features, but please comment here with any suggestions you may have.

Finally, if you’re averse to Ruby you can always download the conf/ directory of the project, and manually run the ANT commands. They are a bit more cryptic though, which is why the gem and executable it provides are nice, however it should output instructions on what settings need to be made to run it manually.

Enjoy!

I’m trying to read all of the bytes in the readExternal() function of a class implementing IExternalizable, so that I may use the position property to move back in stream in case I need to do so. The problem only seems to occur if I am trying to de-serialize an Array of anonymous objects. If I put plain old Strings in the Array it will work fine. I find this odd since I would expect

public function readExternal(input:IDataInput):void {
  var arr:Array = input.readObject() as Array;
}

to have the exact same behavior as:

public function readExternal(input:IDataInput):void {
  var ba:ByteArray = new ByteArray(); 
  var inputBytes:uint = input.bytesAvailable;
  input.readBytes(ba);
  var baBytes:uint = ba.bytesAvailable;
  var arr:Array = ba.readObject() as Array;
  trace("inputBytes == baBytes ?= " + (inputBytes == baBytes)); // traces "inputBytes == baBytes ?= true
}

AIR installer and code attached below…

The classes I’m trying to serialize are simple as I’m only trying to serialize an Array in this test application. (Excuse the poor code of assuming the items in the Array are Objects in the toString()

io/WorkingSerializer.as

package io {
 
	import flash.utils.IExternalizable;
	import flash.utils.IDataInput;
	import flash.utils.IDataOutput;
 
	public class WorkingSerializer implements IExternalizable {
 
		public var arr:Array;
 
		public function WorkingSerializer(a:Array=null) {
			arr = a ? a : [];
		}
 
		public function readExternal(input:IDataInput):void {
			arr = input.readObject() as Array;
		}
 
		public function writeExternal(output:IDataOutput):void {
			output.writeObject(arr);
		}
 
		public function toString():String {
			var s:String = "";
			for each(var obj:Object in arr) {
				s += "\n\t{ ";
				for(var p:String in obj)
					s += p + ": " + obj[p] + ",";
				s += " }\n";
			}
			return "[WorkingSerializer]\n arr: [ " + s + "]";
		}
 
	}
}

io/ProblemSerializer.as

package io {
 
	import flash.utils.ByteArray;
	import flash.utils.IExternalizable;
	import flash.utils.IDataInput;
	import flash.utils.IDataOutput;
 
	public class ProblemSerializer implements IExternalizable {
 
		public var arr:Array;
 
		public function ProblemSerializer(a:Array=null) {
			arr = a ? a : [];
		}
 
		public function readExternal(input:IDataInput):void {
			var ba:ByteArray = new ByteArray();
			input.readBytes(ba);
			arr = ba.readObject() as Array;
		}
 
		public function writeExternal(output:IDataOutput):void {
			output.writeObject(arr);
		}
 
		public function toString():String {
			var s:String = "";
			for each(var obj:Object in arr) {
				s += "\n\t{ ";
				for(var p:String in obj)
					s += p + ": " + obj[p] + ",";
				s += " }\n";
			}
			return "[ProblemSerializer]\n arr: [ " + s + "]";
		}
 
	}
}

And here is the main application file. I wrote it as an AIR application so install AIR first if you don't have it.

SerializationIssue.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"
						layout="vertical" horizontalAlign="center" width="500" height="500">
 
	<mx:Script>
		<![CDATA[
			import io.*;
 
			private const WORKING:String = "workingfile_v1";
			private const PROBLEM:String = "problemfile_v1";
 
			private function init():void {
				registerClassAlias("io.WorkingSerializer", io.WorkingSerializer);
				registerClassAlias("io.ProblemSerializer", io.ProblemSerializer);
 
				var wo:WorkingSerializer = new WorkingSerializer([{obj: "some"}, {obj: "items"}, {obj: "are"}, {obj: "here"}]);
				var s:FileStream = new FileStream();
				s.open(getFile(WORKING), FileMode.WRITE);
				s.writeObject(wo);
				s.close();
 
				var po:ProblemSerializer = new ProblemSerializer([{obj: "items"}, {obj: "in"}, {obj: "problem"}, {obj: "serializer"}]);
				s.open(getFile(PROBLEM), FileMode.WRITE);
				s.writeObject(po);
				s.close();
			}
 
			private function getFile(filename:String):File { return File.applicationStorageDirectory.resolvePath(filename); }
 
			private function readObj(readWorking:Boolean=false):void {
				var s:FileStream = new FileStream();
				s.open(getFile(readWorking ? WORKING : PROBLEM), FileMode.READ);
 
				if(readWorking) {
					var wo:WorkingSerializer = s.readObject() as WorkingSerializer;
					logger.text += wo + "\n\n";
					trace(wo);
				}
				else {
					var po:ProblemSerializer = s.readObject() as ProblemSerializer;
					logger.text += po + "\n\n";
					trace(po);
				}
				s.close();
			}
		]]>
	</mx:Script>
 
	<mx:HBox>
		<mx:Button label="Read Working Serializer" click="readObj(true)" />
		<mx:Button label="Read Problem Serializer" click="readObj()" />
	</mx:HBox>
 
	<mx:Panel title="Logging" width="100%" height="100%">
		<mx:TextArea id="logger" width="100%" height="100%" editable="false" wordWrap="true"
					 updateComplete="logger.verticalScrollPosition=logger.maxVerticalScrollPosition" />
	</mx:Panel>
 
</mx:WindowedApplication>

To test this out without having to compile it yourself, I've compiled it as an AIR installer: Serialization Issue AIR Application. And the source: Serialization Issue Source.

When I run the code below and click on the "Read Working Serializer" button I correctly see:

[WorkingSerializer]
 arr: [ 
	{ obj: some, }
 
	{ obj: items, }
 
	{ obj: are, }
 
	{ obj: here, }
]

get output to the console. But, if I click on the "Read Problem Serializer" button I get the following RangeError:

RangeError: Error #2006: The supplied index is out of bounds. 
at flash.utils::ByteArray/readObject() 
at io::ProblemSerializer/readExternal()[<path to environment>/SerializationIssue/src/io/ProblemSerializer.as:19] 
at flash.filesystem::FileStream/readObject() 
at SerializationIssue/readObj()[<path to environment>/SerializationIssue/src/SerializationIssue.mxml:40] 
at SerializationIssue/___SerializationIssue_Button2_click()[<path to environment>/SerializationIssue/src/SerializationIssue.mxml:51]

In the meantime I'll find a workaround for this, but has anyone encountered anything similar to this or know why this isn't working?

the first clue was at line 9203 in the mx.controls.listClasses.ListBase class:

collectionIterator.insert(copyItemWithUID(items[i]));

Ah ha, now on to see what copyItemWithUID does, so looking at line 9230:

var copyObj:Object = ObjectUtil.copy(item);

and the trail ends in mx.utils.ObjectUtil at line 102 in the copy function:

var result:Object = buffer.readObject();

The Problem and the Solution: Serialization

Here I discovered the source of the problem. The class that was being dragged was being properly serialized, but it had a property within it which was another custom class, and sure enough that class wasn’t being serialized. This was causing that property to be lost – more specifically, it was becoming an empty Object.

If you don’t care how your class is serialized, but only that it will be properly serialized within Flex, then simply add the [RemoteClass] metadata tag above the class definition as follows:

package com.example {
 
  [RemoteClass]
  public class MySerializableClass {
    ...
  }
 
}

• I was the only one that knew how to compile the application
• If someone else wanted to try to compile the application, they’d have to install Flex Builder

After reading a blog post by Marc Hughes I realized it was time we put in place a more versatile environment for building Flex applications.

I settled on using ANT since the Flex SDK includes a set of ANT tasks to simplify compiling using ANT. I was quickly able to follow the examples to make an ANT script to compile a simple application:

Simple Build File

<?xml version=”1.0″?>
<project name=”TestANT” basedir=”.” default=”compile”>

  <taskdef resource=”flexTasks.tasks” classpath=”${basedir}/flexTasks/lib/flexTasks.jar” />

  <property name=”FLEX_HOME” value=”/var/lib/flex” />

  <target name=”compile”>
    <mxmlc file=”TestANT.mxml”>
     <load-config filename=”${FLEX_HOME}/frameworks/flex-config.xml” />
     <source-path path-element=”${FLEX_HOME}/frameworks” />
    </mxmlc>
  </target>

</project>

This works fine for a simple Flex project, but most projects we use utilize external libraries that have been compiled into a SWC. Getting the Cairngorm SWC compiled into my test application by following the documentation proved harder than it looked. I first tried the following build file to compile a project using Cairngorm:

Build File Attempting to Include Cairngorm

<?xml version=”1.0″?>
<project name=”TestANT” basedir=”.” default=”compile”>

  <taskdef resource=”flexTasks.tasks” classpath=”${basedir}/flexTasks/lib/flexTasks.jar” />

  <property name=”FLEX_HOME” value=”/var/lib/flex” />

  <target name=”compile”>
    <mxmlc file=”TestANT.mxml”>
     <load-config filename=”${FLEX_HOME}/frameworks/flex-config.xml” />
     <source-path path-element=”${FLEX_HOME}/frameworks” />
     <compiler.library-path dir=”${FLEX_HOME}/frameworks” append=”true”>
      <include name=”/var/lib/swcs/Cairngorm.swc” />
     </compiler.library-path>
    </mxmlc>
  </target>

</project>

I thought I had followed the instructions properly, but unfortunately this was yielding:

[mxmlc] /home/greg/blah/test.mxml(6): Error: Definition com.adobe.cairngorm.control:CairngormEvent could not be found.

After playing around with some parameters and re-reading the documentation a few times, i finally got it to include SWCs using the following code:

Build File to Properly Include SWCs

<?xml version=”1.0″?>
<project name=”TestANT” basedir=”.” default=”compile”>

  <taskdef resource=”flexTasks.tasks” classpath=”${basedir}/flexTasks/lib/flexTasks.jar” />

  <property name=”FLEX_HOME” value=”/var/lib/flex” />
  <property name=”LIBS” value=”/var/lib/swcs” />

  <target name=”compile”>
    <mxmlc file=”TestANT.mxml”>
     <load-config filename=”${FLEX_HOME}/frameworks/flex-config.xml” />
     <source-path path-element=”${FLEX_HOME}/frameworks” />
     <compiler.library-path dir=”${LIBS}” append=”true”>
      <include name=”Cairngorm.swc” />
     </compiler.library-path>
    </mxmlc>
  </target>

</project>

The documentation is confusing since it says to specify the ${FLEX_HOME}/frameworks directory as the dir attribute to the <compiler.library-path> tag. I had thought my modification of their example would work, since I was assuming the append attribute was indicating to also include the paths in addition to the frameworks directory. I guess that’s not the case, and by specifying the <compiler.library-path> parameter with append="true" included you are indicating to do the equivalent to mxmlc -l+=somepath on the command line.

You can check out the Flash Player 10 page on Adobe Labs to learn how to compile content to target Flash 10 or check out my previous post.

Some of the exciting new features include:

1. the ability to render filters and effects made using the PixelBender toolkit
2. dynamically manipulating sounds at the ByteArray level
3. new Vector class for strongly-typed, more efficient arrays
4. and plenty others

For users that wish to start compiling their content into Flash Player 10 and taking advantage of things like the new Drawing API, they may compile Flash Player 10 content using a nightly build of the Flex 3 SDK.

Also, Aaron West posted a great collection of links to articles and blogs related to the release.

Ben Stucki created the project after being inspired by a presentation Ely Greenfield gave at MAX Barcelona.

Videos of the Flex Roadmap session (courtesy of João Fernandes) are well worth the watch.

If you’re interested in playing with (or just learning more about) OpenFlux head on over and check out the source. I just added a wiki page explaining how to compile OpenFlux into a SWC if you need help getting started.

Happy Fluxing!

Ryan Stewart

Ryan Stewart kicked off the keynote giving an introduction and overview to Adobe AIR. After briefly going over the background/web-history of the Flash player and the motivations behind the development of Adobe AIR, Ryan showcased some AIR applications:

• Finetune
• A task app that was made in 24 hours w/ straight CSS & JavaScript by the creator of the Ext framework
• Buzzword
• Adobe Media Player (not publicly released yet)

He also highlighted that with the newly announced update to Flash Player 9 (codenamed “Moviestar”), Flash SWFs will be able to support H.264 video and HE-AAC audio. This will allow Quicktime movies to be played through SWFs and the Adobe Media Player.

Ryan then mentioned that the second public beta drop of AIR will be released during the MAX 2007 conference. Also, we were reminded of the AIR Developer Derby: a contest to see who can make the best AIR application. The grand prize is essentially a $100,000 travel coupon. There will also be five category winners that will win “The Ultimate Desktop Environment”, which is pretty much a bunch of beast hardware.

Mike Chambers

Next up was Mike Chambers demo’ing how to write a HelloWorld Flex-based AIR application. Pretty standard, but he went on to highlight the install experience for end-users that will be using AIR applications we developers will be creating. End-users will need the AIR runtime in order to install an AIR app, but developers will be able to place a Flash Badge on their website which will allow users without the AIR runtime to install both the runtime and their AIR application with only 4 clicks.

Mike finished off with pointing any developers that are starting to play around with AIR to the onAIR Bus APIs which have a ton of live data that can be used in an AIR app.

Kevin Hoyt

Kevin Hoyt was next to demo how to build an HTML-based AIR Application.

Kevin emphasized that Flex Builder is not necessary to create AIR applications. The Flex 3 SDK (which is freely downloadable) contains the AIR SDK as well, so you can compile and debug your AIR applications from the command line. Dreamweaver CS3 also has an AIR extension so if you’re a web developer that’s afraid of the command line you can go ahead and develop your HTML page in Dreamweaver and debug the application or package it as an AIR file directly within the comfort of Dreamweaver.

Script Bridging

Kevin next demo’d the script bridging capabilities of AIR, which lets JavaScript reach into the ActionScript world and invoke any methods in the Flash API (anything in the flash.* namespace). The reverse is also true (ActionScript reaching into the JavaScript world). This means you can have a purely HTML-based AIR application that can call methods in the Flash API by simply doing things like:

<script>
  var airFile = window.runtime.flash.filesystem.File;
  var desktop = airFile.desktopDirectory;
  var myFileInJS = new airFile(desktop.resolve("file_on_the_desktop.txt");
</script>

Here, myFileInJS is a JavaScript variable that references an ActionScript 3 class from the AIR SDK.

So “window.runtime.flash.* can let you directly use any Flash class from JavaScript. IMO the coolest thing Kevin covered is the ability augment the Flash packages you can use by simply script including a library.swf from any SWC to access those AS classes:

<script src="library.swf"></script>
<script>
  var encoder = runtime.com.adobe.images.PNGEncoder;
  encoder.encode( bitmapData )
</script>

In this example, encoder is the PNGEncoder from the as3corelib project, but the encoding is being done in JavaScript using AS classes! Very cool stuff. (FYI: a SWC is stored in a ZIP format, so you can just unzip a SWC file to access the library.swf inside of it)

Chafic Kazoun: Windowing in AIR

Windowing concepts Chafic covered/demo’d:

• utility window
• standard window
• custom chrome transparent window
• custom chrome where background is embedded in a SWF
• custom window dispatching events and being listened to by another window

Ben Forta: AIR + ColdFusion

Highlights from Ben’s talk:

• 50% of existing ColdFusion customers have upgraded to ColdFusion 8.
• ColdFusion/Flex Extensions for Eclipse available at Adobe’s ColdFusion page.

Can generate a ColdFusion-backed Flex web app w/ literally no front-end coding; the extension has Master/Detail/Master_Detail and DB wizards to configure everything which then generates the CFCs, MXML components, and CSS stylesheets using all best practices.

This was possible before in ColdFusion 7, but now ColdFusion 8 can generate a ColdFusion-backed AJAX/HTML/CSS web app in the same manner.

From AIR you can load an HTML page from a ColdFusion backend and it will properly renders this AJAX/HTML/CSS generated content.

Yesterday I became certified as an Adobe Flex 2 Developer. It was easy to locate and schedule taking the test through Thomson Prometric.

The studying materials I used to prepare were:

• Flex 2 Developer’s Guide
• Creating and Extending Flex 2 Components
• Building and Deploying Flex 2 Applications

I had already begun programming in ActionScript 3.0 prior to learning Flex 2, but for those new to ActionScript 3.0 the Programming ActionScript 3.0 documentation will get you up to speed.