Hello Flex Logging and Goodbye trace()

Being a long time Flash Developer, using the trace() method was the first solution to trying to debug a problem. “Just trace out the value and see what it is and go from there”. I kind of laughed when someone at the office called it “poor mans debugger”. Scary enough, the more I thought about it, the more I realized he was right. Since the Flex Builder debugger, I rarely trace() anything out to the console anymore. I still trace things out in my application, a service or an action so I know that things happened properly.

I also remember discussing in #flex (on irc efnet) that there isn’t a compiler option to strip out all trace() statements in a swf. I believe people even created tickets on the Flex bug base for this. For me I’ve always accepted that since the old Flash 4 days, but there are some plugins now that allow you to see all trace statements in a SWF. This is all the more reason to use the Flex Logging classes!

First off, the Flex Logger basically wraps to trace() but the benefits of the flex logger are more flexible than trace. Let’s start with the different levels of logging: Debug, Info, Warn, Error and Fatal. This allows you to display the level of trace out to the console. For example, mylogger.info( “startup” ) or myLogger.debug( “event name” ). The great thing about these different levels is the TraceTarget class has a “level” property that you set that will only display that level of logging and higher. For example if you set the target.level to LogEventLevel.Debug, it will show everything from debug up. But if you set it to LogEventLevel.Warn, it’ll only show warnings and errors. To me, this solves the need of having a compiler option to omit trace actions.

Another great benefit of the flex logging classes are there are already a few packages that implement them: mx.rpc.*, mx.messaging.*, mx.data.*. It was really neat to see this in action for the first time, I made a RemoteObject call to the server and it traced out all of the info related to the call, and even the value object from the server. Again, the traces can be omitted via the “level” property.

I will agree with the saying, “Old habits die hard”, but when I started using the Flex logging classes, it wasn’t a difficult transition at all. If you’re an old Flash Developer turned Flex, I strongly urge you to check out the Flex Logging classes!

Cheers,

-lp

Flash Media Server Feature Explorer

Ok, so I haven’t posted in a while. I figured this post would have to contain evidence that I haven’t just been golfing all summer (hehe).

Nathan Weber, Peter DiLillo, and myself over at Digital Primates just released the Flash Media Server Feature Explorer on Adobe’s Flash Media Server DevNet. If you haven’t checked it out yet, I really hope that you do. It’s an Adobe AIR app that showcases 30 samples on how to use Flash Media Server with Flex and AIR.

Cheers and I’ll be posting more soon! I promise!

–lp

Merapi says “Hello World”… World say “Hello Merapi”

If you haven’t already seen the screencast or Dave Meeker’s blog post of Merapi in action, you should definitely check it out! I am very excited for the next months to come.

Stay tuned for an update on my original scanner demo with AIR. Since Adobe’s Blaze DS is under the hood, Merapi will allow me to send my scanned image as a ByteArray back to Flex from the scanner! Better yet, our external Java libraries can now initiate data transfer to AIR. It’s no longer a one way street! A private alpha will be on it’s way very soon but in the mean time, imagine what kind of devices you could integrate into your AIR apps!

–lp

RIA Dev Shed 2008 - Presentation Files

As promised, here are the files for my presentation - Flex and Flash Media Server 3 from RIA Dev Shed 2008 in Utah. Special thanks again to the sponsors (Adobe, Twelve Horses, SLCFUG, NUCFUG, Vox Pop Design) for putting together the event.

RIA Dev Shed Presentation
(Photo by libel_vox)

 

I personally want to thank Matthew Reinbold for putting together the event! He was a pleasure to work with! Thanks again Matthew!

As3Regex Tester

I think one of the coolest addition to AS3 is regular expressions. If you’re like me, you’re probably way out of practice and it would take you awhile to finally get the proper expression to match or replace. So I went online and found a good client-side regex tester. What I quickly learned is that regex has different variations between languages. What I was using online, VBScript or JavaScript regex wasn’t the same standard of stuff I was trying to match using AS3. So I just tried to do the regular expression from flex, and doing a quick compile to see the results. This got really annoying really fast!

As3Regex Tester Screenshot

So enter As3Regex Tester! I decided to write a regular expression tester for ActionScript 3. It supports switching between match and replace, as well as onChange() on the <mx:TextArea> so you can see your changes immediately.  You can also select the specific flags such as global, lower case etc.  It also supports string saving.  It saves the strings to a Local SharedObject so you don’t have to keep pasting in text!

