Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4368
  • Last Modified:

How to change canvas border color in itemrenderer when a user clicks on it - Flex

I have a tilelist that uses an itemrenderer. The itemrenderer has a hbox with six canvas's and inside each canvas is an image box. When a user click on one of the images I need the canvas background color to highlight or change color in some way. I just need a good example to get me going

Also, tTried to create a custom canvas and image but no luck.


Thanks
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="105" height="59"
	 horizontalGap="0" verticalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" paddingBottom="0" paddingLeft="1" paddingRight="1" paddingTop="0" verticalAlign="middle" horizontalAlign="left" xmlns:filters="flash.filters.*" xmlns:ns1="*" borderStyle="none">
	<mx:Canvas width="103" height="35" verticalScrollPolicy="off" horizontalScrollPolicy="off" borderColor="#000000" borderThickness="1" borderStyle="solid"  backgroundColor="{data.cageColor}" click="parentDocument.currentState='';parentDocument.loadProtocolNo();parentDocument.loadDescription();parentDocument.CreateOrUpdateCage();parentDocument.populateProtocolNo();parentDocument.populateDescription();" mouseMove="parentDocument.dragItCage(event, data.cageId, 0);" dragEnter="parentDocument.dragEnterHandlerCage(event);" dragExit="parentDocument.dragExitHandlerCage(event);" dragDrop="parentDocument.dragDropHandlerCage(event);" id="cageCanvas" backgroundAlpha="1" mouseOver="{parentDocument.destroyMouseTip()}">
		<mx:Label x="6" y="4" width="89" height="19" textAlign="center" id="strain" text="{data.strain}">
		</mx:Label>
		<mx:Label x="6" y="17" text="{data.cageNo}" width="89" height="16" textAlign="center"/>
		<mx:Label x="-1" y="-1" text="{data.descName}" width="15" height="14" textAlign="center" id="desc" color="#000000" fontSize="9">
		</mx:Label>
		<mx:Label x="85" y="-1" text="{data.descId}" width="15" height="14" textAlign="center" id="descId" color="#FF0000" fontSize="8" visible="false">
		</mx:Label>
		<mx:Canvas x="87" y="1" width="13" height="12" alpha="{data.timerOpacity}" themeColor="#009CFF" borderStyle="none" backgroundColor="{data.timerColor}" borderColor="#000000" cornerRadius="2">
			<mx:Image x="0" y="0" width="13" height="12" source="@Embed(source='..//Assets/clockTimerClear.gif')" id="timerImg" scaleContent="true" alpha="{data.timerOpacity}" themeColor="#002127" rollOver="{parentDocument.dispTimerInfo(data.cageId, data.timerOpacity, event)}" rollOut="{parentDocument.destroyTimerTip(data.timerOpacity)}" enabled="false">
			</mx:Image>
		</mx:Canvas>
 
	</mx:Canvas>
	<mx:HBox width="103" height="22" horizontalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" borderStyle="solid" borderColor="#000000" enabled="true">
		<mx:Canvas left="0" width="17" height="23" backgroundColor="{data.mouseColor1}" themeColor="#009CFF" borderThickness="1" borderStyle="none" borderColor="#0096FF" id="canvasMouse1" creationComplete="init()">				
			<mx:Image source="@Embed(source='..//Assets/MHiconGrayWeb.gif')" id="mouseImg1" cacheAsBitmap="true" y="0"  height="23" width="17" rollOver="parentDocument.setSlotData(1, data.col, data.row); {parentDocument.dispMouseTipInfo(data.mouseId1, event)}" scaleContent="false" left="0" rollOut="{parentDocument.destroyMouseTip()}" alpha="1.0" themeColor="#FF0000"/>		
		</mx:Canvas>
		<mx:Canvas  left="17" width="17" height="23" backgroundColor="{data.mouseColor2}" borderColor="#000000" borderThickness="1">
			<mx:Image id="mouseImg2" cacheAsBitmap="true" y="0" height="23" width="17" rollOver="parentDocument.setSlotData(2, data.col, data.row); {parentDocument.dispMouseTipInfo(data.mouseId2, event)}" scaleContent="false" source="@Embed(source='..//Assets/MHiconGrayWeb.gif')" rollOut="{parentDocument.destroyMouseTip()}"/>
		</mx:Canvas>
		<mx:Canvas  left="34" width="17" height="23" backgroundColor="{data.mouseColor3}" borderColor="#000000" borderThickness="1">
			<mx:Image source="@Embed(source='..//Assets/MHiconGrayWeb.gif')" id="mouseImg3" cacheAsBitmap="true" y="0" height="23" width="17" rollOver="parentDocument.setSlotData(3, data.col, data.row); {parentDocument.dispMouseTipInfo(data.mouseId3, event)}" scaleContent="false" rollOut="{parentDocument.destroyMouseTip()}"/>
		</mx:Canvas>
		<mx:Canvas left="17" width="17.5" height="23" backgroundColor="{data.mouseColor4}" borderColor="#000000" borderThickness="1">
			<mx:Image source="@Embed(source='..//Assets/MHiconGrayWeb.gif')" id="mouseImg4" cacheAsBitmap="true" y="0" height="23" width="17" rollOver="parentDocument.setSlotData(4, data.col, data.row); {parentDocument.dispMouseTipInfo(data.mouseId4, event)}" scaleContent="false" rollOut="{parentDocument.destroyMouseTip()}"/>
		</mx:Canvas>
		<mx:Canvas left="17" width="17" height="23" backgroundColor="{data.mouseColor5}" borderColor="#000000" borderThickness="1">
			<mx:Image source="@Embed(source='..//Assets/MHiconGrayWeb.gif')" id="mouseImg5" cacheAsBitmap="true" x="0" y="0" height="23" width="17" rollOver="parentDocument.setSlotData(5, data.col, data.row); {parentDocument.dispMouseTipInfo(data.mouseId5, event)}" scaleContent="false" rollOut="{parentDocument.destroyMouseTip()}"/>
		</mx:Canvas>
		<mx:Canvas left="17" width="17.5" height="23" backgroundColor="{data.mouseColor6}" borderColor="#000000" borderThickness="1">
			<mx:Image source="@Embed(source='..//Assets/MHiconGrayWeb.gif')" id="mouseImg6" cacheAsBitmap="true" x="0" y="0" height="23" width="17" rollOver="parentDocument.setSlotData(6, data.col, data.row); {parentDocument.dispMouseTipInfo(data.mouseId6, event)}" scaleContent="false" rollOut="{parentDocument.destroyMouseTip()}"/>
		</mx:Canvas>												
	</mx:HBox>
 
	
</mx:VBox>

Open in new window

0
mhendrix
Asked:
mhendrix
1 Solution
 
mplordCommented:
Hi, posted the same answer as to your other question here in the hope it gets you started.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:my="*">
	<my:CustomCanvas horizontalCenter="0" verticalCenter="0" width="156" height="122">
	</my:CustomCanvas>
</mx:Application>
 
 
###### CustomCanvas.as
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" click="onClick(event);" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#FFFFFF">
	
	<mx:Script>
		<![CDATA[
			private static var flag:Boolean = false;
 
			private function onClick(event:Event):void
			{
				if (flag)
				{
					this.setStyle("borderColor", "#000000");
					this.setStyle("backgroundColor", "#FFFFFF"); 
				}
				else
				{
					this.setStyle("borderColor", "#FFFFFF");
					this.setStyle("backgroundColor", "#000000"); 
				}
				
				flag = !flag;
			}
		]]>
	</mx:Script>
</mx:Canvas>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now