11-07-2006, 06:36 PM
|
#1
|
|
Senior Member
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
|
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?
|
|
|
11-07-2006, 07:01 PM
|
#2
|
|
Registered User
Join Date: Oct 2006
Posts: 383
|
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
|
|
|
11-07-2006, 07:02 PM
|
#3
|
|
Senior Member
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
|
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.
|
|
|
11-07-2006, 07:08 PM
|
#4
|
|
Addict
Join Date: Nov 2001
Location: London
Posts: 2,128
|
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>
|
|
|
11-07-2006, 07:11 PM
|
#5
|
|
Addict
Join Date: Nov 2001
Location: London
Posts: 2,128
|
alternatively you could extend button, so you could actually assign and retrieve the value from the button by adding a custom getter/setter
|
|
|
11-07-2006, 07:15 PM
|
#6
|
|
Senior Member
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
|
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>
|
|
|
11-07-2006, 07:18 PM
|
#7
|
|
Senior Member
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
|
Quote:
Originally Posted by CDHBookingEdge
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!
|
|
|
11-07-2006, 07:21 PM
|
#8
|
|
Addict
Join Date: Nov 2001
Location: London
Posts: 2,128
|
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.
|
|
|
11-07-2006, 07:25 PM
|
#9
|
|
Senior Member
Join Date: Aug 2005
Location: Minnesota, USA
Posts: 216
|
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>
|
|
|
11-07-2006, 07:28 PM
|
#10
|
|
Addict
Join Date: Nov 2001
Location: London
Posts: 2,128
|
yeah thats a lot cleaner. good stuff!
|
|
|
| Thread Tools |
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
All times are GMT. The time now is 09:34 PM.
///
|
|