<?xml version="1.0" encoding="utf-8" ?>
<vbox id="main" width="100%">

    <script>
        function enlargeButton() {
            buttonTest.width = 200;
            buttonTest.height = 100;
        }

        buttonTest.onClick = function(e) {
            trace("TEST BUTTON CLICKED");
        }
    </script>

    <bind source="text1.text" target="text2.text" />
    <bind source="text2.text" target="text3.text" transform="prefix ${value} suffix" />

    <button id="b1" text="Button" width="100" />

    <hbox id="buttonHBox">
        <button id="test" text="Enlarge Test Button" onclick="enlargeButton()" />
        <button id="test2" text="Shrink Test Button" onclick="buttonTest.width = 100;buttonTest.height = 50;" />
        <button id="test3" text="Button 1" onclick="trace('clicked!!! - ' + test2);buttonTest.width=400;" />
        <textfield id="testfield" text="right margin: 100px" width="100%" style="margin-right: 100px" />
    </hbox>

    <hbox>
        <textfield id="text1" text="bob" />
        <textfield id="text2" />
        <textfield id="text3" />
    </hbox>

    <vbox width="100%" id="testVBox">
        <hbox width="100%" id="testHBox">
            <button text="100% x auto" width="100%" />
            <button text="140px x 100%" id="percentXX" styleNames="emphasized" width="140" height="100%" />
            <button id="buttonTest" text="Test Buttion" style="___margin:20" />
        </hbox>
    </vbox>

    <hbox width="100%" height="100%">
        <button text="100% x 100%" width="100%" height="100%" />
    </hbox>
</vbox>