Question

我想将图像添加到我目前拥有的tooTip中。因此，当您翻转行时，它会显示船舶信息和船舶图像。我希望根据船的类型显示图像。主要有3种类型。因此，根据类型，我将显示有关船舶的图像和文本信息。现在我只使用虚拟数据。我不知道toolTip是否可以支持保存图像。

所以我的观点：

如何将图像添加到我现有的工具提示中（在黄色框中）
如何将图像添加到非真实的静止状态，以便稍后可以根据船型显示。

请有人帮助我。

非常感谢你：）

这是我目前的代码（它的整个代码，所以如果你愿意，你可以在你的电脑上运行）：

 <fx:Script>
    <![CDATA[       
        import mx.collections.ArrayCollection;          
        import mx.controls.Alert;   
        import spark.events.GridEvent;          
        import spark.components.Image;


        [Bindable]
        private var myArrivalShips:ArrayCollection = new ArrayCollection([
            {arrivalShipsName:"Ship A", ETD:"12 March"},
            {arrivalShipsName:"Ship B", ETD:"25 March"}             
        ]); 

        private function buildToolTip(item:Object,column:GridColumn):String{
            var myString:String = "";
            if(item != null)
            {
                myString = myString +"Ship name : " + item.arrivalShipsName + "\n";
                myString = myString + "ETD : " + item.ETD + "\n" +"Service: Repair"+"\n"+"Length of ship : 50"+"\n"+"Agent contact: 982392398";
            }
            return myString;
        }


    ]]>
</fx:Script>
<s:BorderContainer x="267" y="11" width="331" height="586">

    <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" showDataTips="true" dataTipFunction="buildToolTip">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships"></s:GridColumn>
                <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>              
            </s:ArrayList>
        </s:columns>            

    </s:DataGrid>
    <s:BorderContainer x="10" y="19" width="302" height="285">
    </s:BorderContainer>

</s:BorderContainer>

Answer 1

你有2个案例：

使用自己修改的ToolTipManagerImpl替换ToolTipManagerImpl，您可以使用自定义布局和外观切换toolTipClass。你可以找到例子。

创建自定义工具提示，扩展UIComponent实现IToolTip。原型看起来像原始工具提示：主要应用程序mxml：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               creationComplete="creationCompleteHandler(event)"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[           
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ToolTipEvent;
            import mx.managers.ToolTipManager;

        [Bindable]
        private var myArrivalShips:ArrayCollection = new ArrayCollection([
            {arrivalShipsName:"Ship A", ETD:"12 March", image: "http://url"},
            {arrivalShipsName:"Ship B", ETD:"25 March", image: "http://url"}             
        ]); 

        private function buildToolTip(item:Object,column:GridColumn):String
        {
            return JSON.stringify(item);
        }

        protected function creationCompleteHandler(event:FlexEvent):void
        {
            ToolTipManager.toolTipClass = ToolTipCustomClass;
        }
    ]]>
</fx:Script>
<fx:Declarations></fx:Declarations>

<s:BorderContainer x="267" y="11" width="331" height="586">
    <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" 
                showDataTips="true" dataTipFunction="buildToolTip">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships"></s:GridColumn>
                <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>              
            </s:ArrayList>
        </s:columns>            
    </s:DataGrid>
    <s:BorderContainer x="10" y="19" width="302" height="285">
    </s:BorderContainer>

</s:BorderContainer></s:Application>

和类ToolTipCustomClass：

package 
{
    import flash.display.DisplayObject;
    import flash.events.Event;

    import mx.controls.Image;
    import mx.controls.ToolTip;
    import mx.core.EdgeMetrics;
    import mx.core.IRectangularBorder;
    import mx.core.mx_internal;
    import mx.styles.ISimpleStyleClient;
    import mx.utils.ObjectUtil;

    use namespace mx_internal;

    public class ToolTipCustomClass extends ToolTip
    {

        private var _image:Image;


        public function ToolTipCustomClass()
        {
            super();
        }

        override protected function createChildren():void
        {
            mx_internal::createTextField(-1);

            createBorder();

            textField.visible = false;

            _image = new Image();
            _image.mouseChildren = false;
            _image.mouseEnabled = false;
            _image.addEventListener(Event.COMPLETE, onLoadCompliteHandler);

            addChild(_image);
        }

        protected function onLoadCompliteHandler(event:Event):void
        {
            _image.removeEventListener(Event.COMPLETE, onLoadCompliteHandler);

            textField.x = _image.contentWidth;
            textField.width = textField.width - _image.width;

            invalidateDisplayList();
        }

        override protected function measure():void
        {
            super.measure();

            _image.width    = 100;
            _image.height   = 100;
        }

        override public function set text(value:String):void
        {
            if (!value) return;

            var str:String = "";
            var item:Object;

            try
            {

                item = JSON.parse(value);

            } catch (e:Error) {}

            if (item != null)
            {
                str += "Ship name : " + item.arrivalShipsName + "\n" + 
                    "ETD : " + item.ETD + "\n" +
                    "Service: Repair\n" +
                    "Length of ship : 50\n" +
                    "Agent contact: 982392398";

                _image.source = item.image;
            }

            super.text = str;
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
        {
            if (_image && _image.content) 
            {
                var bm:EdgeMetrics = borderMetrics;

                var leftInset:Number = bm.left + getStyle("paddingLeft");
                var topInset:Number = bm.top + getStyle("paddingTop");
                var rightInset:Number = bm.right + getStyle("paddingRight");
                var bottomInset:Number = bm.bottom + getStyle("paddingBottom");

                var widthSlop:Number = leftInset + rightInset;
                var heightSlop:Number = topInset + bottomInset;

                _image.move( leftInset, topInset );

                border.setActualSize(unscaledWidth + _image.contentWidth, Math.max(unscaledHeight, _image.contentHeight));

                textField.move(_image.contentWidth, topInset);
                textField.setActualSize(unscaledWidth - widthSlop - _image.contentWidth, unscaledHeight - heightSlop);

                textField.visible = true;
            }   
        }

        private function createBorder():void
        {        
            if (!border)
            {
                var borderClass:Class = getStyle("borderSkin");

                if (borderClass != null)
                {
                    border = new borderClass();

                    if (border is ISimpleStyleClient)
                        ISimpleStyleClient(border).styleName = this;

                    addChildAt(DisplayObject(border), 0);

                    invalidateDisplayList();
                }
            }
        }

        private function get borderMetrics():EdgeMetrics
        {
            if (border is IRectangularBorder)
                return IRectangularBorder(border).borderMetrics;

            return EdgeMetrics.EMPTY;
        }
    }
}

不要忘记在项目对象中替换图片网址。

如何将图像添加到工具提示？

1 个答案: