Übergreifende Navigation leicht gemacht mit Event Listening

Overview
This lesson demonstrates how to use the power of the Gaia event engine to build a global navigation for your site. Make sure you read the Events and Hijacking documentation first.

Global navigation typically enables users to go to the primary pages of a site and also displays the current section the user is viewing.

One of the challenges Flash developers face with global navigation is if the site is told to go to a different page without using the buttons in the global navigation. The global navigation still needs to display what page is currently selected. Additionally, if a user deep links into the site to a specific page, the global navigation needs to set the selected state of the button for the current section, as well.

Without Gaia, the techniques for doing this are varied, but most of them require hooking into the global navigation clip from elsewhere, either through global references, global functions, watchers or explicit listeners. It's definitely not fun or easy.

Using the Gaia event system makes handling this functionality easy and simple to code because Gaia handles most of the work for you.



Site XML
Here is the site.xml for the example site for this lesson.      



Navigation Page
I need a button for each of the main pages on the site. Each of these buttons has three states, up, over and selected. For this example, I'm using a MovieClip symbol with three frames labeled "_up", "_over" and "selected".

Let's take a look at the constructor for the NavPage Class.

AS2 public function NavPage {    super; _alpha = 0; Gaia.api.afterGoto(Delegate.create(this, onAfterGoto)); Gaia.api.afterComplete(Delegate.create(this, onAfterGoto), false, true); }

AS3 public function NavPage {    super; alpha = 0; Gaia.api.afterGoto(onAfterGoto); Gaia.api.afterComplete(onAfterGoto, false, true); }

In the constructor of the NavPage class, I create two listeners, one to the afterGoto event and one to the afterComplete event. The afterComplete listener includes false as the second argument (no hijack) and true as the third argument (only once).

The reason for the afterComplete event listener is that the NavPage won't be loaded until after the first goto is called, because the first goto happens at the launch of the site, before any pages are loaded. So, we listen for the first afterComplete event in case there's a deep link so the proper button will be selected, and only once means it automatically removes the listener after the event is dispatched.



Coding The Buttons
I create a function called initButtons which will set up the buttons.

On each of the buttons I assign a "branch" attribute, which is the valid branch associated with each button. I also create an Array of the buttons and assign an onRelease method for each one that calls Gaia.api.goto with the button's branch property.

AS2 private var buttons:Array; public var BTN_Home:MovieClip; public var BTN_Services:MovieClip; public var BTN_Contact:MovieClip; // public function initButtons:Void {    BTN_Home.branch = "index/nav/home"; BTN_Services.branch = "index/nav/services"; BTN_Contact.branch = "index/nav/contact"; buttons = [BTN_Home, BTN_Services, BTN_Contact]; var i:Number = buttons.length; while (i--) {        buttons[i].onRelease = function {            Gaia.api.goto(this.branch); };    } }

In AS3, it's identical, with the exception of how you handle the button click, and setting buttonMode = true.

AS3 private var buttons:Array; public var BTN_Home:MovieClip; public var BTN_Services:MovieClip; public var BTN_Contact:MovieClip; // public function initButtons:void {    BTN_Home.branch = "index/nav/home"; BTN_Services.branch = "index/nav/services"; BTN_Contact.branch = "index/nav/contact"; buttons = [BTN_Home, BTN_Services, BTN_Contact]; var i:int = buttons.length; while (i--) {        buttons[i].buttonMode = true; buttons[i].addEventListener(MouseEvent.CLICK, onClick); } } private function onClick(event:MouseEvent):void {    Gaia.api.goto(event.currentTarget.branch); }

Notice that there is no code on the buttons themselves that sets them to selected and deselects the others when you click them. This is because the onAfterGoto event listener handles that for us whether it originates here, from the browser, or another button elsewhere in the site, including the right-click menu navigation.



The onAfterGoto Listener
Here is the onAfterGoto method. They're identical in AS2 and AS3, except AS3 uses int instead of Number.

AS2 private function onAfterGoto(event:GaiaEvent):Void {    var i:Number = buttons.length; while (i--) {        var btn:MovieClip = buttons[i]; if (event.validBranch != btn.branch) {            btn.enabled = true; btn.gotoAndStop("_up"); }        else {            btn.gotoAndStop("selected"); btn.enabled = false; }    } }

AS3 private function onAfterGoto(event:GaiaEvent):void {    var i:int = buttons.length; while (i--) {        var btn:MovieClip = buttons[i]; if (event.validBranch != btn.branch) {            btn.enabled = true; btn.gotoAndStop("_up"); }        else {            btn.gotoAndStop("selected"); btn.enabled = false; }    } }

When the afterGoto event occurs, the event object passed contains a property called validBranch. We iterate through the buttons array and compare each button's branch with the validBranch property of the event object. If it is not a match, we enable the button and set it back to its "_up" frame. If it is a match, we send the button to its "selected" frame and disable it.

You can test this functionality by clicking the buttons, using the right-click menu, or using the back/forward buttons in the browser. You will see the buttons select and deselect as you navigate through the site.



Conclusion
That's all there is to it. Whenever a navigation event occurs, the global navigation manages itself simply by listening to the afterGoto event from Gaia. It doesn't matter where the navigation event originated, the afterGoto listener ensures that the event is always handled correctly.

This simple technique can be built upon for global navigation which is more complicated, such as a tree-menu with subsections. What you do in your listener function is up to you.

This is just one way that Gaia's events save coding time and turn challenging tasks into trivial ones.



Example Files
The exact code used to create these buttons is just an example. There are other ways of setting button branches on each button, and how you code your buttons exactly is up to you.

AS3: NavPageAS3.zip

AS2: NavPageAS2.zip