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 was surprised that a quick search didn’t find any components to allow this. The closest was a post by Jason Hawryluk, however this required the image to be embedded into the application.

So I simply extended ComboBox to include an Image within it, and added some sizing calculations so it would respect padding. An example follows below:

[flash http://blog.smartlogicsolutions.com/wp-content/uploads/2008/11/ImageComboBox.swf H=150]

The ImageComboBox class

1. Adds an Image in the createChildren method
2. Measures the available size the image can take up in the measure method
3. In the updateDisplayList method, if an item is selected:
1. Sets the source for the Image
2. Places and sizes the Image based on calculations from measure

In order to prevent the ComboBox from displaying “[object Object]” along with the image, be sure to include a label=”" property on the items in the dataProvider for the ComboBox. The following code is the MXML main file for the embedded SWF above:

Example MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	            xmlns:sls="com.slslabs.flex.controls.*">
 
	<mx:Label text="This demonstrates using the ImageComboBox" />
 
	<sls:ImageComboBox width="60" paddingLeft="5" paddingTop="5" paddingBottom="5">
		<sls:dataProvider>
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/mario-32x32.png" label="" />
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/luigui-32x32.png" label="" />
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/start-32x32.png" label="" />
		</sls:dataProvider>
		<sls:itemRenderer>
			<mx:Component>
				<mx:Image source="{data.url}" />
			</mx:Component>
		</sls:itemRenderer>
	</sls:ImageComboBox>
 
</mx:Application>

I pushed the code into my first git repository at github. If you’re a git n00b, then after you’ve installed git (or checked out the Git Eclipse Plugin – which I still need to do) then pull down the code by using the command:

git clone git://github.com/gjastrab/imagecombobox.git

If you aren’t on the git bandwagon yet, then just right-click and save as… to download the ImageComboBox.as file for now.

I plan on improving it soon to have it respect the positioning of a label or to optionally hide the label.

The presentation slides and code will be posted at http://www.smartlogicsolutions.com/wiki/Intro_to_Flex after the presentation.

RSVP at http://www.localist.com/event/6229 if you can make it.

If you need to style the tabs uniformly, then you’ve got little work to do. Just set the StyleName attribute on the TabBar itself and just define it in your stylesheet.

<mx:TabBar id="tabBar" styleName="myTabBarStyle"  />

.myTabBarStyle {
	tabHeight: 28;
	cornerRadius: 0;
	horizontalGap: 0;
	horizontalAlign: right;
	backgroundAlpha: 1;
	backgroundColor: #357cc6;
	borderStyle: none;
	borderThickness: 0;
	dropShadowEnabled: false;
}

Now that’s all good and well when all your tabs look the same. What if you want to apply styles to tabs individually? Well, if you’ve got 3 tabs or less you can use some css selectors to reference the book ends specifically, and let the general style apply to the middle tab.

.myTabBarStyle{
    ...
  tabStyleName: "greenTab";
  firstTabStyleName: "blueTab";
  lastTabStyleName: "yellowTab";
}
.greenTab {
  fillColors: #a5d414, #87c408;
  backgroundColor: #87c408;
   borderColor: #87c408;
  themeColor: #a5d414;
}
.blueTab {
  fillColors: #5a9cd6, #357cc6;
  backgroundColor: #357cc6;
  borderColor: #357cc6;
  color: #ffffff;
  textRollOverColor: #ffffff;
  themeColor: #5a9cd6;
}
.yellowTab {
  fillColors: #333333, #333333;
  backgroundColor: #333333;
  borderColor: #646464;
  color: #F8ED6D;
  textRollOverColor: #F8ED6D;
  themeColor: #646464;
}

When you have 4 or more tags, you need to set their styles by getting a reference to the tab itself and call the setStyle() method. Straight forward? Yes. Easy to find information about? No… in fact I ran into trouble because there wasn’t any documentation available for an individual tab’s class and FlexBuilder 3 has no source code for the mx.controls.tabBarClasses package.

Import the Tab code, get a reference to the tab you wish to style, and call setStyle() for each attribute you want to change. Let’s say you have 4 tabs and each has a different style. You can combine all 3 methods of styling by using the css code above to set the tab style for all tabs in the tabBar, override styles for the first and last tabs, then specifically grab the 3rd tab and override its style in the component:

  <mx:Script>
    <![CDATA[
	import mx.controls.tabBarClasses.Tab
 
       private function tabBarCreationComplete():void{
	  var tab:Tab = tabBar.getChildAt(2) as Tab;			  
	  tab.setStyle("fillColors", ["#edb000", "#e69500"]);
          tab.setStyle("backgroundColor", "#e69500");
          tab.setStyle("borderColor", "#e69500");
          tab.setStyle("themeColor", "#edb000");
       }
    ]]>
  </mx:Script>

And update the TabBar control:

  <mx:TabBar id="tabBar" 
                     styleName="myTabBarStyle"
                     creationComplete="tabBarCreationComplete();"  />

You can iterate through each tab in the TabBar and set each tab individually if desired. I hope this helps some Flex developers out there who are confused by styling many tabs individually!

It solves the problem of having your AIR application store an IExternalizable class on disk but then later adding more fields to that class. How would you read the old version of the class without encountering a runtime error if you tried to read the new field that wasn’t present in the older serialization?

Go check it out the cookbook entry to find out how to do this and please rate the article!

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?