Here are the slides and the code from Austin Flex User’s Group Degrafa Presentation on January 22nd, 2009. It is a little rough since I put it together in about a day so please forgive any mistakes or typos. Also, the code samples are VERY basic; they are designed to show straight-forward drawing capabilities using Degrafa and why it is so important to Flex developers. :)

Download the slides here.

Download the source code here.


Slides Posting:

Degrafa Overview
View more presentations or upload your own. (tags: degrafa flex)



Source Code Posting:

Example_01_BasicDrawing.mxml – Shows how we had to draw before Degrafa came along.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:degrafa="http://www.degrafa.com/2008"
    layout="absolute"
    initialize="onInit()">
 
    <mx:Script>
        <![CDATA[
            import com.degrafa.core.utils.ColorKeys;
            import mx.core.UIComponent;
            import mx.core.FlexSprite;
 
            private function onInit():void
            {
                // Can draw using a Shape object
                var shape:Shape = new Shape();
                shape.graphics.beginFill(0x00FF00, 1.0);
                shape.graphics.drawRect(50, 50, 50, 50);
                shape.graphics.endFill();
                rawChildren.addChild(shape);
 
                // Can draw using a UIComponent
                var myUIComponent:UIComponent = new UIComponent();
                myUIComponent.graphics.beginFill(0x002200, 1.0);
                myUIComponent.graphics.drawRect(50, 150, 65, 65);
                myUIComponent.graphics.endFill();
                addChild(myUIComponent);
 
                // Can draw using a UIComponent and going line-by-line
                var myUIComponent2:UIComponent = new UIComponent();
                myUIComponent2.graphics.lineStyle(2, 0xDDDDDD,1, false);  // border style
                myUIComponent2.graphics.beginFill(ColorKeys.BLUE, 1.0);
                myUIComponent2.graphics.moveTo(50, 250);
                myUIComponent2.graphics.lineTo(150, 250);
                myUIComponent2.graphics.lineTo(150, 350);
                myUIComponent2.graphics.lineTo(50, 350);
                myUIComponent2.graphics.lineTo(50, 250);
                myUIComponent2.graphics.endFill();
                addChild(myUIComponent2);
            }
        ]]>
    </mx:Script>
 
</mx:Application>

Example_02_DrawingApp.mxml – A demo draw application; again show how to draw before the advent of Degrafa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    creationPolicy="all"
    addedToStage="onAddedToStage()"
    layout="absolute">
 
    <mx:Script>
        <![CDATA[
            import flash.display.Sprite;
            import flash.events.MouseEvent;
 
 
            private function onAddedToStage():void
            {
                initDrawingApp();
            }
 
 
 
            private function initDrawingApp():void
            {
                drawingCanvas.graphics.lineStyle(2);
                drawingCanvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
                drawingCanvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
                drawingCanvas.addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);
            }
 
 
 
            private function onMouseDown(event:MouseEvent):void
            {
                drawingCanvas.graphics.moveTo(drawingCanvas.mouseX, drawingCanvas.mouseY);
                drawingCanvas.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
            }
 
 
 
            private function onMouseUp(event:MouseEvent):void
            {
                if (drawingCanvas.hasEventListener(MouseEvent.MOUSE_MOVE))
                {
                    drawingCanvas.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
                }
            }
 
 
 
            private function onMouseMove(event:MouseEvent):void
            {
                drawingCanvas.graphics.lineTo(drawingCanvas.mouseX, drawingCanvas.mouseY);
            }
 
 
 
            private function clearDrawing():void
            {
                drawingCanvas.graphics.clear();
                drawingCanvas.graphics.lineStyle(2);
            }
 
 
        ]]>
    </mx:Script>
 
    <mx:Panel
        id="drawingPanel"
        x="10"
        y="10"
        width="700"
        height="600"
        clipContent="true">
 
        <mx:Canvas
            id="drawingCanvas"
            width="100%"
            height="100%"
            clipContent="true"
            doubleClickEnabled="true"
            doubleClick="clearDrawing()" />
 
    </mx:Panel>
 
</mx:Application>

