Reflections of Style

I’ve been playing around with the new Reflex Utility from Alon Kandov. It is a very useful little application that allows Flex authors to easily examine and modify the properties of any visual component at runtime. You can experiment with styles and designs similar to the Flex Style Explorer while your application is running. It has obvious general utility, but especially so for those that cannot or will not use the Flex Builder design editor.

There are several different ways to get it into your app, including direct compilation. However I prefer the modularized version that was just added. You can load it via a ModuleLoader when it is appropriate and don’t have to worry about changing your code around when it isn’t.

There was only one gotcha that I experienced integrating it. I use Ant to compile my Flex 2 applications and in order for Reflex to be able to show style information, the compiler must be told to preserve the related metadata, which by default it does not. The command line syntax to do this is listed on the Reflex code site, but the Ant syntax is a little more enigmatic. So after a little bit of digging and some trial and error, I finally pinned it down. Here you go:

<!– compile application –>
<mxmlc file=”${mySourcePath}/MyApplication.mxml”
output=”${myBuildPath}/MyApplication.swf”
default-background-color=”#FFFFFF”
actionscript-file-encoding=”UTF-8″>

<load-config filename=”${FLEX_CONFIG}”/>
<source-path path-element=”${FLEX_FRAMEWORKS}”/>

<keep-as3-metadata name=”Bindable”/>
<keep-as3-metadata name=”Managed”/>
<keep-as3-metadata name=”ChangeEvent”/>
<keep-as3-metadata name=”NonCommittingChangeEvent”/>
<keep-as3-metadata name=”Transient”/>
<keep-as3-metadata name=”Style”/>
</mxmlc>

I hope that helps get Reflex going for you because it is a big chunk of cool.

-Casey