Decorators

###The decorator pattern

The decorator pattern does pretty much what it says on the tin, it decorates. In the case of objects, it decorates by changing behaviour or properties. A UIElement has some built-in decorators.

Decorators are either commutative or non-commutative. This means the order in which they are applied either doesn't matter or it does. Most of the built-in decorators are commutative and therefore means the order in which they are applied doesn't matter. The non-commutative decorators are indeed hidden a way in components like Button and Label which are examples of UIElement components that can be found in the Toolkit.

###Chaining Commutative decorators can be chained, so it allows you to decorate a decorator and so forth. This is a very powerful feature of the decorator pattern as it allows the layering of features and functionality through composition but keeping the original component in tact.

component= new MockUIElement();
component.layout = new VerticalLayout( mockUIElement );
component.layout.verticalGap = 5;
component.layout = new PaddedLayout( mockUIElement.layout );
component.layout.left = 5;
component.layout.right = 5;
component.build();
component.arrange();

###Layout Decorator The layout decorator is probably the most used and consist of quite a few variations. The most fundamental decorators are Vertical, Horizontal and Padded. The layout decorator is used to arrange all the children of a UIElement. Layout decorators can be chained as shown above in the Chaining example with PaddedLayout and VerticalLayout.

component= new MockUIElement();
component.layout = new VerticalLayout( mockUIElement );
component.build();
component.arrange();

###Shape Decorator Each UIElement has a built-int background that can be altered through decoration. Currently only one Shape decorator exist namely the ShapeRectangle. This decorator will draw a rectangle shape on the UIElement background display obejct with the properties provided. This is useful for panels or UIElements that require a vector background. `

component= new MockUIElement();
component.background = new ShapeRectangle( mockUIElement );
component.background.colours = [ 0, 0 ];
component.background.alphas = [ 1, 1 ];
component.build();
component.arrange();

###Interactive Decorator The interactive decorator changes the intended behaviour of a UIElement to interactive. An interactive decorator consist of two methods **activate() ** and deactivate(). To listen for interactive events simply listen for a UIElementEvent as all state changes from all decorators will be broadcast.

button = new Button();
button.text = "GO";
button.activate();
button.build();
button.setStyle();
button.arrange();

###Scroll Decorator Does what it says on the tin. Decorates the UIElement with a scrollbar.

component= new MockUIElement();
component.scroll = new ScrollVertical( mockUIElement );
component.scroll.scrollHeight = 150; 
component.scroll.horizontalGap = 2;
component.build();
component.arrange();