<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               xmlns:layouts="com.mrinalwadhwa.layouts.*"
               viewSourceURL="srcview/index.html"
               creationComplete="creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.graphics.SolidColorStroke;
            import spark.primitives.Rect;

            protected function buttonClickHandler(event:MouseEvent):void
            {
                addRectangle();
            }

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                for(var i:int;i<7;i++)
                {
                    addRectangle();
                }
            }
            
            protected function addRectangle():void
            {
                var r:Rect = new Rect();
                r.width = 100;
                r.height = 20;
                r.stroke = new SolidColorStroke(0x9Bc5dc);
                container.addElement(r);
            }

        ]]>
    </fx:Script>

    <s:Button label="Add Rectangle"
              top="0"
              horizontalCenter="0"
              click="buttonClickHandler(event)" />


    <s:Group id="container"
             left="0" right="0" top="40" bottom="0">
        <s:layout>
           <layouts:StepLayout />
        </s:layout>

    </s:Group>

</s:Application>