コンポーネントインスタンスの実行時の作成と管理
アプリケーションのユーザーインターフェイスをレイアウトする場合は MXML を、アプリケーションのイベント処理や実行時の制御を行う場合は ActionScript を使用するのが一般的です。また、ActionScript を使用して、コンポーネントのインスタンスを実行時に作成することも可能です。例えば、MXML で空の Accordion コンテナを定義し、ActionScript を使用して、ユーザーアクションに応答する形で Accordion コンテナにパネルを追加できます。
表示リストとコンテナの子について
Flash Player は、アプリケーションを構成する可視オブジェクト（または可視になる可能性のあるオブジェクト）のツリーを維持します。ツリーのルートは Application オブジェクトで、子コンテナとコンポーネントがツリーのブランチとリーフノードになります。このツリーのことを「表示リスト」と呼びます。子コンポーネントをコンテナに追加するとき、またはコンテナから削除するときは、表示リストに対して追加または削除操作を行うことになります。また、表示リスト内での子コンポーネントの位置を変更することで、子コンポーネントの相対的な位置を変更することもできます。
表示リストはアプリケーションの最上位をルートとするツリーですが、ActionScript でコンテナのメソッドとプロパティを使用してコンテナの子を操作するときは、コンテナの直接の子にアクセスするだけであり、それらをリスト内のインデックス付きアイテムとして扱います。このインデックスは 0 から始まり、表示リスト内のコンテナの最初の子が 0 になります。
Container クラスには、表示リスト内のコンテナの直接の子コンポーネントの数を保持する numChildren プロパティがあります。例えば、次の HBox コンテナには 2 つの子コンポーネントが含まれているので、その numChildren プロパティの値は 2 になります。
<mx:HBox id="myContainer">
<mx:Button click="clickHandler();"/>
<mx:TextInput/>
</mx:HBox>
実行時にコンテナの子コンポーネントにアクセスして変更するには、Container クラスの addChild()、addChildAt()、getChildren()、getChildAt()、getChildByName()、removeAllChildren()、removeChild()、removeChildAt() の各メソッドを使用します。例えば、次の例のように、コンテナのすべての子コンポーネントを反復処理できます。
private function clickHandler():void {
var numChildren:Number = myContainer.numChildren;
for (var i:int = 0; i < numChildren; i++) {
trace(myContainer.getChildAt(i));
}
}
Container クラスでは、コンテナのすべての子を含む完全な表示リストを保持する rawChildren プロパティも定義されています。このリストには、コンテナのすべての子に加えて、コンテナの境界線や背景イメージなどの「クロム」（表示エレメント）を実装する DisplayObject も含まれています。詳しくは、表示専用の子へのアクセスを参照してください。
コンテナまたはアプリケーション内の子コンポーネントの数の取得
コンテナに含まれる直接の子コンポーネントの数を取得するには、コンテナの numChildren プロパティの値を取得します。次のアプリケーションは、アプリケーションと VBox コンテナに含まれる子の数を取得します。VBox コントロールには 5 つのラベルコントロールが含まれているため、子の数は 5 になります。Application コンテナにはその子として VBox コントロールと Button コントロールが含まれているため、子の数は 2 になります。
<?xml version="1.0"?>
<!-- containers\intro\VBoxNumChildren.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Import the Alert class.
import mx.controls.Alert;
public function calculateChildren():void {
var myText:String = new String();
myText="The VBox container has " +
myVBox.numChildren + " children";
myText+="\nThe Application has " +
numChildren + " children";
Alert.show(myText);
}
]]>
</mx:Script>
<mx:VBox id="myVBox" borderStyle="solid">
<mx:Label text="This is label 1"/>
<mx:Label text="This is label 2"/>
<mx:Label text="This is label 3"/>
<mx:Label text="This is label 4"/>
<mx:Label text="This is label 5"/>
</mx:VBox>
<mx:Button label="Show Children" click="calculateChildren();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
<mx:Application> タグを含むメインの MXML アプリケーションファイルでは、現在のスコープは常に Application オブジェクトになります。したがって、オブジェクト接頭辞の付いていない numChildren プロパティへの参照は、Application オブジェクトの numChildren プロパティを参照します。ルートアプリケーションへのアクセスについて詳しくは、スコープについてを参照してください。
numChildren プロパティと getChildAt() メソッドでカウントまたはアクセスできるのは、子コンポーネントのみです。コンテナには、境界線や背景などのスタイルエレメントやスキンが含まれていることがあります。コンテナの rawChildren プロパティを使用すると、コンポーネントの「内容を表す子」とスキンおよびスタイルの「表示されるだけの子」を含む、コンテナのすべての子にアクセスできます。rawChildren プロパティによって返されるオブジェクトは IChildList インターフェイスを実装します。このインターフェイスのメソッドとプロパティ（getChildAt() など）を使用することで、コンテナのすべての子にアクセスし、操作できます。
コンポーネントの実行時の作成と削除
コンポーネントのインスタンスを実行時に作成するには、インスタンスを定義し、任意のプロパティを設定します。次に、親コンテナの addChild() メソッドを呼び出して、親コンテナの子としてそのインスタンスを追加します。このメソッドのシグネチャは次のとおりです。
addChild(child:DisplayObject):DisplayObject
child パラメータは、コンテナに追加するコンポーネントを指定します。
例えば、次のアプリケーションは、myButton という名前の Button コントロールを持つ HBox コンテナを作成します。
<?xml version="1.0"?>
<!-- containers\intro\ContainerAddChild.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Button;
public function addButton():void {
var myButton:Button = new Button();
myButton.label = "New Button";
myHBox.addChild(myButton);
}
]]>
</mx:Script>
<mx:HBox id="myHBox" initialize="addButton();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、ユーザーアクションに対する応答としてではなく、アプリケーションのロード時にコントロールを作成しています。ただし、次の例のように、ユーザーが既存のボタンを押したときに新しいコントロールを追加することもできます。
<?xml version="1.0"?>
<!-- containers\intro\ContainerAddChild2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="left">
<mx:Script>
<![CDATA[
import mx.controls.Button;
public function addButton():void {
var myButton:Button = new Button();
myButton.label = "New Button";
myHBox.addChild(myButton);
}
]]>
</mx:Script>
<mx:HBox id="myHBox">
<mx:Button label="Add Button" click="addButton();"/>
</mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
次の図は、ユーザーが元（一番左）のボタンを 3 回押した後のアプリケーションの状態を示しています。
コントロールをコンテナから削除するには、removeChild() メソッドを使用します。Flex が、削除した子の parent プロパティを設定します。removeChild() メソッドの呼び出し後に、削除した子がアプリケーションのどこからも参照されない場合、その子はガベージコレクションプロセスによって破棄されます。次の例は、ユーザーがボタンを押したときにそのボタンをアプリケーションから削除します。
<?xml version="1.0"?>
<!-- containers\intro\ContainerRemoveChild.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function removeButton():void {
myHBox.removeChild(myButton);
}
]]>
</mx:Script>
<mx:HBox id="myHBox">
<mx:Button id="myButton"
label="Remove Me"
click="removeButton();"/>
</mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
コンテナの子に対して使用できるその他のメソッドについては、『Adobe Flex リファレンスガイド』の Container クラスを参照してください。
次の例では、MXML を使用して、2 つの Button コントロールを含む VBox コンテナを定義しています。2 つの Button コントロールは、VBox コンテナに CheckBox コントロールを追加するためのボタンと、VBox コンテナから CheckBox コントロールを削除するためのボタンとして使用します。
<?xml version="1.0"?>
<!-- containers\intro\ContainerComponentsExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Import the CheckBox class.
import mx.controls.CheckBox;
// Define a variable to hold the new CheckBox control.
private var myCheckBox:CheckBox;
// Define a variable to track if the CheckBox control
// is in the display list.
private var checkBoxDisplayed:Boolean = false;
public function addCB():void {
// Make sure the check box isn't being displayed.
if(checkBoxDisplayed==false){
// Create the check box if it does not exist.
if (!myCheckBox) {
myCheckBox = new CheckBox();
}
// Add the check box.
myCheckBox.label = "New CheckBox";
myVBox.addChild(myCheckBox);
checkBoxDisplayed=true;
}
}
public function delCB():void {
// Make sure a CheckBox control exists.
if(checkBoxDisplayed){
myVBox.removeChild(myCheckBox);
checkBoxDisplayed=false;
}
}
]]>
</mx:Script>
<mx:VBox id="myVBox">
<mx:Button label="Add CheckBox"
click="addCB();"/>
<mx:Button label="Remove CheckBox"
click="delCB();"/>
</mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
次の図は、ユーザーが「Add CheckBox」ボタンを押した後のアプリケーションの状態を示しています。
次の例では、Accordion コンテナにパネルを追加および削除しています。初期状態では、Accordion コンテナにパネルが 1 つだけ存在します。「Add HBox」ボタンをクリックするたびに、Accordion コンテナに新しい HBox コンテナが追加されます。
<?xml version="1.0"?>
<!-- containers\intro\ContainerComponentsExample2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Import HBox class.
import mx.containers.HBox;
//Array of created containers
private var hBoxes:Array = [];
public function addHB():void {
// Create new HBox container.
var newHB:HBox = new HBox();
newHB.label="my label: " + String(hBoxes.length);
// Add it to the Accordion container, and to the
// Array of HBox containers.
hBoxes.push(myAcc.addChild(newHB));
}
public function delHB():void {
// If there is at least one HBox container in the Array,
// remove it.
if (hBoxes.length>= 1) {
myAcc.removeChild(hBoxes.pop());
}
}
]]>
</mx:Script>
<mx:VBox>
<mx:Accordion id="myAcc" height="150" width="150">
<mx:HBox label="Initial HBox"/>
</mx:Accordion>
<mx:Button label="Add HBox" click="addHB();"/>
<mx:Button label="Remove HBox" click="delHB();"/>
</mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
子の順序の制御
子の順序は、特定の順序で子を追加することによって制御できます。その他にも次のような方法があります。
- addChildAt() メソッドを使用して、コンポーネントの既存の子の中のどこに新しい子を追加するかを指定する
- setChildIndex() メソッドを使用して、表示リスト内のあるコンポーネントの子の中での特定の子の位置を指定する
次の例は、例：VBox コンテナの子の作成と削除の例を修正したものです。ここでは、addChildAt() メソッドを使用して、VBox の最初の子（インデックス 0）として CheckBox コントロールを追加しています。また、setChildIndex() メソッドを使用する Reorder 子ボタンがあり、このボタンをクリックすると、CheckBox コントロールが VBox コンテナの最後の子になるまで表示リスト内を下方に移動します。ボールド体のテキストは、前の例に追加された行、または前の例から変更された行を示します。
<?xml version="1.0"?>
<!-- containers\intro\ContainerComponentsReorder.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Import the CheckBox and Alert classes.
import mx.controls.CheckBox;
import mx.controls.Alert;
// Define a variable to hold the new CheckBox control.
private var myCheckBox:CheckBox;
// Define a variable to track if the CheckBox control
// is in the display list.
private var checkBoxDisplayed:Boolean = false;
public function addCB():void {
// Make sure the check box isn't being displayed.
if(checkBoxDisplayed==false){
// Create the check box if it does not exist.
if (!myCheckBox) {
myCheckBox = new CheckBox();
}
// Add the check box as the first child of the VBox.
myCheckBox.label = "New CheckBox";
myVBox.addChildAt(myCheckBox, 0);
checkBoxDisplayed=true;
}
}
public function delCB():void {
// Make sure a CheckBox control exists.
if(checkBoxDisplayed){
myVBox.removeChild(myCheckBox);
checkBoxDisplayed=false;
}
}
public function reorder():void {
// Make sure a CheckBox control exists.
if(checkBoxDisplayed==true){
// Don't try to move the check box past the end
// of the children. Because indexes are 0 based,
// the last child index is one less
// than the number of children.
if (myVBox.getChildIndex(myCheckBox) < myVBox.numChildren-1)
{
// Increment the checkBoxIndex variable and use it to
// set the index of the check box among the VBox children.
myVBox.setChildIndex(myCheckBox,
myVBox.getChildIndex(myCheckBox) + 1);
}
}
else {
Alert.show("Add the check box before you can move it");
}
}
]]>
</mx:Script>
<mx:VBox id="myVBox">
<mx:Button label="Add CheckBox" click="addCB();"/>
<mx:Button label="Remove CheckBox" click="delCB();"/>
<mx:Button label="Reorder children" click="reorder();"/>
</mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート