MXML では、コンポーネントプロパティは対応する ActionScript プロパティと同じ命名規則を使用します。プロパティ名は小文字で始まり、プロパティ名の中の大文字はそこに含まれる個々の単語の区切りとなります。
ほとんどのコンポーネントプロパティは、次のようにタグ属性として設定できます。
<mx:Label width="50" height="25" text="Hello World"/>
すべてのコンポーネントプロパティは、次のように子タグとして設定できます。
<mx:Label>
<mx:width>50</mx:width>
<mx:height>25</mx:height>
<mx:text>Hello World</mx:text>
</mx:Label>
複合 Object はタグ属性の値としては指定できないので、子タグは通常、プロパティの値を複合 Object に設定するときに使用します。次の例では、子タグを使用して、ComboBox コントロールのデータプロバイダを ArrayCollection オブジェクトに設定しています。
<mx:ComboBox>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
<mx:String>AR</mx:String>
</mx:ArrayCollection>
<mx:dataProvider>
</mx:ComboBox>
子タグを使用してプロパティを設定する場合は 1 つの制約があり、子タグの名前空間の接頭辞(上の例では mx:)とコンポーネントタグの名前空間の接頭辞が一致している必要があります。
コンポーネントの各プロパティは、次のいずれかのタイプに分類されます。
スカラー値はタグ属性として割り当て、ActionScript オブジェクトなどの複雑な型は子タグを使用して割り当てることをお勧めします。
通常、スカラープロパティの値は、次の例のように、コンポーネントタグのプロパティとして指定します。
<mx:Label width="50" height="25" text="Hello World"/>
多くのコンポーネントプロパティでは、静的定数によって有効値が定義されています。この場合、これらの静的定数の定義は ActionScript クラス内にあります。MXML では、静的定数を使用してプロパティの値を設定することも、静的定数の値を使用することもできます。次に例を示します。
<!-- Set the property using the static constant. -->
<mx:HBox width="200" horizontalScrollPolicy="{ScrollPolicy.OFF}">
...
</mx:HBox>
<!-- Set the property using the value of the static constant. -->
<mx:HBox width="200" horizontalScrollPolicy="off">
...
</mx:HBox>
HBox コンテナには、コンテナの水平スクロールバーの動作を定義する horizontalScrollPolicy というプロパティがあります。この例では、horizontalScrollPolicy プロパティを明示的に設定して水平スクロールバーを無効にしています。
最初の例では、OFF という静的定数を使用して horizontalScrollPolicy プロパティを設定しています。この静的定数は ScrollPolicy クラスで定義されています。MXML でプロパティの値を静的定数に設定するときは、データバインディングシンタックスを使用する必要があります。静的定数を使用する利点は、プロパティの値が正しくない場合に Flex コンパイラがそれを認識し、コンパイル時にエラーメッセージを生成する点です。
別の方法として、horizontalScrollPolicy プロパティの値を静的定数の値に設定することもできます。静的定数 OFF の値は "off" です。静的定数の値を使用してプロパティの値を設定した場合、Flex コンパイラは、指定された値がサポートされているかどうかを判断できません。そのため、プロパティの設定が誤っていても、実行時エラーが発生するまでわかりません。
ActionScript では、次の例のように、常に静的定数を使用してプロパティの値を設定するようにしてください。
var myHBox:HBox = new HBox(); myHBox.horizontalScrollPolicy=ScrollPolicy.OFF;
多くの Flex コンポーネントでは、1 つのデフォルトプロパティを定義します。デフォルトプロパティとは、プロパティを明示的に指定しない場合に、MXML タグの内側のコンテンツに対して暗黙的な MXML タグプロパティです。例えば、次のような MXML タグ定義があるとします。
<mx:SomeTag>
anything here
</mx:SomeTag>
このタグで default_property という名前のデフォルトプロパティを定義する場合、前に示したタグ定義は次のコードと同等です。
<mx:SomeTag>
<default_property>
anything here
</default_property>
</mx:SomeTag>
また次のコードとも同等です。
<mx:SomeTag default_property="anything here"/>
デフォルトプロパティは、単一のプロパティを設定するための簡単なメカニズムを提供します。ComboBox の場合、デフォルトプロパティは dataProvider プロパティです。したがって、次のコードの 2 つの ComboBox 定義は同等です。
<?xml version="1.0"?>
<!-- mxml\DefProp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<!-- Omit the default property. -->
<mx:ComboBox>
<mx:ArrayCollection>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
<mx:String>AR</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<!-- Explicitly speficy the default property. -->
<mx:ComboBox>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
<mx:String>AR</mx:String>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
すべての Flex コンポーネントでデフォルトプロパティが定義されるとはかぎりません。各コンポーネントのデフォルトプロパティを判別するには、『Adobe Flex リファレンスガイド』を参照してください。
カスタムコンポーネントを作成するときにも、デフォルトプロパティを定義できます。詳細については、『Adobe Flex 3 コンポーネントの作成と拡張』のカスタムコンポーネントのメタデータタグ
MXML でプロパティの値を設定する場合は、次に示す例のように、接頭辞として円記号(\)を付けることにより、予約文字をエスケープすることができます。
<?xml version="1.0"?>
<!-- mxml\EscapeChar.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Label text="\{\}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、テキストストリング内にリテラル中括弧({ })を使用しようとしています。Flex では、中括弧はデータバインディング操作を示すために使用します。そのため、MXML コンパイラでこれらの中括弧がリテラル文字として解釈されるよう、接頭辞として円記号を各中括弧に付ける必要があります。
MXML コンパイラは、String 型プロパティの値に円記号が含まれている場合、その円記号を自動的にエスケープします。したがって、"\" は常に "\\" に変換されます。
ActionScript コンパイラが "\\" をリテラル文字「\」の文字シーケンスと認識し、プロパティ値の初期化時に先頭の円記号を除去するので、これが必要となります。
String 型のプロパティでは、次の 2 とおりの方法でストリングに改行文字を挿入できます。
コードを使用して改行文字を挿入するには、MXML 内のプロパティ値にそのコードを含めます。次に例を示します。
<mx:TextArea width="100%" text="Display Content"/>
ActionScript の String 変数を使用して改行文字を挿入するには、ActionScript 変数を作成し、データバインディングを使用して MXML 内でプロパティを設定します。次に例を示します。
<mx:Script>
<![CDATA[
[Bindable]
public var myText:String = "Display" + "\n" + "Content";
]]>
</mx:Script>
<mx:TextArea width="100%" text="{myText}"/>
この例では、TextArea コントロールのtextプロパティは改行文字を含む値に設定されています。
この例では、プロパティ定義の前に [Bindable] メタデータタグがあります。このメタデータタグは、myText プロパティがデータバインディング式のソースとして使用できることを指定します。データバインディングでは、実行時にあるオブジェクトの source プロパティが変更されると、その source プロパティの値が別のオブジェクトの宛先プロパティに自動的にコピーされます。
このメタデータタグを省略すると、コンパイル時に、このプロパティがデータバインディングのソースとして使用できないことを示す警告メッセージが表示されます。詳細については、データバインディングを参照してください。
クラスのプロパティが配列を値として受け取る場合は、そのプロパティを MXML 内で子タグを使用して表すことができます。次の例に示すコンポーネントは、数値の配列を含む dataProvider プロパティを持っています。
<mx:List width="150">
<mx:dataProvider>
<mx:Array>
<mx:Number>94062</mx:Number>
<mx:Number>14850</mx:Number>
<mx:Number>53402</mx:Number>
</mx:Array>
</mx:dataProvider>
</mx:List>
配列エレメントを囲む <mx:Array> と </mx:Array> タグはオプションです。したがって、この例は次のコードのように記述することもできます。
<mx:List width="150">
<mx:dataProvider>
<mx:Number>94062</mx:Number>
<mx:Number>14850</mx:Number>
<mx:Number>53402</mx:Number>
</mx:dataProvider>
</mx:List>
この例では dataProvider プロパティのデータ型が Array として定義されているため、Flex は 3 つの数値の定義を 3 つのエレメントを持つ配列に自動的に変換します。
コンポーネントを開発するときは、コンポーネント定義の中に配列エレメントのデータ型を定義する情報を追加で指定できます。例えば、dataProvider プロパティが String 型のエレメントのみをサポートするように指定した場合、この例では配列エレメントに数値が指定されているため、コンパイラエラーが発生します。配列エレメントに必要なデータ型を定義する Array プロパティについては、『Adobe Flex リファレンスガイド』に説明があります。
コンポーネントのプロパティがオブジェクトを値として受け取る場合は、次の例のように、タグ属性が定義された子タグを使用して、MXML 内のそのプロパティを表すことができます。
<mynamespace:MyComponent>
<mynamespace:nameOfProperty>
<mynamespace:typeOfObject prop1="val1" prop2="val2"/>
</mynamespace:nameOfProperty>
</mynamespace:MyComponent>
次の例は、Address オブジェクトを定義する ActionScript クラスを示します。このオブジェクトは、その次の例の中で PurchaseOrder コンポーネントのプロパティとして使用されます。
class Address
{
public var name:String;
public var street:String;
public var city:String;
public var state:String;
public var zip:Number;
}
次の例は、Address 型のプロパティを持つ PurchaseOrder コンポーネントを定義する ActionScript クラスです。
import example.Address;
class PurchaseOrder {
public var shippingAddress:Address;
public var quantity:Number;
...
}
MXML では、PurchaseOrder コンポーネントを次のように定義します。
<mynamespace:PurchaseOrder quantity="3" xmlns:e="example"> <mynamespace:shippingAddress> <mynamespace:Address name="Fred" street="123 Elm St."/> </mynamespace:shippingAddress> </mynamespace:PurchaseOrder>
shippingAddress プロパティの値が Address のサブクラス(例えば DomesticAddress)である場合は、次のようにプロパティ値を宣言できます。
<mynamespace:PurchaseOrder quantity="3" xmlns:e="example">
<mynamespace:shippingAddress>
<mynamespace:DomesticAddress name="Fred" street="123 Elm St."/>
</mynamespace:shippingAddress>
</mynamespace:PurchaseOrder>
次の例の value プロパティのように、プロパティがオブジェクトとして明示的に型指定されている場合は、<mx:Object> タグを使用して匿名オブジェクトを指定できます。
class ObjectHolder {
public var value:Object
}
次の例は、value プロパティの値として匿名オブジェクトを指定する方法を示しています。
<mynamespace:ObjectHolder>
<mynamespace:value>
<mx:Object foo='bar'/>
</mynamespace:value>
</mynamespace:ObjectHolder>
コンポーネントのプロパティが Object 型で、その Object が配列を値として受け取る場合は、次の例のように、そのプロパティを MXML 内で子タグを使用して表すことができます。
<mynamespace:MyComponent>
<mynamespace:nameOfObjectProperty>
<mx:Array>
<mx:Number>94062</mx:Number>
<mx:Number>14850</mx:Number>
<mx:Number>53402</mx:Number>
</mx:Array>
</mynamespace:nameOfObjectProperty>
</mynamespace:MyComponent>
この例では、Object を 3 つのエレメントを持つ数値の配列に初期化しています。
スカラー値の配列の設定で説明したように、配列エレメントを囲む <mx:Array> タグと </mx:Array> タグはオプションであり、次のように省略できます。
<mynamespace:MyComponent>
<mynamespace:nameOfObjectProperty>
<mx:Number>94062</mx:Number>
<mx:Number>14850</mx:Number>
<mx:Number>53402</mx:Number>
</mynamespace:nameOfObjectProperty>
</mynamespace:MyComponent>
この規則の唯一の例外は、Object プロパティに対して単一の配列エレメントを指定する場合です。その場合、単一エレメントの配列を含む Object は作成されず、代わりにオブジェクトが作成され、そのオブジェクトが指定した値に設定されます。これらは次の 2 行のように異なります。
object=[element] // Object containing a one-element array object=element // object equals value
単一エレメントの配列を作成する場合は、次のように、配列エレメントを <mx:Array> タグと </mx:Array> タグで囲みます。
<mynamespace:MyComponent>
<mynamespace:nameOfObjectProperty>
<mx:Array>
<mx:Number>94062</mx:Number>
</mx:Array>
</mynamespace:nameOfObjectProperty>
</mynamespace:MyComponent>
コンポーネントのプロパティがオブジェクトの配列を値として受け取る場合は、次の例のように、そのプロパティを MXML 内で子タグを使用して表すことができます。
<mynamespace:MyComponent>
<mynamespace:nameOfProperty>
<mx:Array>
<mynamespace:objectType prop1="val1" prop2="val2"/>
<mynamespace:objectType prop1="val1" prop2="val2"/>
<mynamespace:objectType prop1="val1" prop2="val2"/>
</mx:Array>
</mynamespace:nameOfProperty>
</mynamespace:MyComponent>
次の例のコンポーネントには、ListItem オブジェクトの配列が含まれています。それぞれの ListItem オブジェクトには、label および data という名前のプロパティがあります。
<mynamespace:MyComponent>
<mynamespace:dataProvider>
<mx:Array>
<mynamespace:ListItem label="One" data="1"/>
<mynamespace:ListItem label="Two" data="2"/>
</mx:Array>
</mynamespace:dataProvider>
</mynamespace:MyComponent>
次の例は、dataProvider プロパティの値として匿名オブジェクトを指定する方法を示しています。
<mynamespace:MyComponent>
<mynamespace:dataProvider>
<mx:Array>
<mx:Object label="One" data="1"/>
<mx:Object label="Two" data="2"/>
</mx:Array>
</mynamespace:dataProvider>
</mynamespace:MyComponent>
スカラー値の配列の設定のセクションで説明されているように、配列エレメントを囲む <mx:Array> タグと </mx:Array> タグはオプションであり、次のように省略できます。
<mynamespace:MyComponent>
<mynamespace:dataProvider>
<mx:Object label="One" data="1"/>
<mx:Object label="Two" data="2"/>
</mynamespace:dataProvider>
</mynamespace:MyComponent>
コンポーネントが XML データを受け取るプロパティを持つ場合、そのプロパティの値は名前空間を適用できる XML フラグメントになります。次の例では、MyComponent オブジェクトの value プロパティは XML データです。
<mynamespace:MyComponent>
<mynamespace:value xmlns:a="http://www.example.com/myschema">
<mx:XML>
<a:purchaseorder>
<a:billingaddress>
...
</a:billingaddress>
...
</a:purchaseorder>
</mx:XML>
</mynamespace:value>
</mynamespace:MyComponent>
MXML タグのスタイルプロパティまたはエフェクトプロパティは、ActionScript クラスのプロパティではなく ActionScript のスタイルまたはエフェクトに対応する点で、他のプロパティとは異なります。これらのプロパティを ActionScript で設定する場合は、object.property=value 表記法ではなく、setStyle(stylename, value) メソッドを使用します。
スタイルプロパティまたはエフェクトプロパティを ActionScript クラスで定義する場合は、ActionScript 変数または setter/getter メソッドとして定義するのではなく、[Style] または [Effect] メタデータタグを使用します。詳細については、『Adobe Flex 3 コンポーネントの作成と拡張』のカスタムコンポーネントのメタデータタグ
例えば、MXML で fontFamily スタイルプロパティを設定するには、次のコードを使用します。
<mx:TextArea id="myText" text="hello world" fontFamily="Tahoma"/>
この MXML コードは、次の ActionScript コードと同じです。
myText.setStyle("fontFamily", "Tahoma");
MXML タグのイベントプロパティを使用して、イベントのイベントリスナー関数を指定できます。このプロパティは、ActionScript で addEventListener() メソッドを使用してイベントリスナーを設定するのに相当します。
イベントプロパティを ActionScript クラスで定義する場合は、ActionScript 変数または setter/getter メソッドとして定義するのではなく、[Event] メタデータタグを使用します。詳細については、『Adobe Flex 3 コンポーネントの作成と拡張』のカスタムコンポーネントのメタデータタグ
例えば、MXML で creationComplete イベントプロパティを設定するには、次のコードを使用します。
<mx:TextArea id="myText" creationComplete="creationCompleteHandler()"/>
この MXML コードは、次の ActionScript コードと同じです。
myText.addEventListener("creationComplete", creationCompleteHandler);
<mx:Script> タグなどのいくつかの MXML タグには、外部ファイルの URL を値として受け取るプロパティが用意されています。例えば、<mx:Script> タグの本体に ActionScript を直接入力する代わりに <mx:Script> タグ内で source プロパティを使用することで、外部 ActionScript ファイルを参照できます。
MXML では、次の種類の URL がサポートされます。
<mx:Style source="http://www.somesite.com/mystyles.css">
<mx:HTTPService url="@ContextRoot()/directory/myfile.xml"/>
<mx:Script source="/myscript.as"/>
<mx:Script source="../myscript.as"/>
RegExp 型のプロパティの値を MXML で指定するときは、次の形式を使用します。
"/pattern/flags"
pattern
2 つのスラッシュの間に正規表現を指定します。どちらのスラッシュも省略できません。
flags
(オプション)正規表現に対するフラグを指定します。
例えば、MXML コンポーネントの regExpression プロパティは RegExp 型です。したがって、次のように値を設定できます。
<mynamespace:MyComponent regExpression="/\Wcat/gi"/>
または、次のように子タグを使用することも可能です。
<mynamespace:MyComponent>
<mynamespace:regExpression>/\Wcat/gi </mynamespace:regExpression>
</mynamespace:MyComponent>
正規表現のフラグ部分はオプションであるため、次のように指定することもできます。
<mynamespace:MyComponent regExpression="/\Wcat/"/>
コンパイラタグは、ActionScript のオブジェクトやプロパティに直接対応しないタグです。次に示すコンパイラタグは、名前の先頭文字のみが大文字で表記されます。
次に示すコンパイラタグは、すべて小文字で表記されます。
MXML のシンタックスに関する要件を次に示します。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート