Home
The FBoxModel 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:
FBoxModel consists of a Margin, Border and Padding wrapped around a display.
Here is a list of supported properties of FBoxModel:
| CSS Property | Values | Example (px is stripped out by the parser) | ||||
| background-alpha | “number range 0 – 1” | Example: background-alpha: .8; | ||||
| background-color | valid hex color | background-color: 0xff0000; sets background red.?background-color: #ff0000; sets background red. |
| background-image | type filename?jpg, png, or gif | background-image: url (“/imgs/sample_image.jpg”); Will load in sample_image.jpg and redraw Box Model once loaded. | ||||
| background-position | value for x y | background-position: 10px 30px; This only works if background-repeat is set to no-repeat. | ||||
| background-repeat | “repeat no-repeat repeat-x repeat-y” | background-repeat: no-repeat; does not repeat the background image, can be used with background-position to move the image’s x,y position.?background-repeat: repeat-x: Repeats the background image along its x value based on the height of the background image. | ||||
| background-scale9 | value for?x, y, width, height | background-scale9: 1px 1px 98px 48px; applies a scale9Grid to the background image. | ||||
| border^1^ | value for ?size style color alpha | border: 1px solid #ff0000 .5; solid is the only style supported currently. | ||||
| border-alpha | “value range 0 – 1” border-alpha: .5; | height value height: 50px; | ||||
| margin^2^ | value for?top, right, bottom, left | margin: 5px 2px 2px 5px; applies values to top, right, bottom,left?margin: 5px 2px; applies 5 to top & bottom, 2 to right & left?margin: 10px; applies 10 to top, right, bottom, left | ||||
| padding^3^ | value for ?top, right, bottom, left | padding: 5px 2px 2px 5px; applies values to top, right, bottom,left?padding: 5px 2px; applies 5 to top & bottom, 2 to right & left?padding: 10px; applies 10 to top, right, bottom, left | ||||
| width | value | width: 100px; |
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^4^. 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^5^, 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^6^. 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.
coming soon
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.