Reskinning ToolTips

You can apply a programmatic skin to ToolTip controls. This method of applying skins is consistent with the Halo component architecture. It does not use the rules that apply to the Spark component architecture.

ToolTip skins are defined by the ToolTipBorder programmatic skin. This file is located in the mx.skins.halo package.

To reskin ToolTips, you edit the ToolTipBorder class file, and then apply the new skin to the ToolTip by using CSS. For more information on skinning, see Skinning MX components.

Reskin ToolTips by using CSS

1. Open the mx.skins.halo.ToolTipBorder.as file. This file is included with the source files, as described in MX component skin resources.

2. Save the ToolTipBorder.as file under another name, and in a different location. The filename must be the same as the new class name.

3. Change the package from mx.skins.halo to your package name, or to the empty package, as the following example shows:

   //package mx.skins.halo { // Old package name package { // New, empty package

4. Change the class name in the file, as the following example shows:

   //public class ToolTipBorder extends RectangularBorder // Old name public class MyToolTipBorder extends RectangularBorder // New name

5. Change the constructor to reflect the new class name, as the following example shows:

   //public function ToolTipBorder() // Old constructor public function MyToolTipBorder() // New constructor

6. Comment out the versioning line, as the following example shows:

   //include "../../core/Version.as";

7. Edit the class file to change the appearance of the ToolTip. You do this by editing the “toolTip” case in the updateDisplayList() method. That is the method that draws the ToolTip’s border and sets the default styles. Most commonly, you change the arguments of the drawRoundRect() method to change the appearance of the ToolTip.

   The following example adds a red tinge to the background of the ToolTip’s box by replacing the default backgroundColor property with an array of colors:

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

   The values of the cornerRadius and backgroundAlpha properties that are shown in the previous code snippet are set earlier in the updateDisplayList() method.

8. Save the class file.

9. In your application, edit the ToolTip’s borderSkin style property to point to the new skin. You can do this in an <fx:Style> tag inside your application, or by using external CSS file or a custom theme file. The following example sets the borderSkin property to the new skin class:

   <?xml version="1.0"?><!-- skins/ApplyCustomToolTipSkin.mxml --><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:mx="library://ns.adobe.com/flex/mx"     xmlns:s="library://ns.adobe.com/flex/spark">    <fx:Style>     @namespace mx "library://ns.adobe.com/flex/mx";       mx|ToolTip {        borderSkin: ClassReference("MyToolTipBorder");     }  </fx:Style>  <s:Button id="b1" label="Click Me" toolTip="Click this button"/></s:Application>
   The executing SWF file for the previous example is shown below:

 

转载：http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html