Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 11-07-2006, 06:36 PM   #1
meddlingwithfir
Senior Member
 
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
Default button events

Oof -- my brain is reeling today, seems I'm fighting uphill at every turn. I'm attempting to build a function that gets called after a button is clicked.

The fun part is there are tons of buttons, and they're not static

Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.utils.ObjectUtil;
			import mx.controls.Alert;
			
			[Bindable] private var beads:Array = 
			[	
				[1,2,3,4,5,6,7,8,9,10],
				[11,12,13,14,15,16,17,18,19,20],
				[21,22,23,24,25,26,27,28,29,30],
				[31,32,33,34,35,36,37,38,39,40],
				[41,42,43,44,45,46,47,48,49,50],
				[51,52,53,54,55,56,57,58,59,60],
				[61,62,63,64,65,66,67,68,69,70],
				[71,72,73,74,75,76,77,78,79,80],
				[81,82,83,84,85,86,87,88,89,90],
				[91,92,93,94,95,96,97,98,99,100]
			];
				
			//[Bindable] private var panelWidth:int  = 2*(beads[0].length*22);
			//[Bindable] private var panelHeight:int = (beads.length*22);
			
			private function beadClicked(thisValue:Object):void
			{
				Alert.show("here","Here");
				Alert.show(thisValue.toString(),"Bead Clicked");
			}
			private function nothing():void
			{
				Alert.show("nothing","Bead Clicked");
			}
		]]>
	</mx:Script>
	
	

	<mx:Repeater
		id="currentRow"
		dataProvider="{beads}"
	>
		<mx:Repeater 
			id="currentColumn"
			dataProvider="{currentRow.currentItem}" 
		>
			<mx:Button 
				x="{currentColumn.currentIndex*22}" 
				y="{currentRow.currentIndex*22}" 
				width="20"
				height="20"
				cornerRadius="0"
				horizontalGap="0"
				label=""
				leading="0"
				paddingBottom="0"
				paddingLeft="0"
				paddingRight="0"
				paddingTop="0"
				click="beadClicked(currentColumn.currentItem)"
			/>
		</mx:Repeater>
	</mx:Repeater>
</mx:Application>
The Repeaters are set up to loop through the beads:Array -- one row at a time. It generates a Button for each value in the array. When I click the button, I get an error: "Cannot access a property or method of a null object reference."

I'm at a bit of a loss as to what else I would put in the click parameter. I am attempting to get the value of the array that the button is signifying...

Any ideas?
meddlingwithfir is offline   Reply With Quote
Old 11-07-2006, 07:01 PM   #2
CDHBookingEdge
Registered User
 
Join Date: Oct 2006
Posts: 383
Send a message via MSN to CDHBookingEdge
Default

med where are you getting this exception? I'm assuming it's in the beadClicked method right? Next question is what is it showing in the variables during debug for thisValue? My guess is that's where the problem lays.

LOL yes I'm not giving you an answer cuz I don't know as yet but I sent this to AssertnFailure and it helped him figure something out similar so see if it helps you: Event handlers in Repeater components

Hope that helps, let me know,
Christopher
CDHBookingEdge is offline   Reply With Quote
Old 11-07-2006, 07:02 PM   #3
meddlingwithfir
Senior Member
 
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
Default

Haven't figured it out yet, but here's a little better view of what's going on. Really all I need is the ability for that function to read ANY of the attributes I have listed in the label for the button.

I did was add a little code to the Button.label attribute:

Code:
label="{currentRow.currentIndex}x{currentColumn.currentIndex} {currentColumn.currentItem}"
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.utils.ObjectUtil;
			import mx.controls.Alert;
			
			[Bindable] private var beads:Array = 
			[	
				[1,2,3,4,5,6,7,8,9,10],
				[11,12,13,14,15,16,17,18,19,20],
				[21,22,23,24,25,26,27,28,29,30],
				[31,32,33,34,35,36,37,38,39,40],
				[41,42,43,44,45,46,47,48,49,50],
				[51,52,53,54,55,56,57,58,59,60],
				[61,62,63,64,65,66,67,68,69,70],
				[71,72,73,74,75,76,77,78,79,80],
				[81,82,83,84,85,86,87,88,89,90],
				[91,92,93,94,95,96,97,98,99,100]
			];
				
			//[Bindable] private var panelWidth:int  = 2*(beads[0].length*22);
			//[Bindable] private var panelHeight:int = (beads.length*22);
			
			private function beadClicked(row:int, column:int):void
			{
				//Alert.show("here","Here");
				Alert.show(row+","+column,"Here");
			}
			private function nothing():void
			{
				Alert.show("nothing","Bead Clicked");
			}
		]]>
	</mx:Script>
	
	<mx:Repeater
		id="currentRow"
		dataProvider="{beads}"
	>
		<mx:Repeater 
			id="currentColumn"
			dataProvider="{currentRow.currentItem}" 
		>
			<mx:Button 
				x="{currentColumn.currentIndex*42}" 
				y="{currentRow.currentIndex*22}" 
				width="40"
				height="20"
				cornerRadius="0"
				horizontalGap="0"
				label="{currentRow.currentIndex}x{currentColumn.currentIndex} {currentColumn.currentItem}"
				leading="0"
				paddingBottom="0"
				paddingLeft="0"
				paddingRight="0"
				paddingTop="0"
				click="beadClicked(currentColumn.currentIndex,currentRow.currentIndex)"
			/>
		</mx:Repeater>
	</mx:Repeater>
