How to add a Image to the ToolTip? - apache-flex

Question

I want to add a image to the tooTip that i have have currently. So that when u rollover the row its show a the ship information and a image of a ship. I want the image to be displayed according to the type of ship. There is mainly 3 type. So according to the type i will display the image and the text information about the ship. For now I just used dummy data.I dont know if the toolTip can support to hold an image.
So my Ouestions:
How to add an image to the existing tool tip i have(in the yellow box)
how to add the image in away which is not really static so that I can display according to ship type later on.
Pls can someone help me with this.
Thank you soo much :)
This is the code I currently have (Its the entire codes so u can run on ur pc if u want) :
<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

You have 2 case:
Replace ToolTipManagerImpl with own modified ToolTipManagerImpl, where you switch toolTipClass with own custom layout and skin. You can find examples.
Create custom tooltip, extends UIComponent implements IToolTip. Prototype look like original tooltip:
Main application 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>
and class 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;
}
}
}
Don't forget replace image url in items object.