コンポーネントへのプロパティおよびメソッドの追加
カスタムコンポーネントを再利用できるようにするには、ユーザーが情報を渡せるように設計する必要があります。そのためには、パブリックプロパティやパブリックメソッドをコンポーネントに追加し、MXML でそのコンポーネントにアクセスできるようにします。
ActionScript でのパブリックプロパティの定義
以下のいずれかの方法を使用して、ActionScript コンポーネントにパブリックプロパティを追加できます。
- パブリック変数を定義する
- パブリック getter/setter メソッドを定義する
MXML によるパブリックプロパティへのアクセス
コンポーネントに定義するすべてのパブリックプロパティは、MXML タグプロパティを使用して、MXML でアクセスできます。例えば、ユーザーがコンポーネントに値を渡せるようにするには、次の例のようにします。
<MyComp:MyCustomComponent prop1="3"/>
MXML でタグ属性を取るコンポーネントを作成するには、クラス定義でタグ属性と同じ名前のパブリック変数を定義します。
public class MyCustomComponent extends TextArea {
// Define an uninitialized variable.
public var prop1:Number;
// Define and initialize a variable.
public var prop2:Number=5;
...
}
または、次の例のように、パブリック getter/setter メソッドを使用してプロパティを定義します。
public class MyCustomComponent extends TextArea {
private var _prop1:Number;
public function get prop1():Number {
// Method body.
// Typically the last line returns the value of the private variable.
return _prop1;
}
public function set prop1(value:Number):void {
// Typically sets the private variable to the argument.
_prop1=value;
// Define any other logic, such as dispatching an event.
}
}
次の例に示すように、プライベート変数を定義して初期化することができます。
private var _prop2:Number=5;
MXML でプロパティに値を指定する場合、Flex は自動的に setter メソッドを呼び出します。MXML でプロパティを設定しないと、Flex は、初期値（指定がある場合）、または型のデフォルト値（Number 型の変数の場合は NaN）に設定します。
変数としてのパブリックプロパティの定義
次の例では、Ctrl+I キーを押すと、TextArea コントロールが拡張されて、ユーザーがフォントサイズを 1 ポイントずつ増やせます。また、Ctrl+M キーを押すと、フォントサイズを 1 ポイントずつ減らせます。
package myComponents
{
// as/myComponents/TextAreaFontControl.as
import mx.controls.TextArea;
import flash.events.KeyboardEvent;
import flash.events.Event;
public class TextAreaFontControl extends TextArea
{
// Constructor
public function TextAreaFontControl() {
super();
// Add event listeners.
addEventListener("keyDown", myKeyDown);
addEventListener("creationComplete", myCreationComplete);
}
// Define private var for current font size.
private var currentFontSize:Number;
// Define a public property for the minimum font size.
public var minFontSize:Number = 5;
// Define a public property for the maximum font size.
public var maxFontSize:Number = 15;
// Initialization event handler for getting default font size.
private function myCreationComplete(eventObj:Event):void {
// Get current font size
currentFontSize = getStyle('fontSize');
}
// keyDown event handler.
private function myKeyDown(eventObj:KeyboardEvent):void {
// Was Ctrl key pressed?
if (eventObj.ctrlKey)
{
switch (eventObj.keyCode) {
// Was Ctrl-I pressed?
case 73 :
if (currentFontSize < maxFontSize) {
currentFontSize = currentFontSize + 1;
setStyle('fontSize', currentFontSize);
}
break;
// Was Ctrl-M pressed?
case 77 :
if (currentFontSize > minFontSize) {
currentFontSize = currentFontSize - 1;
setStyle('fontSize', currentFontSize);
}
break;
default :
break;
}
}
}
}
}
ここで、getStyle() メソッドへの呼び出しは、creationComplete イベントのイベントリスナーにあります。Flex がすべての継承スタイルを取得できるように、コンポーネントの作成が完了するまで待ってから、getStyle() を呼び出す必要があります。ただし、コンポーネントコンストラクタで setStyle() を呼び出して、スタイルを設定することができます。
この例では、変数を使用してパブリックプロパティを定義し、コントロールの最大フォントサイズ（maxFontSize）と最小フォントサイズ（minFontSize）をコントロールします。次の例のように、MXML でこれらのプロパティを設定できます。
<?xml version="1.0"?>
<!-- as/MainTextAreaFontControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*">
<MyComp:TextAreaFontControl id="myTAFS"
minFontSize="8"
maxFontSize="50"/>
<mx:Button
label="Get Font Size"
click="myTA.text=String(myTAFS.getStyle('fontSize'));"/>
<mx:TextArea id="myTA"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
getter/setter メソッドを使用したパブリックプロパティの定義
パブリックプロパティを定義するためのパブリック変数の使用に関しては、制限はありません。ただし、カスタムコンポーネントを使用してユーザーの操作をコントロールできるように、getter/setter メソッドを使用することをお勧めします。getter および setter としてのプロパティの定義を参照してください。
次のコード例では、変数としてのパブリックプロパティの定義の maxFontSize プロパティのパブリックプロパティ定義を置き換える TextAreaFontControlGetSet という名前のコンポーネントを定義しています。
package myComponents
{
// as/myComponents/TextAreaFontControlGetSet.as
import mx.controls.TextArea;
import flash.events.KeyboardEvent;
import flash.events.Event;
public class TextAreaFontControlGetSet extends TextArea
{
public function TextAreaFontControlGetSet()
{
super();
addEventListener("keyDown", myKeyDown);
addEventListener("creationComplete", myCreationComplete);
}
private var currentFontSize:Number;
public var minFontSize:Number = 5;
// Define private variable for maxFontSize.
private var _maxFontSize:Number = 15;
// Define public getter method.
public function get maxFontSize():Number {
return _maxFontSize;
}
// Define public setter method.
public function set maxFontSize(value:Number):void {
if (value <= 30) {
_maxFontSize = value;
} else _maxFontSize = 30;
}
private function myCreationComplete(eventObj:Event):void {
// Get current font size
currentFontSize = getStyle('fontSize');
}
// keyDown event handler.
private function myKeyDown(eventObj:KeyboardEvent):void {
// Was Ctrl key pressed?
if (eventObj.ctrlKey)
{
switch (eventObj.keyCode) {
// Was Ctrl-I pressed?
case 73 :
if (currentFontSize < maxFontSize) {
currentFontSize = currentFontSize + 1;
setStyle('fontSize', currentFontSize);
}
break;
// Was Ctrl-M pressed?
case 77 :
if (currentFontSize > minFontSize) {
currentFontSize = currentFontSize - 1;
setStyle('fontSize', currentFontSize);
}
break;
default :
break;
}
}
}
}
}
この例では、setter メソッドで、指定されたフォントサイズがあらかじめ定義された限度（30 ピクセル）より小さいかどうかをチェックしています。フォントサイズが限度より大きい場合は、その値を限度に設定します。
デフォルトプロパティの作成
[DefaultProperty] メタデータタグを使用して、ActionScript コンポーネントのデフォルトプロパティを定義できます。この結果、プロパティ名を指定することなく、コンポーネントタグの子タグとして、デフォルトのプロパティを MXML で使用できます。例を含むデフォルトプロパティの使用について詳しくは、変数としてのパブリックプロパティの定義を参照してください。
次の例のように、ActionScript コンポーネントで [DefaultProperty] メタデータタグを使用して、デフォルトプロパティを定義できます。
package myComponents
{
// as/myComponents/TextAreaDefaultProp.as
import mx.controls.TextArea;
// Define the default property.
[DefaultProperty("defaultText")]
public class TextAreaDefaultProp extends TextArea {
public function TextAreaDefaultProp()
{
super();
}
// Define a setter method to set the text property
// to the value of the default property.
public function set defaultText(value:String):void {
if (value!=null)
text=value;
}
public function get defaultText():String {
return text;
}
}
}
この例では、defaultProperty という名前の新規のプロパティを TextArea コントロールに追加し、これをコントロールのデフォルトプロパティとして指定しています。defaultProperty の setter メソッドは、コントロールの text プロパティの値だけを設定します。次の例のように、MXML でデフォルトプロパティを使用できます。
<?xml version="1.0"?>
<!-- as/MainTextAreaDefaultProp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*">
<MyComp:TextAreaDefaultProp>Hello</MyComp:TextAreaDefaultProp>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
ActionScript クラスを MXML コンポーネントのルートタグとして使用している場合、Flex ではデフォルトのプロパティを使用できません。この場合は、次の例のように、子タグを使用してプロパティを定義する必要があります。
<?xml version="1.0"?>
<!-- as/myComponents/TextAreaDefaultPropMXML.mxml -->
<MyComp:TextAreaDefaultProp xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*">
<MyComp:defaultText>Hello</MyComp:defaultText>
</MyComp:TextAreaDefaultProp>
Flex Builder でのプロパティへのアクセス可能化
[Inspectable] メタデータタグをプロパティ定義に追加することで、プロパティ定義を Adobe® Flex™ Builder™ でアクセス可能にできます。例えば、次の例のように、Flex Builder を使用している場合、[Inspectable] メタデータタグを挿入して、プロパティをユーザーが編集できる（または検査できる）ように定義できます。
[Inspectable] var prop1:Number;
また、setter および getter メソッドで、[Inspectable] メタデータタグを使用することもできます。詳しくは、カスタムコンポーネントのメタデータタグを参照してください。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート