Solved

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

Posted on 2009-05-13
1
4,256 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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…
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

747 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now