ViewStack in Flash

As the tasks, goals, and due dates pile up, I wonder what the heck I was thinking in even believing I could accomplish all of the things set before me. I fear boredom worse than death, and this has formed a masochistic behavior in setting unattainable goals for myself. I don’t necessarely get all that frustrated not attaining them all, because I’d much rather be swamped then wondering what there was to do.

A class I thought I’d share is the ViewStack. I implemented my own version in Flash. The ViewStack is one of the hot container classes Flex has. It basically creates a bunch of components in itself, and lets you toggle their visibility. What this acheives is an extremely easy way to create wizards and other light weight, multi-step processes. Mine doesn’t compete with Flex’; there is a lot more that the Flex version has both implemented in it, and underneath from the inheritance tree, but mine serviced fine for lightweight component toggling. I built mine from scratch and didn’t really compare to the actual AS file, so I’m sure mine pales in comparison, but hopefully this’ll give you a better appreciation of what Flex has to offer, and how implementing this, already built in Flex, stuff is kind of… uncool to do in Flash. I’d rather just have an SWC that worked, and legally. It’ll be challenging to see how I handle transitions…

Anyway, to get it to work, you’ll need 1 additional method in your mx.core.View class:

function getChildIndex(child:UIObject):Number
{
        var i:Number = numChildren;
        while(i--)
        {
                if(getChildAt(i) == child)
                {
                        return i;
                }
        }
        return null;
}

Haven’t hardcore tested the above function, and it’s different than Flex’ implementation (which I’m sure has been QA tested), so use at your own risk.

Then, the ViewStack class:

/*
class: ViewStack
by Jesse Warden
jesse@jessewarden.com

The ViewStack implementation I've done
is a gross simplification on the Flex one.
Basically, it just takes controls,
and controls their visibility.

If you want to buy me Flex, send me an email!

*/

import mx.core.View;
import mx.core.UIObject;

class ViewStack extends View
{
        // group: UIComponent variables
        static var symbolName:String = "ViewStack";
        static var symbolOwner:Object = ViewStack;
        public var className:String = "ViewStack";
        
        // group: private
        private var _selectedChild:UIObject;
        private var _selectedIndex:Number;
        
        // group: getter/settters
        // ---------------------------------------------------------------------------
        public function get selectedChild():UIObject
        {
                return getChildAt(selectedIndex);
        }
        
        // ---------------------------------------------------------------------------
        public function set selectedChild(obj:UIObject):Void
        {
                _selectedIndex = getChildIndex(obj);
                refresh();
        }
        
        // ---------------------------------------------------------------------------
        public function get selectedIndex():Number
        {
                return _selectedIndex;
        }
        
        // ---------------------------------------------------------------------------
        public function set selectedIndex(val:Number):Void
        {
                _selectedIndex = val;
                _selectedChild = selectedChild;
                refresh();
        }
        
        // group: methods
        // ---------------------------------------------------------------------------
        function ViewStack()
        {
        }
        
        // ---------------------------------------------------------------------------
        public function init():Void
        {
                super.init();
                
                _selectedIndex = 0;
        }
        
        // ---------------------------------------------------------------------------
        private function doLayout():Void
        {
                super.doLayout();
                refresh();
        }
        
        // ---------------------------------------------------------------------------
        private function addLayoutObject(obj:Object):Void
        {
                refresh();
        }
        
        // ---------------------------------------------------------------------------
        private function refresh():Void
        {
                var i:Number = numChildren;
                while(i--)
                {
                        var child = getChildAt(i);
                        child.setVisible(false);
                }
                
                var selChild = getChildAt(selectedIndex);
                selChild.setVisible(true);
        }
}

Finally, example usage (drag Button and TextArea components into your Library, then put your ViewStack MovieClip on stage, and name it “mc”):

mc.createChild(mx.controls.Button, "cal1");
mc.createChild(mx.controls.TextArea, "assign1");

function onKeyDown()
{
        switch(Key.getCode())
        {
                case Key.LEFT:
                mc.selectedChild = mc.cal1;
                break;
                
                case Key.RIGHT:
                mc.selectedChild = mc.assign1;
                break;
                
                case Key.UP:
                mc.selectedIndex = 0;
                break;
                
                case Key.DOWN:
                mc.selectedIndex = 1;
                break;
        }
}

Key.addListener(this);

It is not as efficient as Flex b/c it doesn’t implement a creationPolicy, doesn’t resize to the content, and a ton of other things… but the concept is cool, so far works in a prototype.

The weird comments are for NaturalDocs. I got it to work, and really dig how easy it is to add documentation to my code without crazy comments. Once I got a bat file setup, it was really easy to recompile my documentation after a code change… and NaturalDocs is smart enough only to recompile the changed class. Good stuff!

9 Replies to “ViewStack in Flash”

  1. Because you might have other objects created in your class (although you should let View handle this), you cannot depend on depth. Although I do like the Flex API better, the point here is depth, currently, is not always accurate of what is in your class AND in the future, this may change…

  2. Cool stuff, Jesse. But why do you edit the mx.core.View class? Editing MM’s base classes seems a little dangerous don’t you think? Why don’t you just extend mx.core.View with the new method?

  3. If you look at the View class compared to the Flex class, it is incomplete. As stated in my other article about View.

    I think View needed a few other methods to make it a worthwhile class to inherit from.

    It is dangerous, but I see the benefit from it, so do all of my classes, and we have QA setup in place (plus other developers to body check my work). The class is inheritanly not finished to my needs, and I don’t feel like changing the existing class with prototype because I actually have access to it, unlike MovieClip or Array.

    Extending a class JUST to implement one method seems like a bad decision to me. Implementing a Decorator pattern via prototype doesn’t seem like a good decision either since everyone is inheriting form it, so why not just improve on the base class?

    I hope that explains my decision.

  4. …ok, just had a talk with my co-worker who is a pretty good developer. He explained my attitude is from someone who hasn’t done a lot of collaboration with other developers on projects. Another developer would have no idea that I had implemented those methods. I should instead inherit like you said.

    Live and learn!

Comments are closed.