Root composer
The root element of every SMXML composition should always be a composer as shown in the example below.
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
</composer>
<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.
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<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.
<!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>
<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
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 a remote location.
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer url="http://samplemath.com/smxml/example/composer_1.smxml"/>
<composer url="http://samplemath.com/smxml/example/composer_1.smxml"/>
OUTPUT
Nesting composers
You may recursively nest any number of composers inside another composer. The possibilities of composition are unlimited.
<!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>
<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
Position and sometime dimension are relative to the parent composer's position and dimensions. The example below shows nested composers, each half the size of its parent.
<!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>
<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>
