Entrepreneur Geek

When it comes to Regular Expressions, I start feeling giddy. Even after using them a lot on many projects, I never remember the qualifiers and syntax. It’s always RTFM for me when I need to use some regular expressions in my code.

And that happened again today. I looked around the manual and searched online for a “quick fix” on the regular expression I needed. And I found a very interesting online Regular Expression trial / demo / learn by exploring tool. It’s made in Flex (and I needed RegExp for Flex) and helped me develop the RegExp I needed in a couple of minutes. (ok, I am still slow, but I found it!)

Thank you Remus Stratulat for creating this useful tool! BTW, he also has a similar tool for JavaScript Regular Expressions.

Click on the image below or here and jump to online regular expression checking tool.

Online Regular Expression Checking Tool for Flex and JavaScript

Adobe AIR 2.0 Beta out – list of new features

Adobe released a beta of the next version of AIR – AIR 2. Christian Cantrell posted an exhaustive list of everything that’s new in AIR 2.0. The list is impressive, and includes some things we’ve been thinking about – audio recording, calling native apps, multi touch and many more. The number of AIR applications on my computer is rising, and looking at this list, I can tell the number is just going higher.

Are you an AIR developer? What do you like the most in that feature list?

Microsoft too can build good UI – here’s a “sixth sensy” demo

So everyone who’s worth their salt is working on gestures and eye tracking and other – more natural – ways of interacting with a computer. Two interesting videos here that demonstrate pen, audio, gesture and eye tracking input. Good show Microsoft, I say.

Craig Mundie demonstrates future UI – part 1 and part 2.

Did you fall in love with the slider toggle button on iPhone? Now you can use if in Flex

Srinivas Annam has built an iPhone style switch component for Flex – iCheckbox. Looks nice and is worth a try. I am sure users find it easier to use than a checkbox.

If you are building a Flex application, you may need a way to show messages to the user. The usual way to do this is via Alerts. Alerts can be quite distracting and generally avoidable. Another alternative is to have a status message area (like a status bar) and show messages there.

Growl

But an even more interesting idea would be to show notification windows / popups. If you have seen Growl on the Mac, you know what I am talking about. Heck, even Facebook and most instant messengers show notifications now.

So how would you implement this using Flex?

Short answer, don’t implement them yourself. There are two very good and free components available that you can use.

Flex Notification is easy to implement and works very well.

FlexGrowl looks and works excellent but needs Degrafa.

Flex Notification Component

Flex Growl

I used Flex Notifications in an upcoming product, but am facing some issues with focus loss when the notification goes away. Don’t want to add the download overhead of degrafa to my app just for notifications yet!

Yahoo! Design Patterns Library has a set of “stencils” available to mock up your next great RIA project! The stencils are available in OmniGraffle, Visio, PDF, PNG and SVG formats. So you can use them with Illustrator or Photoshop / Gimp as well.

They have included stencils for: Ad Units, Calendars, Carousels, Charts and Tables, UI Controls, Form Elements, Grids, Menus and Buttons, Mobile – General, Mobile – iPhone, Navigation and Pagination, OS Elements, Placeholder Text, Screen Resolutions, Tabs & Windows and Containers.

That’s quite a lot – all available under Creative Commons.

And if you were building Flex RIAs, here’s an article on using these stencils along with Flash Catalyst to churn out kickass Flex Apps with almost zero coding!

Enjoy!

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?