Archive for the 'Flex' Category

I was contacted by Justin Ouellette, the creator of Muxtape, who asked that I remove the download functionality from MuxMaster. I’m torn about this issue, on one hand Muxtape is a service based on technology that makes distributing MP3s extremely easy. Justin has chosen to hide this capability because he’s appropriately scared of the consequences of having Muxtape turn into a file-swapping website. But essentially Muxtape is a massive dropbox for MP3s. On the other hand, I really do like Muxtape, and I don’t really want to be the one partly responsible for getting the site shut down.

Note that this isn’t a decision about legality (not for the legality of MuxMaster anyway) and I wasn’t coerced or threatened or anything like that. Justin just sent me an email saying he liked the app (and is cool with people making apps like this) but that the download feature endangers Muxtape. I agree, although I still don’t know whether I should feel obligated to remove the download feature.

MuxMaster icon
muxmaster_128.pngOn a lighter note, Juan Sanchez whipped up a little icon for MuxMaster, which is now included in the latest version of the application. Pretty sweet huh? Thanks Juan!


You can still download MuxMaster (Lite) without the download functionality:

This movie requires Flash Player 9

If the above install link doesn’t work, do this:

  1. Make sure you have the AIR runtime, if you need to download it from Adobe
  2. Download and run the MuxMaster installer

MuxMaster is an open-source desktop player to browse, play, and download Muxtape mixes. It is an AIR application that lets you stream music from Muxtape, explore different mixes to find new music, and even download tracks and entire playlists to your computer with a single click.

UPDATE: After being contacted by the creator of Muxtape I have decided that it is in the best interest of the Muxtape service to remove the download functionality from MuxMaster. I was torn about this, but for now the downloading features are removed.

This movie requires Flash Player 9

If the above install link doesn’t work, do this:

  1. Make sure you have the AIR runtime, if you need to download it from Adobe
  2. Download and run the MuxMaster installer

Here are a few screenshots:
screenshot025.jpg

screenshot026.jpg

screenshot028.jpg

Why did I make this?
I like Muxtape. Like a lot of software/web guys, I saw the clean interface and the barren source code and was immediately impressed. I mean, the dude did a fantastic job. It was just so damn clean.

Then a few days ago people went ga-ga over this video of some dude showing muxtape mixes using the Coverflow visualization to browse through them. OK, so that’s cool, except it uses a Mac-only application called Fluid to basically add normal Mac desktop functionality to web apps. That shit got dugg like 750 times. Now I’m not saying it’s not cool, cause it is. But I figured I could probably whip up a Flex application pretty quickly using the Coverflow component I released before and get a real desktop application that anyone could download and use. Oh, and I thought it would be neat to add downloading functionality too.

So I threw MuxMaster together over the past 3 nights. I like to think of it as a testament to the badassness of Flex and the open-source Flex/Flash community. The fact that I can grab some open source stuff and throw this together in almost no time is pretty cool.

What kind of an application is this?
MuxMaster is an Adobe AIR application, built with Flex. That means it’s a desktop application that can run on Windows, Mac, Linux, whatever. Click the “Install Now” link above to install the app. You might need to go and download the AIR runtime first. Hopefully it’ll tell you that and do everything automagically.

The Muxtape API
Muxtape has no API. But the HTML code is so sleek and beautifully clean. Go look at the source code for the HTML pages on muxtape.com. It’s ridiculous how sparse it is. And of course it validates as valid XML. So what? Well, nice XHTML like that is just as good as the best XML API you can ask for. You want to get a listing of some random Muxtapes? Just load up the XHTML on the Muxtape home page and parse out the list of users. Using E4X you can get a list of users with this single expression: body.div.div.ul.li.a. It’s almost too easy. So then when you get a username you just load that user’s HTML page and you can easily parse the list of songs (body.div.ul.li) or related users (body.div.div.div.ul.li.a). There’s a little trickery involved to figure out exactly how to construct the URLs for the MP3s, but it’s pretty easy to figure out. After a little parsing you can get a list of MP3 URLs and the data about each song, like artist, track title, duration, etc.

