====Root composer====

The root element of every SMXML composition should always be a //composer// as shown in the example below.

%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
</composer>
%%
Even if you only need to render a //box// you should always wrap it in a //composer//. The example below shows invalid SMXML composition. You may only use invalid chunks of SMXML to update UI components directly or for adding them to a //composer//'s composition.

%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
%%




====Inline composition====

You may define the composition directly in the //composer//'s markup. The order of child nodes specifies the z-order of child components rendered on screen.

%%(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" width="200" height="40" x="20" y="20" />
<box id="rightBox" width="200" height="80" right="20" y="40" />
</composer>
%%
==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/composer_1.smxml" [width="640"] [height="160"] }}




====Loading SMXML====

The composition data can be loaded from a URL. The example below looks identical to the one above since it's loading the very same SMXML this time from [[http://samplemath.com/smaf/sample.smxml a remote location]].

%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer url="http://samplemath.com/smxml/example/composer_1.smxml"/>
%%
==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/composer_2.smxml" [width="640"] [height="160"] }}




====Nesting composers====

You may recursively nest any number of //composer//s inside another //composer//. The possibilities of composition are unlimited.

%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<composer id="leftComposer" x="10">
<box id="leftTopBox" width="200" height="40" x="20" y="20" />
<box id="leftBottomBox" width="200" height="40" x="30" y="80" />
</composer>
<composer id="rightComposer" x="310">
<box id="rightTopBox" width="200" height="40" x="20" y="20" />
<box id="rightBottomBox" width="200" height="40" x="30" y="80" />
</composer>
</composer>
%%
==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/composer_3.smxml" [width="640"] [height="160"] }}

Position and sometime dimension are relative to the parent //composer//'s position and dimensions. The example below shows nested //composer//s, each half the size of its parent.

%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<composer width="50%" height="50%" x="25%" y="25%" rotation="4">
<box width="100%" height="100%" alpha=".2"/>
<composer width="50%" height="50%" x="25%" y="25%" rotation="4">
<box width="100%" height="100%" alpha=".2"/>
<composer width="50%" height="50%" x="25%" y="25%" rotation="4">
<box width="100%" height="100%" alpha=".2"/>
<composer width="50%" height="50%" x="25%" y="25%" rotation="4">
<box width="100%" height="100%" alpha=".2"/>
<composer width="50%" height="50%" x="25%" y="25%" rotation="4">
<box width="100%" height="100%" alpha=".2"/>
</composer>
</composer>
</composer>
</composer>
</composer>
</composer>
%%
==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/composer_4.smxml" [width="640"] [height="160"] }}