Entrepreneur Geek

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:

• 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!

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

I wanted to find the number of lines from a set of files – spread out in nested directories. The shell command “wc” is best for finding number of words / lines in files but it does not have an argument for recursive searching.

Here’s a quick shell command sequence that will find you the line count from all files in a directory – recursively.

find /topleveldirectory/ -type f -exec wc -l {} \; | awk '{total += $1} END{print total}'

Replace “/topleveldirectory/” with your directory of choice. Leave it as “.” to find from current directory and below.

Found on Unix.com

If you are the guy who uses<div> tag for everything, this post is for you. It focuses on how you can write clean HTML code by using semantic markups and minimize the use of <div> tag. Have you ever edited someone’s templates, don’t those messy tags drive you crazy? Not only writing clean templates can benefit yourself, but your team as well. It will save you time when you have to debug and edit (particularly the large projects).

This post is a collection of some simple yet effective techniques. Read all tips over on Web Designer Wall.

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.