Downloading songs

UPDATE: After being contacted by the creator of Muxtape I have decided that it is in the best interest of the Muxtape service to remove the download functionality from MuxMaster. I was torn about this, but for now the downloading features are removed.

The thing about Muxtape is that all the songs are just MP3s stored on Amazon S3. If you know the URL you can download the file. The main Muxtape player doesn’t expose this functionality, but if you take a look at the files that the web-based player is loading you can just copy/paste the URL and load it into a web browser to save the file. So I just made that a bit easier. MuxMaster has a Download link for each song underneath the song name. One click and the song will download in the background (you can specify where you want songs to download to). Additionally, each playlist also has a Download All link, so with a single click you can download all the songs in the playlist.

screenshot032.jpg

screenshot027.jpg

Is this bad?
There’s a whole ethical dilemma that we can spend forever discussing. Is this application against everything that Muxtape stands for (clean, simple, bare-bones UI)? Is adding download functionality quickening the shutdown of the service? Is this effectively taking a step toward destroying the service that I actually really enjoy using? Yeah, the answer to all those might be yes.

Yes, the excessive use of 3D and especially the over-used Coverflow visualization are exactly opposite to the perfectly clean design concept of Muxtape. The truth is, I hate Coverflow. But people gravitate toward it and seem to love it, so I figured it’d be fun to whip something up and see the response. And it was just so damn easy.

And yes, being able to download an entire mix with a single click may very well be a horrible thing for Muxtape as a whole. I assume the service is already on the radar of the lawyer-crazy music execs, and if it’s not now I assume it will be if it gets big enough. But the technology underneath the service was just so simple (I mean, really? just let people throw a bunch of MP3s up on Amazon S3?) that someone would have shown how to download all those songs soon enough. So I’ll definitely feel bad if this app has a negative effect on Muxtape, but come on, it’s something I whipped up in a few days, someone was bound to do it.

Source code
I’m releasing all the source code for the application. When you install the AIR application you can right click and select “View source” to see all the code. Or you can view the source here. It’s small (16 files, 898 total lines of code). And the code was influenced by the minimalist design of the Muxtap app itself, so I tried to keep things extremely tidy and clean.

I used a few open-source flex libraries. The most obvious one is the Coverflow Flex component that I created and released on my blog. That’s licensed under the MIT license, so you can take that component and add this type of Coverflow visualization to your Flex apps. The Coverflow visualization uses the Papervision 3D library, which is a 3D engine for Flash. It’s badass and free (MIT license). The other Flex library I used is FlexLib, which was used for the FlowBox container. That component can be seen when you download songs. It’s the container that lays out the little download rectangles. FlexLib is also licensed under the MIT license (is there a pattern forming?).

The source code for MuxMaster, like all code released on my blog, is also licensed under the MIT license, which you can read here. Basically you can do whatever you want with the code.

What’s next?
I don’t know if I’m going to do anything more with this application. The app does rely on the format of the HTML pages on Muxtape, so if the creator of Muxtape decides to try to break MuxMaster he probably can, and I’d have to update it to get it to work again. I might do updates like that to keep it working. If people have feature request I’d love to hear them, but I’d encourage other developers to take my source code and add the stuff that they want. If you have feedback shoot me a message using my contact form or leave comments here. I don’t have any big plans, this was fun to make.

Legal nonsense
This application doesn’t contain any music files whatsoever. I am not storing any music files on my server or any server that I am associated with. I am not providing a list of any music files stored anywhere on the Internet. I don’t have any information about how to find music files stored in any database or anywhere in the entire galaxy. If you’re a lawyer looking to scratch that soul-destroying litigious itch that you have, I’m the wrong guy to talk to.

