I must reiterate that this is a conceptual example. To keep things simple, the images in our composite page will be drawn as ASCII art. We will extend the previous book application (from part 1) by adding three new classes called: CompositePage, TextBlock and Figure.
The recommended way to add multiple composite classes is to extend a generic composite class such as BookComposite. Composite classes implement the housekeeping methods required of composite nodes such as add and getChild. Therefore, it makes sense to inherit the implementations for these methods and override the operations, such as print, that require custom functionality. The CompositePage.as file contains the CompositePage class that extends the BookComposite class defined previously.
CompositePage.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package {
 
	public class CompositePage extends BookComposite {
 
		public function CompositePage(sName:String) {
			super(sName);
		}
 
		override public function print():void {
			trace(this.sName);
			super.print();
			trace("--------------------");
		}
	}
}

Note that the CompositePage class overrides the print() method and prints a dividing line to separate one page from the next. This is the only unique feature in this CompositePage composite class when compared to the BookComposite class. All the functionality required by a composite object such as adding, removing and accessing children are inherited.
Both the TextBlock and Figure classes are primitive component objects that extend the BookComponent abstract class.

TextBlock.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package {
 
	public class TextBlock extends BookComponent {
 
		private var sText:String;
 
		public function TextBlock(sText:String) {
			this.sText = sText;
		}
 
		override public function print():void {
			trace(this.sText);
		}
	}
}

The TextBlock class extends the BookComponent abstract class. Text blocks are primitive objects that can be added to a composite page.

Figure.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package {
 
	public class Figure extends BookComponent {
 
		private var sName:String;
		private var textFigure:String;
 
		public function Figure(sName:String, textFigure:String) {
			this.sName = sName;
			this.textFigure = textFigure;
		}
 
		override public function print():void {
			trace(this.textFigure);
			trace(this.sName);
		}
	}
}

Similarly, the Figure class extends the BookComponent abstract class. It declares a property called sName that holds the name of the figure. Another property called textFigure holds the figure. For simplicity, the figures in the book will be drawn with text as ASCII art. As before, figures are primitive objects that can be added to a composite page.

Creating a book with composite pages
Lets create a new book using the new composite page class. The following statements should be run from the client. The client can be the document class in a Flash document (.fla) that builds a composite structure. Note that, in addition to the three new classes defined in this article, the following statements also use classes defined in part 1.

Main.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

package {
 
	import flash.display.Sprite;
 
	/**
	*	Main Class
	*	@ purpose:		Document class for movie
	*/
	public class Main extends Sprite {
 
		public function Main() {
 
			// create book
			var book:BookComposite = new BookComposite("book");
 
			// create table of contents page
			book.add(new CompositePage("Table of contents:")); // add TOC
			var t:String = "Chapter 1 ... page 1\r";
			t += "Chapter 2 ... page 4";
			book.getChild(1).add(new TextBlock(t));
 
			// create a chapter
			book.add(new Chapter("chapter 1"));
			book.getChild(2).add(new Page("Chapter 1: Farm Animals"));
 
			// create a new composite page
			var p2:CompositePage = new CompositePage("page 2");
			t = "         (__)\r         (oo)\r  /-------\\/\r";
			t += " / |     ||\r*  ||----||\r   ~~    ~~";
			p2.add(new Figure("fig 1: cow", t));
			t = "Cows have one\r";
			t += "stomach, with four\r";
			t += "compartments.";
			p2.add(new TextBlock(t));
			book.getChild(2).add(p2); // add to chapter 1
 
			// create another composite page
			var p3:CompositePage = new CompositePage("page 3");
			p3.add(new Figure("fig 2: duck", ">(o)__\r (_~_/\r ~~~~~~~"));
			t = "Ducks are aquatic\r";
			t += "birds, smaller than\r";
			t += "their relatives the\r";
			t += "swans.";
			p3.add(new TextBlock(t));
			book.getChild(2).add(p3); // add to chapter 1
 
			// create another chapter
			book.add(new Chapter("chapter 2"));
			book.getChild(3).add(new Page("Chapter 2: Work in Progress")); // add a child Page
			book.getChild(3).add(new Page("page 5")); // add a child Page
			book.getChild(3).add(new Page("page 6")); // add a child Page
			book.getChild(3).add(new Page("page 7")); // add a child Page
 
			// add an appendix
			book.add(new Page("appendix"));
 
			// add an index
			book.add(new Page("index"));
 
			trace("print book");
			trace("==========");
			book.print();
		}
	}
}

