Introduction

The CamoDisplay is the final building block of framework and a powerful alternative to the native Sprite class. Before getting into the CamoDisplay we should take some time to talk about the AbstractDisplay and the BoxModelDisplay.

Details

AbstractDisplay

The AbstractDisplay adds two methods, move and resize to the Sprite Class. The most important feature of the AbstractDisplay however is what happens when we call addChild and removeChild. The AbstractDisplay automatically creates a container called “display” that gets added as the first child to the display list. Every time another DisplayObject is added to an AbstractDisplay, it gets attached onto the class’s display instance. All the children methods are mapped over to the display Sprite. Here is a chart to illustrate the inheritance of the Camo’s display classes:



BoxModelDisplay

The BoxModelDisplay allows us to apply Margin, Padding, Border and a Background (Color/Image). The BoxModelDisplay manages the offset of the display sprite based on those properties. Lets take a look at how the Box Model gets rendered:

Camo’s Box Model consists of a Margin, Border and Padding wrapped around a display. To set the BoxModel’s main values (Margin, Padding, Border, and Background) we will need a style Object. We can get these from a CamoStyleSheet and apply it by placing it inside of a CamoDisplayStyle then calling the BoxModelDisplay’s applyStyle method. The CamoDisplayStyle class will parse the Object, convert the values to the correct type, and then call refresh to render the Box Model. Here is a list of supported properties of BoxModel:

BoxModel Background

A BoxModelDisplay’s background-color and background-image work exactly to how it would in HTML. The background-color is the bottom most color behind the display. It is important to realize that the CSS width and height affect how the background fill will take place. If you do not define the width and height of the BoxModel, it will use the values from the display. The background-image gets composited on top of the background-color. The background-image property lets the box model know how to load in a source image⁴. Background-images also have repeat rules: repeat (is default), no-repeat, repeat-x, repeat-y. When using no-repeat you can specify a background image’s position (x, y) to offset the image. This is helpful when you only want a background-image to be displayed at a certain location behind the display.

When the BoxModelDisplay does a refresh⁵, all of its values are reviewed and drawn to the graphic’s layer of the BoxModelDisplay. This insures that the border, background-color, and background-image are a single Bitmap to save on memory. The display Sprite (where all children get added to) is offset by the top and left Padding, and Border⁶. Once the refresh is complete the display will be correctly positioned. Padding is invisible unless you have set a background color or image. In that case the background will show through in the area offset by the padding. When you request the width or height of a BoxModelDisplay the dimensions are returned taking into account the padding, border and display. The BoxModelDisplay can be used on its own but when combined with the CamoDisplay, you get additional css style support.

CamoDisplay

The CamoDisplay inherits some powerful layout logic from the BoxModelDisplay and extends the applyStyle method by supporting additional CSS properties. Here is a list of the properties supported by the CamoDisplay:

The most important functionality added by the CamoDisplay is the rasterize method. Just like the BoxModelDisplay which draws its border, background-color, and background-image to the graphics layer to save memory, the CamoDisplay can do the same thing with it’s display Sprite. When you call rasterize, a Bitmap snapshot of the display is take, the old display is removed and a new one is put in its place with the previous display's BitmapData drawn to it’s graphics layer. All the children that were attached to the display are removed (so the Garbage Collector can release them from memory) and you are left with a flattened display.

It is important to note that rasterize can only be called once since all children in the display are removed. The speed and memory benefits can greatly increase the performance of your application. This also allows you to layer images in the display Sprite and then flatten them into a single image. Rasterize should be used on any CamoDisplay where its children will never be changed or used outside of the initial setup of the class.

^{1 unsupported
border-top
border-right
border-bottom
border-left}

^{2 unsupported
margin-top
margin-right
margin-bottom
margin-left}

^{3 unsupported
padding-top
padding-right
padding-bottom
padding-left}

^{4 The BoxModelDisplay supports jpg, png, or gif background images.}

^{5 Calling the refresh method on a BoxModelDisplay is considered expensive and should only be used when needed.}

^{6 Margin is not accounted for in offset of the display sprite unlike Padding. Instead Margin is a value accessible through the margin property and should be used by classes that layout or align BoxModelDeisplays.}