I knew I could write some custom preloader, but I did not have the time / need for it. After reading a bit of documentation and diving in the DownloadProgressBar source code, I figured the solution was actually very easy.

Here’s the custom preloader source code that shows download progress bar for your Flex application near its top.

MyDownloadProgressBar.as

package com.components
{
  import flash.events.ProgressEvent;
  import mx.preloaders.DownloadProgressBar;

  public class MyDownloadProgressBar extends DownloadProgressBar
  {
    public function MyDownloadProgressBar()
    {
      super();
      // Set the download label.
      downloadingLabel="Downloading..."
      // Set the initialization label.
      initializingLabel="Initializing..."
    }

    // Override to return true so progress bar appears during initialization.
    override protected function showDisplayForInit(elapsedTime:int, count:int):Boolean {
      return true;
    }

    // Override to return true so progress bar appears during download.
    override protected function showDisplayForDownloading(elapsedTime:int, event:ProgressEvent):Boolean {
      return true;
    }

    // Override initialize so that we can position the loader
    override public function initialize():void {
      super.initialize();
      center(stageWidth, (stageHeight > 250) ? 250 : stageHeight);
    }
  }
}

The critical part is initialize function. super.initialize(); calls DownloadProgressBar‘s initialization routine – which centers the preloader. We then call center again, but modifying the height parameter. If application size is more than 250 pixels, the preloader will be centered vertically within 250 pixels from top.

The only other code you need to write to make this work, is to tell your Application to use this preloader.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	preloader="com.components.MyDownloadProgressBar">

Note: Remember to place the first code as MyDownloadProgressBar.as within a com/components folder under your main application.mxml file.

That made me happy! But if you are looking for more, you can also check out:

• Custom Flex 3 Lightweight Preloader with source code
• Custom Preloaders and Showing the preloader again after loading is finished on Flex and ActionScript Development Tips blog
• Flex Application Bootstrapping and Totally Custom Preloader
• And the trusted Flex Documentation on DownloadPreogressBar

Hope you enjoy!

Related posts:

1. Notification Components in Flex
2. Flex Regular Expression Online Testing / Learning Tool

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

Related posts:

1. Notification Components in Flex
2. Live Scribe – Amazing Writing Technology – Never Miss A Word
3. Paypal Sales + Marketing Activity Trend Spotting

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.

Related posts:

1. Test your site across multiple browsers with Adobe BrowserLabs
2. Notification Components in Flex

Compare multiple browsers side by side - Adobe BrowserLabs

Web designers and developers are always challenged by the diversity of browsers (each with its own quirks). It’s generally a time consuming and error prone process. Requires someone with a skilled eye to spot the problems.

Now, Adobe has simplified that process with BrowserLabs. You can see multiple browsers side by side, and can even overlay them to quickly spot differences. It’s free now and worth a try. Check it out.

No related posts.

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!

No related posts.

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!

Related posts:

1. AIR 2, Microsoft future UI and iCheckbox

Today, I downloaded, setup and used Zend Debugger for the first time. And I loved it! It was awesome to see variable watch, breakpoints and the like. Just loved it!

Why did I use the debugger? I’ve been using Flex Builder myself for last one year heavily and think the debugger is indispensable. I have done some .NET code earlier and love debugger there too. For PHP, it was more like “I don’t need a debugger!” so far.

I dropped that today and embraced a debugger. And I am loving it so far!

Do you use a PHP Debugger?

Related posts:

1. Coding Clean and Semantic Templates
2. AIR 2, Microsoft future UI and iCheckbox
3. Showing Flex Preloader near the top of your Application

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?

Related posts:

1. Flex Regular Expression Online Testing / Learning Tool
2. Notification Components in Flex
3. Showing Flex Preloader near the top of your Application

Smart Estimate Slider

The estimates slider in The Hit List is smart. Its tick marks are equidistant, but values are not. The snap between each tick varies according to its context.

Building this in Flex! It’s been 1.5 hours, still figuring out the exact logic!

My fascination of The Hit List goes on!

Related posts:

1. AIR 2, Microsoft future UI and iCheckbox
2. Notification Components in Flex
3. Live Scribe – Amazing Writing Technology – Never Miss A Word

But that does not work on Mac OS X.

The solution involves tracking mouse move events at browser level using JavaScript, and passing them to Flex. A handler in Flex will then scroll the application / component as you specify.

Here’s a detailed blog post and solution to scrolling Flex components / application with mouse wheel – in all browsers – all platforms.

It works well! Except that you can only scroll one way – either vertically (as in the code above) or horizontally (by hacking the code above!)

Wish Flex supports this by default someday! Would really help!

What do you think? Do you use mouse wheel / track pad to scroll?

Related posts:

1. Showing Flex Preloader near the top of your Application
2. Notification Components in Flex
3. Flex Regular Expression Online Testing / Learning Tool