The client first adds a new composite page for the table of contents (line 17). It then adds a new text block to the table of contents page (line 20). A new chapter is created next (line 23) with a chapter title page added to it (line 24). Two composite pages are created (lines 27 and 38) with both text blocks and figure are added to them. Both composite pages are then added to the chapter (lines 35 and 45). Calling the print() operation from the root node results in the following output.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

print book
==========
Table of contents:
Chapter 1 ... page 1
Chapter 2 ... page 4
--------------------
Chapter 1: Farm Animals
--------------------
page 2
         (__)
         (oo)
  /-------\/
 / |     ||
*  ||----||
   ~~    ~~
fig 1: cow
Cows have one
stomach, with four
compartments.
--------------------
page 3
>(o)__
 (_~_/
 ~~~~~~~
fig 2: duck
Ducks are aquatic
birds, smaller than
their relatives the
swans.
--------------------
Chapter 2: Work in Progress
--------------------
page 5
--------------------
page 6
--------------------
page 7
--------------------
appendix
--------------------
index
--------------------

Our simple book contains ASCII art and prints using a monospaced front to the Output Panel (like the old dot-matrix printers that take roll paper). However, we can modify the Figure class to display actual images, and create new text block components with different formatting for headers and lists etc. We can also initiate a real print job using the PrintJob class to make this a more functional book.

Changing requirements in software design is a certainty (coupled with death and taxes). OOP and design patterns allow anticipated and unanticipated changes to be managed effectively. As we have seen in this example, extending complex hierarchical structures is easy when they implemented using the composite pattern. The ease is due very much to the common interface shared by both primitive and composite nodes. Adding, deleting and otherwise manipulating the structure is simple – no matter whether you are dealing with component or composite objects as both types can be treated the same way. Only, unique functionality in the new objects need to be implemented while the others can be inherited.

Download the source: Book-part_II.zip

The following example develops a book in Flash. A book is a composite object as it contains several pages. This is by no means a functional book, but a conceptual example to illustrate the utility of the composite pattern. One of the big advantages of design patterns is extensibility: allowing the application to expand and add new features without breaking existing functionality. We will extend this example in part 2 by adding composite pages that can contain text and images.

The class diagram of the Book example shows the BookComponent class that should behave as an abstract class. ActionScript 3 does not have abstract classes. See a previous post on Runtime Checks for Abstract Classes and Methods in ActionScript 3. I’m not implementing the runtime checks in this example, but noting that some concrete classes need to be treated as abstract. BookComponent is the abstract interface that defines the default behavior for both primitive and composite objects. It defines the default implementations for the add, getChild, and remove methods used to build and manipulate composite structures. The print method is an operation that is unique to the book.
A book is a good example of a composite pattern. It contains chapters that can be considered composite objects that hold collections of pages. Pages can be considered indivisible primitives. We will first implement a very basic book as a composite tree and then extend it to demonstrate the power of the composite pattern.
The BookComponent.as file contains the BookComponent abstract class that defines the interface for both primitive objects such as pages and composite objects such as chapters. The Page.as file contains the Page class, and the BookComposite.as file contains the BookComposite class. Both Page and BookComposite classes extend the BookComponent class and provide necessary implementations. The Main.as file is contains the client class Main (also the document class for the Flash document).
BookComponent.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

package {
 
    import flash.errors.IllegalOperationError;
 
    // ABSTRACT Class (should be subclassed and not instantiated)
    public class BookComponent {
 
        public function add(c:BookComponent):void {
            throw new IllegalOperationError("add operation not supported");
        }
 
        public function remove(c:BookComponent):void {
            throw new IllegalOperationError("remove operation not supported");
        }
 
        public function getChild(n:int):BookComponent {
            throw new IllegalOperationError("getChild operation not supported");
            return null;
        }
 
        // ABSTRACT Method (must be overridden in a subclass)
        public function print():void {
        }
    }
}

In addition to defining the default implementations for the add, remove, and getChild methods, the BookComponent class defines the abstract method print that can print the book component.
BookComposite.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package {
 
    public class BookComposite extends BookComponent {
 
        internal var sName:String;
        private var aChildren:Array;
 
        public function BookComposite(sName:String) {
            this.sName = sName;
            this.aChildren = new Array();
        }
 
        override public function add(c:BookComponent):void {
            aChildren.push(c);
        }
 
        override public function getChild(n:int):BookComponent {
            if ((n > 0) && (n <= aChildren.length)) {
                return aChildren[n-1];
            } else {
                return null;
            }
        }
 
        override public function print():void {
            for each (var c:BookComponent in aChildren) {
                c.print();
            }
        }
    }
}

The BookComposite class extends the BookComponent class. Whenever a BookComponent is added to a composite node via the add method it is pushed into the aChildren array. The BookComposite class implements the abstract method print that prints all child nodes by recursively traversing the whole composite tree represented by the book. The remove method has not been implemented, in order to keep things simple.
Page.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package {
 
    public class Page extends BookComponent {
 
        private var sName:String;
 
        public function Page(sName:String) {
            this.sName = sName;
        }
 
        override public function print():void {
            trace(this.sName);
        }
    }
}

The Page class represents a page of the book and implements the print method by simply tracing the name of the page passed to it in the constructor.
Main.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

package {
 
    import flash.display.Sprite;
 
    /**
    *   Main Class
    *   @ purpose:      Document class for movie
    */
    public class Main extends Sprite {
 
        public function Main() {
            // create book
            var book:BookComposite = new BookComposite("book");
 
            // add the table of contents
            book.add(new Page("table of contents"));
 
            // create a chapter
            book.add(new BookComposite("chapter 1")); // add chapter to book
            book.getChild(2).add(new Page("Chapter 1 title page")); // add a Page
            book.getChild(2).add(new Page("page 2")); // add a Page
            book.getChild(2).add(new Page("page 3")); // add a Page
 
            // create another chapter
            book.add(new BookComposite("chapter 2")); // add chapter to book
            book.getChild(3).add(new Page("Chapter 2 title page")); // add a Page
            book.getChild(3).add(new Page("page 5")); // add a Page
            book.getChild(3).add(new Page("page 6")); // add a Page
            book.getChild(3).add(new Page("page 7")); // add a Page
 
            // add an appendix
            book.add(new Page("appendix"));
 
            // add an index
            book.add(new Page("index"));
 
            trace("print book");
            trace("==========");
            book.print();
        }
    }
}

The client class Main builds the book by first creating a root composite node that will contain the entire book. It then adds a table of contents page, two chapters that contain several pages, an appendix and index page. Finally it prints the whole book by calling the print operation on the root node.
Note how component and composite nodes are added to the book through a single interface using the add method. The client does not need to worry about the type of node as the composite pattern treats both composite and component nodes the same way. The following output is generated by the print operation.

1
2
3
4
5
6
7
8
9
10
11
12

print book
==========
table of contents
Chapter 1 title page
page 2
page 3
Chapter 2 title page
page 5
page 6
page 7
appendix
index

Download the source: book_p1.zip. Watch for part 2 of this article, where the book will be extended to incorporate composite pages that can contain both text and images.