Oh man. Take a look at this example I whipped up last night. This takes the google-finance-esque charting example from Brendan Meutzner and steps it up a notch. Now we’ve got two sets of charts, overlapping each other so we can easily compare the data. Drag the selected range of either of the charts using the sliders on the bottom portion and you’ll understand what I’m talking about.

This took me literally 3 hours to whip up. Hot damn. Show me an example like this in AJAX that didn’t take months to create. Hell, just show me an AJAX example at all.

This is a real application, not just a pretty demo. My girlfriend is a clinical psychology Ph.D. student at UC Berkeley. She’s running some psych studies and needs to compare data they captured from different subjects in the study. So as I’m talking to her last night and she’s describing what she’s trying to do, I think, gee, that sounds like it would be a sweet little Flex app. (In case anyone’s wondering, the sample data I published here is not from real subjects, so don’t get all privacy-advocate uppity on me) So I get to play with fun charts in a real-world scenario, and UC Berkeley gets some free Flex work.

Anyway, click the screenshot below (or this link) to launch the example. Right click to view source, or view source here.

I often use the ?: format for conditional tests (Wikipedia tells me this is called a ternary conditional expression), it makes code short and sweet and often easily readable. But I was digging through some of the Flex framework source (mx.containers.Panel line 801) and came across this line:

vm.bottom = o.bottom + (isNaN(btb) ? 
  (controlBar && !isNaN(btt) ? btt : isNaN(btl) ? bt : btl) : 
  btb);

Honestly?

I’ve used conditional expressions a lot, and even nested conditional expressions occasionally, but adding that third level of nesting makes a line of code that I can hardly read. My head almost exploded.

Today someone asked on flexcoders if you can make the Panel component dock the ControlBar component to the top of the Panel instead of the bottom of the Panel. The short answer is no, you can’t. The longer answer is you can extend Panel and make a few minor adjustments and then yes, you can.

Here’s an extension of the Panel class that allows you to specify a new property: controlBarPosition, which can either be “top” or “bottom”.

The one caveat about this class is that if you set the control bar to be placed at the top, you should set the roundedBottomCorners style of the Panel to false. Otherwise the bottom corners of the control bar will be drawn rounded as well, which looks kind of weird if they’re not at the bottom of the panel (if you’re curious why take a look at the source of mx.skins.halo.HaloBorder, around line 470).

View the source.

I’ve added a new Flex component to FlexLib: an ImageMap component that is an attempt to replicate client-side image maps in HTML. If you know about image maps in HTML then this component should be self-explanatory. Basically it lets you define clickable areas of an image, either rectangles, circles, or polygons. THe component dispatches various events for those hotspots, such as mouse over, mouse out, click, etc. So you can capture the mouse events and do whatever you want, like launch the link by using navigateToURL(), which is what would most closely resemble the HTML image-map functionality. But you can also do anything else you want when the event fires.

I tried to make it so you could basically just copy/paste the HTML code that you have for an existing client-side image map. So your MXML might look like this:

You define the

attribute either using MXML or AS (I used MXML in the example above). Then within your map tag you have a series of

tags. Each area tag should have a shape attribute and a coord attribute. Basically you should be able to generate your image map in whatever you use already (DreamWeaver, etc) and just copy and paste it into your MXML Flex app.

View the documentation
View the source of the example MXML file.

To get the source of the ImageMap component, download the FlexLib project from Google code.

Here’s the example:

P.S. I stole the image map of the USA from the fine people at HotPads.com. Don’t sue me guys!

Just thought I’d do a quick post with a link to the demo of FlexLib components that Ted Patrick showed at the keynote on the 3rd day of 360Flex. The demo shows most of the components currently in FlexLib. Right now my brain’s a little too fried to remember if there’s stuff in the library that I didn’t include in the demo. Check the source out of the svn to actually get the source for any of these components.

I’m planning on including the rippling water effect in FlexLib as well, along with the smoke/fire effects. But those aren’t in there now, I’ve got to find some time to work on them a bit more before they’re ready to go.

