Adam Tuttle

Entries Tagged as Flex

Upgrade your Flex knowledge to 4.5

I'm thrilled to announce that after a lot of hard work writing, editing, and re-writing, an article that I wrote is now live on the Adobe Developer Connection: A Flex 3 developer's introduction to Flex 4.5 and Flash Builder 4.5

In the article I give a (very) brief overview of most of the changes and new features between Flex 3.x and 4.5 and between Flex Builder 3 and Flash Builder 4.5. If I covered everything in depth then the article would be longer than you would want to read and longer than I want to write -- so I stuck with an overview of each change/addition, and then tried to provide links for further reading if a topic is of particular interest or importance to you.

I hope you find it useful!

Published 2011-07-26 @ 08:00 in Adobe Flex

Using the Flex 4.5 BusyIndicator

One handy new feature in Flex 4.5 is the BusyIndicator component. This little thing goes by many names -- I usually find myself calling it a "throbber", though I'm not exactly sure why. What is it exactly? Any of these qualify:

loading animation loading animation loading animation loading animation loading animation loading animation

All of these were taken from ajaxload.info, a handy site for finding a throbber for your website.

What do all of these have in common? They communicate to the user that your application is doing something but not what percentage complete the task is. It's saying, "I'm here, working on what you asked for, but I don't know how long it will be until I'm done!"

Flex has had a progress bar component for a while now, which even has an "indeterminate" property, which when true makes it not actually indicate progress but rather just show busy-status, like the images above do, but in bar form, sort of like this: (also taken from ajaxload.info)

loading animation

Prior to Flex 4.5, if you wanted to show busy status but not progress, your options were to use an indeterminate progress bar, find a third party class, like this one that I used in one of my old projects, or roll your own. You can't display an animated gif in a Flex application -- I know because I tried. I'm lazy, don't judge.

Well my friends, now that Flex 4.5 has arrived, you've got a BusyIndicator that couldn't be simpler to use. Here's some sample code that shows how to use it:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
        <![CDATA[
            [Bindable]
            private var rotationInterval:int = 100;

            private function busyOn():void
            {
                throbber.visible = true;
            }

            private function busyOff():void
            {
                throbber.visible = false;
            }
        ]]>
    </fx:Script>

    <s:VGroup width="100%" 
              paddingLeft="10" 
              paddingRight="10" 
              paddingTop="10" 
              paddingBottom="10">
        <s:BusyIndicator 
            id="throbber" 
            visible="false" 
            rotationInterval="{rotationInterval}" />
        <s:Button 
            id="start" 
            click="busyOn()" 
            width="100%" 
            height="50" 
            label="start" />
        <s:Button 
            id="stop" 
            click="busyOff()" 
            width="100%" 
            height="50" 
            label="stop" />
    </s:VGroup> 
</s:Application>

What does it look like? I'm glad you asked. Here's a screenshot of the above application running:

BusyIndicator Flex Component

There are a few key things to know:

  • When it's visible, it's animating. When it's hidden (visible="false") or removed from the stage, it's not using any CPU time, which makes it great for Mobile use. However, it is not possible to have it be visible and not animating.
  • This control does not block -- that is, it does not prevent any other user interaction. It is not modal.

The above code has two buttons and space at the top of the application for the busy indicator to be displayed. When you press the Start button, the busy indicator is displayed, for example indicating that you have just sent a message to the server with BlazeDS and are awaiting the response. When you press the Stop button, the busy indicator is hidden.

This component is not currently skinnable, but it does offer a few customization properties. You can set the bar color using the property symbolColor. It accepts a uint, which means you can pass in 0xFF0000, #FF0000, or red, they all do the same thing.

You have already seen my use of the rotationInterval property in the example above. This is a numeric value, the number of milliseconds between rotations, so a value of 1000 would be 1 second, and your throbber would seem pretty slow. Speaking of slow throbbers, let's have some fun.

