Reflex is ready to rumble

Flex 4.5 ( Hero ) isn’t the only mobile news coming up at MAX. There is also Ben Stucki’s ( @BenStucki
) lightweight framework called Reflex. Ben will be presenting about it at MAX and if you plan on doing any mobile development then you should certainly check it out.

Here is how Ben Stucki describes it:

What if you could build a component framework like Flex or FlashComponents from scratch? You would probably make it easier to create radically custom components without breaking the existing functionality. You would keep all of the Flash APIs intact so that you could add and remove MovieClips without worrying about framework references or which classes you need to extend. You would make it work with MXML and in AS3-only projects, and you would keep it light-weight and performant for use on mobile devices. That’s what we’re working on, and we call it Reflex.

Here’s a very basic introduction to Reflex and instructions on getting Flash Builder set up to compile Reflex applications.

Setup
It’s very easy to set up.

• Download the swc files at Reflex.io/downloads/Reflex.zip. That will give you all the source files and more. But all you need are the swc files located in the bin folder.
• Create a new Flex project just like you normally would.
• Copy the ReflexComponents.swc and Reflex.swc into your libs folder.
• Go into your project settings to the Flex Build Path and make sure your Framework Linkage is set to merged into code

• Now in the <Application> tag you need to edit the namespaces. You still need to keep the fx and s namespaces because there are little bits of them that get used. But you can remove the mx namespace and replace it with this: xmlns:rx=”http://rx.reflex.io/2010″
• Now change the <s:Application> open/close tag to: <rx:Application>
• You’re ready to get Reflexy

Here’s what my sample app looks like:

<?xml version="1.0" encoding="utf-8"?>
<rx:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:rx="http://rx.reflex.io/2010"
	width="550" height="400"
	initialize="init();">

	<fx:Script>
		<![CDATA[
			private function init():void {
				// initialize your app here
			}
		]]>
	</fx:Script>

	<rx:Rect
		horizontalCenter="0" verticalCenter="0"
		width="250" height="200">
		<rx:fill>
			 <rx:SolidColor color="#CCCCCC" />
		</rx:fill>
		<rx:stroke>
			<rx:SolidColorStroke color="#000000" />
		</rx:stroke>
	</rx:Rect>

	<rx:VGroup horizontalCenter="0" verticalCenter="0">
		<rx:Label text="Reflex" />
		<rx:Button label="ROCKS" />
	</rx:VGroup>

</rx:Application>

You can see that the code looks pretty much the same as any Flex 4 project with all of the <s:Component> changed to <rx:Component>.

That code above gives you this:

The whole point of this is that you get a nice little SWF of only 62KB without the RSLs to worry about. The Flex framework is great but it’s gotten out of hand with file sizes and performance issues. That’s not much of an issue on a desktop but it can be a big issue for mobile apps. Early on the feature set of Reflex is aimed at helping us create apps that have small file sizes that are responsive on low powered processors. And we get to develop with the MXML that we have come to know and love. Plus we get Binding and States and some other goodies. Be sure to check out Ben’s session at MAX or catch the video recording if you can’t make it.