package jp.playwell.controls
{
    import jp.playwell.skins.ToolBarButtonSkin;
 
    import spark.components.Button;
 
    [Style(name="icon", type="Class", inherit="no")]
 
    public class ToolBarButton extends Button
    {
        public function ToolBarButton()
        {
            super();
            setStyle("skinClass", ToolBarButtonSkin);
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    minWidth="21" minHeight="21"
    alpha.disabled="0.5">
 
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("jp.playwell.controls.ToolBarButton")]
    </fx:Metadata>
 
    <fx:Script>
        <![CDATA[
            static private const exclusions:Array = ["labelElement"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
        ]]>
    </fx:Script>
 
    <!-- layer 1: fill -->
    <s:Rect top="0" height="23" horizontalCenter="0" width="45"
            radiusX="11.5" radiusY="11.5">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xE6E7E8"
                        alpha="1" alpha.over="0.7" alpha.down="0.4"/>
                <s:GradientEntry color="0xC7CBCE"
                        alpha="1" alpha.over="0.7" alpha.down="0.4"/>
                <s:GradientEntry color="0xD9DCE0"
                        alpha="1" alpha.over="0.7" alpha.down="0.4"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: border -->
    <s:Rect top="1" horizontalCenter="0"
            width="45" height="23"
            radiusX="11.5" radiusY="11.5">
        <s:stroke>
            <s:SolidColorStroke color="0xFFFFFF" alpha="0.4"/>
        </s:stroke>
    </s:Rect>
    <s:Rect top="0" horizontalCenter="0"
            width="45" height="23"
            radiusX="11.5" radiusY="11.5">
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.4"/>
                <s:GradientEntry color="0x000000" alpha="0.1"/>
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 3: icon -->
    <s:BitmapImage source="{hostComponent.getStyle('icon')}"
        horizontalCenter="0" top="2"/>
 
    <!-- layer 4: text -->
    <s:SimpleText
        fontSize="11.5"
        textAlign="center" color="#FFFFFF"
        verticalAlign="middle" alpha="0.4"
        horizontalCenter="0" text="{hostComponent.label}"
        left="10" right="10" top="29" />
    <s:SimpleText id="labelElement"
        fontSize="11.5"
        textAlign="center"
        verticalAlign="middle"
        horizontalCenter="0"
        left="10" right="10" top="28" />
 
</s:SparkSkin>

<controls:ToolBarButton label="Get Mail" icon="@Embed(source='assets/mail.png')"/>
<controls:ToolBarButton label="New Message" icon="@Embed(source='assets/mail_new.png')"/>
<controls:ToolBarButton label="Delete" icon="@Embed(source='assets/delete.png')"/>
<controls:ToolBarButton label="Junk" icon="@Embed(source='assets/mail_junk.png')"/>

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata>
 
    <!-- ビューステート -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
 
    <!-- 背景とか -->
    <s:Rect top="0" bottom="0" left="0" right="0">
        <s:fill>
            <s:SolidColor color="{hostComponent.backgroundColor as uint}"/>
        </s:fill>
    </s:Rect>
 
    <!-- コンテナを Scroller でラップ -->
    <s:Scroller top="0" bottom="0" left="0" right="0">
 
        <!-- 子コンポーネントを内包するためのコンテナ -->
        <s:Group id="contentGroup" top="0" bottom="0" left="0" right="0"/>
    </s:Scroller>
 
</s:SparkSkin>

<?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"
    skinClass="skins.ApplicationSkin">
        ・
        ・
        ・
</s:Application>

<?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">
 
    <s:Scroller width="100%" height="100%">
        <s:Group width="100%" height="100%">
            ・
            ・
            ・
        </s:Group>
    </s:Scroller>
 
</s:Application>

package mx.core
{
public interface IMXMLObject
{
    function initialized(document:Object, id:String):void;
}
}

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="400" height="300"
    horizontalAlign="center" verticalAlign="middle">
    <mx:Button id="button" label="ボタン"/>
</mx:VBox>

package views.helpers
{
    import flash.events.MouseEvent;
 
    import mx.controls.Alert;
    import mx.core.IMXMLObject;
    import mx.events.FlexEvent;
 
    import views.MyCustomComponent;
 
    public class MyCustomComponentHelper implements IMXMLObject
    {
        private var view:MyCustomComponent;
 
        public function MyCustomComponentHelper()
        {
        }
 
        public function initialized(document:Object, id:String):void
        {
            view = document as MyCustomComponent;
            view.addEventListener(FlexEvent.CREATION_COMPLETE,
                creationCompleteHandler);
        }
 
        private function creationCompleteHandler(event:FlexEvent):void
        {
            view.button.addEventListener(MouseEvent.CLICK,
                button_clickHandler);
        }
 
        private function button_clickHandler(event:MouseEvent):void
        {
            Alert.show("ボタンがクリックされたよ");
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:helpers="views.helpers.*"
    width="400" height="300"
    horizontalAlign="center" verticalAlign="middle">
    <helpers:MyCustomComponentHelper id="helper"/>
    <mx:Button id="button" label="ボタン"/>
</mx:VBox>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:views="views.*"
    layout="absolute"
    <views:MyCustomComponent/>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="400" height="300">
    <mx:Button id="button" label="ボタン"/>
</mx:VBox>

package views
{
    import flash.events.MouseEvent;
 
    import mx.controls.Alert;
    import mx.events.FlexEvent;
 
    import views.mxml.MyCustomComponentView;
 
    public class MyCustomComponent extends MyCustomComponentView
    {
        public function MyCustomComponent()
        {
            super();
            addEventListener(FlexEvent.CREATION_COMPLETE,
                creationCompleteHandler);
        }
 
        private function creationCompleteHandler(event:FlexEvent):void
        {
            button.addEventListener(MouseEvent.CLICK,
                button_clickHandler);
        }
 
        private function button_clickHandler(event:MouseEvent):void
        {
            Alert.show("ボタンがクリックされたよ");
        }
    }
}

package jp.playwell.containers
{
    import flash.display.Graphics;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
 
    import mx.containers.Panel;
 
    public class ResizablePanel extends Panel
    {
        protected var resizeHandle:Sprite;
 
        public function ResizablePanel()
        {
            super();
        }
 
        //--------------------------------------
        // resizable
        //--------------------------------------
        private var _resizable:Boolean = true;
 
        [Bindable]
        [Inspectable(category="General",
            enumeration="true,false", defaultValue="true")]
        /**
         * resizable プロパティが true の場合、リサイズできます。
         * @default true
         */
        public function get resizable():Boolean
        {
            return _resizable;
        }
        public function set resizable(value:Boolean):void
        {
            _resizable = value;
            invalidateDisplayList();
        }
 
        //--------------------------------------
        // protected methods
        //--------------------------------------
        override protected function createChildren():void
        {
            super.createChildren();
 
            if (!resizeHandle)
            {
                resizeHandle = new Sprite();
                resizeHandle.alpha = 0.6;
 
                // ドラッグハンドルを描画
                var g:Graphics = resizeHandle.graphics;
                g.beginFill(0xFFFFFF, 0.0);
                g.drawRect(0, 0, 15, 15);
                g.endFill();
                g.lineStyle(0, 0x111111);
                g.moveTo(3, 14);
                g.lineTo(14, 3);
                g.moveTo(7, 14);
                g.lineTo(14, 7);
                g.moveTo(11, 14);
                g.lineTo(14, 11);
                g.lineStyle(0, 0xFFFFFF);
                g.moveTo(4, 14);
                g.lineTo(14, 4);
                g.moveTo(8, 14);
                g.lineTo(14, 8);
                g.moveTo(12, 14);
                g.lineTo(14, 12);
 
                rawChildren.addChild(resizeHandle);
 
                resizeHandle.addEventListener(MouseEvent.MOUSE_DOWN,
                    resizeHandle_mouseDownHandler);
            }
        }
 
        override protected function updateDisplayList(unscaledWidth:Number,
            unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
 
            resizeHandle.visible = resizable;
            resizeHandle.x = unscaledWidth - resizeHandle.width;
            resizeHandle.y = unscaledHeight - resizeHandle.height;
        }
 
        //--------------------------------------
        // ドラッグ処理
        //--------------------------------------
        private var dragData:Rectangle;
        private function resizeHandle_mouseDownHandler(event:MouseEvent):void
        {
            dragData = new Rectangle(stage.mouseX, stage.mouseY,
                unscaledWidth, unscaledHeight);
            stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler);
        }
        private function stage_mouseUpHandler(event:MouseEvent):void
        {
            dragData = null;
            stage.removeEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler);
        }
        private function stage_mouseMoveHandler(event:MouseEvent):void
        {
            if (!resizable) return;
            var w:Number = dragData.width + stage.mouseX - dragData.x;
            var h:Number = dragData.height + stage.mouseY - dragData.y;
 
            width = Math.min(maxWidth, Math.max(minWidth, resizeHandle.width, w));
            height = Math.min(maxHeight, Math.max(minHeight, resizeHandle.height, h));
        }
    }
}