</mx:Application>

Last edited by meddlingwithfir; 11-07-2006 at 07:08 PM.
meddlingwithfir is offline   Reply With Quote
Old 11-07-2006, 07:08 PM   #4
Tink
Addict
 
Tink's Avatar
 
Join Date: Nov 2001
Location: London
Posts: 2,128
Default

try this
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.controls.Alert;
			
			private const CELL_SIZE:Number = 22;
			
			[Bindable] private var beads:Array = 
			[	
				[1,2,3,4,5,6,7,8,9,10],
				[11,12,13,14,15,16,17,18,19,20],
				[21,22,23,24,25,26,27,28,29,30],
				[31,32,33,34,35,36,37,38,39,40],
				[41,42,43,44,45,46,47,48,49,50],
				[51,52,53,54,55,56,57,58,59,60],
				[61,62,63,64,65,66,67,68,69,70],
				[71,72,73,74,75,76,77,78,79,80],
				[81,82,83,84,85,86,87,88,89,90],
				[91,92,93,94,95,96,97,98,99,100]
			];
			
			private function beadClicked( event:Event ):void
			{
				var button:Button 	= Button( event.target );
				var row:Number 		= button.y / CELL_SIZE;
				var column:Number 	= button.x / CELL_SIZE;
				Alert.show( beads[ row ][ column ], "Bead Clicked" );
			}
		]]>
	</mx:Script>
	
	<mx:Repeater
		id="currentRow"
		dataProvider="{beads}"
	>
		<mx:Repeater 
			id="currentColumn"
			dataProvider="{currentRow.currentItem}" 
		>
			<mx:Button 
				x="{currentColumn.currentIndex*CELL_SIZE}" 
				y="{currentRow.currentIndex*CELL_SIZE}" 
				width="20"
				height="20"
				cornerRadius="0"
				horizontalGap="0"
				label=""
				leading="0"
				paddingBottom="0"
				paddingLeft="0"
				paddingRight="0"
				paddingTop="0"
				click="beadClicked( event );"
			/>
		</mx:Repeater>
	</mx:Repeater>
	
</mx:Application>
Tink is offline   Reply With Quote
Old 11-07-2006, 07:11 PM   #5
Tink
Addict
 
Tink's Avatar
 
Join Date: Nov 2001
Location: London
Posts: 2,128
Default

alternatively you could extend button, so you could actually assign and retrieve the value from the button by adding a custom getter/setter
Tink is offline   Reply With Quote
Old 11-07-2006, 07:15 PM   #6
meddlingwithfir
Senior Member
 
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
Default

Hey, thanks!!

Code:
click="beadClicked( event )"
Where does that event variable get defined though? To me that looks like I'm passing in an Object that doesn't exist...

I've made some modifications to the program to get it to behave the way I'd like it to (your code was *very* helpful ):

Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.utils.ObjectUtil;
			import mx.controls.Alert;
			
			[Bindable] private var beads:Array = 
			[	
				[1,2,3,4,5,6,7,8,9,10],
				[11,12,13,14,15,16,17,18,19,20],
				[21,22,23,24,25,26,27,28,29,30],
				[31,32,33,34,35,36,37,38,39,40],
				[41,42,43,44,45,46,47,48,49,50],
				[51,52,53,54,55,56,57,58,59,60],
				[61,62,63,64,65,66,67,68,69,70],
				[71,72,73,74,75,76,77,78,79,80],
				[81,82,83,84,85,86,87,88,89,90],
				[91,92,93,94,95,96,97,98,99,100]
			];
				
			//[Bindable] private var panelWidth:int  = 2*(beads[0].length*22);
			//[Bindable] private var panelHeight:int = (beads.length*22);
			private const CELL_SIZE:Number = 22;
			
			private function beadClicked(event:Event):void
			{
				var button:Button 	= Button( event.target );
				//var row:Number 		= button.y / CELL_SIZE;
				//var column:Number 	= button.x / CELL_SIZE;
				Alert.show( button.label, "Bead Clicked" );
			}
			private function nothing():void
			{
				Alert.show("nothing","Bead Clicked");
			}
		]]>
	</mx:Script>
	
	

	<mx:Repeater
		id="currentRow"
		dataProvider="{beads}"
	>
		<mx:Repeater 
			id="currentColumn"
			dataProvider="{currentRow.currentItem}" 
		>
			<mx:Button 
				x="{currentColumn.currentIndex*CELL_SIZE}" 
				y="{currentRow.currentIndex*CELL_SIZE}" 
				width="50"
				height="20"
				cornerRadius="0"
				horizontalGap="0"
				label="{currentColumn.currentItem}"
				leading="0"
				paddingBottom="0"
				paddingLeft="0"
				paddingRight="0"
				paddingTop="0"
				click="beadClicked( event )"
			/>
		</mx:Repeater>
	</mx:Repeater>
	
	

</mx:Application>
meddlingwithfir is offline   Reply With Quote
Old 11-07-2006, 07:18 PM   #7
meddlingwithfir
Senior Member
 
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
Default

Quote:
Originally Posted by CDHBookingEdge View Post
med where are you getting this exception? I'm assuming it's in the beadClicked method right? Next question is what is it showing in the variables during debug for thisValue? My guess is that's where the problem lays.

LOL yes I'm not giving you an answer cuz I don't know as yet but I sent this to AssertnFailure and it helped him figure something out similar so see if it helps you: Event handlers in Repeater components

Hope that helps, let me know,
Christopher
Woah, sorry! I completely missed this post -- I was making a followup at the time. That link is definitely helpful! It actually describes what I was trying to do exactly:

Quote:
You cannot give each instance its own event handler by writing something like click="doSomething({r.currentItem})" because binding expressions are not allowed in event handlers, and all instances of the repeated component must share the same event handler.
Bad meddling! I'm gonna finish reading that article... definitely good stuff in there -- Thanks for sharing!
meddlingwithfir is offline   Reply With Quote
Old 11-07-2006, 07:21 PM   #8
Tink
Addict
 
Tink's Avatar
 
Join Date: Nov 2001
Location: London
Posts: 2,128
Default

Quote:
Where does that event variable get defined though? To me that looks like I'm passing in an Object that doesn't exist...
A Button object dispatches a click event when clicked.

the MXML
Code:
click="beadClicked( event )"
is basically just adding a listener to tis event. the equivilent in AS is (which is what is being written behind the scenes)
Code:
button.addEventListener( Event.CLICK, beadClicked );
When an event is dispatched the event object is then recieved by the listening method.
Tink is offline   Reply With Quote
Old 11-07-2006, 07:25 PM   #9
meddlingwithfir
Senior Member
 
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
Default

And my "completed" code (for this milestone anyway ) -- MAJOR thanks to CDH and Tink!

Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.utils.ObjectUtil;
			import mx.controls.Alert;
			
			[Bindable] private var beads:Array = 
			[	
				[1,2,3,4,5,6,7,8,9,10],
				[11,12,13,14,15,16,17,18,19,20],
				[21,22,23,24,25,26,27,28,29,30],
				[31,32,33,34,35,36,37,38,39,40],
				[41,42,43,44,45,46,47,48,49,50],
				[51,52,53,54,55,56,57,58,59,60],
				[61,62,63,64,65,66,67,68,69,70],
				[71,72,73,74,75,76,77,78,79,80],
				[81,82,83,84,85,86,87,88,89,90],
				[91,92,93,94,95,96,97,98,99,100]
			];
				
			private const CELL_SIZE:Number = 22;
			
			private function beadClicked(bead:int):void
			{
				Alert.show( bead.toString(), "Bead Clicked" );
			}
		]]>
	</mx:Script>
	
	

	<mx:Repeater
		id="currentRow"
		dataProvider="{beads}"
	>
		<mx:Repeater 
			id="currentColumn"
			dataProvider="{currentRow.currentItem}" 
		>
			<mx:Button 
				x="{currentColumn.currentIndex*CELL_SIZE}" 
				y="{currentRow.currentIndex*CELL_SIZE}" 
				width="20"
				height="20"
				cornerRadius="0"
				horizontalGap="0"
				label="{currentColumn.currentItem}"
				leading="0"
				paddingBottom="0"
				paddingLeft="0"
				paddingRight="0"
				paddingTop="0"
				click="beadClicked( event.currentTarget.getRepeaterItem() )"
			/>
		</mx:Repeater>
	</mx:Repeater>
	
	

</mx:Application>
meddlingwithfir is offline   Reply With Quote
Old 11-07-2006, 07:28 PM   #10
Tink
Addict
 
Tink's Avatar
 
Join Date: Nov 2001
Location: London
Posts: 2,128
Default

yeah thats a lot cleaner. good stuff!
Tink is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Or statement for Button events Dave Taylor ActionScript 2.0 4 03-10-2006 03:05 PM
Basic Problem ... I hope todd-imc Simple Stuff (Newbies) 2 02-09-2005 05:13 PM
call button events handepora ActionScript 1.0 (and below) 3 02-03-2005 02:16 PM
2 events with small button above a large button blob ActionScript 2.0 8 01-05-2005 05:26 AM


All times are GMT. The time now is 01:34 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.