Here’s a simple motion detection utility that you can use to do motion detection on a webcam, or video, or any other component in your Flex application. It uses a bitmap technique to compare image snapshots and calculate the number of pixels that were changed between snapshots. This gives you a percentage of the total pixels that were changed, which is a crude way to figure out motion. Basically what you do is draw one frame onto the previous frame using the “difference” blend mode. Then you threshold the image and you can figure out the number of pixels that had any change.

The example below uses the motion detector and ties it to a webcam. You’ll have to allow the app to access your webcam to see it in action. If the motion in the webcam exceeds a certain amount (20%), then it takes a snapshot and sends it to the CIA (ok, ok, it doesn’t really do that, it doesn’t send the snapshot anywhere).

This movie requires Flash Player 9

View source

Someone emailed me recently asking about this code, since it was shown in a previous video I created when I was working on TileUI a while back. This is the first in a series of chunks of code that I’m thinking about taking from that project and releasing open source. No, I don’t think I’ll be releasing all of TileUI, but just some of the components within it (like the radial menu component maybe).

UPDATE: As various people have pointed out, there is built in motion detection in the Camera class, so if you want to detect motion in a webcam feed all you have to do is monitor the activityLevel property of the Camera. I guess I should’ve known that before posting :P oh well. This motion detector example is still useful if you’re trying to detect motion in anything other than a webcam feed though, such as another video playing in your app, or any other UI component that has visible changes.

P.S. I’ve been very quiet on the blogging front. This is because I’ve been super crazy mega busy between my job and writing Flex for Dummies, which is available for pre-order on Amazon. I expect to get back to blogging much more sometime after May 13 (after I sleep for a week).

UPDATE: all the invites got used up quickly, sorry if you missed them. If I have any more SlideRocket invites in the future I’ll post about them. You can still enter your email address and the SlideRocket team will let you know when they let more people into the beta.

SlideRocketI’ve got 20 SlideRocket invites to give out. Yup, a whopping 20. Hell, after getting featured on TechCrunch today I figure these 20 are a hot commodity. To get an invite check out the presentation below (which uses SlideRocket of course).

The 20 invites are on a first come first served basis, so once they get used up they get used up. I don’t have any more so don’t email :) Again, to get the invite URL you have to interact with the embedded presentation above.

I figure TechCrunch got 500 to give out, Ryan Stewart got 100, so that makes me about 4% as cool as Arrington and 20% as cool as Ryan. Hell, that’s good enough for me.

If you haven’t heard about SlideRocket, it’s the most badass online presentation tool in existence. Congrats to Mitch and the SlideRocket team on getting funded and the great press.

360Flex ATL360|Flex wrapped up on Wednesday and I wanted to do a quick writeup of my overall thoughts about the conference. First off, I think this was the best Flex conference ever put on. That’s a bold statement because I haven’t been to some of the other Flex conferences, but I’m fairly confident it’s true. I’ve attended the previous two 360|Flex events and each time the conference just gets better and better.

The speakers are getting damn good
The Flex speaker roster has matured a bit, this conference marked the third 360 event that some of the speakers have done (this was only my second conference as a speaker). I think you can see very visible improvement in both the content and presentation skills of the speakers. There were two sessions I’m kicking myself for missing: Jun Heider’s presentation about memory management, and Michael Labriola’s presentation on what happens during the first few milliseconds of your application startup. Both speakers have posted their slides and material. Hearing the buzz around the conference, it sounded like those two presentations were two of the absolute highlights.

Here’s my theory on why those presentations were so good:

  1. The speakers are maturing in terms of Flex expertise and speaking skills. Both Michael and Jun spoke at previous events (previous 360|Flex and also MAX). It takes a while for speakers to find their groove, and I think with a lot of the Flex speaker roster we’re seeing that people are now at the point where they are confident, badass speakers.
  2. The content is crazy technical and the audience is ready. Previous Flex conferences have been dumbed down in terms of the advanced sessions. 360|Flex Seattle was more technical than the first one in San Jose, but it still didn’t meet the needs of the advanced Flex users out there. This was a tough line to walk, though, because if you did an uber-technical preso you probably would have had about 10 people in the room and only 5 would have understood what you were saying. Jun and Michael’s sessions were way more technical than anything presented at previous 360 conferences. And the audience was able to get it. That says a lot in terms of how much better everyone is getting. I think both of those sessions would have probably bombed at the first 360|Flex back a year ago (god, was that really only a year ago?).

