?
Solved

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

Posted on 2009-05-13
1
Medium Priority
?
4,373 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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

601 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