Example_03_DegrafaBasicDrawing.mxml – Simple Drawing with Degrafa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:degrafa="http://www.degrafa.com/2008"
    layout="absolute">
 
    <degrafa:Surface>
 
        <degrafa:fills>
 
            <degrafa:SolidFill
                id="mySolidFill"
                color="0x00FF00"
                alpha="1" />
 
        </degrafa:fills>
 
        <degrafa:GeometryGroup>
 
            <degrafa:geometry>
 
                <degrafa:RegularRectangle
                    id="rectangle1"
                    x="10"
                    y="10"
                    width="50"
                    height="50"
                    fill="{mySolidFill}" />
 
            </degrafa:geometry>
 
        </degrafa:GeometryGroup>
 
    </degrafa:Surface>
 
</mx:Application>

Example_04_DegrafaComplexDrawing.mxml – Drawing more complex shapes with Degrafa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:degrafa="http://www.degrafa.com/2008"
    layout="absolute">
    <mx:Script>
        <![CDATA[
            import com.degrafa.core.utils.ColorKeys;
        ]]>
    </mx:Script>
 
    <degrafa:Surface>
 
        <degrafa:strokes>
 
            <degrafa:SolidStroke
                id="mySolidStroke1"
                weight="2"
                color="{ColorKeys.CORNSILK}"
                alpha="1" />
 
        </degrafa:strokes>
 
        <degrafa:fills>
 
            <degrafa:SolidFill
                id="mySolidFill"
                color="0x00FF00"
                alpha="1" />
 
            <degrafa:LinearGradientFill
                id="myLinearGradientFill">
 
                <degrafa:GradientStop
                    color="{ColorKeys.RED}"
                    alpha="1"
                    ratio=".2" />
 
                <degrafa:GradientStop
                    color="{ColorKeys.AQUA}"
                    alpha="1"
                    ratio=".8" />
 
            </degrafa:LinearGradientFill>
 
        </degrafa:fills>
 
        <degrafa:GeometryGroup>
 
            <degrafa:geometry>
 
                <degrafa:RegularRectangle
                    id="rectangle1"
                    x="10"
                    y="10"
                    width="50"
                    height="50"
                    fill="{mySolidFill}" />
 
                <!--
                <degrafa:GearAutoShape
                    id="gearShape1"
                    x="10"
                    y="100"
                    width="200"
                    height="200"
                    fill="{myLinearGradientFill}" />
 
                <degrafa:BurstAutoShape
                    id="burstAutoShape1"
                    x="10"
                    y="400"
                    width="150"
                    height="175"
                    fill="{myLinearGradientFill}" />
 
                <degrafa:Path
                    id="texasPath"
                    x="250"
                    y="10"
                    stroke="{mySolidStroke1}"
                    data="M 357.05332,333.3739 L 379.74411,334.45984 L 410.8368,335.60296 L 408.50219,359.05876 L 408.20543,377.21228 L 408.27357,379.29407 L 412.6174,383.1125 L 414.35405,383.93466 L 416.16326,384.18747 L 416.84913,382.93225 L 417.73945,383.79837 L 419.47609,384.2798 L 421.08086,383.54998 L 422.21956,383.95885 L 421.92279,387.364 L 426.19848,388.39501 L 428.8738,389.21718 L 432.82854,389.74256 L 435.02242,391.57154 L 438.27152,389.99537 L 441.05896,390.36028 L 443.09237,393.14772 L 444.16733,393.46868 L 444.00686,395.43395 L 447.09547,396.60124 L 449.86312,394.79644 L 451.37114,395.16136 L 453.72552,395.32184 L 454.15859,397.19478 L 458.79918,399.18423 L 461.45473,398.9798 L 463.4442,394.86459 L 463.78492,394.86459 L 464.92804,396.76172 L 469.3642,397.76853 L 472.7012,398.9798 L 475.99425,399.73382 L 478.14419,398.9798 L 478.99053,396.46496 L 482.69245,396.46496 L 484.58958,397.21896 L 487.654,395.64279 L 488.31569,395.64279 L 488.6806,396.76172 L 492.95629,396.76172 L 495.35904,395.5065 L 497.02754,395.80326 L 498.44324,397.67621 L 501.32299,399.34471 L 504.84467,400.41968 L 507.58814,401.83759 L 510.03484,403.45991 L 513.32788,402.56962 L 515.26897,403.55225 L 515.78008,413.69188 L 516.11532,423.39405 L 516.80118,432.92806 L 517.32658,436.97511 L 520.00191,441.57175 L 521.07687,445.63859 L 524.93927,451.92792 L 525.48884,454.80769 L 526.01424,455.8145 L 525.32836,463.31069 L 522.67723,467.69847 L 523.63568,470.55845 L 523.27076,473.0733 L 522.42442,480.38923 L 521.05268,483.10852 L 521.65692,487.49475 L 515.99204,489.07993 L 506.13075,493.60643 L 505.16079,495.54635 L 502.57422,497.48628 L 500.47264,498.94122 L 499.17935,499.74952 L 493.52124,505.08432 L 490.77301,507.18591 L 485.43821,510.41911 L 479.7801,512.84402 L 473.47534,516.23889 L 471.69708,517.69384 L 465.8773,521.25037 L 462.48243,521.89701 L 458.60258,527.39346 L 454.56107,527.71679 L 453.5911,529.65671 L 455.85435,531.59664 L 454.3994,537.09309 L 453.10612,541.61959 L 451.9745,545.49944 L 451.1662,550.02593 L 451.9745,552.45084 L 453.75276,559.40224 L 454.72273,565.54533 L 456.50099,568.29356 L 455.53103,569.74851 L 452.45948,571.68843 L 446.80136,567.80858 L 441.30491,566.67696 L 440.01162,567.16194 L 436.77841,566.5153 L 432.57524,563.44375 L 427.40211,562.31213 L 419.80406,558.91726 L 417.70248,555.0374 L 416.40919,548.57099 L 413.17599,546.63106 L 412.52934,544.36781 L 413.17599,543.72117 L 413.49931,540.3263 L 412.20602,539.67966 L 411.55938,538.7097 L 412.85266,534.34486 L 411.23606,532.08162 L 408.00285,530.78833 L 404.60798,526.4235 L 401.05145,519.79542 L 396.84828,517.20885 L 397.00994,515.26893 L 391.67514,502.98273 L 390.86684,498.77956 L 389.08858,496.83964 L 388.92692,495.38469 L 382.94548,490.0499 L 380.35891,486.97835 L 380.35891,485.84672 L 377.77234,483.74514 L 370.9826,482.61351 L 363.54622,481.96687 L 360.47467,479.70363 L 355.94818,481.48189 L 352.39165,482.93684 L 350.1284,486.17004 L 349.15844,489.88824 L 344.79361,496.03133 L 342.3687,498.45624 L 339.78213,497.48628 L 338.00387,496.35465 L 336.06394,495.70801 L 332.18409,493.44477 L 332.18409,492.79812 L 330.40583,490.8582 L 325.23269,488.75661 L 317.79631,480.99691 L 315.53306,476.30876 L 315.53306,468.22573 L 312.29985,461.75931 L 311.81487,459.01109 L 310.19827,458.04112 L 309.06664,455.93954 L 304.05517,453.83795 L 302.76189,452.22135 L 295.64882,444.29998 L 294.35554,441.06677 L 289.66738,438.80352 L 288.21243,434.43865 L 285.62584,431.52878 L 283.68593,431.04382 L 283.0367,426.36618 L 291.03857,427.05207 L 320.07356,429.79552 L 349.10864,431.39588 L 351.39487,407.61912 L 355.28142,352.0641 L 356.88181,333.31678 L 358.25355,333.34536 M 457.2302,567.32304 L 456.66439,560.20996 L 453.91615,553.01604 L 453.35033,545.98379 L 454.88611,537.73908 L 458.20017,530.86849 L 461.67587,525.45284 L 464.82827,521.89629 L 465.47491,522.13879 L 460.70591,528.76689 L 456.34107,535.31417 L 454.3203,541.94226 L 453.99698,547.11542 L 454.88611,553.25854 L 457.47269,560.45246 L 457.95767,565.6256 L 458.11933,567.08056 L 457.2302,567.32304 z" />
                -->
            </degrafa:geometry>
 
        </degrafa:GeometryGroup>
 
    </degrafa:Surface>
 
