Revision [286]

This is an old revision of UsingComposer made by ShinOne on 2011-03-07 14:39:58.
 

Root composer


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

<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/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.

<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/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.

<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/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





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://samplemath.com/smaf/smxml.dtd">
<composer url="http://samplemath.com/smaf/sample.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://samplemath.com/smaf/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


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://samplemath.com/smaf/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

There is one comment on this page. [Display comment]

Valid XHTML 1.0 Transitional :: Valid CSS :: Powered by WikkaWiki