Question

Is there a way within a Flex Mobile application to listen for events with a <s:View> which is within a <s:ViewNavigator>? Let’s say I have the following application structure:

---

Main application:

<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  creationComplete="databaseConnection(event)">

  <s:ViewNavigator id="tasks" width="100%" height="100%"
                       label="Tasks" firstView="views.TasksView"
                       title="Tasks" icon="@Embed('assets/icons/tasks.png')">
  </s:ViewNavigator>
</s:TabbedViewNavigatorApplication>

view.TasksView:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">

  <s:Button label="New View" click="{navigator.pushView(views.AddTask)}"/>
</s:View>

view.AddTask:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
                creationComplete="{dispatchEvent(new Event("happened"))}">

  <fx:Metadata>
    [Event(name="happened", type="flash.events.Event")]
  </fx:Metadata>
</s:View>

Say I wanted to listen for the happened event way back in my main application. How can I listen for such an event?

Thank you for your time.

Answer 1

Yes you can, it can be done something like this:

First in your application add this property to your root tag:

initialize="attachNavigationListeners(event)"

The next method will add a complete event to the navigator which needs the custom events:

private function attachNavigationListeners(event : FlexEvent) : void {
    navigator.addEventListener(Event.COMPLETE,attachViewListeners);
}

Then we need the view listeners adding when navigator is complete, i have this separate so you can have as many views here as you need, could use a switch statement:

private function attachViewListeners(event : Event) : void {
    if(navigator.activeView is FirstView) {
          addListenersToFirstView();
    }
}

Add listener to the view in question:

private function addListenersToFirstView() : void{
    if(navigator.activeView is Firstview) {
          var view: Firstview = navigator.activeView);
          view.addEventListener("happened", handleHappened);
     }
}

Finally handle the event:

private function handleHappened(event:Event) : void{
    // I hope something really did happen :)
}

NOTE

Obviously I have just outlined all the steps needed here, I have not provided a full working example to copy and paste, but as you will know what you’re doing to ask this question I hope this can help you, also you have already shown how to dispatch the event from your view.

I have also used string “happened”, but you would have a const like CustomEvent.HAPPENED or something that suits you to avoid use of strings in this way.