mx.controls
Button クラス


直接の既知のサブクラス
mx.containers.accordionclasses.AccordionHeader, mx.controls.CheckBox, mx.controls.Link, mx.controls.RadioButton
Button クラス
mx.controls.SimpleButton の拡張Button コントロールはよく使用される長方形のボタンです。Button コントロールは押し下げ可能に見えます。表面には、テキストラベル、アイコンのいずれか、または両方を表示できます。通常、Button コントロールはクリックされたときにアクションを実行します。ただし、トグルボタン形式の Button コントロールはクリックされると押されたままの状態になり、ラジオボタンのように機能します。ユーザーが Button コントロールをクリックすると、click イベントがブロードキャストされます。Button コントロールは、外観をカスタマイズしたり、プッシュボタンからトグルボタンに機能を変更したりできます。
Button コントロールは SimpleButton クラスを拡張します。レイアウトされたラベルとテキストを追加し、スキンを歪めずにサイズを変更する機能を追加します。
メモ : Button コントロールは、UIComponent クラスで定義されている場合も、valueChanged イベントに対して反応しません。MXML では、SimpleButton コントロールから継承されるスキンプロパティを設定できません。
MXML シンタックス
<mx:Button> タグは、親クラスのすべてのプロパティと、次のプロパティを継承します。
<mx:Button
icon="No default."
label="No default."
labelPlacement="right|left|bottom|top"
repeatInterval="35"
repeatDelay="500"
selected="false|true"
toggle="false|true"
click="Event handler; no default."
/>
例を参照するにはここをクリックしてください
| icon:String
このボタンに表示されるアイコンのシンボル名です。 |
| label:String
ボタンに表示されるテキストです。 |
| labelPlacement:String
指定されたアイコンを基準にしたラベルの向きです。 |
static | version:String
このクラスのバージョンを表すストリングです。 |
click | ユーザーがボタンをクリックしたときにブロードキャストされます。このイベントオブジェクトの target プロパティには、イベントをトリガしたコンポーネントへの参照が含まれます。type プロパティには、イベントの名前 click が含まれます。
|
borderThickness | 型 : Number CSS の継承 : なし
ボタンの境界線のリングの太さです。値が 0 の場合、境界線は描画されません。値が 2 以上の場合、ボタンの周囲に光るリングが作成されます。デフォルト値は 3 です。 |
cornerRadius | 型 : Number CSS の継承 : なし
ボタンの角に付いている丸みの半径です。デフォルト値は 5 です。 |
horizontalGap | 型 : Number CSS の継承 : なし
labelPlacement が "left" または "right" のときの、ボタンのラベルとアイコンの間隔です。デフォルト値は 2 です。 |
textRollOverColor | 型 : Number 形式 : Color CSS の継承 : あり
マウスポインタをボタンに合わせたときのラベルのテキストカラーです。デフォルト値は 0x2B333C です。 |
textSelectedColor | 型 : Number 形式 : Color CSS の継承 : あり
ラベルを押したときのテキストカラーです。デフォルト値は 0x000000 です。 |
verticalGap | 型 : Number CSS の継承 : なし
labelPlacement が "top" または "bottom" のときの、ボタンのラベルとアイコンの間隔です。デフォルト値は 2 です。 |
icon
icon:String
このボタンに表示されるアイコンのシンボル名です。デフォルト値の undefined は、アイコンが表示されないことを意味します。アイコンは、実行時にサーバーからイメージとしてダウンロードされますが、コンパイル時に SWF ファイルにシンボルとして埋め込む必要があります。SWF ファイルにアイコンを埋め込むには、次の @Embed MXML コンパイラディレクティブを使用します。
icon="@Embed('relativeOrAbsoluteURL')"
URL は、サーバーの JPEG、GIF、PNG、SVG、または SWF イメージの URL を指定できます。MXML コンパイラにより、イメージがシンボルとして埋め込まれ、コンパイラによって生成されたシンボル名によって @Embed ディレクティブが置き換えられます。
ボタンのラベルとアイコンの相対的な配置は、labelPlacement プロパティにより決定します。
label
label:String
ボタンに表示されるテキストです。デフォルト値は空のストリングです。
labelPlacement
labelPlacement:String
指定されたアイコンを基準にしたラベルの向きです。指定できる値は、right、left、bottom、および top です。デフォルトは right です。
version
static version:String
このクラスのバージョンを表すストリングです。
| ButtonExample.mxml |
<?xml version="1.0"?>
<!-- Button コントロールの使用方法を示す簡単な例 -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF"
height="100%" width="100%">
<mx:Script>
<![CDATA[
function printMessage(event)
{
message.text += newline + event.target.label + " pressed";
}
]]>
</mx:Script>
<mx:Panel title="Button Panel" height="100%" width="100%">
<!-- このボタンには、"アイコン付きボタン" のように、イメージを含むことができます。 -->
<mx:Button id="iconButton" icon="@Embed('FlexLogo.gif')" label="Button with Icon"
labelPlacement="right" color="#993300" click="printMessage(event)"/>
<!-- ボタンのサイズおよびラベル属性はカスタマイズできます。 -->
<mx:Button label="Customized Button" color="#993300" toggle="true" selected="true"
textAlign="left" fontStyle="italic" fontSize="13" width="{iconButton.width}" click="printMessage(event)"/>
<!-- デフォルトでは、カスタマイズしたボタンの外観と操作性は "デフォルトボタン" と似たものになります。 -->
<mx:Button label="Default Button" click="printMessage(event)"/>
<mx:TextArea id="message" text="" editable="false" height="100%" width="100%"
color="#0000FF"/>
</mx:Panel>
</mx:Application>
|