＜fx:Library＞ と ＜fx:Definition＞

/**
 * Copyright matacat ( http://wonderfl.net/user/matacat )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/kaou
 */

<?xml version="1.0" encoding="utf-8"?>

<!--
    ＜mx:Component＞の使い道
      http://wonderfl.net/code/628330bd7e208ac13935b6e1f3075b4cc2db22c3
    
    の続編みたいな。 Gumbo では専用のタグができるようです。
    <fx:Library> とその子要素 <fx:Definition> 。
    　先のソースにおける <mx:Component> の扱いを正当化（？）
    するのが <fx:Definition> で、それらを一ヶ所にまとめるのが
    <fx:Library> です。 Definition タグは Library タグの
    中ならいくつでも書けるようです。
    　<mx:Component> との相違点は、
    
    ・コンポーネント名の指定
      className
        -> name
    
    ・置き場所
      Application 直下
        -> Application - Library 直下
    
    ・定義したコンポーネントの名前空間
      ローカルな名前空間
        -> 新 MXML の名前空間（デフォルト fx ）
    
    　これら以外は全く同じ働きをするようです。（あくまでコンポーネント
    定義の話であって、逆に Definition タグがアイテムレンダラー＆
    エディタに適用できるかどうかは未確認です）
    　Gumbo の MXML シンタックスでは、ビジュアルコンポーネントタグ
    とそれ以外を分離する動きがあるようです。これもその一環でしょうか。
    　とは言え <mx:Component> も、接頭辞を fx に直し
    <fx:Declarations> の下に置けば、全く問題なくコンパイル
    できますし動作もします。正式リリースまでどう転がるか判りませんが。
    　ちなみに <fx:Declarations> もビジュアル・非ビジュアル
    分離の一環ぽいです。曰く、任意のコンポーネントで非ビジュアルな
    カスタムビヘイビアを記述する際はこのタグを用いよ、とのこと。
     詳しくはリファレンスをどうぞ。
    
    ActionScript 3.0 Reference for the Adobe Flash Platform
      http://help.adobe.com/en_US/FlashPlatform//reference/actionscript/3/index.html
    
    　（初期状態ではあらゆるプラットフォームのあらゆるコンポーネントが
    表示されるので、 Flex のアイコンをクリックしフィルタをかけてから、
    右上の Show Table of Contents でテーブルを表示
    させると使いやすいです）
-->

<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">
    
    <fx:Library>
        <fx:Definition name="HSlideNstep">
            
            <mx:HBox
                verticalAlign="middle" width="100%"
                paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5"
                creationComplete="init()">
                
                <fx:Metadata>
                    [Event(name="change", type="flash.events.Event")]
                </fx:Metadata>
                
                <fx:Script><![CDATA[
                    
                    public var title:String = "";
                    [Bindable] public var value:Number = 0;
                    public var min:Number = 0;
                    public var max:Number = 10;
                    public var step:Number = 1;
                    public var slideTick:Number = 1;
                    public var slideLabels:Array = ["0", "5", "10"];
                    
                    private var e:Event = new Event("change");
                    
                    private function init():void
                    {
                        lab.text = title;
                        sld.value = num.value = value;
                        sld.minimum = num.minimum = min;
                        sld.maximum = num.maximum = max;
                        sld.snapInterval = num.stepSize = step;
                        sld.tickInterval = slideTick;
                        sld.labels = slideLabels;
                    }
                    
                ]]></fx:Script>
                
                <mx:Label id="lab" />
                <mx:HSlider id="sld" value="{value}" liveDragging="true" change="value = sld.value; dispatchEvent(e)" />
                <mx:NumericStepper id="num" value="{value}" width="60" change="value = num.value; dispatchEvent(e)" />
            </mx:HBox>
            
        </fx:Definition>
    </fx:Library>
    
    <fx:HSlideNstep title="test:" />
    
</s:Application>

<!--
    SDK 落としてすぐ使おうとしたら、 flex-config.xml の記述が
    若干おかしくて mx 名前空間が解決できないってコンパイラに
    怒られまくりました…
-->