UIElement

The Architecture

Each UIElement is considered to be a standalone component. The API allows for transformation through CSS and design pattern known as decorator. A decorator simply decorates an object (in this case UIElement) into something different. Think of it as changing the behaviour of an object. Currently 4 types of decorators exist, ILayout, IShape, IInteractive and IScroll.

Factory Methods

build() A method used for adding children of a UIElement to the stage in the correct order. Children here refers to decorators and custom added children

setStyle() A method used to apply a CSS style. Requirement for usage is for the properties styleManager and styleName to be valid.

arrange() A method that arranges children of a UIElement through a layout decorator.

UI Decorators

All UIElement decorators are commutitative. This means the order does not matter. The order of the factory methods (build(), setStyle() and arrange()) does however matter. build() is required whereas setStyle() and arrange() is optional based on the usage of the component.

Simple UI CSS Example

A simple example showcasing the usage of the StyleManager and applying a CSS style to a UIElement. The order of the methods build(), setStyle() and arrange() is important for the decorators and children of the UIElement.

component = new UIElement();
component.styleName = "title";
component.styleManager = styleManager;
component.build();
component.setStyle();
component.arrange();

Vertical Layout Decorator Example

The layout decorator as with any other decorator should always be applied before calling the factory methods build(), setStyle() and arrange().

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

Chaining Vertical and Padded Layout Decorator Example

Layout decorators can be chained.

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();

Decorator Shape for creating a background

Each UIElement has a pre-built background decorator. It is reserved and therefore will always be at index 0. The background will automatically resize itself based on the UIElement's layout decorator if defined. Alternatively the size can be set through width and height properties. To show a background make sure colors and alphas is set with at least 2 values. Also make sure to call arrange() for the background to autosize if required.

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

Decorator Scroll for creating a Vertical Scrollbar component= new MockUIElement(); component.scroll = new ScrollVertical( mockUIElement ); component.scroll.scrollHeight = 150; component.scroll.horizontalGap = 2; component.build(); component.arrange();

Interactive Decorator Example

Each UIElement has a default Interactive decorator which converts its behaviour into a button.

component= new MockUIElement();
component.build();
component.arrange();
component.activate();