在sparkskin中使用工具提示

时间:2011-05-23 14:26:52

标签: flex actionscript-3 flex4 skinning skin

我正在使用Flex 4进行开发,并且皮肤中的工具提示存在问题。

我想在皮肤(或其他组件)中定义textinput的工具提示行为。

我创建了一个新皮肤并尝试添加工具提示attriute 直接<s:sparkskin><s:RichEditableText>

但工具提示没有显示。

  • 第一:是否可以在皮肤中定义工具提示?如果没有,为什么?
  • 第二:如果有可能,为什么不行呢

感谢您的帮助

启用Textinput时工具提示有效,但禁用

时无效
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->     
</fx:Declarations>

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    s|TextInput.withToolTip
    {
        skin-class:  ClassReference("skins.TextInputToolTipSkin");
    }       
</fx:Style>

<s:layout>
    <s:VerticalLayout />
</s:layout>

<s:TextInput styleName="withToolTip" enabled="true" />
<s:TextInput styleName="withToolTip" enabled="false" />
</s:Application>

我的皮肤

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" blendMode="normal"
toolTip="Tooltip Test on Skin">

<fx:Metadata>
<![CDATA[ 
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.TextInput")]
]]>
</fx:Metadata> 

<fx:Script fb:purpose="styling">
    private var paddingChanged:Boolean;

    /* Define the skin elements that should not be colorized. */
    static private const exclusions:Array = ["background", "textDisplay"];

    /**
     * @private
     */   
    override public function get colorizeExclusions():Array {return exclusions;}

    /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
    static private const contentFill:Array = ["bgFill"];

    /**
     *  @private
     */
    override public function get contentItems():Array {return contentFill};

    /**
     *  @private
     */
    override protected function commitProperties():void
    {
        super.commitProperties();

        if (paddingChanged)
        {
            updatePadding();
            paddingChanged = false;
        }
    }

    /**
     * @private
     */
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }

    /**
     *  @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        if (getStyle("borderVisible") == true)
        {
            border.visible = true;
            shadow.visible = true;
            background.left = background.top = background.right = background.bottom = 1;
            textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
        }
        else
        {
            border.visible = false;
            shadow.visible = false;
            background.left = background.top = background.right = background.bottom = 0;
            textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
        }

        borderStroke.color = getStyle("borderColor");
        borderStroke.alpha = getStyle("borderAlpha");

        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

    /**
     *  @private
     */
    private function updatePadding():void
    {
        if (!textDisplay)
            return;

        // Push padding styles into the textDisplay
        var padding:Number;

        padding = getStyle("paddingLeft");
        if (textDisplay.getStyle("paddingLeft") != padding)
            textDisplay.setStyle("paddingLeft", padding);

        padding = getStyle("paddingTop");
        if (textDisplay.getStyle("paddingTop") != padding)
            textDisplay.setStyle("paddingTop", padding);

        padding = getStyle("paddingRight");
        if (textDisplay.getStyle("paddingRight") != padding)
            textDisplay.setStyle("paddingRight", padding);

        padding = getStyle("paddingBottom");
        if (textDisplay.getStyle("paddingBottom") != padding)
            textDisplay.setStyle("paddingBottom", padding);
    }

    /**
     *  @private
     */
    override public function styleChanged(styleProp:String):void
    {
        var allStyles:Boolean = !styleProp || styleProp == "styleName";

        super.styleChanged(styleProp);

        if (allStyles || styleProp.indexOf("padding") == 0)
        {
            paddingChanged = true;
            invalidateProperties();
        }
    }
</fx:Script>

<fx:Script>
    <![CDATA[
    /** 
     * @private 
     */     
    private static const focusExclusions:Array = ["textDisplay"];

    /**
     *  @private
     */
    override public function get focusSkinExclusions():Array { return focusExclusions;};
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal"/>
    <s:State name="disabled"/>
</s:states>

<!-- border --> 
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border">
    <s:stroke>     
        <!--- @private -->
        <s:SolidColorStroke id="borderStroke" weight="1" />
    </s:stroke>
</s:Rect>

<!-- fill -->
<!--- Defines the appearance of the TextInput component's background. -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1">
    <s:fill>
        <!--- @private Defines the background fill color. -->
        <s:SolidColor id="bgFill" color="0xFFFFFF" />
    </s:fill>
</s:Rect>

<!-- shadow -->
<!--- @private -->
<s:Rect left="1" top="1" right="1" height="1" id="shadow">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.12" />
    </s:fill>
</s:Rect>

<!-- text -->
<!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
<s:RichEditableText id="textDisplay"
          verticalAlign="middle"
          widthInChars="10"
          fontStyle.disabled="italic"
          left="1" right="1" top="1" bottom="1" 
          toolTip="ToolTip Test on Editor"/>

</s:SparkSkin>

1 个答案:

答案 0 :(得分:0)

<s:TextInput tooltip="WEEE!" />

我不知道问题是什么......

编辑: 在你的皮肤:

<s:TextInput id="input" toolTip="{input.text}" />