Joel Hainley : San Francisco Bay Area Software Consultant

Last time I talked about setting up logging for your Flex applications using the debug version of the flash player and configuring it to write to a text file. This is can be useful for debugging, but it’s not always the most efficient route for quickly getting to the bottom of a problem within Flex. Thankfully there are a few other useful tools that we can utilize to help us in our debugging. One of these tools is a project put out by Google called ReflexUtil.

For this article I’m gonna be using Adobe Flex Builder 2 to describe the process for  setting up ReflexUtil in your project. It should be relatively obvious how to add this to your project if you’re building everything using the flex sdk for development, if not let me know and I’ll post a note here about setting it up.

The process for setting this up is really well documented on the ReflexUtil website but if you haven’t used third party libraries in your Flex projects before you might spin your wheels for a few minutes. So here’s a step by step for getting things setup :

1. Download the appropriate version of ReflexUtil library from google code - there are versions for Flex 2 and Flex 3 so make sure you get the latest version for whichever version of Flex you are running .
2. Unzip the file and place it in your libraries folder - I have a master directory for all of my libraries, 3rd party and custom libraries, and I drop them into subfolders of this folder so that I have everything in one place.
3. Open up your project in Flex Builder and add the library to your project. If you’ve not done this before you just go to Project->Properties in Flex Builder then click on “Flex Build Path” on the left, once there you click on the Library Path tab on the right hand side. Then click “Add SWC” then browse to the location of the file for version I have installed in the project it is called ReflexUtil2.swc . Once you select the project a bunch of options will be availble for how to link the library to your project etc. You can get more details on things over at the Adobe documentation page that describes how to use SWC files in your Flex project
4. Now open up the application’s MXML file
5. Add <reflexutil:ReflexUtil /> tag within the application tags. ( in XML speak : make it a child node of the application element )
6. Add the ReflexUtil namespace to the application tag by adding the following : xmlns:reflexutil=”net.kandov.reflexutil.*”
7. When you run your application right click on a control and you will see some new options in the pop-up menu. Links to the ReflexUtil homepage, Open Reflex util and an option to inspect the control that has focus, and perhaps options to inspect a few more controls.
8. Click on one of the Inspect options. This will bring up a dialog bog that allows you to drill down through what could be thought of as the Flex DOM and actually modify things at runtime, layouts, values, etc. It’s pretty impressive.

That’s about it, there’s a lot of things you can probably think of that this might be useful for in your own projects. The ability to get in and muck with the UI in this way is really convenient, instead of constantly incrementing layout parameters, then recompiling, checking, then tweaking again. You can now  just pop up your ui and make adjustments until you have it the way you like, then just make a note of your settings.  It might be kinda useful to modify ReflexUtil to have the ability to write out all parameters to the debug file so that you wouldn’t have to write things down, perhaps the developers will do this.

The only other thing that really comes to mind at the moment is that you probably would want to remove ReflexUtil from your project when you put your Flex application into production. The ability of users to muck with things could be catastrophic