Here’s my progress on coming up with a TabNavigator component with all the features I’ve heard people talking about.

1. Drag the tabs to re-order them. An indicator appears showing you where the tabs will be dropped. You can drop tabs before or after any other tab currently in the list
2. Closable tabs. Click the close icon on each tab to remove it.
3. List of tabs in a drop-down menu on the right. I’ve changed it now so the menu won’t go off the screen. It adds a scrollbar to the menu if it gets too long.
4. If you don’t specify a tabWidth, the tabs are all at their own default widths.
5. If there are too many tabs to fit the component first tries to squeeze the tabs in by making them smaller. You can set minTabWidth, which specifies the smallest that the tabs are allowed to be squeezed down to. If the tabs can’t be squeezed more then scrolling occurs (next point)
6. Scrollable tabs. If the number of tabs is too many to fit, then arrow icons appear on the left and right side that allow you to scroll through all available tabs.

There are some definite bugs, especially when it comes to trying to set tabWidth and minTabWidth. Once I upload the source in the next day or so maybe someone else can figure it out.

So that’s pretty much where I’m at. Hopefully I’ll post the code tomorrow once I get around to cleaning it up a tiny bit more. Here’s the example of the current component. If you’ve got any more feature requests just post them in the comments and I’ll see if I can include them. Cool.

[UPDATE: See Part 2 for the current component]

There’s been some discussion on flexcoders about a better TabNavigator component. And a few people have done some good stuff expanding on the original TabNavigator in the Flex framework. I figured I’d play around and try to add a little to the current TabNavigator modifications that are floating around.

First, a few references. Here’s a TabNavigator with draggable tabs that was posted on a blog called code zen. I used this as my starting point (well, actually I started from scratch, then realized this was already out there). The customized TabNavigator component there is pretty good. So I grabbed that, cleaned up a bit of the re-ordering of tabs stuff, made a few other tweaks, and then added some functionality of my own.

The demo’s below. Basically this allows you to add and remove tabs, drag tabs, but the cool part about what I added is the scrolling of the tabs. If the tabs get too long they do sort of what Firefox does, which is put buttons with left and right arrows on the sides of the tabs and allow you to scroll through them. I also added a drop-down button to the right edge that lets you select any of the tabs from a list, again a la Firefox.

I know Jason from Flexible Experiments has said he’s about to release the same component with the source. So his might come out in the next few days and make mine irrelevant.

I’ll release the source of my stuff in a day or two, after I clean it up a bit. Like I said, I used the code off of the code zen blog as my base, and I’m not in any way trying to steal that and claim it as my own. I’ll pubish the source of all my additions, and hopefully everyone can work together to make a TabNavigator that finally meets everyone’s demands. I figure between what’s already out there, whatever’s coming from Flexible Experiments, and anything that I included that’s not in the others, we’ll be able to get a pretty solid TabNavigator.

So here’s the demo. Try adding a bunch of tabs and see what happens when you add too many to display at once. Try re-ordering the tabs by dragging them. See the pretty little indicator arrow? ooh aah…

This is a Flex component that adds a draggable bar between two slider thumbs. This is very similar to the “Dual Slider Component” developed by Brendan Meutzner that has been on Flex Exchange for a while now. I’m posting my version because 1) I created it a while ago without realizing there was a similar one out there already and 2) mine works differently by placing the draggable portion directly between the thumbs of the slider on the track.

It’s a simple component, basically nothing more than the VSlider or HSlider that’s included in the Flex Framework, slightly modified for my purposes. If you look at the source you’ll see that the bulk of the component is Slider.as, which is a direct copy of the mx.controls.sliderClasses.Slider class that was included in the framework (upgraded to use the 2.0.1 version). Slider.as was copied completely, and then I added a few things to make it draw an invisible draggable region between the two thumbs. This is an example of something that ideally should have been done by extending the Slider class, but since I needed to access some of the private drawing and child creation methods, I had to copy/paste all the code and make a duplicate class.

Usage is simple, just use it as you would the VSlider or HSlider components. You need to specify a skin for drawing the highlight track. The default halo skin doesn’t work very well (it draws a line around the border of the draggable region). I’ve included two skins for the draggable part, each are shown below in the example and are included in the source code.

View the source.

You can download the source by using the link above, or you can also download the compiled SWC and drop it into your Flex project. This has the benefit that it will give you nice icons in the Components panel and it will show the previews of the components on the stage in Flex Builder.

Download the SWC: SliderComponent.swc (289 K)

This post is a brief tutorial on how to use the Animated Gif Loader component that I have developed for Adobe Flex. The component is a commercial component available for purchase. You can try the component out before you buy it, however, by downloading the demo version.

Loading a gif from a URL
Using this component is as easy as using the or components that come with the Flex Framework. All you have to do is add a line to your MXML code and specify the source attribute of the component. This tells the component which file (or embedded asset, more on that later) to load.

Here’s an example line of MXML that would get inserted into your Flex app:

That’s all it takes to get a simple animated gif playing in your Flex app. And what’s sweet is that the component works exactly like the SWFLoader component, so you get access to every method and property that you would from SWFLoader (such as scaleContent and maintainAspectRatio).

Embedded assets
The component also works with embedded assets in your SWF. See this quickstart article about embedding assets using Flex. Just like you can embed still images into your Flex app and reference the embedded file, you can do the same thing with animated GIFs.

The caveat is that you must specify the mime-type of the asset as “application/octet-stream”. So the tag to load an animated GIF as an embedded asset would be like this:

or if you’re using a
P.S. Hey Brendan, how about those awesome waving flags?