Adobe Edge の Edge クラスとコンポジションのインスタンスの利用

コンポジションのインスタンス関連

最初に、シンボルのインスタンスが含まれるコンポジションのインスタンスを取得する方法です。

var comp = sym.getComposition()
var comp = sym.composition

どちらを使っても良いようですが、メソッドを使った方が他の API との整合性はあるかもしれません。どちらが （あるいは両方） 継続してサポートされるかは不明なので、あまり気にしてもしょうがないかもです。

ともあれ、コンポジションのインスタンスを取得すると、以下のメソッドが利用できます。

1 つ目は、ステージを取得するメソッドです。これで、コンポジションの最上位のシンボルのインスタンスを取得できます。

comp.getStage()

このメソッドで取得できるオブジェクトは、Edge のシンボルです。なので、前回紹介した各 API が利用できます。例えば、

comp.getStage().$("MyInstance").hide();

さて、2 つ目は、シンボルを取得するメソッドです。Edge ランタイムは、引数の文字列と同じ名前を持つシンボルのインスタンスを探します。

comp.getSymbols("インスタンス名")

複数の要素が該当する可能性があるため、配列が返されます。引数を指定しない場合、あるいは引数の値が null か undefined の場合の結果は、コンポジション内の全てのシンボルのインスタンスの配列になります。

以下は、使い方の例です。

comp.getSymbols("MyInstance")[0].$("MyChildInstance").hide();

最後は、動的にシンボルのインスタンスを生成するメソッドです。

comp.createSymbolChild("シンボル名", 親のセレクタ)

最初の引数は、インスタンスを生成するシンボルの名前です。コンポジション内で定義されたシンボルの名前を指定できます。ライブラリパネル内に表示されている名前を使います。

次の引数は、生成したインスタンスの親となる要素のセレクタです。ここに指定する要素はシンボルのインスタンス以外も （グラフィックスでもテキストでも） OK です。

下は具体的な使用方法の例です。2 つ目の引数はどちらの書き方でも大丈夫なようです。

comp.createSymbolChild("NewInstance", sym.lookupSelector("MyElement"));
comp.createSymbolChild("NewInstance", sym.$("MyElement"));

新しく作成されたインスタンスは、そのまま画面に表示されます。現在、非表示の状態で作成したり、位置を指定する手段はありません。

今後、3 番目の引数で重なり順を指定、4 番目の引数でその他のオプションを指定できるようになるようです。

親のセレクタが指す要素が複数ある可能性があるため、このメソッドは配列を返します。見つかった親要素全てに、シンボルのインスタンスが生成されます。

結果が配列なので、新しく生成された要素へのアクセスは以下のようになります。

comp.createSymbolChild("NewInstance", sym.$("MyElement"))[0]

Edge の API

アクションの外部から Edge のコンポジションを扱えるように、Edge というインターフェースが提供されます。jQuery オブジェクトと関連付けられているため、以下のように記述できます。

jQuery.Edge.getComposition(compId)
$.Edge.getComposition(compId)

その他、コンポジションを動的に生成したり、コンポジションが初期化されたときに実行される関数を登録する手段も提供されるようです。

new jQuery.Edge.Composition(compId, symbolData, attachments, options)
jQuery.Edge.registerCompositionReadyHandler(compId, handler, options)