House of Metnetsky » flash

Replacing Flex’s Timer with Event.ENTER_FRAME

MET — Fri, 06 Feb 2009 03:54:23 +0000

One of the projects I’m working on, as you might have guessed, utilizes Adobe’s AIR. After reading a few dozen optimization tips it sounded like I needed to replace four internal Timer‘s because they aren’t very efficient. As I couldn’t find anything off-hand that suited my needs I rolled my own (with some optimizations by Noah Massey).

The original code looked similar to:

private var timer:Timer = new Timer(15000); // run every 15 seconds

private function onCreation(event:Event):void {
	this.timer.addEventListener(TimerEvent.TIMER, this.onTimer, false, 0, true);
	this.timer.start();
}

private function onTimer(event:TimerEvent):void {
	/* do something */
}

I didn’t want to totally refactor all of my code because that would have been an amazing waste of time. So I ran through my usage of “timer” and realized what I needed to be able to do:

start
stop
change interval
create run-once functions like setTimeout, but tied to frames

With this in mind I typed up what I wanted and after a bit of tweaking my usage now looks like this:

private function onCreation(event:Event):void {
	FrameActivity.assign('someName', 15, this.onTimer);

	this.addEventListener(Event.ENTER_FRAME, FrameActivity.handleFrame, false, 0, true);
}

private function onTimer(event:Event):void {
	/* do something */
}

If you like what you see, send me a comment and I’ll happily provide the code.

AS3 Reflection

MET — Wed, 28 Jan 2009 22:48:57 +0000

Type discovery, better known as reflection, is rather odd in Flex. There is no type system to describe the types like sooo many languages offer (even PHP5 finally got it right). The closest that I know of is flash.utils.describeType which is quite weird as it returns XML. The DTD for the XML is ugly to me, but everyone has their opinions. A simple class like..

public final class EmployeeTitle extends BaseModel
{
	public var id:Number = NaN;
	public var title:String = '';

	public function EmployeeTitle()
	{
		super();
	}

	public static function fromXML(xml:XML):EmployeeTitle
	{
		return null; /* we should do something important here */
	}
}

turns into the following XML…

As I was looking for a way to marshal the type to XML for pushing to the server it seems like this was the closest I was going to get. So I wrote some code and got the basics working no problem. A few days ago I realized that most of my models would be a bit more useful if they were [Bindable] and thus dispatched events about their changes (lets keep those interfaces up to date eh?). So I added what .NET calls attributes and Flex calls metadata tags.. [Bindable] to my class.

[Bindable]
public final class EmployeeTitle extends BaseModel
{
	/* .... */
}

Once I did this however, none of my XML marshaling was working because apparently the type descriptor is now totally different.

As you can see all of the variable tags have been replaced by accessor tags. And methods have been added in order to perform the Event handling/dispatching, but apparently the class doesn’t extend something special. Instead the compiler seemingly injects raw methods, which bothers me for some reason.

As you can see I find Flex’s internals rather weird instead of smart, but as I said, everyone has their opinions.

Monthly Calendars in PHP for Flex

MET — Thu, 22 Jan 2009 01:00:05 +0000

At work I recently had a need to create a monthly calendar within Flex and populated with data from a web-service (created in PHP). I hate reinventing the wheel, but I also hate wasting time searching for a solution to a simple enough problem. So below you can find a quick answer to the problem as I couldn’t find one myself.

PHP: The following code creates a simple XML feed.

appendChild($doc->createElement('month'));

		$day = 1 - date('w', mktime(0, 0, 0, $month, 1, $year));

		do {
			$weekNode = $monthNode->appendChild($doc->createElement('week'));

			for ($y=0;$y<7 and $day <= $numDays; $day++,$y++) {
				//$sunday = ($day == $y);
				//$sunday = ($day == ($y + 6));
				$dayNode = $weekNode->appendChild($doc->createElement('day'));
				$numAttr = $doc->createAttribute('num');
				$numAttr->appendChild($doc->createTextNode($day));
				$dayNode->appendChild($numAttr);

				/*
				 * we could loop through database records here for holidays etc
				 * the _real_ version uses mktime(0, 0, 0, $month, $day, $year)
				 * to check for a stamp within an array of holiday records
				 * and then tack on some more nodes to $dayNode
				 */
			}
		} while ($day <= $numDays);
	}

	$doc = new DOMDocument('1.0', 'UTF-8');
	$doc->formatOutput = true;

	$date = getdate();
	$year = (int) (array_key_exists('year', $_GET))? $_GET['year'] : $date['year'];
	$month = (int) (array_key_exists('month', $_GET))? $_GET['month'] : $date['mon'];

	calendar_xml($doc, $year, $month);
	header('Content-Type: application/xml', true);
	echo($doc->saveXML());
?>

If you look at the rather large comment block above you can see where the value comes in. It’s pretty simple to use a unix timestamp to find records which you actually would want in the XML like holidays, events, etc.

The basic output looks like the following, and can be see in full at http://cowarthill.com/blog/wp-content/uploads/2009/01/calendar-xml.php

Once you have all of this in place you need to pull it into Flex. I found using a DataGrid very easy once you have the XML from the web service. And to customize the display I created a custom itemRenderer for the DataGridColumns. Here’s a few snippets….

MXML: Lets define our DataGrid and our HTTPService which will retrieve our data.

AS3: Now we need at least two functions: 1 to call the service and retrieve the XML; and a second take the response and assign it to the DataGrid.