Suppose you work for the Department of Anger Inspiration, and since you love your job, you want to create a really frustrating BusyIndicator user experience. What could be more frustrating than an indicator that seems to slow to a crawl and then speeds back up? Is something wrong with my computer? My internet connection? The application? Who knows? But ultimately, nobody is going to like this BusyIndicator except your boss.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               creationComplete="onCreationComplete(event)">

    <fx:Script>
        <![CDATA[
            [Bindable]
            private var rotationInterval:int = 10;

            private var rotationIntervalAdjuster:Timer = new Timer(rotationInterval);
            private var adjustmentFactor:Number = 1.2;

            private function onCreationComplete(e:Event):void 
            {
                rotationIntervalAdjuster.addEventListener(TimerEvent.TIMER, tick);
            }

            private function busyOn():void
            {
                rotationInterval = 10;
                rotationIntervalAdjuster.delay = rotationInterval;
                rotationIntervalAdjuster.start();
                throbber.visible = true;
            }

            private function busyOff():void
            {
                rotationIntervalAdjuster.reset();
                throbber.visible = false;
            }

            private function tick(e:TimerEvent):void {

                //let's piss some people off!
                rotationInterval *= adjustmentFactor;

                if (rotationInterval > 3500)
                {
                    rotationInterval = 10;
                }

                rotationIntervalAdjuster.delay = rotationInterval;
            }
        ]]>
    </fx:Script>

    <s:VGroup width="100%" 
              paddingLeft="10" 
              paddingRight="10" 
              paddingTop="10" 
              paddingBottom="10">
        <s:BusyIndicator 
            id="throbber" 
            visible="false" 
            rotationInterval="{rotationInterval}" />
        <s:Button 
            id="start" 
            click="busyOn()" 
            width="100%" 
            height="50" 
            label="start" />
        <s:Button 
            id="stop" 
            click="busyOff()" 
            width="100%" 
            height="50" 
            label="stop" />
    </s:VGroup> 
</s:Application>

Here's what's different from the first example:

  • I added a timer that keeps in sync with the busy indicator by updating its own delay
  • The delay starts out at a decent clip of 1/100th of a second, but the delay increases by 20% with every tick of the timer.
  • When the delay exceeds 3.5 seconds, it is reset to 1/100th of a second. This gives the illusion that things are slowing to a crawl, but then suddenly pick up for a moment, before slowing to a crawl again, over and over.

You can thank me for the promotion later.

Published 2011-05-19 @ 08:14 in Flex Flex 4.5

What I did over my winter vacation

Don't worry, I'll be back to my series on recreating Delicious using ColdFusion 9 and Hibernate soon enough. This is just a quick post for a quick app I wrote last week.

I happen to work at an awesome place where we get the week between Christmas and New Year's Eve off as an unofficial holiday (the university shuts down, so staff such as myself can't work), so I spent last week hanging out at home with my extended family and getting in some extra quality time with my wife and son.

Speaking of which, I've got a baby on the way -- due any day now. Ok, technically due 7 days from now. And during the course of that break, it occurred to me that it was kind of tedious to keep track of my wife's contractions the last time we went through this (with my first son, in 2008) - was the last contraction 90 seconds? 60? Was it 5 minutes apart? 7?

I could surely write an app to take care of tracking contraction start times, durations, and frequencies all with a single button. I checked the Android Market and while there are a few apps out there for this, I really didn't like the UI of any of them and knew my idea was better. So I opened up Flash Builder Burrito and used my existing Flex skills and AIR for Android to throw together this app to help us decide when it will be time to go to the hospital.

(HUGE DISCLAIMER: I am not a doctor, this is just some software I wrote for fun. Always consult a physician when concerning things like your health and having a freaking baby... don't be an idiot!)

All told it only took a few hours to get the UI designed and work out the (basic!) algorithms for averaging durations and frequencies.

The screen shot on the left shows the screen during a rest-time (between contractions) and after 2 are complete; the right screen shot shows the screen during timing of a 3rd contraction.

Screen shot #1 of my contraction timer Screen shot #1 of my contraction timer

I had decided to average the 5 most recent contractions mostly arbitrarily because it sounded good at the time. I don't know if that's a good measurement or not, but it's there, and it would be easy enough for me to change if I had a reason.

I've only tested it on my Droid X, so I'm not sure how it looks or works on smaller-screened Android phones, like the Droid 2, but it works like a charm for me. My wife, after a good laugh, has seemed to warm up to the idea and we've even been practicing using it when she has Braxton Hicks contractions in the evenings.

I'm contemplating putting it up on the Android market. What do you currently-expectant and experienced mothers and fathers out there think? Is it useful?

Published 2011-01-03 @ 04:40 in AIR Android Flex Learning

The Best of ColdFusion 9: CFaaS

I had some information ready to be posted here when I submitted my entry into Ray's Best of CF9 contest, but he covers it pretty well in his review post; and he was kind enough to host the video on his S3 account. I've also posted the video on my Vimeo account, so here it is again for reference:

You can download the source code here. Unfortunately, I haven't found any more time to continue working on this; and I have to admit that as cool as the CFaaS feature is, I'm not terribly motivated to go further with this mail client because I know it will eventually get canned. Why write a mail client when you use Outlook every day?

So it was a fun way to play with Flex 4, the latest Swiz build at the time, AIR, and CFaaS; but I don't think I'll bother continuing to mess with it.

Published 2010-01-20 @ 07:30 in AIR ColdFusion Flex Frameworks Swiz