go to 'Multi-dimensional Thumbnailer'

go to next page

Model

This section provides a high-level deconstruction of the Model classes for the portfolio viewer. The primary Model class is PortfolioModel. The PortfolioModel class employs two helper classes for loading, parsing, and management of portfolio and layout data, PortfolioData and LayoutData.

PortfolioModel Class

The PortfolioModel class is responsible for loading and parsing XML files. During the parsing process, collections of style, layout, and portfolio information are loaded into container classes.

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

  // core
  private var __portFile:String;   // URL of portfolio data
  private var __portXML:XML;       // XML Object for portfolio data
  private var __layoutFile:String; // URL of portfolio data
  private var __layoutXML:XML;     // XML Object for portfolio data

  // portfolio data
  private var __items:Array;            // collection of PortItem instances
  private var __portData:PortfolioData; // helper class for portfolio data

  // layout data
  private var __layout:Array;           // collection of LayoutItem instances
  private var __styleMgr:StyleMgr;      // StyleMgr reference
  private var __layoutData:LayoutData;  // helper class for layout data
. 
.
.

PortfolioData Class

There are numerous methods for parsing XML in Flash. For most projects, I use XPath. A good alternative to the XPathAPI built into Flash is XFactorStudio's XPath for AS 2 - www.xfactorstudio.com .

For tutorial purposes, I did the parsing old-school, so there is room for you to improve upon its implementation.

The parse() method is responsible for parsing the portfolio XML, creating PortItem references, setting properties in those references, and storing the references in the items array passed from PortfolioModel.

Most of the work is performed in the private __parseItem() method. A PortItem reference is created at the beginning of the method. As each node is processed, some error checking is performed. If no immediate errors are found, the property is placed in the PortItem class for that item.

After processing all items, PortfolioData dispatches a 'portfolio' event.

LayoutData Class

As with PortfolioData, there is a parse() method in LayoutData that accepts a reference to the layout XML Object, Style Manager, and the layout data array as arguments. Layout items are stored by layout name, not linear index.

The layout file also contains style information, so the parsing work is divided among two private methods, __parseStyle() and __parseItem(). The __parseStyle() method creates new StyleLayout references. When finished parsing all style information for a single, named style, that style is added to the Style Manager.

The LayoutData class is responsible for creating either LayoutItem or custom class references based on the type of layout item. Any time a new custom class is created, a reference to that class must be placed in LayoutData. Currently, there are two custom class references,

var __customScr:Scroller;
var __customTA:TALight;

If you have not already done so, read the section on Custom Classes for more information.

After creating a reference to either a LayoutItem or custom class, __parseItem() works its way through each <item> node. The child nodes are <data> and <style>. The <data> nodes are parsed by the private __parseDataItems() method. The <style> node is used to load the style name needed to register the current item as a listener for style broadcasts.

A reference to the current layout item by name is added to the layout items array. When all style and layout data have been processed, LayoutData dispatches a 'layout' event.

Once the Model finishes processing the portfolio and layout data, references to the container classes are stored in two arrays, both of which can be accessed by the Controller. The Style Manager contains collections of all named styles and the components associated with those styles.

go to 'Multi-dimensional Thumbnailer'

go to next page