Anyway, here’s the demo.

If you want more info on FlexLib, read over the wiki pages on the project page. If you have questions just email me. If you want to contribute your code (and you all should!) then read the wiki page about contributing. Basically you’re going to send us your code (or a link to your source) and we’ll start integrating it into the library. Once we give your code the FlexLib stamp of approval you’ll get set up as a contributor and you can submit code to the repository yourself.

360Flex is now over, I just got home from San Jose, my head’s still spinning, bed is calling. I might try to write up my thoughts on the 360Flex conference overall and eventually do a post or two. Or not, we’ll see. Gotta say it was sweet though, good times all around.

This morning was the kickoff of the 360Flex conference. I got an email last night from Mark Anders from Adobe who was giving the keynote letting me know that he was going to show the RSS Flex app I made during the keynote. SWEET! I was excited to see it up on the big screen this morning.

Here’s a photo of Mark presenting the RSS reader:

Be sure to check out the 360Flex photo stream on flickr for more pictures from the conference.

He got to show off the newest version I updated a bit. I added the colored smoke effect last night. And during the day today I made a slight change to the rotation effect. It now rotates either left or right, depending on if you click an icon to the left or right of the currently selected icon (thanks to Alex Uhlmann for this suggestion). And it defaults to load the Flex category when it first loads, because we all know that’s the most important category.

View the newest version here.

The whole day overall was awesome, thanks a million to Tom Ortega for getting this whole thing together. I enjoyed the sessions today, but even more I enjoyed meeting a lot of the people I’ve only known through blogs or email. I got to pass out a bunch of my ridiculous business cards. If you haven’t said hello, find me at the conference over the next two days. I still don’t have any challengers to show me a more ridiculous Web 2.0 business card, so I’m going to claim the title until someone steps up to the plate and hands me something utterly ridiculous.

Here’s a Flex component I made a few weeks ago and never got around to blogging about. It’s included in the FlexLib library. This is a component that combines the List and Tree controls that are included in the framework. This was inspired by the left nav menu of the new Flex Style Explorer. That app has a navigation menu that can be displayed either as a Tree control, if there is enough space, or a list of icons if we need to conserve space. I figured that was a great way to display the same data two ways.

So you can have one component, set the dataprovider once, and you can switch it between showing the data as a Tree, text-only List, icon-only List, or a text and icon List. You can set the mode property of the control to determine how it displays.

So what?
It came to my attention today that the reason for this component isn’t as obvious as I thought. So I’ll try to explain. This component is for the situation where you have a list of items in a Tree, but you might want that Tree to take up much less horizontal space, so you want those items to be displayed as a straight List of text or icons instead. Normally what you would do is have two controls, a List control and a Tree control, set the dataproviders separately (since a List can’t take heirarchical data) and swap one out for the other if you wanted to change them. This component makes it so you don’t have to do any of that swapping yourself, it’s done for you, and all you have to do is set the mode property of the control.

Take a look at the documentation on FlexLib. Here’s a direct link to the source code of this component in FLexLib. The best way to get it though, is to check out FlexLib from the SVN repository.

Here’s the example. The top component shows how you can dynamically set the mode. There are four options, Tree, text List, icon List, and full List. The bottom examples shows a more real-world example where you would want to change the mode depending on how much space you have available.

P.S. Thanks to Jeffry Houser for donating the flexlib.net domain!

I’ve been having fun playing with simulated fire, smoke, and now a water reflection effect in Flex. Here’s a screenshot. Click the screenshot, or this link, to view the effect live. I’m not putting the live swf directly here on the page because my blog’s already got a few fire effects playing, and this one’s particularly CPU intensive since it’s got 3 different effects running at once (and not only that, but the live reflection water component reflects the live fire and smoke effects).

Just thought I’d do one of these “I’ll be at 360Flex” posts that everyone’s doing. Come find me and say hi. I look silly, like this. I’ll be attending the sessions all three days.

And here’s some more fun with fire and smoke effects in Flex: