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!

I started by creating a module that opens up the will_paginate collection class and includes ActiveResource and alias method chain the to_xml method to include these values. Example code below.

#enviroment.rb
...
require 'to_xml_extensions'

#lib/to_xml_extensions.rb
module WillPaginateHelpers
  include ActiveSupport::CoreExtensions::Array::Conversions
  def to_xml_with_collection_type(options = {})
        serializeable_collection.to_xml_without_collection_type(options) do |xml|
          xml.tag!(:current_page, {:type => ActiveSupport::CoreExtensions::Hash::Conversions::XML_TYPE_NAMES[current_page.class.name]}, current_page)
          xml.tag!(:per_page, {:type => ActiveSupport::CoreExtensions::Hash::Conversions::XML_TYPE_NAMES[per_page.class.name]}, per_page)
          xml.tag!(:total_entries, {:type => ActiveSupport::CoreExtensions::Hash::Conversions::XML_TYPE_NAMES[total_entries.class.name]}, total_entries)
        end.sub(%{type="array"}, %{type="collection"})
      end
      alias_method_chain :to_xml, :collection_type
 
      def serializeable_collection #:nodoc:
        # Ugly hack because to_xml will not yield the XML Builder object when empty?
        empty? ? returning(self.clone) { |c| c.instance_eval {|i| def empty?; false; end } } : self
      end
end
 
WillPaginate::Collection.send(:include, WillPaginateHelpers)

This now gives me the proper xml when I call to_xml

<?xml version="1.0" encoding="UTF-8"?>
<time-cards type="collection">
  <current_page type="integer">1</current_page>
  <per_page type="integer">25</per_page>
  <total_entries type="integer">108</total_entries>
  <time_card>
    <approved type="boolean">false</approved>
    <billable type="boolean">false</billable>
    <created_at type="datetime">2008-10-10T14:04:13-04:00</created_at>
    <date type="datetime">2008-10-10T14:04:13-04:00</date>
    <has_been_billed type="boolean">false</has_been_billed>
    <has_been_paid type="boolean">true</has_been_paid>
    <hours type="float">2.0</hours>
    <id type="integer">98</id>
    <is_overtime type="boolean">false</is_overtime>
    <task_id type="integer">6</task_id>
    <updated_at type="datetime">2008-10-10T14:04:13-04:00</updated_at>
    <user_id type="integer">1</user_id>
  </time_card>
  ...
</timecards>

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?

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.

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.

A working document has been added to describe the states syntax changes that are currently being drafted. The syntax changes document contains a few examples of how the code would differ from using states in Flex 2/3 and in Flex 4. Some of the new MXML-G tags can be seen in the examples.