Reflection on my sessions

screenshot010.jpg
(Photo by John Mason)

I had a really good time presenting at this conference. I apologize if I offended any of the sign language translators :) (if you weren’t there let’s just say I had fun getting them to translate certain phrases). My main presentation was on using open source community projects and I’ve posted all the slides and sample code. I thought this session was fun, although I think I crammed a lot of stuff into the 80 minutes and didn’t have as much time as I would have liked for the kind of organic discussion that I find so fun. When I originally told Tom and John the idea for my session they suggested doing an all-day hand-on session on the topic. If I wasn’t so lazy I actually think this would be a really good all-day type of thing. Maybe in the future we can get enough speakers to tag team it, so nobody has to spend the whole day presenting.

The second session that I did, which was unplanned, was a session on building your personal brand. Juan Sanchez and I teamed up for this session and talked about our different approaches on branding and marketing yourself. This session was in place of Jesse Warden’s originally planned session that was on a similar topic (although Jesse planned on covering a lot more content about the business side of things). BTW, if you attended 360, Jesse’s original presentation PDF is on the USB stick, check it out in all of its 215-slide glory. As for me, I had about 8 slides I whipped up 20 minutes before the presentation. This session was a pretty awesome discussion, most of the people in the room contributed and talked about their experiences. Jeff Houser was there and talked about brand building from the perspective of a business-owner (ie not a crazy egocentric nutjob developer like myself). I think the topic of branding is hugely important, and I’d like to see this kind of content presented much more at these kinds of conferences.

I want videos again
This year the presentations at 360 weren’t recorded, and I’m really wishing they were so I could watch Jun’s, Michael’s, and a bunch of other sessions. Last year I didn’t watch the videos of anyone else’s sessions, primarily because the technical level of the content wasn’t quite there. Now I’m pissed because I know there’s some seriously good information in these presentations that I missed (and reading through the slides isn’t nearly the same). I vote for recording this stuff again, even if next time that means we each do it ghetto style and and just stick a crappy camera in the corner of the room.

I love you guys
This is the best developer community. I heard over and over again during the conference about how nice everyone is. There are no asshole prima donna speakers, everyone is approachable and friendly. That goes for the speakers, everyone from Adobe, and all the attendees. Everyone’s just authentically nice. The Flex community is going to grow dramatically over the next few years. Let’s try to keep this awesome small-community vibe that we got going on. This community vibe is why I love presenting at 360|Flex (and the main reason I don’t present at other larger conferences).

Thanks Tom and John! You guys rock.

screenshot009.jpg
(photo by Terry May)

Here are all the examples I showed today in my session at 360|Flex. The demos are the Physics Form, VistaFlow 3D, WindowShade + Degrafa, MP3 Thumbnail CoverFlow, and FlexSpy Event Listeners. All examples have the full source code available and I’ve tried to write up brief descriptions about each one. I’ve also posted a PDF of my slides. View the slides here.

Physics Form
I mashed together the most generic, boring, crappy Flex form example app with a physics engine. The end result is an example that shows how you can add in physics simulations into “normal” applications (as opposed to only games or whatever). In the example below, click on the Login button to watch what happens (hint: after you click login try dragging around the controls). Oh, and I threw in the PromptingTextInput component from FlexLib to meet my requirement of using at least two open source projects in each example.

This movie requires Flash Player 9

Open source stuff used:

View the example | View Source

VistaFlow
This example uses the FlexMDI library (now part of FlexLib!) to manage multiple open windows and switch focus between them. I combined that with a slightly modified version of my CoverFlow component that I posted before, and I made an effect similar to Vista’s Flip 3D. When you launch the example try adding a few windows with the “Add Window” button and then press Shift-Enter to cycle through the windows (ie hold Shift and then keep pressing Enter to move through the list of windows).

