go to 'View'

go to next page

Controller

This section discusses both the driver code in portfoliodriver.fla and the Controller class, PortMgr.

Architecture and Handlers

class PortMgr
{
  static var ON:Boolean = true;
  static var OFF:Boolean = false;
  static var NO_SIZE:Number = -9999999;
  static var NO_TIME:String = "N|A";

  // core
  private var __items:Array;           // collection of PortItem references
  private var __layout:Array;          // collection of LayoutItem references
  private var __parent:MovieClip;      // parent reference for attached clips
  private var __currentTitle:String;   // currently playing portfolio item
  private var __portfolioURL:String;   // url of selected portfolio item
  private var __layoutCount:Number;    // number of layout items
  private var __portfolioCount:Number; // number of portfolio items

  private var __view:PortView;         // Portfolio View instance (View)
  private var __model:PortfolioModel;  // Portfolio Data instance (Model)
  private var __styleMgr:StyleMgr;     // Style manager
.
.
.

The Controller contains references to the Model and the View, however the View has no direct visibility to the Model. The only data required to display layout items is contained in the __layout and __items arrays. This information is requested from the Model and passed to the View.

Model data is loaded once and placed in either container classes or layout classes that can draw their components on Stage, so there is no immediate need for the View to have direct visibility to the Model.

The Controller also owns the Style Manager.

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

__onPortfolio - handles 'portfolio' event from Model

When the 'portfolio' event is dispatched from the Model, the portfolio xml file has been completely loaded and processed. This handler requests a copy of the __items array from the Model (containing PortItem references for each portfolio item). It updates the portfolio item count and sends this count in a 'portfolio' event to the driver.

__onLayout - handles 'layout' event from Model

The Model dispatches a 'layout' event when processing of the layout file is finished. The Controller handles this event by requesting a copy of the layout data, which is stored in the __layout array. The number of layout items is queried and sent to the driver via a 'layout' event.

__onError - handles 'error' event from Model and 'viewerror' event from View

This is the general error handler in the Controller. Currently, the Controller requests the View to display the error screen. A logger function is called that is currently a stub. In a more sophisticated version of this code, the logger could be used to transfer detailed error information to a server.

__onClick - handles 'onClick' event from View

This handler is executed whenever the user clicks on a Glyph. The event Object contains all the relevant portfolio data. This information is formatted and the text is displayed in the SYNOPSIS area in the line of code,

   __view.setText( "SYNOPSIS", synStr );

Now that the user has actually clicked on a portfolio sample, they may want to view or play the sample after reading the synopsis. The PLAY button is turned on,

   __view.modifyView( "PLAY", ON );

__onPlayClicked - handles 'onPlayClick' event from View

When the viewer clicks on the PLAY button, the View dispatches an 'onPlayClick' event. Currently, the portfolio sample is displayed in a new browser window. In the future, it could be displayed in an asset viewer that is part of the layout. The STATUS area is updated with a message that the current portfolio sample is now playing. The PLAY button is turned off.

__onGlyphComplete - handles 'onGlyphComplete' event from View

After all Glyphs are drawn in the thumbnailer, the View dispatches an 'onGlyphComplete' event. The controller responds to this event by requesting that the View load thumbnail images into the Glyphs.

__onThumbComplete - handles 'onThumbCompletee' event from View

When all thumbnail images are loaded into their Glyph image containers, the View dispatches an 'onThumbComplete' event. The Controller's response to this event is to prompt the user to click on any thumbnail image for more information. This message is written into the STATUS component with another setText() call.

Methods

The PortMgr class exposes the following public methods.

public function loadPortfolio(_file:String):Void

This method instructs the Model to load the portfolio data file. There is no error checking in this method as an error handler has already been registered with the Model. Any problem with the file name should be flagged and reported in the Model.

public function loadLayout(_file:String):Void

This method instructs the Model to load the layout file.

public function init():Void

This method initializes the application

// don't initialize until all data has been loaded
if( __portfolioCount > 0 && __layoutCount > 0 )
{
  // broadcast style information to all registered components
  __styleMgr.update();
 
  // Set Layout information in View
  __view.setLayout(__layout);

  // Display initial Layout elements
  __view.modifyView( "BACKGROUND", ON );
  __view.modifyView( "INSTRUCT" , ON );
  __view.modifyView( "SCROLLER" , ON );
  __view.modifyView( "STATUS" , ON );

  dispatchEvent( {target:this, type:"init"} );
}
else
  dispatchEvent( {target:this, type:"error", 
  message:"Portfolio and Layout collections are empty."} );

The initialization process consists of the following steps,

1- Broadcast style updates to all components in the layout.

2- Provide the View with the necessary layout information in the __layout array.

3- Display the BACKGROUND, INSTRUCT, SROLLER, and STATUS layout items.

Display of remaining layout items (SYNOPSIS and PLAY) depend on user interaction with the initial layout.

public function displayThumbnails():Void

This method allows the driver to control when thumbnails are displayed in the SCROLLER. The Controller displays the SYNOPSIS area and instructs the View to load and display thumbnail images.

Driver Code

In the Architecture section, it was mentioned that the application is currently implemented in four discreet steps,

1) Load layout file - dispatch event on completion.

2) Load portfolio file - dispatch event on completion.

3) Initialize the primary application view - dispatch event on completion.

4) Load thumbnail images into container

The driver defines handlers for the 'layout', 'portfolio', and 'init' events from the Controller. It also defines two handlers to manage the preloader. The driver also sets the base depth in the Controller to ensure that the Controller does not overwrite assets created at specific depth levels by the driver.

After creating an instance of the Controller, the driver begins the application by calling the Controller's loadLayout() method. There is no particular reason to load the layout file before the portfolio file. Reverse the order if you prefer.

The Controller loads the layout file. After the layout file is processed, the driver responds to the Controller's 'layout' event in the __onLayout handler. The driver requests that the portfolio file be loaded. After processing the portfolio data, the driver responds to the Controller's 'portfolio' event in the __onPortfolio handler. The driver requests that the Controller initialize the application. If there are no problems, the Controller dispatches the 'init' method. The driver responds in the __onInit function. It instructs the preloader to play its closing animation. When that animation is complete, the preloader is turned off. The driver instructs the Controller to load and display thumbnail images in the thumbnailer.

Exercise the Application

Try the application with different sample layouts. Copy each of the following files to layout.xml .

horizontal1d.xml (horizontal 1d thumnbailer)

horizontal2d.xml (horizontal 2d thumbnailer)

vertleft.xml (vertical, 1d thumbnailer with scrollbar on left)

vertright.xml (vertical, 1d thumbnailer with scrollbar on right)

vert2dleft.xml (vertical, 2d thumbnailer with scrollbar on left)

vert2dright.xml (vertical, 2d thumbnailer with scrollbar on right).

Execute the portfoliodriver.swf file and observe how the layout adjusts.

I recommend creating your own thumbnail images and modifying the portoflio.xml file to reflect your own work. Please note that the samples referenced in the current portfolio.xml file no longer reside on my site, so you will receive a 404 error if you attempt to play the sample.

go to 'View'

go to next page