The StyleManager fulfills the following tasks:

• Setting styles to a display object.
• Calculating and returning styles for a particular display object.
• Notifying display objects, if style values change.

A distinction between object styles and properties can be made by looking at the object's state. While properties usually switch the object from one state to another, a changed style keeps the objects state but modifies its visualisation or visual behaviour. It is indeed not always obvious whether an entitiy should be modeled as a property or as a style.

While a property has to be set directly to an object, a style can also be set to a display ancestor and will be recognised by the object we want to apply the style to.

Both setting and getting a style examines the display hierarchy branch from which the particular object is part of. In order to do so, all objects of the display list need to implement the IStyleManagerClient interface.

A style set to a particular display object is available to this object and all of its children. Getting a style value performs the following lookup throughout the objects parent chain:

• Test for a directly assigned style.
• (If undefined:) Test the value returned by parent.getStyle().
• (If undefined:) Test for a default style that has been defined for the object.
• Return the value found or undefined.

  var view : ParentView = new ParentView();
  view.setStyle("color", 0x0000FF);
  addChild(view);

  var childView : ChildView = new ChildView();
  view.addChild(childView);
  
  childView.traceStyle();
  
  // in ChildView
  public function traceStyle() : void {
   trace (getStyle("color")); // 0x0000FF
  }
  

A style can be set to any object without any restriction. If the object already is added to the display list, the entire child tree of that object will be traversed to notify children about a style change. Therefore, setting styles performs best before the object is added to the stage.

  var view : MyView = new MyView();
  view.setStyle("color", 0x0000FF); // setting style before adding to the display list
  addChild(view);
  

Default styles are necessary to set up initial values the view can use, if not explicitly set at runtime.

To receive notification about a particular style change, the object must declare this style as a default style. Otherwise no notification will be sent to this object. Setting a style to a view will traverse the entire view's child tree and notify any child view who defines the just set or changed style value.

  public function MyView() {
   _styleManager = new StyleManager(this);
   _styleManager.setDefaultStyles([
    "color", 0xFF0000
   ]);
  }
  ...
  public function styleManagerStyleChangeHandler(property : String, value : *) : void {
   if (property == "color") {
    trace ("color property has changed to " + value);
   }
  }
  

In certain circumstances we want to set different styles for child objects of the same type. E.g. a view contains two labels, and we want the first label appearing in red color and the second in blue. view.setStyle("color", "red") would also be applied to the second label. To address this issue, it is possible to pass a view selector to the setStyle method.

  public function MyView() {
   var label1 : Label = new Label();
   label1.name = "Label1";
   addChild(label1);

   var label2 : Label = new Label();
   label2.name = "Label2";
   addChild(label2);
  }
  ...
  
  // in Main
  var view : MyView = new MyView();
  view.setStyle("color", "red", ["Label1"]);
  view.setStyle("color", "blue", ["Label2"]);
  addChild(view);
  

The view selector is an Array of either view names or types and is not restricted in size. The selector items within a selector are ordered from unspecific (left) to specific (right).

  // all Button objects
  // or any child of a Button
  setStyle("color", "red", [Button]);

  // all views with the name "background"
  // or any child of such a view
  setStyle("color", "red", ["background"]);

  // all views with the name "background"
  // which are Button instances or child of a Button
  // of that name
  setStyle("color", "red", [Button, "background"]);

  // all views with the name "selected", which
  // is child of a view with the name "background",
  // or any child of such a view
  setStyle("color", "red", ["background", "selected"]);

  // all Rect objects, which are children of a Rect object
  // or any child of such a Rect
  setStyle("color", "red", [Rect, Rect]);
  

Vice versa, it is also possible to exclude objects from being affected by a global style rule, even if they define those style by default. E.g. a view contains two labels, and we want the first label appearing in red color and the second in blue. view.setStyle("color", "red") would also be applied to the second label. To address this issue, it is possible to pass a exclusion selector to the setStyle method.

  public function MyView() {
   var label1 : Label = new Label();
   label1.name = "Label1";
   addChild(label1);

   var label2 : Label = new Label();
   label2.name = "Label2";
   addChild(label2);
  }
  ...
  
  // in Main
  var view : MyView = new MyView();
  view.setStyle("color", "red", null, ["Label2"]);
  view.setStyle("color", "blue", null, ["Label1"]);
  addChild(view);
  

The view selector is an Array of either view names or types and is not restricted in size. The selector items within a selector are ordered from unspecific (left) to specific (right).

  // all views that are not Buttons
  // or a child of a Button
  setStyle("color", "red", null, [Button]);

  // all views whose name is not "background" or are
  // that are child of a view of that name
  setStyle("color", "red", null, ["background"]);
  

Styles returned will be cached to enhance the performance of the getStyle() operation.