</mx:Application>

Example_05_DegrafaCustomShapes.mxml – Shows how to take SVG path data from Illustrator and use it in Degrafa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:degrafa="http://www.degrafa.com/2008"
    layout="absolute">
    <mx:Script>
        <![CDATA[
            import com.degrafa.core.utils.ColorKeys;
        ]]>
    </mx:Script>
 
    <degrafa:Surface>
 
        <degrafa:strokes>
 
            <degrafa:SolidStroke
                id="mySolidStroke"
                color="0x333333"
                weight="1" />
 
        </degrafa:strokes>
 
        <degrafa:fills>
 
            <degrafa:SolidFill
                id="mySolidFill01"
                color="{ColorKeys.PURPLE}"
                alpha="1" />
 
            <degrafa:SolidFill
                id="mySolidFill02"
                color="{ColorKeys.BLUE}"
                alpha="1" />
 
            <degrafa:LinearGradientFill
                id="myLinearGradientFill">
 
                <degrafa:GradientStop
                    color="{ColorKeys.RED}"
                    alpha="1"
                    ratio=".2" />
 
                <degrafa:GradientStop
                    color="{ColorKeys.AQUA}"
                    alpha="1"
                    ratio=".8" />
 
            </degrafa:LinearGradientFill>
 
        </degrafa:fills>
 
        <degrafa:GeometryGroup>
 
            <degrafa:geometry>
 
                <degrafa:Path
                    id="path1"
                    data="M0.112793 94.731L163.271 124.994 306.692 28.9414 285.64 127.625 306.692 278.942 0.112793 207.889"
                    fill="{mySolidFill01}"
                    stroke="{mySolidStroke}" />
 
 
                <degrafa:Path
                    id="path2"
                    data="M31.6929 17.3628C36.9561 181.836 165.903 184.468 165.903 184.468L265.903 60.7837 333.009 100.916 272.482 0.257813"
                    fill="{mySolidFill02}"
                    stroke="{mySolidStroke}" />
 
 
            </degrafa:geometry>
 
        </degrafa:GeometryGroup>
 
    </degrafa:Surface>
 
</mx:Application>

The next two samples show how skinning can be done without Degrafa (in an attempt to show why Degrafa makes skinning easier)

Example_06_SimpleGraphicalSkin.mxml – Graphical skinning.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Style>
        Button
        {
            up-skin: Embed("/assets/pdf.png");
            over-skin: Embed("/assets/pdf_over.png");
            down-skin: Embed("/assets/pdf_down.png");
            disabled-skin: Embed("/assets/pdf_disabled.png");
        }
    </mx:Style>
 
    <mx:Button
        id="pdfButton"
        label="PDF Button"/>
 
    <mx:Button
        id="pdfButton2"
        label="" />
 
    <mx:Button
        id="pdfButton3"
        label=""
        enabled="false"/>
 
</mx:Application>

Example_07_SimpleProgrammaticSkin.mxml – Programmatic skinning.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">
 
    <mx:Style>
        CheckBox
        {
            up-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            over-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            down-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            selected-up-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            selected-down-icon: ClassReference("skins.CheckBoxAsArrowSkin");
            selected-over-icon: ClassReference("skins.CheckBoxAsArrowSkin");
        }
        Button
        {
            corner-radius: 6;
            background-color: "0x00BFFF";
            background-alpha: 1.0;
        }
    </mx:Style>
 
    <mx:Panel
        x="10"
        y="10"
        width="450"
        height="348"
        layout="absolute">
 
        <mx:Button
            id="test"
            x="53"
            y="118"
            width="200"
            height="150"
            skin="skins.CustomContainerBorderSkin" />
 
        <mx:CheckBox
            x="131"
            y="44"
            height="27" />
 
    </mx:Panel>
 
</mx:Application>

