在 Sparkskin 中使用工具提示

发布于 2024-11-08 19:52:12 字数 6619 浏览 5 评论 0原文

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

我想定义皮肤(或其他组件)中文本输入的工具提示行为。

我创建了一个新皮肤并尝试添加工具提示属性 直接连接到

但工具提示不显示。

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

感谢您的帮助

工具提示在启用文本输入时起作用,但在禁用时不起作用

<?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>

I'm developing with Flex 4 and have a problem with tooltips in skins.

I want to define the tooltip behavior of a textinput in the skin (or other components).

I create a new skin and try to add a tooltip attriute to
the <s:sparkskin> directly and to the <s:RichEditableText>

but the tooltips don't show up.

  • First: Is it possible to define tooltip in skins? If not, why?
  • Second: If it's possible, why doesn't it works

Thanks for your help

Tooltip work when Textinput is enable, but not when disable

<?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>

My Skin

<?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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

瀞厅☆埖开 2024-11-15 19:52:13
<s:TextInput tooltip="WEEE!" />

我不明白问题是什么......

编辑:
在你的皮肤中:

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

I don't see what the problem is...

EDIT:
In your skin:

<s:TextInput id="input" toolTip="{input.text}" />
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文