I think the funny part about this application is the UI.  I am a designer and I usually really care how my applications look but I figured the engineers that need regex don’t need a fancy UI ;)

Anyway, I hope you like it!

–lp

Using Flex Framework libraries in an ActionScript project

One of my favorite things about Flex Builder is that you can create a pure ActionScript project that extends Sprite. I can’t imagine writing a Flash application these days without doing it in Flex, but this option is great you’re looking for something more lightweight or if it’s a non-UI project such as a SWF bridge to manage old AS1/AS2 content. Other things could be a Papervision 3D project or if you’re playing around with programmic movement or the drawing API.

It’s still a surprise to me that a lot of hardcore Flashers do all of their work in pure AS3 but still haven’t heard of binding. I thought I’d show how you can use binding and other Flex libraries. There is a “gotcha” or two along the way but I plan on explaining those too.

Lets start out by looking at some of the Flex libraries with the Flex SDK. Go into your Flex Builder installation directory and you should see the following folder path:

{FlexBuilder 3 Location}\sdks\3.0.0\frameworks\libs

It should contain some SWC’s like:

flex.swc
framework.swc
rpc.swc
utilities.swc

These are available for you to use in any ActionScript project, you just have to add them. So to add them right click on your ActionScript project and select properties.

ActionScriptProperties

This lists the existing build path libraries for the compiler. We’re going to add a few more. So go ahead and click on the button “Add SWC” or “Add SWC Folder”. You can add the entire lib directory we talked about above, but it has additional SWC’s you may not need like the automation testing and QTP classes. I just add them individually. Once you add all of them we now have to add the “locale” folder. This locale folder is used by the libraries for error warnings etc and is specific to the language you specify. So click on “Add SWC Folder” and select a similar location:

Locale Location

Now your properties should look similar to:

finallibraries.png

Click ok and wait for it to update the compiler settings. So now you’re ready to use binding and all of the Flex libraries! You also now have the code completion and all of the other good stuff that links to the libraries.

We’re not completely out of the woods yet, we do have to cover one more important item about implementing the actual Flex classes. Lets use mx.rpc.HTTPRequest as an example:

var myURLRequest:URLRequest = new URLRequest( tmpString );
var myService:HTTPService = new HTTPService();

myService.method = "GET";
myService.url = myURLRequest.url;myService.addEventListener( ResultEvent.RESULT, onHTTPServiceComplete, false, 0, true );
myService.addEventListener( FaultEvent.FAULT, onHTTPServiceError, false, 0, true );

myService.send();

This is very valid but it’s actually going to throw the following runtime error in your project:

No class registered for interface ‘mx.resources::IResourceManager’.

Believe it or not, during the initialization of a Flex Application, many classes are loaded to be used later. The solution is to create a method called initFlexFrameworkSpecifics() which you call in your constructor or inside init() and have the following code:

private function initFlexFrameworkSpecifics() : void
{
    Singleton.registerClass("mx.resources::IResourceManager", Class(getDefinitionByName("mx.resources::ResourceManagerImpl")));
    var resourceManager:IResourceManager = ResourceManager.getInstance();
}

HTTPService was making call to a IResourceManager which didn’t exist.  The Singleton Class reference is what the Flex Framework does to ensure there is only one instance of your class. So what we do is create that class reference of IResourceManager for all other libraries to use.

That’s it! You’re good to go now.  Please understand that there may be more libraries that you’ll have to initialize depending on which classes you use. I hope you find this post helpful!

–lp

Eclipse “TODO/FIXME” Goodness

I’ve been meaning to try this TODO/FIXME plug-in for eclipse sometime now. If you haven’t already installed it, you definitely should try it out.   I think it’s very handy! This is going on my list of default plug-ins to install along with the viPlugin and Subclipse. Yet another great tool released by the community!

User Tracking with Google Analytics and Flex

For user experience, we’re always concerned how users interact with out applications. I think it’s easy to overlook that we can check where our users have actually been. For years agencies have been tracking our clicks to get more information about the user and their experience. Why not track users in Flex applications? In this post, I’m going to show you how you can tweak Google Analytics and add some Flex code that will allow you to track user clicks.

One of the good (and bad some might say) things about Flash is the page doesn’t require a refresh when dealing with data. But you’re probably wondering how can you track RIA/Flex stuff without a page refresh?

Take a look at this simple piece of JavaScript that’s required on every page you want to track via Google Analytics:

<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”></script>
<script type=”text/javascript”>
_uacct = “your_site_id”;
urchinTracker();
</script>

Now, lets add a little more JavaScript that we’re going to call from Flex via ExternalInterface.

function trackClicks( str )
{
    urchinTracker( str );
    _uff = 0;
}

So the method ‘urchinTracker()’ actually takes a parameter. If we passed “/loginButton” it’ll actually show that as a hit on Google Analytics! Pretty cool huh. If you pass a parameter, _uff gets reset anyway but I put it there just to be safe. For more information on _uff and other things, check this link out.

So the next suggestion I have is to create a class with a bunch of constants of the URI names of what you want to track. You can put the ExternalInterface call in that same class and make a static class call to it. You can put that pretty much anywhere from clicks to event handlers! If you’re not experienced with ExternalInterface, check out an old post that can help you.  I hope you find this useful!

–lp

Presenting on Flash Media Server 3

On Monday February 11 from 5:30 - 7:30, I’ll be speaking at the Adobe Users Group about the new release of Flash Media Server 3. Make sure you register here and get directions here.  I will be showing some of the new features in Flash Media Streaming Server and Flash Media Interactive Server including server-side ActionScript, streaming video, how to create multi-user applications and streaming HD Video using the H.264 codec. I really hope to see you there!

Going beyond the boundaries of AIR

I’ve been traveling a lot for work lately and with all the glamor of traveling comes the hideous tasks of expense reports. So I started working on a travel application that would allow me to manage my itineraries, flights and expense reports. Since I need the application to be offline/online, AIR was just a great fit. My first issue was, if I’m traveling how am I going to scan my receipts? I went and got the Plustek OpticSlim M12 Plus portable scanner… problem solved!

scanner

The next issue was getting hardware to talk to AIR. At the time of this development there was only really one project bridging this gap. It’s called Artemis. Artemis allows me to create my own libraries and integrate it with AIR. For simpletons, I can execute Java code and return values back to AIR. Mike Chambers and Ted Patrick have also done their own implementations, but at the time of concept for my application, Artemis was the only project available to me. I also like that Artemis is in Java which I can execute on pretty much any platform. Unfortunately I couldn’t get the image to save as ByteArray to send back to AIR because I think Artemis doesn’t currently support it. So in this sample I’m just going to be writing to the file system, and send a string back to AIR to let it know that I’m done scanning.

A lot of people in the industry have not seen any improvements to Artemis in the last few months but the original architect Adam Flater is going to release a new version when AIR 1.0 goes final. I’m really looking forward to using it and it should be pretty bad-ass.

The last problem was actually working with the scanner. I gotta give huge props to mm’s computing for providing me with jtwain. This allows me to access the scanner, set resolution and settings and actually save the file.

Alright, enough with the credits and on to the good stuff! Here’s the steps I suggest you take:

1) Make sure you download Artemis and get the sample working.

2) Download jtwain and get a separate java project working with it. When you run it, it’ll open up a little scanner wizard. With the AIR demo, I bypass this GUI and go right to scanning. You should really do this first so you know that you can get it working on it’s own.

3) Download the sample files I have for you.

Once you get everything setup, here is how you get it running

Run Artemis

Scan Tutorial  - Launch Artemis

See Artemis listen (I get this error but it still works)

Scan Tutorial - See Artemis

Run the AIR app

Scan Tutorial - Launch AIR

Press scan image

Scan Tutorial  - Scan

Insert a business card or paper

Scan Tutorial  - Insert Card or Paper

Watch it scan

Scan Tutorial - Scanning

All done!

Scan Tutorial - Done!

I hope you enjoy it :). My travel application is far from done but I might get less development done on it because I’ll be side-tracked on experimenting with more devices and trying to get this to save to ByteArray!

–lp

Louie Penaflor is a web developer in Madison, Wisconsin specializing in Flex, Flash and Design. The views expressed on this blog are personal views and should not be taken to represent corporate strategy or official Digital Primate positions. The content of the posts at this site should not be re-distributed by commercial media.