MXML without the Flex framework

Tuesday, March 17th, 2009 | examples

This post might be a bit on the advanced side…

I was talking with Tyler earlier today and he brought up a neat little trick I hadn’t really thought of before: You can write MXML without the Flex framework. Of course you won’t get all the benefits of the Flex framework, but you’ll still be able to build out neat little MXML components with a little bit of work and, more importantly, you won’t have the ~130K of the Flex framework weighing down your app.

You’ll notice the size of the swf below is around 1K. Maybe if I get bored later this week I’ll write a demo Papervision3D app solely in MXML.

View .swf
source

<?xml version="1.0" encoding="utf-8"?>
<root:ThisIsNotAUIComponent xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:root="*">
	<mx:Metadata>
		[SWF(width="900", height="480", backgroundColor="#ffffff")]
	</mx:Metadata>
 
	<!-- you won't have to do this children node garbage in Flex 4 -->
	<root:children>
		<root:RandomShape/>
		<root:RandomShape>
			<root:RandomShape/>
			<root:RandomShape>
				<root:RandomShape/>
				<root:RandomShape/>
				<root:RandomShape/>
			</root:RandomShape>
		</root:RandomShape>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
	</root:children>
</root:ThisIsNotAUIComponent>

package
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
 
	[DefaultProperty("children")]
	public class ThisIsNotAUIComponent extends Sprite
	{
		[ArrayElementType("ThisIsNotAUIComponent")]
		public function get children():Array
		{
			return null;
		}
 
		public function set children(value:Array):void
		{
			for each(var child:ThisIsNotAUIComponent in value)
			{
				addChild(child);
			}			
		}		
	}
}

package
{
	import flash.filters.DropShadowFilter;
 
	public class RandomShape extends ThisIsNotAUIComponent
	{
		public function RandomShape()
		{
			var randomColor:Number = Math.random() * 0xffffff;
			var randomX:Number = Math.random() * 900;
			var randomY:Number = Math.random() * 480;
			graphics.beginFill(randomColor);
			graphics.drawRect(randomX - 150, randomY - 150, 150, 150);
			graphics.endFill();
 
			filters = [new DropShadowFilter()];
		}
	}
}

Tags: flex, MXML

Guy Ritchie

how do you compile the MXML file into a swf one?

pemeor

that's amazing!

Greg

Well...
...with a little work and lots of research, yes, it is easy in Flex 4 [Gumbo] to build, compile and debug MXML projects without the overhead of the Flex Framework proper. So you can build ActionScript 3 only projects and/or MXML AS3 projects, as well as regular Flex projects, all within the Flex Builder IDE. MXML AS3 projects can compile to as little as 10k or less, ...depending of course.
Greg

Greg

Have you posted an updated example in Flex 4 somewhere? I am just starting with Flex 4 builds and would love an example to start/review.

Thank you for your posts to date.

Greg

Simeon

I have been trying to get people to consider this for what seems like forever! I even submitted a talk to 360 Flex on using MXML without the Flex framework.

Its even better with Flex 4 because the actual language is richer.

Glad to see people making use of the languages in Flex for more than building Flex component applications!

david knape

Thanks for this demo. You're right, with Flex 4, you don't need the children node. You just need to make sure to use the new mxml namespace.

This is quite powerful...
http://blog.simb.net/2008/11/21/using-the-flex-...

-dk