Entrepreneur Geek

I wrote yesterday that I am working on a time estimate slider like The Hit List. It’s finally ready!

Here’s how it looks in The Hit List.

Smart Estimate Slider in The Hit List

And here’s how it looks in my Flex application:

Smart Estimate / Duration Slider in Flex

Want to see how it works? Here’s the live example.

Want the source code? Download source MXML here.

What does this slider do?

• Drag the slider to select estimated hours / duration.
• The drag thumb will snap differently between 0h to 1h (every 15 minutes), 1h to 1d (every 15 minutes, but within ticks), and 1d to 1w (every 2 hours).
• Can set the default value for slider
• Value of slider is converted to hours
• Can define hours in a day and days in a week
• Estimation slider shows up when focus goes in the text field. Hides when you click Done button (or another screen element that can get focus). But not when you focus on the slider itself.

It was a challenge, and I loved solving it. Had to hard code some calculations, but it’s still flexible. Allows customizing hours in a day and days in the week. This example also demonstrates Number Formatter, and how to handle focus events.

Still haven’t converted hours into a more readable text (e.g. 40h into 1w). But that’s for later.

Here’s another thing that you may like! Card Deck animation like The Hit List!

Do you like it? How would you have done it?

I was trying out a GTD application the other day called The Hit List. The application is superb, and I was really impressed with their attention to detail. One thing that excited me was their card view – and especially how they animated card swaps. You see a deck of cards, and as you navigate between next / previous cards, it animates picking the card and pushing it back, or taking it from the back of the stack and putting it at top. This was very much like how you would do it manually.

So I replicated it in Flex!

Click to see Card Deck animation in action

Interesting things in this example (or what can you learn):

• Card deck is drawn using Graphics API. We draw Rounded Rectangles and give the last one a shadow.
• Animation effects are done in a sequence.
• Changing the stack ordering of the cards to give a realistic effect.

Want source? Download the source code for this Card Deck Animation in Flex.

This is only an example. I am sure there are things to improve. I learned a lot while building this and I hope it’s useful for you.

Thanks to Sunny & Pradeep for doing the ground work on this. Kudos to Potion Factory for building an inspiring application

Was looking for ways to skin a combobox and found another gem! An auto complete text component for Flex. Now you may say what’s new about that? But this is really nice – shows auto complete, allows multiple items to be added (like tags), can show items horizontally or vertically, can reorder them and some more.

Checkout the Demo here, and download the source code if you wish.

Thanks for your work Hillel!

Do you want to learn Flex? Adobe has put up an excellent Flex video training out for free. The course covers almost everything – from basics to PHP integration! Worth it!

(thanks to Ashok for the link)

If you want to localize your Flex applications, here’s an excellent approach. It allows loading translations dynamically and is easy to implement. Nice use of change events and data binding!

There are other approaches (using Resource Bundle etc), but I like this approach because of its flexibility. I don’t have to compile translations in my application and I can let users translate and drop them in.