Blog

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!