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:

Source and a Fire component for Flex will be published when I get the time, but here’s a fun example.

Here’s a little demo Flex app I put together. It’s another MXNA RSS reader (I know, I know, like there aren’t anough of those already). But really I didn’t start out making an RSS reader, I started playing with Ely Greenfield’s FishEye component. Then I figured it would be cool to have the icons I used for the FishEye component rotate a badass 3d cube thingy, which uses the awesome distortion classes from Alex Uhlmann. And of course it’s got to have the requisite web 2.0 reflection, which was made by Ben Stucki. Then I figured that I should have something sweet displayed in the rotating cube, and I remembered Josh Tynjala’s TreeMap component. And I remembered seeing a demo of an MXNA reader that Josh had made using that TreeMap component, so that’s how I ended up making another RSS reader.

Why is this important?
There’s been a lot of discussion recently about the Flex component developer community. Projects are starting, developers are coming out of the woodwork, the community’s buzzing. This little demo shows a combination of open-source Flex components from four different developers, put together by a fifth developer (me). All the code I used has been released by the authors for free use. It’s all available to browse through, learn from, improve, etc. Now if only it was all consolidated into one central location… <hint, hint>

And we’re only at the beginning. Keep an eye out for new Flex components, my prediction is that we’re going to see an avalanche of awesome components.

So anyway, here’s my little demo. It just loads the most recent posts on MXNA for whatever category you select (by clicking on one of the icons at the bottom).

Here’s the recipe:

• FishEye component from Ely Greenfield
• Custom modifications to add the bouncing functionality to the icons
• Reflection component from Ben Stucki
• Distortion effects from Alex Uhlmann
• TreeMap component from Josh Tynjala

Add them all together and this is what you get:
[Or launch it in it’s own window: here’s the link]

Source for this demo isn’t released yet, I put it together quickly, so it’s not quite up to my own standards.

I’m pleased to announce the FlexLib project hosted on Google Code. This is an open source library of UI components for Flex 2. The goal of this project is to gather all the great components that people are releasing on blogs, Adobe Exchange, mailing lists, etc. and create a central open-source project that everyone can contribute to. Hopefully this will provide a central location for people to find custom Flex components.

What is it?

• It’s open-source, released under the MIT license (about as free a license as you can get)
• It’s on Google Code, which means SVN access for members, issue tracking, wiki, etc.
• You can contribute your code!

What’s in it?
We started off by contributing a few components to get the ball rolling. See the full list of components on the Google Code project page. The quick list of components follows: ConvertibleTreeList, Draggable Slider, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion.

But more important than what FlexLib currently has in it, is what’s going to be in it? And of course the answer is: everything you have! If you’ve been developing components and posting the source on your blog, we’d love for you to round up your collection of components and integrate them into FlexLib.

Why another place for components?
The question has been raised as to whether there’s any reason to create yet another place for people to find Flex components. We certainly don’t want to add to the clutter and just make another barely-used source for components. We’ve already got the Adobe Exchange, tons of blogs, and the nice newly released flexbox app that tries to aggregate these sources. So here’s my thinking:

• This is going to be a high-quality source for components. This means code gets reviewed by project members and components are well documented.
• We can build off each other’s code if it’s all in the same project. Component developers aren’t in their own little blogosphere microcosms, if we all have one source for everyone’s code we can all extend and improve the library.
• We can consolidate our effort. I know that I’ve spent time working on some component or another only to find out that some other Flex blogger has been doing the same thing. Hopefully this will help us coordinate and work together.

Who’s involved?
The project was started by Darron Schall and myself, with the input and help of Mike Chambers and Ted Patrick from Adobe. But FlexLib is meant to be a community project, so we’re inviting all Flex developers who can contribute to join. Take a look at the How to Contribute wiki page, start playing with checking out the project from the SVN repository, join the discussion group for the project, and most importantly send us your code!

[UPDATE 02-08-2007 4:05 pm] Added the ability to adjust the scroll speed via scrollSpeed property. Changed scrolling buttons to work via mouse down or mouse over, customizable with the startScrollingEvent and stopScrollingEvent properties. Made the drag proxy image a copy of the bitmap of the tab so it looks like you’re dragging the actual tab.

