Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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,356 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
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…
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

730 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