go to 'Layout Items'

go to next page

Custom Layout Classes

Several components in the portfolio viewer (as well as related applications that might derive from this code base) require more sophisticated display than the base LayoutItem class. Such functionality is implemented in custom components of type 'CUSTOM' in the layout.xml file. Custom components are associated with custom classes. This allows a subclass of LayoutItem to be associated with the creation and display of a custom component.

In order for custom classes to work seamlessly, we need a convenient mechanism for automatically locating and instantiating custom classes.

Class Finder

A class finder utility takes advantage of the fact that class references are stored in the _global namespace. As it happens, a class finder is supplied with the base Flash 8 Professional install in the mx.utils package. To use this utility, import mx.utils.ClassFinder;

It is necessary to have some reference to the class in order for the ClassFinder to work (otherwise, there will be no reference in _global). This is accomplished in the Portfolio Viewer by adding a reference to all custom classes in the Model (LayoutData class). In this project, two custom classes are used; a multidimensional thumbnailer or scoller and a lightweight TextArea component built from a TextField and UIScrollBar. References to these classes can be found in the LayoutData class,

var __customScr:Scroller;
var __customTA:TALight;

It is not necessary for the references to be initialized. Any new custom class added to the application is referenced in LayoutData (part of the Model). If the component is marked as type CUSTOM, the class name is parsed from the XML file. From there, it is located and instantiated. If the type is not CUSTOM, a LayoutItem class is instantiated. This process is implemented with the following code.

var customClass:String = _itemNode.attributes["class"];
if( customClass != undefined && myType != LayoutItem.CUSTOM )
{
  dispatchEvent( {target:this, type:"error", 
  message:"Custom Class may only be associated with CUSTOM component type; 
  component name: " + layoutName} );
  return;
}

// Reference to either LayoutItem or custom class
var item = null;

if( customClass != undefined )
{
  var __custom:Function = ClassFinder.findClass(customClass);
  if( __custom == undefined )
  {
    dispatchEvent( {target:this, type:"error",
    message:"Invalid class: " + customClass + " for component " + layoutName} );
    return;
  }
  item = new __custom();
}
else
  item = new LayoutItem();

Copy and paste this code into any application where a class needs to be instantiated by its name. Make sure the class is referenced somewhere in the code, as illustrated above.

TALight Example

The TALight class is one example of a custom component. This class implements a primitive TextArea component using stone knives and bear skins (aka TextField and UIScrollBar). The class extends LayoutItem, so it has access to all the base class properties and methods.

The primitive TextArea is wrapped inside a container clip. A TextField is created at depth 1 inside the container clip. A UIScrollBar instance is created at depth 2. The TALight init() method overwrites the base class method to perform initialization of the custom component. In this case, initialization involves creating a TextField and a UIScrollBar. The UIScrollBar is linked to the TextField using setScrollTarget().

Several other base methods are overwritten to implement functionality specific to the TALight class. Notice that the label setter function has been modified to turn the UIScrollBar on and off depending on whether or not scrolling is required,

public function set label(_s:String):Void
{
  if( __init )
  {
    __label = _s;
 
  if( __component.html )
    __component.htmlText = __label;
  else
    __component.text = __label;

  // display scroller?
    __tfScroller.visible = (__component.maxscroll > __component.scroll);
  }
  else
   __label = _s;
}

I'm not sure why I used 'label' instead of 'text' as a property. As I admitted in a previous section, I'm a couple cans short of a six-pack :) There are several other ways this class could be implemented. You are encouraged to modify the code and experiment.

Another custom class in the Portfolio Viewer is a multidimensional thumbnailer. The thumbnailer is implemented with the Scroller class, which is another subclass of LayoutItem. Before the thumbnailer can be deconstructed, a utility to manage thumbnails is required.

go to 'Layout Items'

go to next page