SearchResultItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
     ////////////////////////////////////////////////////////////////////////////////
     //
     // Copyright (c) 2010 ESRI
     //
     // All rights reserved under the copyright laws of the United States.
     // You may freely redistribute and use this software, with or
     // without modification, provided you include the original copyright
     // and use restrictions.  See use restrictions in the file:
     // <install location>/License.txt
     //
     ////////////////////////////////////////////////////////////////////////////////
-->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="false"
                click="itemrenderer_clickHandler(event)"
                minHeight="30"
				dataChange="itemrenderer1_dataChangeHandler(event)"
				mouseOut="itemrenderer_mouseOutHandler(event)"
                mouseOver="itemrenderer_mouseOverHandler(event)">

    <fx:Script>
        <![CDATA[
			import flashx.textLayout.conversion.TextConverter;
			import flashx.textLayout.elements.TextFlow;
			
			import com.esri.ags.symbols.Symbol;
			
			import mx.controls.Image;
			import mx.events.FlexEvent;

            private const SEARCH_RESULT_CLICK:String = "searchResultClick";
			
			private const SEARCH_RESULT_RELATE_CLICK:String = "searchResultRelateClick";

            private const SEARCH_RESULT_MOUSE_OVER:String = "searchResultMouseOver";

            private const SEARCH_RESULT_MOUSE_OUT:String = "searchResultMouseOut";

            [Bindable]
            private var searchResult:SearchResult;

            private var lastResultSymbol:Symbol;
            private var lastResultSwatch:UIComponent;
			
			[Bindable]
			private var linkicon:String;
			
			[Bindable]
			private var relateicon:String;
			
			[Bindable]
			private var relatetooltip:String;

            private function itemrenderer_clickHandler(event:MouseEvent):void
            {
                dispatchEvent(new Event(SEARCH_RESULT_CLICK, true)); // bubbles
            }

            private function itemrenderer_mouseOverHandler(event:MouseEvent):void
            {
				if(hitTestPoint(event.stageX,event.stageY, true)){
                	dispatchEvent(new Event(SEARCH_RESULT_MOUSE_OVER, true)); // bubbles
				}
            }

            private function itemrenderer_mouseOutHandler(event:MouseEvent):void
            {
				if(!hitTestPoint(event.stageX,event.stageY, true)){
                	dispatchEvent(new Event(SEARCH_RESULT_MOUSE_OUT, true)); // bubbles
				}
            }

            private function showLink(event:MouseEvent):void
            {
				event.stopImmediatePropagation(); // don't dispatch ID_RESULT_CLICK since we don't want to zoom to feature
				navigateToURL(new URLRequest(event.currentTarget.name));
            }
			
			private function showRelate(event:MouseEvent):void
			{
				event.stopImmediatePropagation(); // don't dispatch SEARCH_RESULT_CLICK since we don't want to zoom to feature
				dispatchEvent(new Event(SEARCH_RESULT_RELATE_CLICK, true)); // bubbles
			}
			
			protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void
			{
				
				searchResult = data as SearchResult;
				
				if (searchResult){
					if (lastResultSymbol !== searchResult.graphic.symbol){
						if (resultIcon.numChildren > 0){
							resultIcon.removeChildAt(0);
						}
						lastResultSymbol = searchResult.graphic.symbol;
						lastResultSwatch = lastResultSymbol.createSwatch(20, 20);
					}
					lContent.textFlow = TextConverter.importToFlow(searchResult.content, TextConverter.TEXT_FIELD_HTML_FORMAT);
					linkGroup.includeInLayout = linkGroup.visible = false;
					linkGroup.removeAllElements();
					resultIcon.addChild(lastResultSwatch);
					selected = searchResult.selected;
					
					for(var l:int = 0; l < searchResult.links.length; l++){
						if(searchResult.links[l].link){
							var lImg:Image = new Image();
							lImg.height = lImg.width = 20;
							lImg.buttonMode = true;
							lImg.useHandCursor = true;
							lImg.addEventListener(MouseEvent.CLICK, showLink);
							lImg.source = (searchResult.links[l].icon && searchResult.links[l].icon != "")?searchResult.links[l].icon:"assets/images/w_link.png";	 
							lImg.name = searchResult.links[l].link;
							if(searchResult.links[l].alias)
								lImg.toolTip = searchResult.links[l].alias;
							lImg.includeInLayout = lImg.visible = true;
							linkGroup.addElement(lImg);
						}
					}
					
					if(searchResult.links[0] && searchResult.links[0].link){
						linkGroup.includeInLayout = linkGroup.visible = true;
					}
					if(searchResult.relates != null){
						linkGroup.includeInLayout = linkGroup.visible = true;
					}
					relateicon = (searchResult.relateicon && searchResult.relateicon != null)?searchResult.relateicon:"widgets/eSearch/assets/images/i_relate.png";
					relatetooltip = (searchResult.relatetooltip && searchResult.relatetooltip != null)?searchResult.relatetooltip:"Show relates";
					
					var rImg:Image = new Image();
					rImg.width = rImg.height = 20;
					rImg.buttonMode = rImg.useHandCursor = true;
					rImg.addEventListener(MouseEvent.CLICK, showRelate);
					rImg.includeInLayout = searchResult.relates != null;
					rImg.source = relateicon;
					rImg.toolTip = relatetooltip;
					rImg.visible = searchResult.relates != null;
					linkGroup.addElement(rImg);
				}
			}
		]]>
    </fx:Script>

    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
		<s:State name="selected"/>
    </s:states>

    <!-- border/background rectangle -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            radiusX="4"
            radiusY="4">
        <s:stroke>
            <mx:SolidColorStroke alpha="{getStyle('borderAlpha')}"
                                 color="{getStyle('borderColor')}"
                                 weight="1"/>
        </s:stroke>
        <s:fill>
            <mx:SolidColor alpha="0.3"
                           alpha.hovered="0.8"
                           color.hovered="{getStyle('rollOverColor')}"
						   alpha.selected="1"
						   color.selected="{getStyle('rollOverColor')}"
                           color.normal="{getStyle('contentBackgroundColor')}"/>
        </s:fill>
    </s:Rect>
	<s:HGroup minHeight="30"
			  paddingLeft="5"
			  paddingRight="5"
			  paddingBottom="5"
			  paddingTop="7"
			  verticalAlign="middle"
			  width="100%">
		<mx:UIComponent id="resultIcon"
						width="100%" height="100%"
						maxHeight="20"
						maxWidth="20">
			<mx:filters>
				<mx:GlowFilter alpha="0.5"
							   blurX="10"
							   blurY="10"
							   color="#000000"/>
			</mx:filters>
		</mx:UIComponent>
		<s:VGroup width="100%" height="100%"
				  verticalAlign="middle">
			<s:Label width="100%"
					 fontWeight="bold"
					 maxDisplayedLines="1"
					 text="{searchResult.title}"/>
			<s:RichText id="lContent"
						fontWeight="normal"
						width="100%"/>
			<s:HGroup gap="8" id="linkGroup" height="18" horizontalAlign="center"
					  verticalAlign="middle" paddingRight="25"
					  width="100%" includeInLayout="false" visible="false"/>
		</s:VGroup>
	</s:HGroup>
</s:ItemRenderer>