House of Metnetsky

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…

<type name="kmbs.model::EmployeeTitle" base="kmbs.model::BaseModel" isDynamic="false" isFinal="true" isStatic="false">
  <extendsClass type="kmbs.model::BaseModel"/>
  <extendsClass type="Object"/>
  <variable name="id" type="Number"/>
  <variable name="title" type="String"/>
  <method name="assignXML" declaredBy="kmbs.model::BaseModel" returnType="void">
    <parameter index="1" type="XML" optional="false"/>
  </method>
  <method name="toString" declaredBy="kmbs.model::BaseModel" returnType="String"/>
  <method name="toXML" declaredBy="kmbs.model::BaseModel" returnType="XML"/>
</type>

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.

<type name="kmbs.model::EmployeeTitle" base="kmbs.model::BaseModel" isDynamic="false" isFinal="true" isStatic="false">
  <extendsClass type="kmbs.model::BaseModel"/>
  <extendsClass type="Object"/>
  <implementsInterface type="flash.events::IEventDispatcher"/>
  <method name="addEventListener" declaredBy="kmbs.model::EmployeeTitle" returnType="void">
    <parameter index="1" type="String" optional="false"/>
    <parameter index="2" type="Function" optional="false"/>
    <parameter index="3" type="Boolean" optional="true"/>
    <parameter index="4" type="int" optional="true"/>
    <parameter index="5" type="Boolean" optional="true"/>
  </method>
  <accessor name="id" access="readwrite" type="Number" declaredBy="kmbs.model::EmployeeTitle">
    <metadata name="Bindable">
      <arg key="event" value="propertyChange"/>
    </metadata>
  </accessor>
  <method name="hasEventListener" declaredBy="kmbs.model::EmployeeTitle" returnType="Boolean">
    <parameter index="1" type="String" optional="false"/>
  </method>
  <method name="dispatchEvent" declaredBy="kmbs.model::EmployeeTitle" returnType="Boolean">
    <parameter index="1" type="flash.events::Event" optional="false"/>
  </method>
  <method name="willTrigger" declaredBy="kmbs.model::EmployeeTitle" returnType="Boolean">
    <parameter index="1" type="String" optional="false"/>
  </method>
  <method name="removeEventListener" declaredBy="kmbs.model::EmployeeTitle" returnType="void">
    <parameter index="1" type="String" optional="false"/>
    <parameter index="2" type="Function" optional="false"/>
    <parameter index="3" type="Boolean" optional="true"/>
  </method>
  <accessor name="title" access="readwrite" type="String" declaredBy="kmbs.model::EmployeeTitle">
    <metadata name="Bindable">
      <arg key="event" value="propertyChange"/>
    </metadata>
  </accessor>
  <method name="assignXML" declaredBy="kmbs.model::BaseModel" returnType="void">
    <parameter index="1" type="XML" optional="false"/>
  </method>
  <method name="toString" declaredBy="kmbs.model::BaseModel" returnType="String"/>
  <method name="toXML" declaredBy="kmbs.model::BaseModel" returnType="XML"/>
</type>

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.

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.

---

<?php
	/**
	 * Create a XML calendar for a given year &amp; month
	 *
	 * Noah Massey &amp; Matthew Metnetsky
	 */
	function calendar_xml($doc, $year, $month)
	{
		if (!$doc) throw new Exception('doc is bad');
		if (!$month) throw new Exception('month  is bad');
		if (!$year) throw new Exception('year is bad');

		$numDays = date('t', mktime(0, 0, 0, $month, 1, $year));

		$monthNode = $doc->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

	<month>
		<week>
			<day num="{day of month}" />
		</week>
	</month>

---

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.

<mx:DataGrid id="dg"
	sortableColumns="false"
	draggableColumns="false"
	selectable="false"
	showScrollTips="true"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off">
	<mx:columns>
		<mx:DataGridColumn headerText="Sunday" itemRenderer="calendar.MonthCell" />
		<mx:DataGridColumn headerText="Monday" itemRenderer="calendar.MonthCell" />
		<mx:DataGridColumn headerText="Tuesday" itemRenderer="calendar.MonthCell" />
		<mx:DataGridColumn headerText="Wednesday" itemRenderer="calendar.MonthCell" />
		<mx:DataGridColumn headerText="Thursday" itemRenderer="calendar.MonthCell"  />
		<mx:DataGridColumn headerText="Friday" itemRenderer="calendar.MonthCell" />
		<mx:DataGridColumn headerText="Saturday" itemRenderer="calendar.MonthCell" />
	</mx:columns>
</mx:DataGrid>

<mx:HTTPService id="calHS"
	url="http://localhost/project/calendar-xml.php"
	method="GET"
	result="handleCalXML(event);"
	fault="Alert.show('Failed to retrieve XML from server');"
	resultFormat="e4x"
	contentType="application/xml"/>

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 = "<p><b>" + this._day.@num + "</b></p>";
			}

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

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 & 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.