1. ホーム
2. デベロッパーセンター
3. Flexデベロッパーセンター
4. Flex クイックスタート

Flex クイックスタート： 簡単なユーザインタフェースの作成

目次

• コントロールの使用
• コンテナの使用
• コンポーネントへのスタイルの適用
• エフェクトの追加
• ステートの作成
• ステートのトランジションの定義
• ツールヒントの使用
• カーソルの制御

---

カーソルの制御

Adobe® Flex™ Cursor Manager を使用して、Flex アプリケーションのカーソル画像を制御することができます。 たとえば、完了するまでユーザが待つ必要がある処理をアプリケーションで実行する場合は、カーソルを砂時計などのカスタムカーソル画像に変更して、待つ必要があると示すことができます。

また、カーソルを変更してユーザにフィードバックを提供し、ユーザが実行可能な操作を示すこともできます。 たとえば、あるカーソル画像でユーザが入力できることを示し、別のカーソル画像で入力できないことを示します。

CursorManager のクラスでカーソルの優先順位のリストを制御して、優先順位が 1 位のカーソルを表示することができます。 カーソルのリストに同じ優先順位の複数のカーソルがある場合は、新しく作成したカーソルのほうが表示されます。

デフォルトのビジーカーソルの使用

Flex にはデフォルトのビジーカーソルが用意されています。これを使用して、処理を実行中であるため、処理が完了するまでユーザの入力にアプリケーションが応答しないことを示すことができます。 デフォルトのビジーカーソルは時計のアニメーションです。

次のような方法でビジーカーソルを制御できます。

• CursorManager メソッドを使用してビジーカーソルを設定したり削除したりします。
• SWFLoader、WebService、HttpService および RemoteObject クラスの showBusyCursor プロパティを使用して、ビジーカーソルを自動的に表示します。

次の例では、CursorManager クラスの静的な setBusyCursor() および removeBusyCursor() メソッドを使用して、トグルボタンの状態に応じて Flex のデフォルトビジーカーソルの表示と非表示を切り替えます。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
viewSourceURL="src/CursorDefaultBusy/index.html" width="400" height="160" >
<mx:Script>
<![CDATA[ import mx.controls.Button;
import mx.managers.CursorManager;
import flash.events.*;
private const ON_MESSAGE:String = "Busy Cursor ON";
private const OFF_MESSAGE:String = "Busy Cursor OFF";
private function busyCursorButtonHandler(event:MouseEvent):void
{
 var toggleButton:Button = event.target as Button;
 if (toggleButton.selected)
 {
  CursorManager.setBusyCursor();
  toggleButton.label = ON_MESSAGE;
 } else {
  CursorManager.removeBusyCursor();
  toggleButton.label = OFF_MESSAGE;
 }
}
 ]]>
</mx:Script>
<mx:Panel paddingBottom="10" paddingTop="10" 
paddingLeft="10" paddingRight="10" horizontalAlign="center"
 verticalAlign="middle" title="Default busy cursor" >
<!-- Toggle button turns default busy cursor on and off. -->
<mx:Button label="{OFF_MESSAGE}" toggle="true"
click="busyCursorButtonHandler(event);" />
<mx:Text text="Click the button to display or hide the busy cursor."/>
</mx:Panel>
</mx:Application>

結果

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

カスタムカーソルの使用

JPEG、GIF、PNG、SVG 画像、Sprite オブジェクトまたは SWF ファイルをカーソル画像として使用できます。

Cursor Manager を使用するには、 mx.managers.CursorManager クラスをアプリケーションにインポートし、そのプロパティとメソッドを参照します。

次の例では、Adobe Flash で作成した砂時計の SWF アニメーションを埋め込んで、カスタムカーソルとして使用します。 この例ではカスタムカーソルを作成するために、CursorManager クラスの setCursor() 静的メソッドを呼び出して、カスタムカーソルとして使用する埋め込みアセットのクラスの参照を渡します。 アクティブなカスタムカーソルを削除するには、CursorManager クラスの removeCursor() 静的メソッドを呼び出して、CursorManager クラスの currentCursorID 静的プロパティを渡します。

例

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 viewSourceURL=" src/CursorCustom/index.html" width="400" height="160" >
 <mx:Script>
 <![CDATA[ import mx.controls.Button;
 import mx.managers.CursorManager; import flash.events.*;
 // Embed the SWF that will be used as 
 // the custom cursor. 
 [Embed(source="assets/hourglass.swf")] public 
 var HourGlassAnimation:Class;
 private
 const ON_MESSAGE:String = "Custom Cursor ON";
 private const OFF_MESSAGE:String = "Custom Cursor OFF";
 private
 function busyCursorButtonHandler(event:MouseEvent):void
 { var toggleButton:Button = event.target as Button;
  if (toggleButton.selected) { 
  // The setCursor() method returns a numeric ID for 
  // the cursor being set. You can store and use this 
  // ID later in a removeCursor() call, or, you can 
  // use the static currentCursorID property of the 
  // CursorManager class to achieve the same result. 
  CursorManager.setCursor(HourGlassAnimation);
  toggleButton.label = ON_MESSAGE; }
  else
  {
  CursorManager.removeCursor(CursorManager.currentCursorID);
  toggleButton.label = OFF_MESSAGE;
  }
 }
  ]]>
  </mx:Script>
  <mx:Panel
  paddingBottom="10" paddingTop="10" paddingLeft="
  10" paddingRight="10" horizontalAlign="
  center" verticalAlign="middle"
  title="Custom cursor" >
<!--
   Toggle button turns the custom cursor on and off. 
-->
<mx:Button label="{OFF_MESSAGE}" toggle="true"
	click="busyCursorButtonHandler(event);" />
 <mx:Text text="Click the button to display or hide the custom cursor."/>
 </mx:Panel>
</mx:Application>

結果

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

---

詳細情報

ツールヒントについて詳しくは、『Flex 2 Developer's Guide』の「Using the Cursor Manager」を参照してください。

著者について