Handling complex navigation in Flex

Question

Hi,

I am building a complex Flex app, and now I am at the point where navigation becomes a problem. I make use of Viewstacks with a Menu Bar, but I am not sure how to clearly structure this.

Depending on the logged in User and chosen Company by the user, he can see different pages. For now I restricted this hiding the appropriate buttons in the Menu Bar. However, not just the menu bar, but also buttons/links from within the app should be able to navigate to each existing page.

When I am loading up an existing page, it needs some initialization (depending on the context it is loaded from). In addition, when a company is chosen, I need to load the status from the backend, and depending on this status a specific page might be visible.

Are there any guidelines how to tackle more complex navigation/site hierarchies in Flex?

Now I am having all my views in a viewstack in the Application, and refer to it with Application.application.appViews.selectedChild -> but that's obviously not best practice, since it violates encapsulation.

Was thinking of implementing some sort of State Machine, which takes care of all this, but not quite sure it this would make sense, or if there is any better way.

Thanks guys, Martin

Answer 1

If it's really complex, you might want to consider breaking your application up into modules.

Also, Mate is a great Flex framework for handling complex communication and navigation. Mate's EventMaps help you centralize the communication and logic between components, modules, etc. And, it keeps you away from the dreaded Application.application references.

Even if you don't use a framework like Mate, you can avoid the Application.application references by having components dispatch custom events that bubble up to the top-level of your application. The top level of the application can listen and catch these events and act on them. I've found this to be a much more flexible approach. I avoid Application.application as much as possible!

If you have a complex menu bar that needs to enable / disable a lot of buttons or options based on many different logic conditions, the State pattern is a decent way to handle it. I built an enterprise-level app that had a "Word-like" button bar at the top...and there were so many different conditions that affected the states of the buttons that I had to centralize the logic in one place. At first I didn't use the State pattern and maintaining the code was a difficult chore. One day, I bit the bullet and re-factored all the conditional logic into a StateManager class. It definitely made life easier from there on out.

Answer 2

Again, you might want to consider using Custom Events to broadcast important events to your application. You can make these events bubble up to the Application level. Then, by adding event listeners at the Application level, you can capture and respond to these events and target components or modules from the Application level. This gives you a central location for handling events and "directing traffic". It also prevents the tight-coupling of the Application.application approach. (Which quickly becomes a nightmare as your application grows and scales!)

For example, your StateManager can contain the case statements for deciding which state your application needs to be in. Once the decision about the current state is determined, you would dispatch a custom StateEvent. (Which might have properties like StateEvent.STATE_CHANGED and StateEvent.CURRRENT_STATE) This event can bubble up to the Application level and be caught by a listener. The listener then calls a method to load / change the state.

Does that clarify it for you? If not, perhaps I can spend an hour or two putting together a little sample.

Let me know,

=Bryan=

Answer 3

I can give you the approach I used for some of your sub-questions, the problem of initializing a page at runtime and how to encapsulate navigation.

For page initialization, the issue I came across is that it's not always known once you navigate to a page whether certain elements should be shown, since it not-only depends on overall user permissions, but also permissions against the currently-selected data. And if the information needed to determine this must be loaded from the server, you cannot show the page as-is while loading the information. So we created a control called LoadingPanel, which is a container that can cover content with a loading indicator until additional information has been received. Here's a shortened version of the ActionScript:

[DefaultProperty("children")]
public class LoadingPanel extends ViewStack
{
    public function LoadingPanel()
    {
        this.resizeToContent = false;
        super();
    }

    public function get children():Array { return _children }        
    public function set children(value:Array):void { _children = value; }

    public function get loadingImageStyle():String {
        return _loadingImgStyle; }
    public function set loadingImageStyle(value:String):void {
        _loadingImgStyle = value;
        if (_loadingIndic)
            _loadingIndic.loadingImageStyle = value; 
    }

    public function showLoadingIndicator():void 
    {
        if (_loadingIndic)
        {
            super.selectedChild = _loadingIndic;
        }
        else
        {
            _pendingLoadingIndic = true;
            var me:LoadingPanel = this;
            var listener:Function = function(event:Event):void
            {
                if (me._pendingLoadingIndic)
                    me.showLoadingIndicator();
            }
            addEventListener(FlexEvent.CREATION_COMPLETE, listener);
        }
    }

    public function hideLoadingIndicator():void 
    {
        _pendingLoadingIndic = false;
        if (_content)
        {
            super.selectedChild = _content;
        }
        else
        {
            var me:LoadingPanel = this;
            var listener:Function = function(event:Event):void
            {
                me.hideLoadingIndicator();
            }
            addEventListener(FlexEvent.CREATION_COMPLETE, listener);
        }
    }

    public function waitForEvent(target:EventDispatcher, event:String):void
    {
        _eventCount++;
        showLoadingIndicator();
        var me:LoadingPanel = this;
        target.addEventListener(
            event, 
            function(evt:Event):void 
            { 
                me._eventCount--; 
                if (!me._eventCount)
                {
                    me.hideLoadingIndicator();                        
                } 
            } 
        );
    }

    override public function addChild(child:DisplayObject):DisplayObject
    {
        var result:DisplayObject = child;
        if (_content)
        {
            result = _content.addChild(child);
            invalidateDisplayList();
        }
        else
        {
            if (!_children)
            {
                _children = [];
            }
            _children.push(child);
        }
        return result;
    }

    override protected function createChildren():void
    {
        super.createChildren();

        if (!_content)
        {
            _content = new Box();
            _content.percentWidth = 1.0; 
            _content.percentHeight = 1.0; 
            super.addChild(_content);
        }

        if (!_loadingIndic)
        {
            _loadingIndic = new LoadingIndicator();
            _loadingIndic.percentWidth = 1.0; 
            _loadingIndic.percentHeight = 1.0; 
            _loadingIndic.loadingImageStyle = _loadingImgStyle;
            super.addChild(_loadingIndic);
        }

        if (_children)
        {
            for each (var child:DisplayObject in _children)
            { 
                _content.addChild(child);
            }
        }
    }

    private var _loadingImgStyle:String = "loadingIndicatorDark";

    private var _loadingIndic:LoadingIndicator = null;
    private var _content:Box = null;
    private var _children:Array = null;
    private var _pendingLoadingIndic:Boolean = false;
    private var _eventCount:int = 0;
}

We typically used these by wrapping a LoadingPanel around content then calling the panel's waitForEvent method. Typically, the event we'd wait for is for a web service response to come in. The class also lets you wait on multiple events before it will show its children.

Another recommendation I would make for your project is that you look into deep linking in Flex. Our users appreciated being able to bookmark a resource/location in our complex Flex application as well as being able to hit refresh in their browser and return to the same "page" they were on. But implementing deep linking also helped me out for one of the problems you mentioned; how do you send the UI to a specific page in an encapsulated manner? The way we did it is by raising a bubbling navigation event containing a destination "URL." A top-level navigation "manager" then handled interpreting the URL and "sending" the user to the appropriate area.

Hopefully this will give you some ideas for some of the challenges you face.