This is the culmination of my work on making a better TabNavigator component for Flex. This includes lots of enhancements that have been discussed in the Flex community. We got draggable, re-orderable, closable tabs! We got scrolling tabs if too many tabs are open! We got a drop-down list of all open tabs! It slices, it dices! But seriously, it’s got a lot of stuff. I’ll try to go over everything briefly here, but the real way to figure this out is to download the source and go through it yourself. I tried to comment the bejesus out of most of the classes, so you should be able to follow along pretty well.

I’ve gotten ideas from various flexcoders threads, the sample posted on Flexible Experiments, the sample on code zen, darron schall’s demo, etc etc.

In keeping with Ely Geenfield’s naming conventions I’ve dubbed this component SuperTabNavigator. It is pretty super after all. This is a subclass of TabNavigator. I was actually able to do everything I wanted to do without having to copy/paste the code of TabNavigator, so using this component shouldn’t add too much to your Flex app’s footprint. The source included also includes the source of previous components I created that allow menu components to scroll. The SuperTabNavigator uses the scrolling version of the PopUpMenuButton for the button to the right of the tabs. So those scrolling menu components are thrown in here.

OK, so what makes this SuperTabNavigator so super?

Draggable, re-orderable tabs
You can drag tabs around to re-order them. An indicator shows where the tab is going to be placed if you drop it. You can drag tabs from one SuperTabNavigator to another. You can control the dragging ability by using the new dragEnabled and dropEnabled properties of the SuperTabNavigator. Those properties should work as you’d expect. The indicator is skinnable via CSS using the indicatorClass style.

Closable tabs
Tabs can display a close icon that will allow the user to close the tab. You can control if and when the close button is shown by setting the closePolicy property of a SuperTabNavigator. Possible values are: SuperTab.CLOSE_ALWAYS, CLOSE_SELECTED, CLOSE_ROLLOVER, CLOSE_NEVER. That should give you fairly good control over how the close buttons show up. The close button is fully skinnable via the CSS property closeButtonSkin just like any other button.

Scrollable tabs
If the tabs get too long to display then they will scroll. This means a little button on the right side will appear with an arrow and if you mouseover this arrow the tabs will scroll. The left and right buttons are skinnable via CSS with the leftButtonStyle and rightButtonStyle styles. You can set what the smallest acceptable width for the tabs is by using the minTabWidth property. If you don’t set tabWidth then the tabs should keep their natural width until there are too many to fit, then they’ll squish until they reach minTabWidth, then they’ll scroll. If you were to set minTabWidth to 0 then there would be no scrolling.

Drop-down list of tabs
On the right side is a PopUpMenuButton that shows a drop-down list of all open tabs. Selecting a tab in this list will obviously select that tab. Try selecting a tab that isn’t visible and see the sweet tween motion as the tab scrolls into view. The display of this drop-down button is controled via the popUpButtonPolicy policy, which can be set to POPUPPOLICY_AUTO, POPUPPOLICY_ON, or POPUPPOLICY_OFF. Auto means the button is shown if there is more than 1 tab. ON obviously means it’s always shown, and OFF means it’s never shown. That button is skinnable too via CSS with the popupButtonStyleName style.

So that’s the gist of it. But to really understand what the component can do you should read the source code. I’ll work on getting the ASDocs generated to accompany the code.

Now I’m sure you’ll read all this and say, “Wow, what a perfect TabNavigator, I had no idea such an amazing TabNavigator could exist. Surely there are no features missing.” Well, in fact, there are some more features I’d like to include. Here they are in no particular order:

• multiple rows of tabs
• tabs down the left or right sides or on the bottom
• ability to not show the close button for individual tabs
• right-click on tabs to get menu for “Close Tab” or “Close Other Tabs”

And you would then say, “But no, please, if such a TabNavigator existed I would be blinded by it’s perfection.” And I would reply, “Prepare yourself.”

View the source. [Note: you need the Flex 2.0.1 update to use this code]