screenshot006.jpg

Open source stuff used:

  • FlexMDI (now in FlexLib)
  • Extended Flex CoverFlow component

View the example | View Source

WindowShade + Degrafa example
In this example I used the newly added WindowShade component in FlexLib, combined with the CanvasButton control (also from FlexLib), combined with Degrafa for some custom graphics drawing and CSS skinning. It’s a simple example of creating a “drawer” type of component that docks to the top of the screen and drops down when the user clicks the handle.

screenshot007.jpg

Open source stuff used:

View the example | View Source

MP3Flow AIR app
This demo is an AIR application that lets you drag and drop MP3 files onto it and it will extract the thumbnail image from the MP3 file and use that image in a CoverFlow UI. To extract the thumbnail I’m using Metaphile, which is a project created by Ben Stucki for reading and writing metdata from files. This app also uses another of Ben Stucki’s components, which does the audio visualization stuff.

screenshot008.jpg

Open source stuff used:

NOTE: I used the last AIR/Flex 3 Beta for this example. I have not updated it to AIR 1.0. If you have the new AIR 1.0 runtime I assume this app will not install. I’ll try to update this example within a few days, but for now it will probably only work if you have not upgraded the AIR runtime on your machine.

Download the AIR installer | View Source

FlexSpy with Event Listeners
I decided to show this example even though I had already released the code on my blog. I realized that this example was perfect for showing the benefit of keeping a running list of open source projects in your head. I remember seeing FlexSpy when it first came out, I read about it on a few blogs and briefly checked it out by playing with the example. But I didn’t ever download the code or use it in my app. And then last week when I was monkey patching FlexSprite to add extra event listener functionality and I realized that this was a perfect place to use FlexSpy. I couldn’t remember the exact name (I thought it was something like Flexray), but I googled around, determined to find the project that I knew existed. Pretty quickly I found it, pulled it down, started reading the source and hacked in the functionality I wanted.

After doing that I realized that this is exactly what I was going to be talking about in my 360 session. Since I had been reading Flex blogs when FlexSpy was released I at least knew it existed. Since I love open source projects I had initially checked it out and understood what it did. Then later, in a completely unrelated project, something clicked in my mind and from some far corner I pulled up that memory of the FlexSpy project.

Open source stuff used:

View the example | View Source

screenshot004.jpg
Degrafa
screenshot005.jpg

So tomorrow at 360Flex at 10 am we’re getting together a bunch of open source Flex developers to talk about a few key open source projects, what it’s like to start an open source project, and whatever other random stuff people want to talk about. The truth is, I don’t know what will end up being covered, it’s sort of an open panel discussion thing. The basic idea went something like this: since we’ve got a bunch of guys involved with various open source projects all at the same conference, why not shove em all in the same room and see what happens? So Adam Flater’s going to talk about Merapi, some dudes from the Degrafa team (Juan, Andy, Pavan?) are going to talk about Degrafa, Ben Stucki’s going to talk about OpenFlux, I’ll probably say something about FlexLib, and Ben Clinkinbeard will talk about flexmdi. This is going to be pretty informal, I don’t think we’re going to have slides (unless someone is going to be a dork and over-prepare). So we’ll just hang out and talk open source and Flex. And if you’re working on an open source project be sure to come by and tell us all about it.

When: Tuesday @ 10 am
Where: Maple Room A (Hands-on room)

My talk at 2:30 - Using Open Source Community Projects
I’m also giving my presentation at 360|Flex tomorrow at 2:30pm. My session has a similar theme, but will be entirely different content. I’ll be talking about a wide range of open source projects out there that you can use (physics, 3D, graphics, audio, etc etc). The official sub-title of my presentation is “How to be lazy and make cool shit.” I’m showing a bunch of cool examples (well at least I think they’re cool…) of mashing up various open source projects to make impressive looking stuff without much work. I won’t be digging into Degrafa, OpenFlux, or Merapi, since those will be covered in the panel discussion in the morning and other individual sessions later in the conference.