Example_08_SimpleDegrafaSkin.mxml – A basic skin created with Degrafa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:degrafa="http://www.degrafa.com/2008"
    backgroundGradientColors="[#333333, #666666]"
    layout="absolute">
 
    <mx:Style>
 
        Application
        {
            background-color: "#222222";
        }
 
 
        Button
        {
            fill-colors: #222222,#222222;
            border-color: #666666;
            color: #CCCCCC;
            corner-radius: 0;
            /*text-roll-over-color: #FFFFFF;*/
            highlight-alphas: 0,0;
            border-alpha:  1;
        }
 
    </mx:Style>
 
    <mx:Button
        id="skinnedButton"
        top="100"
        horizontalCenter="0"
        label="A Simple Degrafa Skinned Button"
        skin="skins.SimpleDegrafaButtonSkin"
        height="36"
        fontSize="18"
        color="0x333333"
        fontFamily="Arial"
        fontWeight="bold" />
 
</mx:Application>

Example_09_StatefulDegrafaSkin.mxml – A skin created with Degrafa that reacts to states.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:degrafa="http://www.degrafa.com/2008"
    backgroundGradientColors="[#333333, #666666]"
    layout="absolute">
 
    <mx:Style>
 
        Application
        {
            background-color: "#222222";
        }
 
        Button
        {
            fill-colors: #222222,#222222;
            border-color: #666666;
            color: #CCCCCC;
            corner-radius: 0;
            text-roll-over-color: #FFFFFF;
            highlight-alphas: 0,0;
            border-alpha:  1;
        }
 
    </mx:Style>
 
    <mx:Button
        id="skinnedButton"
        top="100"
        horizontalCenter="0"
        label="Stateful Degrafa Skinned Button"
        skin="skins.StatefulDegrafaButtonSkin"
        height="36"
        fontSize="18"
        color="0x333333"
        fontFamily="Arial"
        fontWeight="bold" />
 
</mx:Application>

Example_10_CustomDegrafaSkin.mxml – A skin created with Illustrator path data and Degrafa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:degrafa="http://www.degrafa.com/2008"
    backgroundGradientColors="[#333333, #666666]"
    layout="absolute">
 
    <mx:Style>
 
        Application
        {
            background-color: "#222222";
        }
 
        Button
        {
            fill-colors: #222222,#222222;
            border-color: #666666;
            color: #CCCCCC;
            corner-radius: 0;
            text-roll-over-color: #FFFFFF;
            highlight-alphas: 0,0;
            border-alpha:  1;
        }
 
    </mx:Style>
 
    <mx:Button
        id="skinnedButton"
        top="100"
        horizontalCenter="0"
        label="Custom Skin"
        skin="skins.CustomDegrafaSkin"
        height="36"
        fontSize="18"
        color="0x333333"
        fontFamily="Arial"
        fontWeight="bold" />
 
</mx:Application>

Example_11_CSSDegrafaSkin.mxml – A skin created with the Degrafa CSSSkin class,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
    <mx:Style>
        Application
        {
            borderSkin: ClassReference("com.degrafa.skins.CSSSkin");
 
            background-image: Embed("/assets/pdf.png");
            background-repeat: repeat;
            background-position: center;
            background-blend: normal;
        }
        VBox
        {
            borderSkin: ClassReference("com.degrafa.skins.CSSSkin");
 
            background-color: "90deg #FFF0A5 #FFB03B";
            border-bottom-left-radius: 20;
            border-bottom-right-radius: 10;
            border-top-left-radius: 10;
            border-top-right-radius: 0;
            border-color: #222222;
            border-width: "2px 2px 2px 2px";
            border-alpha: 1;
            padding-left: 5;
            padding-right: 5;
            padding-top: 5;
            padding-bottom: 5;
        }
        Button
        {
            skin: ClassReference("com.degrafa.skins.CSSSkin");
 
            background-color: "90deg #62ABCD #336699";
            border-bottom-left-radius: 8;
            border-bottom-right-radius: 8;
            border-top-left-radius: 8;
            border-top-right-radius: 8;
            border-color: #FFFFFF;
            stroke-color: #FFFFFF;
            border-thickness: 1;
        }
    </mx:Style>
 
    <mx:VBox x="116" y="119" height="138" width="228">
        <mx:Button label="Button" width="150" />
        <mx:Button label="Button" width="150" />
        <mx:Button label="Button" width="150" />
    </mx:VBox>
 
</mx:Application>