Adobe Flex 3 ヘルプ

ツールヒントのスキン交換

ToolTip コントロールにプログラムスキンを適用できます。

ツールヒントのスキンは、ToolTipBorder プログラムスキンで定義します。このファイルは、mx.skins.halo パッケージに収められています。

ツールヒントのスキンを交換するには、ToolTipBorder クラスファイルを編集し、CSS を使用してその新しいスキンをツールヒントに適用します。スキンの詳細については、スキンの作成を参照してください。

CSS によるツールヒントのスキン交換

  1. mx.skins.halo.ToolTipBorder.as ファイルを開きます。このファイルは、スキンのリソースの説明にあるように、ソースファイルに付属しています。
  2. ToolTipBorder.as ファイルを別名で、元の場所とは異なる場所に保存します。このファイル名は、新しいクラスの名前と同じものにする必要があります。
  3. 次の例に示すように、パッケージを mx.skins.halo から、使用するパッケージまたは空のパッケージに変更します。
    //package mx.skins.halo { // Old package name
    package { // New, empty package
    
    
  4. 次の例に示すように、ファイル内のクラス名を変更します。
    //public class ToolTipBorder extends RectangularBorder // Old name
    public class MyToolTipBorder extends RectangularBorder // New name
    
    
  5. 次の例に示すように、新しいクラス名が反映されるようにコンストラクタを変更します。
    //public function ToolTipBorder() // Old constructor
    public function MyToolTipBorder() // New constructor
    
    
  6. 次の例に示すように、バージョン管理の行をコメントアウトします。
    //include "../../core/Version.as";
    
    
  7. クラスファイルを編集して、ツールヒントの外観を変更します。この編集操作では、updateDisplayList() メソッドの中で "toolTip" を処理する部分を編集します。このメソッドは、ツールヒントの境界を描画し、デフォルトのスタイルを設定するためのものです。一般的には、drawRoundRect() メソッドのパラメータを変更してツールヒントの外観を変更します。

    次の例では、backgroundColor プロパティのデフォルト値をカラーの配列に置き換えることで、ツールヒントのボックスの背景に淡い赤色を追加します。

    var highlightAlphas:Array = [0.3,0.0];
    drawRoundRect(3, 1, w-6, h-4, cornerRadius, [0xFF0000, 0xFFFFBB],
        backgroundAlpha);
    
    

    上記のコードの一部で示されている cornerRadius プロパティと backgroundAlpha プロパティの値は、updateDisplayList() メソッドで事前に設定します。

  8. クラスファイルを保存します。
  9. Flex アプリケーションでは、新しいスキンを指定するように、ツールヒントの borderSkin スタイルプロパティを編集します。この編集を実行するには、アプリケーション内の <mx:Style> タグ、外部 CSS ファイル、またはカスタムのテーマファイルを使用します。次の例では、borderSkin プロパティを新しいスキンクラスに設定します。
    <?xml version="1.0"?>
    <!-- skins/ApplyCustomToolTipSkin.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:Style>
         ToolTip {
            borderSkin: ClassReference("MyToolTipBorder");
         }
      </mx:Style>
    
      <mx:Button id="b1" label="Click Me" toolTip="Click this button"/>
    </mx:Application>
    
    

    CSS の参照では完全なパッケージ名を指定する必要があります。この例では、MyToolTipBorder.as ファイルが空のパッケージに属しているので、mx.skins.halo のようなパッケージの指定が存在しません。

  10. 新しいスキンファイルをソースパスに置いて、アプリケーションをコンパイルし、実行します。このためには、コンパイラの source-path オプションの値を設定します。

    アプリケーションと同じディレクトリに目的のスキンクラスを置いている場合は、その場所をソースパスに追加する必要はありません。この場合は、現在のディレクトリで実行すると見なされます。詳細については、Flex コンパイラの使用を参照してください。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート