Flex Example: E4X Binding Repeater inside Tile

I’m working on a Ribbit Directory demo app and started exploring data binding with E4X. Basically, I created a php service, anchored with a simple MySQL database, that serves up XML to the Flex app. I feel a little late to the game with E4X, but who cares. It rocks! I’ve meddled so much with looping through XML, loading it into a Bindable Array and mapping that Array as a dataProvider — I figured it was time to explore a more optimal way.

I’ll be releasing the entire app over on http://labs.ribbit.com when it’s done, but here’s some basic code snippets to help you explore this amazing feature of Flex.

Loading the XML from the php service is pretty standard. I’m passing a variable in the URLRequest to support some simple search/filtering…

private function loadDirectoryXML(search:Boolean):void
{
	var loader:URLLoader = new URLLoader();
	var request:URLRequest = new URLRequest(directoryDataURL);
	loader.dataFormat = URLLoaderDataFormat.TEXT;
	if (search) {
		request.method = URLRequestMethod.GET;
		var variables:URLVariables = new URLVariables();
		variables.entryClass = entryClassSearch.selectedLabel;
		request.data = variables;
	}				
	loader.addEventListener( Event.COMPLETE, handleComplete );
	loader.load(request);				
}
			
private function handleComplete( event:Event ):void
{
	try {
		directoryXML = new XML ( event.target.data );
	} catch ( e:TypeError ) {
		//
	}
}

That directoryXML is a Bindable XML object. Setting that as the dataProvider for a Repeater (inside a Tile layout container) will do the magic.


	
		
			
				
					
				
															
											
				
						
		
	

You can see there is some wacky stuff I needed to do with the buttons. A bit of trial and error here to get the right solution. Basically, I had trouble broadcasting any of the E4X data from the click handler. So, I use the data property to attach that “dialNumber” string and then pull it inside the click method handler off the event.target property. Also, I didn’t want the buttons to show up unless the directory listing had a dialNumber populated, so you’ll can see an inline conditional there.

Like most projects, I’m benefiting from good references to help me establish some basic syntax. At my side are the ActionScript 3 and Flex 3 cookbooks from O’Reilly. Love those books and the authors are swell too.

So keep an eye out for the full code sample coming soon in the Ribbit Labs.

Lastly, if you’re wondering why my code excerpts show the actionscript lines numbered higher than my mxml lines, it’s because I like to code with my MXML ON TOP!