/* month should be 1-based (January) */
public function retrieveCalendar():void
{
	calHS.url = 'http://localhost/project/calendar-xml.php?year=' + year + '&month=' + month;
	calHS.send();
}

/* handle the results from from calendar-xml.php */
private function handleCalXML(event:ResultEvent):void
{
	var weeks:XMLList = event.result.week as XMLList;

	/* dg is defined above in the MXML */
	this.dg.dataProvider = dayInfo;
	this.dg.rowCount = weeks.length(); // grid show be no bigger than necessary
}

Now we’re going to create a reusable itemRenderer which is instantiated for each cell in the DataGrid. You can do this in MXML directly, but I like AS3. The most important function to focus on is the setter for data because it assigns the values based on the XML we received.

package calendar
{
	import mx.collections.XMLListCollection;
	import mx.controls.TextArea;
	import mx.controls.listClasses.BaseListData;
	import mx.controls.listClasses.IDropInListItemRenderer;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.core.IDataRenderer;
	import mx.events.FlexEvent;

	public class MonthCell  extends TextArea
							implements IDataRenderer, IDropInListItemRenderer, IListItemRenderer
	{
		private var _week:XMLListCollection = null;
		private var _day:XML = null;
		private var _listData:BaseListData;

		public function MonthCell()
		{
			super();

			this.editable = false;
			this.wordWrap = true;
			this.selectable = false;
		}

		[Bindable(FlexEvent.DATA_CHANGE)]
		public override function get listData():BaseListData
		{
			return this._listData;
		}

		public override function set listData(ldata:BaseListData):void
		{
			if (this._listData != ldata) {
			this._listData = ldata;
			this.dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
			}
		}

		[Bindable(FlexEvent.DATA_CHANGE)]
		public override function get data():Object
		{
			return this._week;
		}

		public override function set data(value:Object):void
		{
			var xml:XML = value as XML;

			if (xml) {
				// convert XML to a list for extra methods
				this._week = new XMLListCollection(xml.children());

				// make sure we've got enough records in week
				// to be able to get the current day
				if (this._week.length > this.listData.columnIndex) {
					this._day = this._week.getItemAt(this.listData.columnIndex) as XML;
				} else {
					this._day = null; // clear in-case we're reused
				}
			}

			// do we have a valid day XML object
			if (this._week == null || this._day == null || int(this._day.@num) < 1) {
				this.htmlText = "";
			} else {
				/* lets display the day of the month in the cell */
				this.htmlText = "" + this._day.@num + "";
			}

			this.invalidateProperties();
			this.dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		}
	}
}

Filtering File Selectors

MET — Sat, 17 Jan 2009 17:54:27 +0000

Why is it that almost every language/framework offers totally different, and yet similar, solutions for filtering in/out files from selection menus?

.NET

OpenFileDialog dialog = new OpenFileDialog();
dialog.Filter = "Text files (*.txt)|*.txt|All files (*.*)|*.*"

In the example there are two types of selectors: text files (.txt); all files (*.*). Labels (Text files) are separated from their filter values (*.txt) by the pipe character and each filter type is separated by… a pipe too! It looks weird, but considering it’s based off old-school Windows API I can understand and sort of respect their desire to not change. MFC sucks and using weird DSLs instead of creating more objects can have it’s benefits.

Flash

var filters:Array = new Array();
filters.push(new FileFilter('Text Files', '*.txt'));
filters.push(new FileFilter('Rich Text', '*.rtf'));

var file:flash.net.FileReference = new FileReference();
file.browse(filters);

FileFilter is constructed with the rules like so: FileFilter(‘Text Files’, ‘*.txt’). You can either specify multiple FileFilters or append multiple rulsets to the same label like so: FileFilter(‘Text files’, ‘*.txt;*.txt2′). Truly a cleaner interface than .NET’s, but many could argue it’s Object over kill (AWT/SWING is probably worse).

Gtk+

GtkFileFilter *file_filter = gtk_file_filter_new();
gtk_file_filter_set_name(file_filter, "Log Files (*.bab)");
gtk_file_filter_add_pattern(file_filter, "*.bab");

Even though Gtk+ is in C, it has a nice interface (which many languages like Flash could be accused of robbing). The name is different than the pattern, and there aren’t ugly crazy separators like in .NET/MFC.

Swing

ExampleFileFilter filter = new ExampleFileFilter();
filter.addExtension("jpg");
filter.addExtension("gif");
filter.setDescription("JPG &amp;amp; GIF Images");

JFileChooser dialog = new JFileChooser();
dialog.setFileFilter(filter);

This isn’t too bad until you realize that ExampleFileFilter is a custom class which extends abstract FileFilter. Yes there are other ways, but boy is this annoying!

Python (Gtk+)

        dialog = gtk.FileChooserDialog(title="Select the World"
                            , action=gtk.FILE_CHOOSER_ACTION_OPEN
                            , buttons=(gtk.STOCK_CANCEL
                                                    , gtk.RESPONSE_CANCEL
                                                    , gtk.STOCK_OPEN
                                                    , gtk.RESPONSE_OK))
        filter = gtk.FileFilter()
        filter.set_name("All files")
        filter.add_pattern("*")
        dialog.add_filter(filter)

Just like Gtk+ but with the Python-esk feel.

Conclusion

I must be stating the obvious: Framework developers hate programmers.