Re: [flexcoders] Re: Binding two elements in a single datagrid column
Hi Tim. the sample really looks great. I would try to analyze the codes this
weekend since I was pretty occupied these past few days.
The display alone is already what I am hoping to achieve since I don't want to
separate the age and months on another column. If I did separate it, then it
would be easier on my part but it kind of defeats the purpose.
Thanks a bunch!
Regards,
Angelo
From: Tim Hoff timh...@aol.com
To: flexcoders@yahoogroups.com
Sent: Thursday, 18 June, 2009 1:46:34
Subject: [flexcoders] Re: Binding two elements in a single datagrid column
Ok, here's how I would do it; with efficiency and best-practice in mind:
http://www.timothyh off.com/projects /AgeItemRenderer Sample/AgeItemRe
ndererSample. html
( right click to view source )
Two main differences Steve:
First, use createChildren to add the children, instead of in set data. I
suspect that what's happening with the way you are doing it is that each time
the data is changed (which, because the itemRenderers are recycled, happens on
every scroll), the instance of the child is attempted to be added to the
display list. I can't see the code in flash.display. DisplayObjectCon tainer,
but I suspect that the code is checking to see if the instance exists already
and/or re-parenting it. Either way, this is an un-necessary step. You only
need to add the child once and then use the data to control it's state.
Second, for efficiency, try to avoid using containers in itemRenderers. A good
practice is to extend UIComponent and do the layout manually. It's a little
more work, but you get some good performance benefits.
I encourage you to read this series and also look at the source code for the
Flex controls. They all follow the same component life-cycle pattern.
Angelo, look at this sample for how to use an itemEditor.
-TH
--- In flexcod...@yahoogro ups.com, valdhor valdhorlists@ ... wrote:
I thought that was the idea.
In the example, I wanted a new NumericStepper for each data item (Actually
two new NumericSteppers) . If createChildren only runs once, how would you
get the required output? In other words, can you post your version of the
example using createChildren ?
--- In flexcod...@yahoogro ups.com, Tim Hoff TimHoff@ wrote:
Yes, createChildren will only execute once; while set data will execute
many times. Perhaps it's not a problem if the same child gets added to
the display list everytime that the data is set. But usually, you only
need to add them once.
-TH
--- In flexcod...@yahoogro ups.com, valdhor valdhorlists@ wrote:
I use addChild in the set data function only because I always have.
I have built hundreds of renderers this way and none of them have
given me a problem. If there's a good reason why I shouldn't do it this
way, I'm all ears.
--- In flexcod...@yahoogro ups.com, Tim Hoff TimHoff@ wrote:
I'm with you Steve; about using AS for an itemRenderer. I do wonder
why
you would use addChild in the set data function though; rather than
in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap= 5 horizontalAlign= center
width=100% horizontalScrollPol icy=off
verticalScrollPolic y=off
mx:NumericStepper id=nsOutwardAgeYea r value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center /
mx:NumericStepper id=nsOutwardAgeMon ths value={
data.Months } minimum=0 maximum=200 stepSize=1 width=50
textAlign=center /
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a spacer
as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcod...@yahoogro ups.com, valdhor valdhorlists@ wrote:
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript. ..
main.mxml:
?xml version=1.0 encoding=utf- 8?
mx:Application xmlns:mx=http: //www.adobe. com/2006/ mxml
layout=absolute
mx:Script
![CDATA[
import mx.collections. ArrayCollection;
[Bindable] private var _arrTest:ArrayColle ction = new
ArrayCollection( [{Age:5, Months:10} , {Age:18, Months:3},
{Age:1, Months:2}] );
]]
/mx:Script
mx:DataGrid dataProvider= {_arrTest}
mx:columns
mx:DataGridColumn headerText= Age width=120
itemRenderer= NumericStepperR enderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRende rer.as:
package
{
import mx.containers. HBox;
import mx.controls. NumericStepper;
public class NumericStepperRende rer extends HBox
{
private var nsOutwardAgeYear: NumericStepper = new
NumericStepper( );
private var nsOutwardAgeMonths: NumericStepper = new
NumericStepper( );
public function NumericStepperRende rer
[flexcoders] Re: Binding two elements in a single datagrid column
--- In flexcoders@yahoogroups.com, Tim Hoff timh...@... wrote: No response huh? Ok, you're welcome valdhor (Steve). One thing to point out is that all flex controls, containers and components extend UIComponent. AdvancedDataGridItemRenderer doesn't. I suspect there are others as well.
[flexcoders] Re: Binding two elements in a single datagrid column
Actually, I am still reading through Peter Ent's dissertation on the subject.
From what I have learned, what I am doing is not wrong per se. It works and
works very well for the smaller data sets that I use (Hundreds of rows, rather
than thousands). Also, doing it the way I do is a lot more readable. I don't
see it as a bad habit - just one way of many to get something done.
I think that if I had a performance issue I would go back and tweak item
renderers (And other components) to be more efficient.
From a new users perspective, if I had seen your item renderer when I first
started using Flex, I would have been totally intimidated and probably tried
very hard never to need an item renderer.
--- In flexcoders@yahoogroups.com, Tim Hoff timh...@... wrote:
No response huh? Ok, you're welcome valdhor (Steve). One thing to
point out is that all flex controls, containers and components extend
UIComponent. Therefore, they all use the createChildren(),
commitProperties(), measure(), layoutChrome() and updateDisplayList()
methods. This applies to itemRenderers as well. The Flex engineers did
a great job developing the component life-cycle, and each of these
functions has a specific purpose. So really it's fine, if some other
practice, that circumvents the intended use of these methods, works for
you. However, it's propbably not fair to spread bad habits like this to
others; that are just learning.
-TH
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
Ok, here's how I would do it; with efficiency and best-practice in
mind:
http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRendere\
\
rSample.html
http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRender\
\
erSample.html
( right click to view source )
Two main differences Steve:
First, use createChildren to add the children, instead of in set data.
I suspect that what's happening with the way you are doing it is that
each time the data is changed (which, because the itemRenderers are
recycled, happens on every scroll), the instance of the child is
attempted to be added to the display list. I can't see the code in
flash.display.DisplayObjectContainer, but I suspect that the code is
checking to see if the instance exists already and/or re-parenting it.
Either way, this is an un-necessary step. You only need to add the
child once and then use the data to control it's state.
Second, for efficiency, try to avoid using containers in
itemRenderers.
A good practice is to extend UIComponent and do the layout manually.
It's a little more work, but you get some good performance benefits.
I encourage you to read this series
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html and
also look at the source code for the Flex controls. They all follow
the
same component life-cycle pattern.
Angelo, look at this sample for how to use an itemEditor.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote:
I thought that was the idea.
In the example, I wanted a new NumericStepper for each data item
(Actually two new NumericSteppers). If createChildren only runs once,
how would you get the required output? In other words, can you post
your
version of the example using createChildren ?
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
Yes, createChildren will only execute once; while set data will
execute
many times. Perhaps it's not a problem if the same child gets
added
to
the display list everytime that the data is set. But usually, you
only
need to add them once.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@
wrote:
I use addChild in the set data function only because I always
have.
I have built hundreds of renderers this way and none of them
have
given me a problem. If there's a good reason why I shouldn't do it
this
way, I'm all ears.
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
I'm with you Steve; about using AS for an itemRenderer. I do
wonder
why
you would use addChild in the set data function though; rather
than
in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off
verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1
width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a
spacer
as
well. Just cleans it up a bit.
[flexcoders] Re: Binding two elements in a single datagrid column
Very well, you go with that.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote:
Actually, I am still reading through Peter Ent's dissertation on the
subject.
From what I have learned, what I am doing is not wrong per se. It
works and works very well for the smaller data sets that I use (Hundreds
of rows, rather than thousands). Also, doing it the way I do is a lot
more readable. I don't see it as a bad habit - just one way of many to
get something done.
I think that if I had a performance issue I would go back and tweak
item renderers (And other components) to be more efficient.
From a new users perspective, if I had seen your item renderer when I
first started using Flex, I would have been totally intimidated and
probably tried very hard never to need an item renderer.
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
No response huh? Ok, you're welcome valdhor (Steve). One thing to
point out is that all flex controls, containers and components
extend
UIComponent. Therefore, they all use the createChildren(),
commitProperties(), measure(), layoutChrome() and
updateDisplayList()
methods. This applies to itemRenderers as well. The Flex engineers
did
a great job developing the component life-cycle, and each of these
functions has a specific purpose. So really it's fine, if some other
practice, that circumvents the intended use of these methods, works
for
you. However, it's propbably not fair to spread bad habits like this
to
others; that are just learning.
-TH
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
Ok, here's how I would do it; with efficiency and best-practice in
mind:
http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRendere\
\
\
rSample.html
http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRender\
\
\
erSample.html
( right click to view source )
Two main differences Steve:
First, use createChildren to add the children, instead of in set
data.
I suspect that what's happening with the way you are doing it is
that
each time the data is changed (which, because the itemRenderers
are
recycled, happens on every scroll), the instance of the child is
attempted to be added to the display list. I can't see the code in
flash.display.DisplayObjectContainer, but I suspect that the code
is
checking to see if the instance exists already and/or re-parenting
it.
Either way, this is an un-necessary step. You only need to add the
child once and then use the data to control it's state.
Second, for efficiency, try to avoid using containers in
itemRenderers.
A good practice is to extend UIComponent and do the layout
manually.
It's a little more work, but you get some good performance
benefits.
I encourage you to read this series
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html
and
also look at the source code for the Flex controls. They all
follow
the
same component life-cycle pattern.
Angelo, look at this sample for how to use an itemEditor.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote:
I thought that was the idea.
In the example, I wanted a new NumericStepper for each data item
(Actually two new NumericSteppers). If createChildren only runs
once,
how would you get the required output? In other words, can you
post
your
version of the example using createChildren ?
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
Yes, createChildren will only execute once; while set data
will
execute
many times. Perhaps it's not a problem if the same child gets
added
to
the display list everytime that the data is set. But usually,
you
only
need to add them once.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@
wrote:
I use addChild in the set data function only because I
always
have.
I have built hundreds of renderers this way and none of them
have
given me a problem. If there's a good reason why I shouldn't
do it
this
way, I'm all ears.
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@
wrote:
I'm with you Steve; about using AS for an itemRenderer. I
do
wonder
why
you would use addChild in the set data function though;
rather
than
in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off
verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1
width=50
[flexcoders] Re: Binding two elements in a single datagrid column
Oh heck, I just can't resist. From what I have learned, what I am doing is not wrong per se. It works and works very well for the smaller data sets that I use (Hundreds of rows, rather than thousands). Also, doing it the way I do is a lot more readable. I don't see it as a bad habit - just one way of many to get something done. For some reason, you are thinking that each item in a data set has an itemRenderer; they don't There are only enough itemRenderers instantiated, to display in the scrollable area of a list; and sometimes one or two more. When the list scrolls or the dataProvider changes, the itemRenderers that have already been instantiated are recycled. So, it doesn't matter if there are 100 or 1000 items in the dataProvider. What matters is how many objects on the screen need to be rendered.Each time that an itemRenderer is recycled, it's data is set; but it isn't re-instantiated. So performing tasks like addChild are redundant at that point. Agreed, there's usually more than one way to accomplish a task in flex and everyone is entitled to their opinion and preferred practices. If you want to add children to a component every time that the data changes, go for it. To me though, it just doesn't make sense to try to re-add something that's already there. I think that if I had a performance issue I would go back and tweak item renderers (And other components) to be more efficient. We're talking milliseconds here, so perception is always relative. I imagine that people that have only used dial-up, are accustomed to and happy with a certain level of performance. That is, until they experience broadband for the first time. From a new users perspective, if I had seen your item renderer when I first started using Flex, I would have been totally intimidated and probably tried very hard never to need an item renderer. If you look back at the first few posts on this thread, you'll see that my response was a solution for Angelo's simple in-line mxml itemRenderer. You introduced an AS solution. Agreed, beginners will find AS itemRenderers intimidating. Oh well, you have to learn sometime. So, I don't want to make this a big deal. At the end of the day, if it works for you, that's all that matters. That doesn't mean though, in a public forum, that best-practices shouldn't be pointed out. In the past, I've had several occasions where I've just been flat-out wrong on this list; or should I say strong and wrong, because of ego and stubbornness. :) . The good thing is that people have nicely pointed out my errors and I've learned from it; as well as others following along. On this specific issue though, I stand by my assertions completely. Anyway, nice discussing this with you Steve. No hard feelings. -TH --- In flexcoders@yahoogroups.com, Tim Hoff timh...@... wrote: Very well, you go with that. -TH --- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote: Actually, I am still reading through Peter Ent's dissertation on the subject. From what I have learned, what I am doing is not wrong per se. It works and works very well for the smaller data sets that I use (Hundreds of rows, rather than thousands). Also, doing it the way I do is a lot more readable. I don't see it as a bad habit - just one way of many to get something done. I think that if I had a performance issue I would go back and tweak item renderers (And other components) to be more efficient. From a new users perspective, if I had seen your item renderer when I first started using Flex, I would have been totally intimidated and probably tried very hard never to need an item renderer. --- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote: No response huh? Ok, you're welcome valdhor (Steve). One thing to point out is that all flex controls, containers and components extend UIComponent. Therefore, they all use the createChildren(), commitProperties(), measure(), layoutChrome() and updateDisplayList() methods. This applies to itemRenderers as well. The Flex engineers did a great job developing the component life-cycle, and each of these functions has a specific purpose. So really it's fine, if some other practice, that circumvents the intended use of these methods, works for you. However, it's propbably not fair to spread bad habits like this to others; that are just learning. -TH --- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote: Ok, here's how I would do it; with efficiency and best-practice in mind: http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRendere\ \ \ \ rSample.html http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRender\ \ \ \ erSample.html ( right click to view source ) Two main differences Steve: First, use createChildren to add the children, instead of in set data. I suspect that what's
[flexcoders] Re: Binding two elements in a single datagrid column
Yep, should have said, those that don't implement IDataRenderer, IListItemRenderer and/or IDropInListItemRenderer manually. Nice snype. -TH --- In flexcoders@yahoogroups.com, Amy amyblankens...@... wrote: --- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote: No response huh? Ok, you're welcome valdhor (Steve). One thing to point out is that all flex controls, containers and components extend UIComponent. AdvancedDataGridItemRenderer doesn't. I suspect there are others as well.
[flexcoders] Re: Binding two elements in a single datagrid column
Actually, its ILayoutManagerClient that supports validateProperties(), validateSize() and validateDisplayList(). I'll get it right one of these days. :) -TH --- In flexcoders@yahoogroups.com, Tim Hoff timh...@... wrote: Yep, should have said, those that don't implement IDataRenderer, IListItemRenderer and/or IDropInListItemRenderer manually. Nice snype. -TH --- In flexcoders@yahoogroups.com, Amy amyblankenship@ wrote: --- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote: No response huh? Ok, you're welcome valdhor (Steve). One thing to point out is that all flex controls, containers and components extend UIComponent. AdvancedDataGridItemRenderer doesn't. I suspect there are others as well.
[flexcoders] Re: Binding two elements in a single datagrid column
I thought that was the idea.
In the example, I wanted a new NumericStepper for each data item (Actually two
new NumericSteppers). If createChildren only runs once, how would you get the
required output? In other words, can you post your version of the example using
createChildren ?
--- In flexcoders@yahoogroups.com, Tim Hoff timh...@... wrote:
Yes, createChildren will only execute once; while set data will execute
many times. Perhaps it's not a problem if the same child gets added to
the display list everytime that the data is set. But usually, you only
need to add them once.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote:
I use addChild in the set data function only because I always have.
I have built hundreds of renderers this way and none of them have
given me a problem. If there's a good reason why I shouldn't do it this
way, I'm all ears.
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
I'm with you Steve; about using AS for an itemRenderer. I do wonder
why
you would use addChild in the set data function though; rather than
in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off
verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a spacer
as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote:
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript...
main.mxml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{Age:5, Months:10}, {Age:18, Months:3},
{Age:1, Months:2}]);
]]
/mx:Script
mx:DataGrid dataProvider={_arrTest}
mx:columns
mx:DataGridColumn headerText=Age width=120
itemRenderer=NumericStepperRenderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRenderer.as:
package
{
import mx.containers.HBox;
import mx.controls.NumericStepper;
public class NumericStepperRenderer extends HBox
{
private var nsOutwardAgeYear:NumericStepper = new
NumericStepper();
private var nsOutwardAgeMonths:NumericStepper = new
NumericStepper();
public function NumericStepperRenderer()
{
super();
nsOutwardAgeYear.minimum = 0;
nsOutwardAgeMonths.minimum = 0;
nsOutwardAgeYear.maximum = 200;
nsOutwardAgeMonths.maximum = 200;
nsOutwardAgeYear.stepSize = 1;
nsOutwardAgeMonths.stepSize = 1;
nsOutwardAgeYear.width = 50;
nsOutwardAgeMonths.width = 50;
nsOutwardAgeYear.setStyle(textAlign, center);
nsOutwardAgeMonths.setStyle(textAlign, center);
}
override public function set data(value:Object):void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear.value = value.Age;
nsOutwardAgeMonths.value = value.Months;
addChild(nsOutwardAgeMonths);
addChild(nsOutwardAgeYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event
listener for the change event.
HTH
Steve
--- In flexcoders@yahoogroups.com, Angelo Anolin angelo_anolin@
wrote:
Hi FlexCoders,
I have a datagrid, where one of the columns is defined as
follows:
mx:DataGridColumn width=150
mx:headerRenderer
mx:Component
mx:VBox horizontalScrollPolicy=off verticalScrollPolicy=off
verticalGap=2
mx:Box horizontalAlign=center width=100%
mx:Label text=Age /
/mx:Box
mx:HBox horizontalAlign=center width=100%
mx:Label text=Year horizontalCenter=true width=50 /
mx:Spacer width=10/
mx:Label text=Month horizontalCenter=true width=50 /
/mx:HBox
/mx:VBox
/mx:Component
/mx:headerRenderer
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign=center width=100%
horizontalScrollPolicy=off verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear minimum=0
maximum=200
stepSize=1 width=50 textAlign=center/
mx:Spacer width=5/
mx:NumericStepper id=nsOutwardAgeMonths minimum=0
maximum=200 stepSize=1 width=50 textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
Now, how would I be able to bind in both components my array
Re: [flexcoders] Re: Binding two elements in a single datagrid column
Listen to the change event / enter event on the NumericSteppers and dispatch
an event to update the DataProvider with the new values. Once you override
the itemRenderer with a custom Renderer, you need to handle the commit of
values back to the DataProvider.
You can do something similar to this. Please note that this is NOT exact
code, but you could use this approach.
nsOutwardAgeYear.addEventListener(change onnsOutwardChange);
private function onnsOutwardChange(event:Event):void
{
dispatchEvent(new CustomEvent(valueChanged, (event.target as
NumericStepper).value);
}
*The custom event can have an extra property that holds the value of the
Stepper.*
*In your main app, add a listener to your DataGrid*
dg.addEventListener(CustomEvent.VALUE_CHANGED, onvalueChanged);
private function onvalueChanged(event:CustomEvent):void
{
var selectedObject:Object = datagrid.selectedItem
selectedObject.Age = event.value;
(datagrid.dataProvider as ArrayCollection).setItemAt(selectedObject,
datagrid.selectedIndex)
}
Hope this helps!
Cheers
Harish
http://blog.flexgeek.in
On Wed, Jun 17, 2009 at 6:28 PM, valdhor valdhorli...@embarqmail.comwrote:
I thought that was the idea.
In the example, I wanted a new NumericStepper for each data item (Actually
two new NumericSteppers). If createChildren only runs once, how would you
get the required output? In other words, can you post your version of the
example using createChildren ?
--- In flexcoders@yahoogroups.com flexcoders%40yahoogroups.com, Tim
Hoff timh...@... wrote:
Yes, createChildren will only execute once; while set data will execute
many times. Perhaps it's not a problem if the same child gets added to
the display list everytime that the data is set. But usually, you only
need to add them once.
-TH
--- In flexcoders@yahoogroups.com flexcoders%40yahoogroups.com,
valdhor valdhorlists@ wrote:
I use addChild in the set data function only because I always have.
I have built hundreds of renderers this way and none of them have
given me a problem. If there's a good reason why I shouldn't do it this
way, I'm all ears.
--- In flexcoders@yahoogroups.com flexcoders%40yahoogroups.com, Tim
Hoff TimHoff@ wrote:
I'm with you Steve; about using AS for an itemRenderer. I do wonder
why
you would use addChild in the set data function though; rather than
in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off
verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a spacer
as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcoders@yahoogroups.com flexcoders%40yahoogroups.com,
valdhor valdhorlists@ wrote:
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript...
main.mxml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{Age:5, Months:10}, {Age:18, Months:3},
{Age:1, Months:2}]);
]]
/mx:Script
mx:DataGrid dataProvider={_arrTest}
mx:columns
mx:DataGridColumn headerText=Age width=120
itemRenderer=NumericStepperRenderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRenderer.as:
package
{
import mx.containers.HBox;
import mx.controls.NumericStepper;
public class NumericStepperRenderer extends HBox
{
private var nsOutwardAgeYear:NumericStepper = new
NumericStepper();
private var nsOutwardAgeMonths:NumericStepper = new
NumericStepper();
public function NumericStepperRenderer()
{
super();
nsOutwardAgeYear.minimum = 0;
nsOutwardAgeMonths.minimum = 0;
nsOutwardAgeYear.maximum = 200;
nsOutwardAgeMonths.maximum = 200;
nsOutwardAgeYear.stepSize = 1;
nsOutwardAgeMonths.stepSize = 1;
nsOutwardAgeYear.width = 50;
nsOutwardAgeMonths.width = 50;
nsOutwardAgeYear.setStyle(textAlign, center);
nsOutwardAgeMonths.setStyle(textAlign, center);
}
override public function set data(value:Object):void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear.value = value.Age;
nsOutwardAgeMonths.value = value.Months;
addChild(nsOutwardAgeMonths);
addChild(nsOutwardAgeYear);
}
[flexcoders] Re: Binding two elements in a single datagrid column
Ok, here's how I would do it; with efficiency and best-practice in mind:
http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRendere\
rSample.html
http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRender\
erSample.html
( right click to view source )
Two main differences Steve:
First, use createChildren to add the children, instead of in set data.
I suspect that what's happening with the way you are doing it is that
each time the data is changed (which, because the itemRenderers are
recycled, happens on every scroll), the instance of the child is
attempted to be added to the display list. I can't see the code in
flash.display.DisplayObjectContainer, but I suspect that the code is
checking to see if the instance exists already and/or re-parenting it.
Either way, this is an un-necessary step. You only need to add the
child once and then use the data to control it's state.
Second, for efficiency, try to avoid using containers in itemRenderers.
A good practice is to extend UIComponent and do the layout manually.
It's a little more work, but you get some good performance benefits.
I encourage you to read this series
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html and
also look at the source code for the Flex controls. They all follow the
same component life-cycle pattern.
Angelo, look at this sample for how to use an itemEditor.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote:
I thought that was the idea.
In the example, I wanted a new NumericStepper for each data item
(Actually two new NumericSteppers). If createChildren only runs once,
how would you get the required output? In other words, can you post your
version of the example using createChildren ?
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
Yes, createChildren will only execute once; while set data will
execute
many times. Perhaps it's not a problem if the same child gets added
to
the display list everytime that the data is set. But usually, you
only
need to add them once.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote:
I use addChild in the set data function only because I always
have.
I have built hundreds of renderers this way and none of them have
given me a problem. If there's a good reason why I shouldn't do it
this
way, I'm all ears.
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
I'm with you Steve; about using AS for an itemRenderer. I do
wonder
why
you would use addChild in the set data function though; rather
than
in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off
verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a
spacer
as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@
wrote:
This is probably possible in MXML but I prefer to write my
item
renderers in ActionScript...
main.mxml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{Age:5, Months:10}, {Age:18,
Months:3},
{Age:1, Months:2}]);
]]
/mx:Script
mx:DataGrid dataProvider={_arrTest}
mx:columns
mx:DataGridColumn headerText=Age width=120
itemRenderer=NumericStepperRenderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRenderer.as:
package
{
import mx.containers.HBox;
import mx.controls.NumericStepper;
public class NumericStepperRenderer extends HBox
{
private var nsOutwardAgeYear:NumericStepper = new
NumericStepper();
private var nsOutwardAgeMonths:NumericStepper = new
NumericStepper();
public function NumericStepperRenderer()
{
super();
nsOutwardAgeYear.minimum = 0;
nsOutwardAgeMonths.minimum = 0;
nsOutwardAgeYear.maximum = 200;
nsOutwardAgeMonths.maximum = 200;
nsOutwardAgeYear.stepSize = 1;
nsOutwardAgeMonths.stepSize = 1;
nsOutwardAgeYear.width = 50;
nsOutwardAgeMonths.width = 50;
nsOutwardAgeYear.setStyle(textAlign, center);
nsOutwardAgeMonths.setStyle(textAlign, center);
}
override public function set data(value:Object):void
{
super.data = value;
[flexcoders] Re: Binding two elements in a single datagrid column
No response huh? Ok, you're welcome valdhor (Steve). One thing to
point out is that all flex controls, containers and components extend
UIComponent. Therefore, they all use the createChildren(),
commitProperties(), measure(), layoutChrome() and updateDisplayList()
methods. This applies to itemRenderers as well. The Flex engineers did
a great job developing the component life-cycle, and each of these
functions has a specific purpose. So really it's fine, if some other
practice, that circumvents the intended use of these methods, works for
you. However, it's propbably not fair to spread bad habits like this to
others; that are just learning.
-TH
--- In flexcoders@yahoogroups.com, Tim Hoff timh...@... wrote:
Ok, here's how I would do it; with efficiency and best-practice in
mind:
http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRendere\
\
rSample.html
http://www.timothyhoff.com/projects/AgeItemRendererSample/AgeItemRender\
\
erSample.html
( right click to view source )
Two main differences Steve:
First, use createChildren to add the children, instead of in set data.
I suspect that what's happening with the way you are doing it is that
each time the data is changed (which, because the itemRenderers are
recycled, happens on every scroll), the instance of the child is
attempted to be added to the display list. I can't see the code in
flash.display.DisplayObjectContainer, but I suspect that the code is
checking to see if the instance exists already and/or re-parenting it.
Either way, this is an un-necessary step. You only need to add the
child once and then use the data to control it's state.
Second, for efficiency, try to avoid using containers in
itemRenderers.
A good practice is to extend UIComponent and do the layout manually.
It's a little more work, but you get some good performance benefits.
I encourage you to read this series
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html and
also look at the source code for the Flex controls. They all follow
the
same component life-cycle pattern.
Angelo, look at this sample for how to use an itemEditor.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote:
I thought that was the idea.
In the example, I wanted a new NumericStepper for each data item
(Actually two new NumericSteppers). If createChildren only runs once,
how would you get the required output? In other words, can you post
your
version of the example using createChildren ?
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
Yes, createChildren will only execute once; while set data will
execute
many times. Perhaps it's not a problem if the same child gets
added
to
the display list everytime that the data is set. But usually, you
only
need to add them once.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@
wrote:
I use addChild in the set data function only because I always
have.
I have built hundreds of renderers this way and none of them
have
given me a problem. If there's a good reason why I shouldn't do it
this
way, I'm all ears.
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
I'm with you Steve; about using AS for an itemRenderer. I do
wonder
why
you would use addChild in the set data function though; rather
than
in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off
verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1
width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a
spacer
as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@
wrote:
This is probably possible in MXML but I prefer to write my
item
renderers in ActionScript...
main.mxml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{Age:5, Months:10}, {Age:18,
Months:3},
{Age:1, Months:2}]);
]]
/mx:Script
mx:DataGrid dataProvider={_arrTest}
mx:columns
mx:DataGridColumn headerText=Age width=120
itemRenderer=NumericStepperRenderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRenderer.as:
package
{
import
[flexcoders] Re: Binding two elements in a single datagrid column
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript...
main.mxml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{Age:5, Months:10}, {Age:18, Months:3},
{Age:1, Months:2}]);
]]
/mx:Script
mx:DataGrid dataProvider={_arrTest}
mx:columns
mx:DataGridColumn headerText=Age width=120
itemRenderer=NumericStepperRenderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRenderer.as:
package
{
import mx.containers.HBox;
import mx.controls.NumericStepper;
public class NumericStepperRenderer extends HBox
{
private var nsOutwardAgeYear:NumericStepper = new
NumericStepper();
private var nsOutwardAgeMonths:NumericStepper = new
NumericStepper();
public function NumericStepperRenderer()
{
super();
nsOutwardAgeYear.minimum = 0;
nsOutwardAgeMonths.minimum = 0;
nsOutwardAgeYear.maximum = 200;
nsOutwardAgeMonths.maximum = 200;
nsOutwardAgeYear.stepSize = 1;
nsOutwardAgeMonths.stepSize = 1;
nsOutwardAgeYear.width = 50;
nsOutwardAgeMonths.width = 50;
nsOutwardAgeYear.setStyle(textAlign, center);
nsOutwardAgeMonths.setStyle(textAlign, center);
}
override public function set data(value:Object):void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear.value = value.Age;
nsOutwardAgeMonths.value = value.Months;
addChild(nsOutwardAgeMonths);
addChild(nsOutwardAgeYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event
listener for the change event.
HTH
Steve
--- In flexcoders@yahoogroups.com, Angelo Anolin angelo_ano...@...
wrote:
Hi FlexCoders,
I have a datagrid, where one of the columns is defined as follows:
mx:DataGridColumn width=150
mx:headerRenderer
mx:Component
mx:VBox horizontalScrollPolicy=off verticalScrollPolicy=off
verticalGap=2
mx:Box horizontalAlign=center width=100%
mx:Label text=Age /
/mx:Box
mx:HBox horizontalAlign=center width=100%
mx:Label text=Year horizontalCenter=true width=50 /
mx:Spacer width=10/
mx:Label text=Month horizontalCenter=true width=50 /
/mx:HBox
/mx:VBox
/mx:Component
/mx:headerRenderer
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign=center width=100%
horizontalScrollPolicy=off verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear minimum=0 maximum=200
stepSize=1 width=50 textAlign=center/
mx:Spacer width=5/
mx:NumericStepper id=nsOutwardAgeMonths minimum=0
maximum=200 stepSize=1 width=50 textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
Now, how would I be able to bind in both components my array
collection? In the other columns, I can easily bind the datagridcolumn
with a single item inside the arrayCollection object by
mx:DataGridColumn headerText=Test dataField=myTestItem
width=20/
I want to bind two items inside my array collection into the
numericStepper which I placed side by side in the datagrid.
Like for example if my arraycollection has the following data
var _arrTest:ArrayCollection = new ArrayCollection([{Age:5,
Months:10}, {Age:18, Months:3}, (Age:1, Months:2)]);
the Age and Months items should be bound to nsOutwardAgeYear and
nsOutwardAgeMonths respectively.
Thanks and regards,
Angelo
[flexcoders] Re: Binding two elements in a single datagrid column
I'm with you Steve; about using AS for an itemRenderer. I do wonder why
you would use addChild in the set data function though; rather than in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a spacer as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote:
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript...
main.mxml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{Age:5, Months:10}, {Age:18, Months:3},
{Age:1, Months:2}]);
]]
/mx:Script
mx:DataGrid dataProvider={_arrTest}
mx:columns
mx:DataGridColumn headerText=Age width=120
itemRenderer=NumericStepperRenderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRenderer.as:
package
{
import mx.containers.HBox;
import mx.controls.NumericStepper;
public class NumericStepperRenderer extends HBox
{
private var nsOutwardAgeYear:NumericStepper = new
NumericStepper();
private var nsOutwardAgeMonths:NumericStepper = new
NumericStepper();
public function NumericStepperRenderer()
{
super();
nsOutwardAgeYear.minimum = 0;
nsOutwardAgeMonths.minimum = 0;
nsOutwardAgeYear.maximum = 200;
nsOutwardAgeMonths.maximum = 200;
nsOutwardAgeYear.stepSize = 1;
nsOutwardAgeMonths.stepSize = 1;
nsOutwardAgeYear.width = 50;
nsOutwardAgeMonths.width = 50;
nsOutwardAgeYear.setStyle(textAlign, center);
nsOutwardAgeMonths.setStyle(textAlign, center);
}
override public function set data(value:Object):void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear.value = value.Age;
nsOutwardAgeMonths.value = value.Months;
addChild(nsOutwardAgeMonths);
addChild(nsOutwardAgeYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event
listener for the change event.
HTH
Steve
--- In flexcoders@yahoogroups.com, Angelo Anolin angelo_anolin@
wrote:
Hi FlexCoders,
I have a datagrid, where one of the columns is defined as follows:
mx:DataGridColumn width=150
mx:headerRenderer
mx:Component
mx:VBox horizontalScrollPolicy=off verticalScrollPolicy=off
verticalGap=2
mx:Box horizontalAlign=center width=100%
mx:Label text=Age /
/mx:Box
mx:HBox horizontalAlign=center width=100%
mx:Label text=Year horizontalCenter=true width=50 /
mx:Spacer width=10/
mx:Label text=Month horizontalCenter=true width=50 /
/mx:HBox
/mx:VBox
/mx:Component
/mx:headerRenderer
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign=center width=100%
horizontalScrollPolicy=off verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear minimum=0 maximum=200
stepSize=1 width=50 textAlign=center/
mx:Spacer width=5/
mx:NumericStepper id=nsOutwardAgeMonths minimum=0
maximum=200 stepSize=1 width=50 textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
Now, how would I be able to bind in both components my array
collection? In the other columns, I can easily bind the datagridcolumn
with a single item inside the arrayCollection object by
mx:DataGridColumn headerText=Test dataField=myTestItem
width=20/
I want to bind two items inside my array collection into the
numericStepper which I placed side by side in the datagrid.
Like for example if my arraycollection has the following data
var _arrTest:ArrayCollection = new ArrayCollection([{Age:5,
Months:10}, {Age:18, Months:3}, (Age:1, Months:2)]);
the Age and Months items should be bound to nsOutwardAgeYear and
nsOutwardAgeMonths respectively.
Thanks and regards,
Angelo
[flexcoders] Re: Binding two elements in a single datagrid column
I use addChild in the set data function only because I always have.
I have built hundreds of renderers this way and none of them have given me a
problem. If there's a good reason why I shouldn't do it this way, I'm all ears.
--- In flexcoders@yahoogroups.com, Tim Hoff timh...@... wrote:
I'm with you Steve; about using AS for an itemRenderer. I do wonder why
you would use addChild in the set data function though; rather than in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a spacer as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote:
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript...
main.mxml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{Age:5, Months:10}, {Age:18, Months:3},
{Age:1, Months:2}]);
]]
/mx:Script
mx:DataGrid dataProvider={_arrTest}
mx:columns
mx:DataGridColumn headerText=Age width=120
itemRenderer=NumericStepperRenderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRenderer.as:
package
{
import mx.containers.HBox;
import mx.controls.NumericStepper;
public class NumericStepperRenderer extends HBox
{
private var nsOutwardAgeYear:NumericStepper = new
NumericStepper();
private var nsOutwardAgeMonths:NumericStepper = new
NumericStepper();
public function NumericStepperRenderer()
{
super();
nsOutwardAgeYear.minimum = 0;
nsOutwardAgeMonths.minimum = 0;
nsOutwardAgeYear.maximum = 200;
nsOutwardAgeMonths.maximum = 200;
nsOutwardAgeYear.stepSize = 1;
nsOutwardAgeMonths.stepSize = 1;
nsOutwardAgeYear.width = 50;
nsOutwardAgeMonths.width = 50;
nsOutwardAgeYear.setStyle(textAlign, center);
nsOutwardAgeMonths.setStyle(textAlign, center);
}
override public function set data(value:Object):void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear.value = value.Age;
nsOutwardAgeMonths.value = value.Months;
addChild(nsOutwardAgeMonths);
addChild(nsOutwardAgeYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event
listener for the change event.
HTH
Steve
--- In flexcoders@yahoogroups.com, Angelo Anolin angelo_anolin@
wrote:
Hi FlexCoders,
I have a datagrid, where one of the columns is defined as follows:
mx:DataGridColumn width=150
mx:headerRenderer
mx:Component
mx:VBox horizontalScrollPolicy=off verticalScrollPolicy=off
verticalGap=2
mx:Box horizontalAlign=center width=100%
mx:Label text=Age /
/mx:Box
mx:HBox horizontalAlign=center width=100%
mx:Label text=Year horizontalCenter=true width=50 /
mx:Spacer width=10/
mx:Label text=Month horizontalCenter=true width=50 /
/mx:HBox
/mx:VBox
/mx:Component
/mx:headerRenderer
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign=center width=100%
horizontalScrollPolicy=off verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear minimum=0 maximum=200
stepSize=1 width=50 textAlign=center/
mx:Spacer width=5/
mx:NumericStepper id=nsOutwardAgeMonths minimum=0
maximum=200 stepSize=1 width=50 textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
Now, how would I be able to bind in both components my array
collection? In the other columns, I can easily bind the datagridcolumn
with a single item inside the arrayCollection object by
mx:DataGridColumn headerText=Test dataField=myTestItem
width=20/
I want to bind two items inside my array collection into the
numericStepper which I placed side by side in the datagrid.
Like for example if my arraycollection has the following data
var _arrTest:ArrayCollection = new ArrayCollection([{Age:5,
Months:10}, {Age:18, Months:3}, (Age:1, Months:2)]);
the Age and Months items should be bound to nsOutwardAgeYear and
nsOutwardAgeMonths respectively.
Thanks and regards,
Angelo
[flexcoders] Re: Binding two elements in a single datagrid column
Yes, createChildren will only execute once; while set data will execute
many times. Perhaps it's not a problem if the same child gets added to
the display list everytime that the data is set. But usually, you only
need to add them once.
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote:
I use addChild in the set data function only because I always have.
I have built hundreds of renderers this way and none of them have
given me a problem. If there's a good reason why I shouldn't do it this
way, I'm all ears.
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
I'm with you Steve; about using AS for an itemRenderer. I do wonder
why
you would use addChild in the set data function though; rather than
in
createChildren . For mxml, this should work Angelo:
mx:itemRenderer
mx:Component
mx:HBox horizontalGap=5 horizontalAlign=center
width=100% horizontalScrollPolicy=off
verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear value={ data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepper id=nsOutwardAgeMonths value={
data.Months } minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a spacer
as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote:
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript...
main.mxml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{Age:5, Months:10}, {Age:18, Months:3},
{Age:1, Months:2}]);
]]
/mx:Script
mx:DataGrid dataProvider={_arrTest}
mx:columns
mx:DataGridColumn headerText=Age width=120
itemRenderer=NumericStepperRenderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRenderer.as:
package
{
import mx.containers.HBox;
import mx.controls.NumericStepper;
public class NumericStepperRenderer extends HBox
{
private var nsOutwardAgeYear:NumericStepper = new
NumericStepper();
private var nsOutwardAgeMonths:NumericStepper = new
NumericStepper();
public function NumericStepperRenderer()
{
super();
nsOutwardAgeYear.minimum = 0;
nsOutwardAgeMonths.minimum = 0;
nsOutwardAgeYear.maximum = 200;
nsOutwardAgeMonths.maximum = 200;
nsOutwardAgeYear.stepSize = 1;
nsOutwardAgeMonths.stepSize = 1;
nsOutwardAgeYear.width = 50;
nsOutwardAgeMonths.width = 50;
nsOutwardAgeYear.setStyle(textAlign, center);
nsOutwardAgeMonths.setStyle(textAlign, center);
}
override public function set data(value:Object):void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear.value = value.Age;
nsOutwardAgeMonths.value = value.Months;
addChild(nsOutwardAgeMonths);
addChild(nsOutwardAgeYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event
listener for the change event.
HTH
Steve
--- In flexcoders@yahoogroups.com, Angelo Anolin angelo_anolin@
wrote:
Hi FlexCoders,
I have a datagrid, where one of the columns is defined as
follows:
mx:DataGridColumn width=150
mx:headerRenderer
mx:Component
mx:VBox horizontalScrollPolicy=off verticalScrollPolicy=off
verticalGap=2
mx:Box horizontalAlign=center width=100%
mx:Label text=Age /
/mx:Box
mx:HBox horizontalAlign=center width=100%
mx:Label text=Year horizontalCenter=true width=50 /
mx:Spacer width=10/
mx:Label text=Month horizontalCenter=true width=50 /
/mx:HBox
/mx:VBox
/mx:Component
/mx:headerRenderer
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign=center width=100%
horizontalScrollPolicy=off verticalScrollPolicy=off
mx:NumericStepper id=nsOutwardAgeYear minimum=0
maximum=200
stepSize=1 width=50 textAlign=center/
mx:Spacer width=5/
mx:NumericStepper id=nsOutwardAgeMonths minimum=0
maximum=200 stepSize=1 width=50 textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
Now, how would I be able to bind in both components my array
collection? In the other columns, I can easily bind the
datagridcolumn
with a single item inside the arrayCollection object by
mx:DataGridColumn headerText=Test dataField=myTestItem
width=20/
I want to bind two items inside my array collection into the
numericStepper which I placed side by side in the datagrid.
Like for example if my arraycollection has the following data
var _arrTest:ArrayCollection = new ArrayCollection([{Age:5,
Months:10}, {Age:18, Months:3}, (Age:1,
Re: [flexcoders] Re: Binding two elements in a single datagrid column
Hi Steve,
Thanks for this code snippet. I now feel that I need to jump over learning a
lot more AS since its becoming clear to me that you would be able to accomplish
a lot more difficult tasks through it.
Thanks and regards.
Angelo
From: valdhor valdhorli...@embarqmail.com
To: flexcoders@yahoogroups.com
Sent: Tuesday, 16 June, 2009 21:26:27
Subject: [flexcoders] Re: Binding two elements in a single datagrid column
This is probably possible in MXML but I prefer to write my item renderers in
ActionScript. ..
main.mxml:
?xml version=1.0 encoding=utf- 8?
mx:Application xmlns:mx=http: //www.adobe. com/2006/ mxml layout=absolute
mx:Script
![CDATA[
import mx.collections. ArrayCollection;
[Bindable] private var _arrTest:ArrayColle ction = new
ArrayCollection( [{Age:5, Months:10} , {Age:18, Months:3}, {Age:1,
Months:2}] );
]]
/mx:Script
mx:DataGrid dataProvider= {_arrTest}
mx:columns
mx:DataGridColumn headerText= Age width=120 itemRenderer=
NumericStepperR enderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRende rer.as:
package
{
import mx.containers. HBox;
import mx.controls. NumericStepper;
public class NumericStepperRende rer extends HBox
{
private var nsOutwardAgeYear: NumericStepper = new NumericStepper( );
private var nsOutwardAgeMonths: NumericStepper = new NumericStepper( );
public function NumericStepperRende rer()
{
super();
nsOutwardAgeYear. minimum = 0;
nsOutwardAgeMonths. minimum = 0;
nsOutwardAgeYear. maximum = 200;
nsOutwardAgeMonths. maximum = 200;
nsOutwardAgeYear. stepSize = 1;
nsOutwardAgeMonths. stepSize = 1;
nsOutwardAgeYear. width = 50;
nsOutwardAgeMonths. width = 50;
nsOutwardAgeYear. setStyle( textAlign , center);
nsOutwardAgeMonths. setStyle( textAlign , center);
}
override public function set data(value:Object) :void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear. value = value.Age;
nsOutwardAgeMonths. value = value.Months;
addChild(nsOutwardA geMonths) ;
addChild(nsOutwardA geYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event listener for
the change event.
HTH
Steve
--- In flexcod...@yahoogro ups.com, Angelo Anolin angelo_anolin@ ... wrote:
Hi FlexCoders,
I have a datagrid, where one of the columns is defined as follows:
mx:DataGridColumn width=150
mx:headerRenderer
mx:Component
mx:VBox horizontalScrollPol icy=off verticalScrollPolic y=off
verticalGap= 2
mx:Box horizontalAlign= center width=100%
mx:Label text=Age /
/mx:Box
mx:HBox horizontalAlign= center width=100%
mx:Label text=Year horizontalCenter= true width=50 /
mx:Spacer width=10/
mx:Label text=Month horizontalCenter= true width=50 /
/mx:HBox
/mx:VBox
/mx:Component
/mx:headerRenderer
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign= center width=100% horizontalScrollPol
icy=off verticalScrollPolic y=off
mx:NumericStepper id=nsOutwardAgeYea r minimum=0 maximum=200
stepSize=1 width=50 textAlign=center /
mx:Spacer width=5/
mx:NumericStepper id=nsOutwardAgeMon ths minimum=0 maximum=200
stepSize=1 width=50 textAlign=center /
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
Now, how would I be able to bind in both components my array collection? In
the other columns, I can easily bind the datagridcolumn with a single item
inside the arrayCollection object by
mx:DataGridColumn headerText= Test dataField=myTestIt em width=20/
I want to bind two items inside my array collection into the numericStepper
which I placed side by side in the datagrid.
Like for example if my arraycollection has the following data
var _arrTest:ArrayColle ction = new ArrayCollection( [{Age:5, Months:10}
, {Age:18, Months:3}, (Age:1, Months:2)] );
the Age and Months items should be bound to nsOutwardAgeYear and
nsOutwardAgeMonths respectively.
Thanks and regards,
Angelo
Re: [flexcoders] Re: Binding two elements in a single datagrid column
Hi Tim,
This helped a bit, although I am wondering why the underlying data provider
does not get updated when I changed the value of the NumericStepper control. I
am probably missing something.
Also, thanks for the little tip on the HorizontalGap. Have been using a lot of
spacers in between controls. :)
Regards,
Angelo
From: Tim Hoff timh...@aol.com
To: flexcoders@yahoogroups.com
Sent: Tuesday, 16 June, 2009 23:18:09
Subject: [flexcoders] Re: Binding two elements in a single datagrid column
I'm with you Steve; about using AS for an itemRenderer. I do wonder why you
would use addChild in the set data function though; rather than in
createChildren . For mxml, this should work Angelo:mx:itemRenderer
mx:Component
mx:HBoxhorizontalGap= 5 horizontalAlign= center width=100%
horizontalScrollPol icy=off verticalScrollPolic y=off
mx:NumericStepperid=nsOutwardAgeYear value={data.Age }
minimum=0 maximum=200 stepSize=1 width=50 textAlign=center/
mx:NumericStepperid=nsOutwardAgeMonths value={data.Months }
minimum=0 maximum=200 stepSize=1 width=50 textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a spacer as well.
Just cleans it up a bit.
Cheers,
-TH
--- In flexcod...@yahoogro ups.com, valdhor valdhorlists@ ... wrote:
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript. ..
main.mxml:
?xml version=1.0 encoding=utf- 8?
mx:Application xmlns:mx=http: //www.adobe. com/2006/ mxml
layout=absolute
mx:Script
![CDATA[
import mx.collections. ArrayCollection;
[Bindable] private var _arrTest:ArrayColle ction = new
ArrayCollection( [{Age:5, Months:10} , {Age:18, Months:3},
{Age:1, Months:2}] );
]]
/mx:Script
mx:DataGrid dataProvider= {_arrTest}
mx:columns
mx:DataGridColumn headerText= Age width=120
itemRenderer= NumericStepperR enderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRende rer.as:
package
{
import mx.containers. HBox;
import mx.controls. NumericStepper;
public class NumericStepperRende rer extends HBox
{
private var nsOutwardAgeYear: NumericStepper = new
NumericStepper( );
private var nsOutwardAgeMonths: NumericStepper = new
NumericStepper( );
public function NumericStepperRende rer()
{
super();
nsOutwardAgeYear. minimum = 0;
nsOutwardAgeMonths. minimum = 0;
nsOutwardAgeYear. maximum = 200;
nsOutwardAgeMonths. maximum = 200;
nsOutwardAgeYear. stepSize = 1;
nsOutwardAgeMonths. stepSize = 1;
nsOutwardAgeYear. width = 50;
nsOutwardAgeMonths. width = 50;
nsOutwardAgeYear. setStyle( textAlign , center);
nsOutwardAgeMonths. setStyle( textAlign , center);
}
override public function set data(value:Object) :void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear. value = value.Age;
nsOutwardAgeMonths. value = value.Months;
addChild(nsOutwardA geMonths) ;
addChild(nsOutwardA geYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event
listener for the change event.
HTH
Steve
--- In flexcod...@yahoogro ups.com, Angelo Anolin angelo_anolin@
wrote:
Hi FlexCoders,
I have a datagrid, where one of the columns is defined as follows:
mx:DataGridColumn width=150
mx:headerRenderer
mx:Component
mx:VBox horizontalScrollPol icy=off verticalScrollPolic y=off
verticalGap= 2
mx:Box horizontalAlign= center width=100%
mx:Label text=Age /
/mx:Box
mx:HBox horizontalAlign= center width=100%
mx:Label text=Year horizontalCenter= true width=50 /
mx:Spacer width=10/
mx:Label text=Month horizontalCenter= true width=50 /
/mx:HBox
/mx:VBox
/mx:Component
/mx:headerRenderer
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign= center width=100%
horizontalScrollPol icy=off verticalScrollPolic y=off
mx:NumericStepper id=nsOutwardAgeYea r minimum=0 maximum=200
stepSize=1 width=50 textAlign=center /
mx:Spacer width=5/
mx:NumericStepper id=nsOutwardAgeMon ths minimum=0
maximum=200 stepSize=1 width=50 textAlign=center /
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
Now, how would I be able to bind in both components my array
collection? In the other columns, I can easily bind the datagridcolumn
with a single item inside the arrayCollection object by
mx:DataGridColumn headerText= Test dataField=myTestIt em
width=20/
I want to bind two items inside my array collection into the
numericStepper which I placed side by side in the datagrid.
Like for example if my arraycollection has the following data
var _arrTest:ArrayColle ction = new ArrayCollection( [{Age:5,
Months:10} , {Age:18, Months:3}, (Age:1, Months:2)] );
the Age and Months items should be bound to nsOutwardAgeYear and
nsOutwardAgeMonths respectively.
Thanks and regards,
Angelo
[flexcoders] Re: Binding two elements in a single datagrid column
Hey Angelo,
So, up to now we've been talking about an itemRenderer; better if it's
custom rather than in-line. The next step is an itemEditor. Read up on
the docs and let us know if you have any further questions.
-TH
--- In flexcoders@yahoogroups.com, Angelo Anolin angelo_ano...@...
wrote:
Hi Tim,
This helped a bit, although I am wondering why the underlying data
provider does not get updated when I changed the value of the
NumericStepper control. I am probably missing something.
Also, thanks for the little tip on the HorizontalGap. Have been using
a lot of spacers in between controls. :)
Regards,
Angelo
From: Tim Hoff timh...@...
To: flexcoders@yahoogroups.com
Sent: Tuesday, 16 June, 2009 23:18:09
Subject: [flexcoders] Re: Binding two elements in a single datagrid
column
I'm with you Steve; about using AS for an itemRenderer. I do wonder
why you would use addChild in the set data function though; rather than
in createChildren . For mxml, this should work Angelo:mx:itemRenderer
mx:Component
mx:HBoxhorizontalGap= 5 horizontalAlign= center
width=100% horizontalScrollPol icy=off verticalScrollPolic y=off
mx:NumericStepperid=nsOutwardAgeYear value={data.Age
} minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
mx:NumericStepperid=nsOutwardAgeMonths
value={data.Months } minimum=0 maximum=200 stepSize=1 width=50
textAlign=center/
/mx:HBox
/mx:Component
/mx:itemRenderer
For the HBox, notice the use of horizontalGap, instead of a spacer as
well. Just cleans it up a bit.
Cheers,
-TH
--- In flexcod...@yahoogro ups.com, valdhor valdhorlists@ ...
wrote:
This is probably possible in MXML but I prefer to write my item
renderers in ActionScript. ..
main.mxml:
?xml version=1.0 encoding=utf- 8?
mx:Application xmlns:mx=http: //www.adobe. com/2006/ mxml
layout=absolute
mx:Script
![CDATA[
import mx.collections. ArrayCollection;
[Bindable] private var _arrTest:ArrayColle ction = new
ArrayCollection( [{Age:5, Months:10} , {Age:18, Months:3},
{Age:1, Months:2}] );
]]
/mx:Script
mx:DataGrid dataProvider= {_arrTest}
mx:columns
mx:DataGridColumn headerText= Age width=120
itemRenderer= NumericStepperR enderer/
/mx:columns
/mx:DataGrid
/mx:Application
NumericStepperRende rer.as:
package
{
import mx.containers. HBox;
import mx.controls. NumericStepper;
public class NumericStepperRende rer extends HBox
{
private var nsOutwardAgeYear: NumericStepper = new
NumericStepper( );
private var nsOutwardAgeMonths: NumericStepper = new
NumericStepper( );
public function NumericStepperRende rer()
{
super();
nsOutwardAgeYear. minimum = 0;
nsOutwardAgeMonths. minimum = 0;
nsOutwardAgeYear. maximum = 200;
nsOutwardAgeMonths. maximum = 200;
nsOutwardAgeYear. stepSize = 1;
nsOutwardAgeMonths. stepSize = 1;
nsOutwardAgeYear. width = 50;
nsOutwardAgeMonths. width = 50;
nsOutwardAgeYear. setStyle( textAlign , center);
nsOutwardAgeMonths. setStyle( textAlign , center);
}
override public function set data(value:Object) :void
{
super.data = value;
if(value != null)
{
nsOutwardAgeYear. value = value.Age;
nsOutwardAgeMonths. value = value.Months;
addChild(nsOutwardA geMonths) ;
addChild(nsOutwardA geYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event
listener for the change event.
HTH
Steve
--- In flexcod...@yahoogro ups.com, Angelo Anolin angelo_anolin@
wrote:
Hi FlexCoders,
I have a datagrid, where one of the columns is defined as follows:
mx:DataGridColumn width=150
mx:headerRenderer
mx:Component
mx:VBox horizontalScrollPol icy=off verticalScrollPolic y=off
verticalGap= 2
mx:Box horizontalAlign= center width=100%
mx:Label text=Age /
/mx:Box
mx:HBox horizontalAlign= center width=100%
mx:Label text=Year horizontalCenter= true width=50 /
mx:Spacer width=10/
mx:Label text=Month horizontalCenter= true width=50 /
/mx:HBox
/mx:VBox
/mx:Component
/mx:headerRenderer
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign= center width=100%
horizontalScrollPol icy=off verticalScrollPolic y=off
mx:NumericStepper id=nsOutwardAgeYea r minimum=0
maximum=200
stepSize=1 width=50 textAlign=center /
mx:Spacer width=5/
mx:NumericStepper id=nsOutwardAgeMon ths minimum=0
maximum=200 stepSize=1 width=50 textAlign=center /
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
Now, how would I be able to bind in both components my array
collection? In the other columns, I can easily bind the
datagridcolumn
with a single item inside the arrayCollection object by
mx:DataGridColumn headerText= Test dataField=myTestIt em
width=20/
I want to bind two items inside my array collection into the
numericStepper which I placed side by side
