September 2006 Archives

I just finished up a new Flex 2 component that allows you to add close icons to tabs that when clicked will remove them from a TabNavigator.

Here is the component in action:

When you click the "Add Tab" button, a new tab is created with the given label and icon. The display of the close icon depends on the state of showCloseIcon. When set to mouseOver, the close icon is only show when the mouse is over the table. Setting to true always shows the close icon, and setting to false always hides it. Note that in the above example, when changing the state of the close icon, the tabs needs to be removed and re-created. I didn't build in support to change the behavior on-the-fly because I didn't feel this was a common use case.

When a close icon is clicked, a new ItemCloseEvent is dispatched. You can listen for this event via the itemClose event in MXML. By default, the close icon will automatically remove the tab from the tab navigator. If you don't want this default behavior, you call event.preventDefault(); in the event handler and the tab will no longer be removed automatically. This is useful for having, say, a question mark instead of a close icon that when clicked can open a help document.

Lastly, the close icon can be specified via the closeIcon and overCloseIcon properties. I didn't build in support for a down icon because I didn't feel it was necessary, but doing so would require just a few minor tweaks to the code base.

This is a component that I built for the current client project I'm working on. Therefore, I'm not able to offer this for download, nor am I able to share the code with you. Everyone that knows me knows I'm a big fan of open source and a large contributor to OSFlash, so I'd share if I could...

This component was a little on the tricky side to write, but I hope it proves inspirational for developers out there. With Flash (and therefore Flex), you can pretty much do anything that you can imagine... it just takes a little time, ingenuity and determination. Honestly, I tried 3 different approaches to making this component before I was successful, but overall it was less than a day's work.

I'm sure there are some bugs to work out, but I'm pleased with how well it's turned out so far. It's a vital piece in the project that I'm working on...

If you know me, then you know I'm a huge fan of Trac and Subversion for managing software development. If you've ever wanted to give it a try, now there's no excuse not to with preconfigured Virtual Appliances Just download, boot, and go.

Awhile ago I had set up a Linux box on my home network with Trac and Subversion and documented my process here. I admit that I'm not a very good Linux system administrator. I'm a developer, and I write code. Someone else has always managed the development boxes, or they were outsourced to a company like CVSDude or ProjectLocker. The point is, sometimes getting up and running with Trac and Subversion isn't just a one-click install process, and usually takes some time to get everything configured and working properly.

That's why I was excited to find out that you can get a complete working agile development box up and running in no time thanks to VMWare's Virtual Appliances. By downloading the free VMWare Player, and a system image with Trac and Subversion already installed, you can just load the system image and boot it up to immediately start using it for development.

There are a few preconfigured Trac and Subversion images if you search the VMWare Virtual Appliance directory. Two that I've found are Helix Agile Development and Buildix from ThoughtWorks. There are probably others as well if you spend a little more time searching.

I'll admit that I haven't actually downloaded and run with these yet (since I have that Linux box I've already configured), but I plan on investigating these sometime in the future. Hopefully having these servers ready-to-go will help someone out there get up and running with Trac and Subversion much easier. It's the best development environment I've ever programmed in...

Since the Flashfoward Film Festival is over, it's time to let loose the FC64 demo that netteed Claus and I a win for technical merit. Enjoy!

FC64 Demo

FC64 Demo Source Code

Fore more information about the demo, see my post here, and Claus' post here.

Sadly, neither Claus nor I could make it to Austin this year to pick up the award in person. I wish I could've been there to see the audience's reaction to the demo, and to accept the award live.

Since it was a joint project Claus will be the keeper of the orange rubber arrow, but I'm hoping to at least get visitation rights!

The Flex 2 component set includes a Tree control, but it doesn't have the built-in ability to display checkboxes next to the individual nodes. Since I needed a checked tree control for a project of mine, I went ahead and built it.

You can see it in action below (Flash Player 9 required):

The tree supports two different modes for how the checkboxes operate. The above demo showcases the hierarchical selection, where the parent nodes indicate the checked selection of their children. If all of the children are checked, so is the parent. If none of the children are checked, neither is the parent. If the children are mixed (some checked, some not), the parent node displays the indeterminate state and draws a black box. Clicking on a parent node will update the selection state of all its children, its children children, etc.

The other checkbox mode is for individual selection of the nodes regardless of where they are in the overall structure. Think of this as just a regular checkbox list control, except displayed in a tree format that highlights the overall hierarchy of the data structure. That is, you can select a node and not any of its children, or just select nodes individually from each other. In this mode there is no indeterminate state since every node is either fully selected or not.

Unfortunately, this component was built specifically for a client project so I'm not able to share the source at this time. This may change in the future, and if it does I'll be sure to make a new entry and update this post.

However, I can say that the Flex 2 component architecture made this component fairly easy to implement on a high level. I tapped into the cell renderer architecture and defined what I wanted to be displayed for every tree node. Then, it was just a matter of wiring up the various events to handle data changes and getting the logic right.

It's awesome to see how extensible Flex really is, and how easy it is to roll your own components when it comes down to it. Swapping out a normal tree with the checked tree control is essentially just a matter of changing the item renderer.

Overall, I had a lot of fun in making this component. Its just what the doctor ordered for this project, and we'll definitely get our use out of it...

As the popularity of Flex 2 increases, so does the popularity of the FlexCoders mailing list. Because of this, having a good mechanism for searching the list is extremely important. It allows list members to see if a question has been asked before they ask it again (you should always search before you post), and it also allows people to find conversations that they remembering reading in the past.

The search on the Yahoo groups page isn't the greatest, which makes searching difficult. The list is archived through mail-archive with better search functionality, but there's still plenty to be desired. For example, just try searching for "date" and notice how there are 0 entries returned.

So, a better solution is obviously needed. Enter Google.

The mail-archive site is indexed by Google, and since Google is good for searching (so I hear), you can use the power of Google to find FlexCoders messages.

Whenever you want to search for something on FlexCoders, just add "inurl:flexcoders" to the keywords. It's as simple as that... a handy little trick that makes finding information about Flex a little bit easier.

One important thing to note is that you'll generally only see the first two entries from the mail-archive site. You'll need to click the "More results from www.mail-archive.com" to get all of the results. An alternative is to also add "site:www.mail-archive.com" to the keywords as well. Google turned up 8,040 "date" entries, to mail-archives 0.

Anyway, I'm sure many of you out there already knew this.. but since the FlexCoders FAQ still points to the search on the mail-archive site, I thought I'd offer up this better technique (in my opinion) to the community. Have fun...