0

現在持っているtooTipに画像を追加したいです。行をロールオーバーすると、船の情報と船の画像が表示されます。船の種類に合わせて画像を表示させたい。主に3種類あります。そのため、タイプに応じて、船に関する画像とテキスト情報を表示します。今のところ、ダミー データを使用しました。toolTip が画像の保持をサポートできるかどうかはわかりません。

だから私の言い分：

  1. 私が持っている既存のツールチップに画像を追加する方法（黄色のボックス内）
  2. 後で船の種類に応じて表示できるように、実際には静的ではない画像を追加する方法。

Plsは誰かがこれで私を助けることができます.

どうもありがとうございました:)

これは私が現在持っているコードです（コード全体なので、必要に応じてPCで実行できます）：

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

1 に答える 1

1

あなたには2つのケースがあります：

  1. ToolTipManagerImpl を独自の修正済み ToolTipManagerImpl に置き換えます。ここで、toolTipClass を独自のカスタム レイアウトとスキンに切り替えます。例を見つけることができます。

  2. カスタム ツールチップを作成し、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;
        }
    }
}

項目オブジェクトの画像 URL を置き換えることを忘れないでください。

于 2013-02-14T12:37:12.490 に答える