Oh, and I’ll have an extra hand-bedazzled 360|Flex shirt (like the one Matt Chotin wore at today’s keynote) to give out at my session, so if that doesn’t make you want to come to my session I don’t know what will. Come to my session, it’ll be fun.

When: Tuesday @ 2:30
Where: Pine Room (Custom Components room)

This conference rocks hard
360FlexThis is probably the most fun I have ever had at a conference. Seriously. This community just frickin’ rocks so much, it’s like hanging out with good friends for a few days. Juan Sanchez and I filled in for Jesse Warden today (get well Jesse!) and had a really fun session about building your personal brand. We got a sweet discussion going and people had awesome stuff to talk about in terms of marketing yourself and getting famous. I had a blast and I hope the people in the session enjoyed it.

Well I’ll be damned, in my last post I wrote about how I was trying to figure out which class was calling addEventListener on a FlexSprite. I couldn’t figure out a way to get the name of the calling class, or the name of the method that called addEventListener(). Well, Almog Kurtser commented that there’s a trick you can do by using the Error class and the getStackTraceMethod() to parse out these strings.

If you call: trace(new Error().getStackTrace()) you’ll get something that looks like:

Error
at MonkeyPatchTest/___MonkeyPatchTest_Application1_creationComplete()[path/to/source/src/MonkeyPatchTest.mxml:4]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:devflex_3_beta3sdkframeworksprojectsframeworksrcmxcoreUIComponent.as:9041]
at mx.core::UIComponent/set initialized()[E:devflex_3_beta3sdkframeworksprojectsframeworksrcmxcoreUIComponent.as:1165]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:devflex_3_beta3sdkframeworksprojectsframeworksrcmxmanagersLayoutManager.as:696]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[E:devflex_3_beta3sdkframeworksprojectsframeworksrcmxcoreUIComponent.as:8450]
at mx.core::UIComponent/callLaterDispatcher()[E:devflex_3_beta3sdkframeworksprojectsframeworksrcmxcoreUIComponent.as:8393]

Within that long string you have all sorts of information about every calling function all the way up the stack. You can parse that all out and figure out where in the application you were. You can do this from anywhere in your app.

So I updated the monkey patched event dispatcher example in my last post to use this method and lo and behold we can get the class name of the class that called addEventListener(). We even get the method name and the line number where addEventListener was called.

Now in the FlexSpy example you get much more information and can trace back exactly where the event listener was added. Sweet! A big thanks goes to Almog (and to Alex Harui who Almog references as his source of this little gem).

IMPORTANT NOTE: The Error.getStackTrace() method only works with the DEBUG version of your swf. If you export a release build then a call to Error.getStackTrace() won’t work.

A while back Ben Clinkinbeard asked a question on flexcoders saying “Am I the only one who wishes EventDispatcher exposed its listeners?” The fundamental issue was that he wanted to get a list of all the event listeners that had been added to a given component.

The approach: using FlexSprite
Someone suggested monkey patching UIComponent to add this functionality, since each UIComponent gets notified each time a call to addEventListener is called, and you could keep track of the references locally. The thing is, monkey patching UIComponent is kind of a pain in the ass since it’s such a big class. When you monkey patch a class you basically need a complete copy of the whole class in your code so you don’t lose the functionality of that class. It’s perfectly doable with UIComponent, but gets kinda nasty.

So I was looking for an alternative and realized that the beautifully small FlexSprite class, which is the lowest level class you can get source code for (everything above it like Sprite, etc is built into the player). FlexSprite is under 100 lines of code and almost all of that is comments. When you get down to it there’s only a constructor and a single method in FlexSprite. So that makes it super duper easy to monkey patch the bastard. To refresh everyone’s memory the inheritance goes: Sprite -> FlexSprite -> UIComponent.

So if you’re trying to add in functionality that will trickle down into every component in the Flex framework, and you don’t need stuff specific to UIComponent, then the easiest way is to monkey patch FlexSprite.

The result
The good news: you can get a list of every event listener that is currently added to any component (at least anything that inherits from FlexSprite). This list will tell you the main details of the listeners, like type (ie “change”, “click”, etc), priority, useCapture, and useWeakReference. You also get the time when the listener was added (which is stored using getTimer to indicate the number of milliseconds since the app launched).

So now anything that inherits from FlexSprite (every display object in the Flex framework) has the following additional property and methods:

  • eventListeners - returns an Array of every event listener currently registered with the component. The Array contains ListenerTracker objects, which is a new class that simply holds the details of the listeners (like priority, etc).
  • removeEventListeners(type:String) - this will remove all event listeners for a given event type. You don’t have to have the reference to the actual listener function to remove it.
  • removeAllEventListeners() - removes all event listeners of all types. This completely wipes out all event listeners for the component all at once.

Here’s a very simple demo application that simply adds a button via MXML and shows all the event listeners on that button in a DataGrid. You can click the bottom button to remove all the listeners on the top button, which will effectively disable all interaction with the button, which should make sense.

This movie requires Flash Player 9

Simple example | source

The bad news: so you get the function that was added as the listener, but you can’t get anything useful out of this, like the actual function name in the code. You also can’t get the name or reference of the object that contains the function, or that made the call to addEventListener. So that blows.

UPDATE: We can actually get the name of the class that called addEventListener(), the method name where it was called, and the exact line number. See my post about a sneaky trick to do this.

Basically you can see how many listeners of each type (and priority, etc) there are and you can remove any individual ones (or all of them at once). But we are not being able to get much information about a Function object itself. In the addEventListener function we get passed a Function, but you can’t get any more information about that object (see the listener column in the above example, it just shows the “function Function () {}” string, which doesn’t help at all). I’ve tried using describeType() on the Function and everything else I could think of but couldn’t figure out how to get any additional useful information about a function. If anyone has any ideas shoot me an email to let me know.

A cooler example
So I remembered seeing a pretty badass Flex library that let you explore all the properties and styles of any ui components in your application. I went back and found it, it’s called flexspy and is a project hosted on Google code created by Arnaud Pichery. So that’s cool, you drop the FlexSpy swc into your app and suddenly you get access to this cool real-time property and style inspector. (BTW, FlexSpy is licensed under the Do What the Fuck You Want To Public License, ha, awesome)

So I went and extended the FlexSpy component and added my own Event Listeners tab to the main inspectors. Now when you launch my version of FlexSpy you can see all the event listeners on whatever component you select. Dope. I added in buttons to let you remove any individual listeners, or all the listeners for any particular component. Here’s a screenshot, and the links to the example app and the source (view source is also enabled on the app).

screenshot0021.jpg

Enhanced FlexSpy demo | source

A new Flex container has been added to FlexLib, called the WindowShade. This container shows a header button above or below the content of the container. Clicking the header button opens or closes the panel. This lets you easily create expandable panels in your Flex applications. A single WindowShade container can be used on its own, or you can place a few of them in a VBox to make something similar to an Accordion, except you can have multiple children open at once (similar to Peter Ent’s stack components).

The component was contributed by Dave Glasser, of iDashboards. I initially went back and forth with Dave about the component. At first I thought this was really trying to be an accordion component with multiple open children, in which case I figured if we were going to do that component we should do it right (maybe extend Accordion). But I’ve since been won over to the usefulness of a single WindowShade container, and in my latest project I even used it - 3 times :) So I worked with Dave and we reworked the component a bit, and now I think it’s pretty nifty.

Here’s an example that uses LinkButtons for the headers. You can use any Button control (ie Button, LinkButton, CanvasButton).

This movie requires Flash Player 9

As a side note, I also contributed a fix from Troy Gilbert that lets you use a CanvasButton in a Repeater. Thanks Troy!