====Drawing a simple box====

The example below shows a simple //Box// component with no style applied.

==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/box_1.smxml" [width="640"] [height="160"] }}
==SMXML==
%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="simpleBox" width="200" height="80" x="210" y="40"/>
</composer>
%%




====Drawing rounded rectangles====

You may specify a //rounded// attribute for //Box// the value of which is the diameter of roundness for the corners of the rectangle. So if you wish to draw your //Box// with corners rounded in a //10// pixel radius then set //rounded// to //20//.

==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/box_2.smxml" [width="640"] [height="160"] }}
==SMXML==
%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" rounded="20" width="200" height="80" x="110" y="40"/>
<box id="rightBox" rounded="8" width="200" height="80" x="360" y="40"/>
</composer>
%%
==AS3==
%%(java5)
leftBox.rounded = 20;
rightBox.rounded = 8;
%%




====Drawing speech bubbles====

You may specify a //bubble// attribute for //Box// in case you wish to render it with a bubble stem. You may use the //bubbleside// attribute to specify which side the stem should appear on and //bubbleorientation// to align the stem on the chosen side. See the chart below for possible combinations of values for these attributes.

|=|bubbleside|=|bubbleorientation||
||//top//||//left//||
||//top//||//center//||
||//top//||//right//||
||//right//||//top//||
||//right//||//center//||
||//right//||//bottom//||
||//bottom//||//left//||
||//bottom//||//center//||
||//bottom//||//right//||
||//left//||//top//||
||//left//||//center//||
||//left//||//bottom//||


==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/box_3.smxml" [width="640"] [height="160"] }}
==SMXML==
%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" bubble="20" bubbleside="left" bubbleorientation="center" width="200" height="80" x="110" y="40"/>
<box id="rightBox" bubble="10" bubbleside="bottom" bubbleorientation="right" rounded="20" width="200" height="80" x="360" y="40"/>
</composer>
%%
==AS3==
%%(java5)
leftBox.bubble = 20;
leftBox.bubbleside = Box.LEFT;

rightBox.bubble = 10;
rightBox.bubbleside = Box.BOTTOM;
rightBox.bubbleorientation = Box.RIGHT;
rightBox.rounded = 20;
%%




====Applying Styles====

Styles that can be applied on a //Box// component.

|=|Style type|=|Attribute name|=|Description||
||fill||//fill//||The fill style for the //Box//.||
||stroke||//stroke//||The stroke around the edge of //Box//.||
||filter||//filter// or //filters//||The filter(s) applied to the //Box//.||

The example below shows a //Box// component with //fill//,//stroke// and //filter// styles applied.

==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/box_4.smxml" [width="640"] [height="160"] }}
==SMXML==
%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<style>
<fill style="boxFill" type="linear">
<color ratio="0">0x0000ff</color>
<color ratio="255">0xff0000</color>
</fill>
<stroke style="boxStroke" size="2">
<color>0x0000ff</color>
</stroke>
<filter style="boxFilter" type="dropshadow">
<color alpha=".36">0x000000</color>
<angle>55</angle>
<distance>7</distance>
<strength>2</strength>
<blurx>27</blurx>
<blury>27</blury>
</filter>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="styledBox" width="200" height="80" x="210" y="40" fill="boxFill" stroke="boxStroke" filter="boxFilter"/>
</composer>
%%




See the [[http://samplemath.com/smaf/ref/com/samplemath/shape/Box.html SMAF reference]] for more information on the //Box// component.