• Choose a category
• All
• Classic-Fiction

private var currentView:BaseView;

private viewList:Object = {};

public function init(timeline:MovieClip):void {

this.timeline = timeline;

createView("menu", new MenuView());

createView("sessions", new SessionsView());

createView("session", new SessionView());

}

private function createView(name:String, instance:BaseView):void {

viewList[name] = instance;

}

The initial view display

When the application first starts, the document class loads an XML document that contains all the data regarding the conference, such as the list of sessions and speakers. While this is taking place, the ViewManager displays an introductory view without any interactivity. Let’s modify the init method to add this functionality. The setCurrentView method will be discussed in the next paragraph:

public function init(timeline:MovieClip):void {

this.timeline = timeline;

createView("intro", new IntroView());

createView("menu", new MenuView());

createView("sessions", new SessionsView());

createView("session", new SessionView());

setCurrentView({view:"intro"});

}

The current view display

Once the data is loaded, parsed, and stored in the model part of the application, the document class calls the onDataReady method on the ViewManager:

// set up application, model and get data from external xml

viewManager.onDataReady();

In turn, the ViewManager defines the new view by calling the setCurrentView method and passes an object with the property view to define the view to display:

public function onDataReady():void {

setCurrentView({view:"menu"});

}

The setCurrentView method removes the previous view if there is one. It then stores the view in the currentView variable and adds it to the display list. Two methods, onHide and onShow, are called via the IView interface, discussed next. Each view uses the methods to clear or add from the display list and destroy objects.

The method also registers the view for a custom ClickEvent.NAV_EVENT with the setCurrentView method of the ViewManager as the callback function. We will review the use of this custom event in the section Creating a custom event:

import view.ClickEvent;

private var currentView:BaseView;

private function setCurrentView(object:Object):void {

// remove current view

if (currentView) {

currentView.removeEventListener(ClickEvent.NAV_EVENT, goTo);

IView(currentView).onHide();

timeline.removeChild(currentView);

currentView = null;

}

// add new view

currentView = viewList[object.view];

if (object.id != undefined) {

currentView.setID(object.id);

}

currentView.addEventListener(ClickEvent.NAV_EVENT, goTo, false, 0, true);

IView(currentView).onShow();

timeline.addChild(currentView);

}

// pass event data object

private function goTo(event:ClickEvent):void {

setCurrentView(event.data);

}

The IView interface

It is imperative that all views have the two methods, onHide and onShow, so we use an IView interface. Each view also needs a method—here it is clickAway—to navigate to the next view. In our application, this always occurs upon user interaction. We will therefore use a MouseEvent:

package view {

import flash.events.MouseEvent;

public interface IView

{

function onShow():void

function onHide():void

function clickAway(event:MouseEvent):void

}

}

Creating a custom event

A custom event is used to pass the destination view and additional data, if needed, from the current view. For example, if the user is looking at the screen displaying all the conference sessions and clicks on a specific session, we use the event object to pass the session ID to the Session view, as illustrated in Figure 16-1:

{view:"session", id:5}

Figure 16-1. The mechanism to send destination and data from the current view to the destination view via the ViewManager

The custom class is as follows. Its data property is an object, so we can add additional parameters as needed:

import flash.events.Event;

import events.ClickEvent;

final public calls ClickEvent extends Event {

public static const NAV_EVENT:String = "NavEvent";

public