Solved

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

Posted on 2009-05-13
1
4,321 Views
Last Modified: 2013-12-16
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
Comment
Question by:mhendrix
1 Comment
 
LVL 10

Accepted Solution

by:
mplord earned 500 total points
ID: 24390936
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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question