Category Archives: Flex & Flash

Macromedia RIA technologies

Showing Flex Preloader near the top of your Application

Flex comes with a reasonably good preloader (DownloadProgressBar) that shows in application center while the swf is loading and initializing. I had an application that is taller than browser’s view port height. This means the preloader will show below the fold – making it invisible to users who don’t scroll down. Even when the preloader is visible, it “feels” it’s just not in the right position.

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:

Hope you enjoy!

Flex Regular Expression Online Testing / Learning Tool

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

Online Regular Expression Checking Tool for Flex and JavaScript

AIR 2, Microsoft future UI and iCheckbox

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.

Test your site across multiple browsers with Adobe BrowserLabs

Adobe BrowserLabs

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.

Notification Components in Flex

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

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 Notification Component

Flex Growl

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!