mx.states.Transition （Flex 3.2）

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

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

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

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

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

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

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

MXML のシンタックス expanded

MXML シンタックスを隠す

The <mx:Transition> tag defines the following attributes:

  <mx:Transition
    Properties
    id="ID"
    effect=""
    fromState="*"
    toState="*"
  />

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

例を表示

	プロパティ	定義元
		constructor : Object 指定されたオブジェクトインスタンスのクラスオブジェクトまたはコンストラクタ関数への参照です。	Object
		effect : IEffect このトランジションを適用するときに再生する IEffect オブジェクトです。	Transition
		fromState : String = "*" トランジションを適用する場合に、変更前のビューステートを指定するストリングです。	Transition
		prototype : Object [静的] クラスまたは関数オブジェクトのプロトタイプオブジェクトへの参照です。	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:IEffect

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

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

fromState

プロパティ

public var fromState:String = "*"

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

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

デフォルト値 : "*".

toState

プロパティ

public var toState:String = "*"

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

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

デフォルト値 : "*".

コンストラクタの詳細

Transition

()

コンストラクタ

public function Transition()

コンストラクタです。

例例の使用法

TransitionExample.mxml

<?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>

現在のページ: http://livedocs.adobe.com/flex/3_jp/langref/mx/states/Transition.html

Adobe® Flex™ 3.2 リファレンスガイド This Help system only	すべてのパッケージ \| すべてのクラス \| 言語エレメント \| 索引 \| 付録 \| 規則 \| フレームフレームなし
Transition	プロパティ \| メソッド \| 例