go to 'Model'

go to next page

View

This section provides a high-level deconstruction of the PortView class, which functions as the primary View class for the Portfolio Viewer. Other than SimpleAlert, there are no helper classes for the View.

Low-Level vs. High-Level Interactivity

Although the primary purpose of the View is to display layout items, some of those items are interactive, such as Glyphs inside the thumbnailer. Strictly speaking, the View should not be concerned with interactivity, however, it is sometimes convenient to handle low-level interactivity within the View.

For tutorial purposes, interactivity is handled partially within the View and partially within the Controller. Currently, the View handles low-level Glyph interaction, which may involve collecting information and dispatching another event to the Controller.

All high-level interaction is handled by the Controller. Whether or not to divide such responsibility and where to make the division is subjective and application-dependent. Another alternative is to use the AS 2 Event Bubbler described in the Event Handling section to bubble all events up to the Controller.

If there is a lot of complex display logic in the View, then it may be better to bubble all events up to the Controller in order to make the View easier to understand and more maintainable.

PortfView Class and Event Handlers

class PortView
{
  // initialize Event Dispatcher
  private static var INIT_DISPATCHER = EventDispatcher.initialize(PortView.prototype);

  static var VISIBLE:Boolean = true;
  static var HIDDEN:Boolean = false;
  static var ALERT_DEPTH:Number = 200;

  // core
  private var __parent:MovieClip;    // reference to parent
  private var __items:Array;         // reference to portfolio items
  private var __baseDepth:Number;    // base depth for Layout components
  private var __layout:Array;        // collection of LayoutItems 
  private var __myAlert:SimpleAlert; // reference to SimpleAlert

  // glyphs
  private var __loadCount:Number;    // thumbnail counter
  private var __selectedGlyph:Glyph; // currently selected Glyph
.
.
.

The PortView class requires references to the layout and portfolio items arrays from the Model. This information is passed to the View from the Controller and stored in local arrays, __items and __layout.

The View is given a base depth (stored in __baseDepth) to use as the starting depth for layout items. While processing Glyphs, a load counter is maintained to update the STATUS area (comparing current number of loaded thumbnails to the total). A reference to the currently selected Glyph is used to toggle the Glyph's 'selected' indicator on and off.

A number of handlers are defined to deal with the following events.

__onClick - handles 'click' Glyph event

This function toggles the 'selected' indicator of the previously selected Glyph off and the newly selected Glyph on. The ID of the selected Glyph is used to lookup the PortItem reference in the __items array. The item data is extracted and then loaded into the event Object. The data is sent to the Controller in the 'onClick' event.

I'm getting a bit ahead of myself, but one suggestion for improvement is to send a reference to the PortItem instance in the event Object. That way, if PortItem ever changes, it is not necessary to modify this event handler.

__onThumbLoad - handles 'onThumbLoad' Glyph event

The 'onThumbLoad' event is dispatched from a Glyph whenever the .jpg thumbnail is fully loaded into the Glyph's image container. The View increments the thumbnail counter and displays a progress message in the STATUS component. If the load count equals the total, then the View dispatches the 'thumbComplete' event to the Controller to indicate that all thumbnails have been loaded.

__onThumbRollOver - handles onTthumbRollOver' Glyph event

Whevever the viewer rolls over a Glyph, this handler obtains a reference to the Glyph from the event Object's target property. The handler accesses the Glyph's TITLE property and displays the title in the STATUS component.

__onThumbRollOut - handles onTthumbRollOut' Glyph event

When the viewer rolls out of a Glyph, this handler displays a null String in the STATUS component.

__onPlayClick - handles 'click' event from PLAY button

When the viewer clicks on the PLAY button, this handler dispatches the 'onPlayClick' event to the Controller. It is the Controller's responsibility to determine how to handle clicking on the PLAY button.

__onOK - handles 'ok' event from SimpleAlert

An event is dispatched whenever the viewer clicks on the 'Cancel' or 'OK' buttons in the SimpleAlert popup. This handler responds to the 'OK' event. For tutorial purposes, both events result in disabling the SimpleAlert popup. More general-purpose handlers are left as an exercise.

In this implementation, only very low-level Glyph interactions result in specific action by the View and those only involve adjusting the display of other layout items such as the STATUS component. So, you could make an argument that handling such interactivity is within the responsibility of the View. All other interactive decisions are made by the Controller.

Methods

The PortView class exposes the following public methods.

public function modifyView( _c:String, _on:Boolean ):Void

This method modifies the current layout by creating new components or turning existing components on and off. A reference to the current component class is returned from the __layout array. If the component has not yet been initialized, it is created in the private __createUI() method,

private function __createUI( _c:String, _l:LayoutItem):Void
{ 
  _l.addEventListener( "viewerror", __onError );

  switch( _c )
  {
    case "BACKGROUND" :
      _l.init(__parent, "background", __baseDepth++);
    break;

    case "INSTRUCT" :
      _l.html = true;
      _l.init(__parent, "instructions", __baseDepth++);
    break;

    case "SCROLLER" :
      _l.init(__parent, "scroller", __baseDepth++);

      _l.addEventListener( "onThumbRollOver", __onThumbRollOver );
      _l.addEventListener( "onThumbRollOut" , __onThumbRollOut  );
      _l.addEventListener( "onThumbLoad"    , __onThumbLoad     );
      _l.addEventListener( "click"          , __onClick         ); 
    break;

    case "STATUS" :
      _l.init(__parent, "status", __baseDepth++);
      _l.label = "Status";
    break;

    case "SYNOPSIS" :
      _l.init(__parent, "synopsis", __baseDepth++);
      _l.html = true;
      _l.label = "<p>No Item Selected</p>";
    break;

    case "PLAY" :
      _l.init(__parent, "play", __baseDepth++);
      _l.label = "Play";
      _l.addEventListener( "click", __onPlayClick );
    break;
  }
}

public function displayThumbnails(_items:Array):Void

This method allows the Controller to determine when to display thumbnail images inside Glyphs. It also sets the reference to the internal __items array that is used in the __onClick handler. Notice the two lines of code,

__layout["STATUS"].label = "Loading thumbnails ...";
__layout["SCROLLER"].displayThumbnails(_items);

__layout["STATUS"] is a reference to the STATUS component (a base LayoutItem). __layout["SCROLLER"] is a reference to the thumbnailer, implemented in a custom class. With the current XML data, this returns a reference to the Scroller class.

The first line of code displays a message in the STATUS component. The second line of code calls the displayThumbnails() method of the Scroller class.

public function setText( _c:String, _t:String ):Void

This method is provided so that the Controller may quickly set the text in any text-oriented component in the layout. If a new textual component is added to the layout, it must be manually added to the setText() method in order for the Controller to set the text.

public function displayError(_e:Object):Void

This method displays error messages in the SimpleAlert popup. You are encouraged to replace this with your own custom error screen and more general-purpose error handling.

go to 'Model'

go to next page