Joel Hainley : San Francisco Bay Area Software Consultant

I was building out some .NET based web services for a Flex project I’ve been working on and bumped up against something that gave me a bit of trouble. When you create a .NET Web Service there is a namespace attribute associated with the service. Here’s an example (in c#) :

namespace HelloWebService
{
[WebService(Namespace = "http://www.examplenamespace.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]

public class Service1 : System.Web.Services.WebService
{

// implementation …

}

This value is required by .NET for a web service, or at the very least .NET gets VERY upset if this value is not set.

You will then need to let Flex know about this namespace in order to access the results. To do this you simply add the following lines to Flex:

private namespace lh = “http://www.examplenamespace.com/”;
use namespace lh;

Not much to it, but it can be a bit of a pain when you’re not aware of this. Flex doesn’t complain, it just gives you empty values when you try to access the values.

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

So you’re bumping along doing some work in Adobe Flex using the flex sdk and you need to get some debug information about what’s going on in one of your applications. You know that the guys using Adobe’s Flex Builder IDE have source level debugging but you don’t have the Flex Builder or, for whatever reason, don’t want to use it.

Here’s a quick how-to for setting up flex debugging to an output file, plus a link to a very simple test application that is known to work so that you can ensure that you have debugging setup properly on your test machine before you start tearing your hair out.

1. You need to ensure that you have the debug version of the Flash Player installed. You can find instructions on installing the Flash Debug Player here. The instructions appear to be a bit dated, in the version of the SDK that I have on my development box there is no “uninstall_flash_player.exe”. I simply ran the “Install Flash Player 9.exe” and then after rebooting my system seemed to work fine. Notice that the link above also allows you to validate that you have successfully installed the debug player.
2. To enable writing to a text file you will need to create a mm.cfg file on your system placing it in the appropriate directory for your operating system.
   • OSX : /Library/Application Support/Macromedia/mm.cfg
   • Windows : C:\Documents and Settings\<username>\mm.cfg
   • Linux : /home/<username>/mm.cfg
3. Now open the file you’ve just created and add the the following 2 lines to the file :
   • ErrorReportingEnable=1
   • TraceOutputFileEnable=1
4. That’s about all there is to it, although I think I ended up rebooting before it worked properly. Now go to a simple Flex test app I threw together to generate output data to the file.
5. Click on the button labeled “Click Me”.
6. If you have been successful in setting up the debugging you should see output written to a file appropriate for your operating system :
   • OSX : /Users/<username>/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt
   • Windows : C:\Document and Settings\<username>\Application Data\Macromedia\Flash Player\Logs\flashlog.txt
   • Linux : /home/<username>/Macromedia/Flash_Player/Logs/flashlog.txt
7. Next time we’ll get into some more advanced debugging tools available.

I’ve been reading through a bunch of books on Flex development. It’s pretty interesting stuff. It is probably most easily understood as a programmatic interface into Flash with a bunch of widgets such that you can develop very sophisticated applications that talk asynchronously to a backend server. The upside of this being that wherever you can get a Flash player installed you can have your application and it works the same everywhere, something that can’t be said for AJAX.

I wrote up a quick app yesterday afternoon to look at a customized RSS feed for this blog and allow a user to navigate through the results. It’s just something I was fiddling with, it’s not complete and probably never will be. I’m going to investigate a different approach to some things I was doing to see if it makes things cleaner. Check it out here