mx.states.Transition (Flex™ 2 リファレンスガイド)

パッケージ	mx.states
	public class Transition
継承	Transition Object

Transition クラスにより、ビューステートの変更に応じて再生される一連のエフェクトが定義されます。ビューステート定義が状態の変更方法を定義する一方、トランジションは状態の変更中に表示を変更する順序を定義します。

トランジションを定義するには、アプリケーションのトランジションプロパティを Transition オブジェクトの配列に設定します。

Transition クラスの toState プロパティおよび fromState プロパティを使用して、トランジションをトリガする状態変更を指定します。デフォルトでは、fromState プロパティと toState プロパティの両方が "*" に設定されます。つまり、ビューステートに対するすべての変更にトランジションが適用されます。

変更前のビューステートを明示的に指定するには、fromState プロパティを使用します。変更後のビューステートを明示的に指定するには、toState プロパティを使用します。状態変更が 2 つのトランジションと一致する場合は、toState プロパティが fromState プロパティより優先されます。複数のトランジションが一致する場合、Flex はトランジション配列の最初の定義を使用します。

effect プロパティを使用して、トランジションを適用するときに再生する Effect オブジェクトを指定します。通常、このオブジェクトには、Parallel エフェクトや Sequence エフェクトなどの複数のエフェクトの組み合わせが含まれます。次に例を示します。

<mx:Transition id="myTransition" fromState="*" toState="*">
<mx:Parallel>
        ...
</mx:Parallel>
</mx:Transition>

MXML シンタックス expanded

MXML シンタックスの非表示

<mx:Transition> タグは、以下の属性を定義します。

 <mx:Transition プロパティ id="ID" effect="" fromState="*" toState="*" />

デフォルトの MXML プロパティeffect

例の表示

	プロパティ	定義
		constructor : Object 特定のオブジェクトインスタンスのクラスオブジェクトまたはコンストラクタ関数への参照です。	Object
		effect : Effect トランジションを適用するときに再生する Effect オブジェクトです。	Transition
		fromState : String = "*" トランジションを適用する場合に、変更前のビューステートを指定するストリングです。	Transition
		prototype : Object [static] クラスまたは関数オブジェクトのプロトタイプオブジェクトへの参照です。	Object
		toState : String = "*" トランジションを適用する場合に、変更後のビューステートを指定するストリングです。	Transition

	メソッド	定義
		Transition() コンストラクタ。	Transition
		hasOwnProperty(name:String):Boolean オブジェクトに指定されたプロパティが定義されているかどうかを示します。	Object
		isPrototypeOf(theClass:Object):Boolean Object クラスのインスタンスが、パラメータとして指定されたオブジェクトのプロトタイプチェーン内にあるかどうかを示します。	Object
		propertyIsEnumerable(name:String):Boolean 指定されたプロパティが存在し、列挙可能かどうかを示します。	Object
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void ループ処理に対するダイナミックプロパティの可用性を設定します。	Object
		toString():String 指定されたオブジェクトのストリング表現を返します。	Object
		valueOf():Object 指定されたオブジェクトのプリミティブ値を返します。	Object

プロパティの詳細

effect

プロパティ

public var effect:Effect

トランジションを適用するときに再生する Effect オブジェクトです。通常、このオブジェクトには、Parallel エフェクトや Sequence エフェクトなどの複数のエフェクトの組み合わせが含まれます。

effect プロパティは、Transition クラスのデフォルトプロパティです。MXML タグのシンタックスを使用している場合は、<mx:effect> タグを省略できます。

fromState

プロパティ

public var fromState:String = "*"

トランジションを適用する場合に、変更前のビューステートを指定するストリングです。デフォルト値は "*" で、任意のビューステートを意味します。

このプロパティは、基本ビューステートに対応する空のストリング "" に設定できます。

デフォルト値"*".

toState

プロパティ

public var toState:String = "*"

トランジションを適用する場合に、変更後のビューステートを指定するストリングです。デフォルト値は "*" で、任意のビューステートを意味します。

このプロパティは、基本ビューステートに対応する空のストリング "" に設定できます。

デフォルト値"*".

コンストラクタの詳細

Transition

()

コンストラクタ

public 関数 Transition()

コンストラクタ。

例

TransitionExample

<?xml version="1.0" ?>
<!-- Simple example to demonstrate the Transition class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define one view state, in addition to the base state.-->
    <mx:states>
        <mx:State name="Register">
            <mx:AddChild relativeTo="{loginForm}" position="lastChild">
                <mx:target>
                    <mx:FormItem id="confirm" label="Confirm:">
                        <mx:TextInput/>
                    </mx:FormItem>
                </mx:target>
            </mx:AddChild>
            <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
            <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
            <mx:SetStyle target="{loginButton}" 
                name="color" value="blue"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:target>
                    <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
                </mx:target>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <!-- Define the transition from the base state to the Register state.-->
        <mx:Transition id="toRegister" fromState="*" toState="Register">
            <mx:Sequence targets="{[loginPanel, registerLink, confirm, loginLink, spacer1]}">
                <mx:RemoveChildAction/>
                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
                <mx:SetPropertyAction target="{loginButton}" name="label"/>
                <mx:SetStyleAction target="{loginButton}" name="color"/>
                <mx:Resize target="{loginPanel}"/>
                <mx:AddChildAction/>
            </mx:Sequence>
        </mx:Transition>

        <!-- Define the transition from the Register state to the base state.-->
        <mx:Transition id="toDefault" fromState="Register" toState="*">
            <mx:Sequence targets="{[loginPanel, registerLink, 
                    confirm, loginLink, spacer1]}">
                <mx:RemoveChildAction/>
                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
                <mx:SetPropertyAction  target="{loginButton}" name="label"/>
                <mx:SetStyleAction target="{loginButton}" name="color"/>
                <mx:Resize target="{loginPanel}"/>
                <mx:AddChildAction/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <!-- Define a Panel container that defines the login form.-->
    <mx:Panel title="Login" id="loginPanel" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
    
        <mx:Text width="100%" color="blue"
            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

        <mx:Form id="loginForm" >
            <mx:FormItem label="Username:">
                <mx:TextInput/>
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput/>
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar>
            <mx:LinkButton id="registerLink"  label="Need to Register?"
                click="currentState='Register'"/>
            <mx:Spacer width="100%" id="spacer1"/>
            <mx:Button label="Login" id="loginButton"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

Adobe^® Flex™ 2 リファレンスガイド		すべてのパッケージ \| すべてのクラス \| 言語エレメント \| 索引 \| 付録 \| 規則 \| フレーム内に表示フレームなしバージョン
Class Transition	プロパティ \| メソッド \| 例