[flexcoders] Re: Tabbing children from custom item renderer inside List
The problem here is that the default behaviour sends the focus outside
the list in the document that contains the list... ie the
txtAdaugaItem textfield in the code below... I managed before to switch
the tab between the 2 steppers catching the focusOut event of the first
stepper (stepperOne), but I had the same problem when the focus leaves
the second stepper (stepperTwo). It goes outside the list. If I prevent
default I don't know how to send the focus to the second renderer on the
first stepper (stepperOne). I can get it's index, but that is as far as
I got ...
Another strange thing is that I traced getNextFocusManagerComponent() on
the focusOut event of the stepperTwo and it displays the button
(btnAdaugaItem) which is after the textfield that is actually focused
(see bold id's below).
Sorry for being such a apin in the a** but this is getting a little
frustrating and I am under pressure here te meet a deadline.
Thanks,
Claudiu
?xml version=1.0 encoding=utf-8?
mx:Application
xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
initialize=appInitializeHandler(event)
mx:Script
![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var listDataProvider : ArrayCollection;
/** EVENT HANDLERS **/
private function appInitializeHandler(event:FlexEvent) :
void {
listDataProvider = new
ArrayCollection([unu,doi,trei]);
}
private function btnAdaugaItemHandler(event:MouseEvent) :
void {
(txtAdaugaItem.text.length 1) ?
listDataProvider.addItem(txtAdaugaItem.text) : txtAdaugaItem.text = ;
txtAdaugaItem.text = ;
}
]]
/mx:Script
mx:VBox
width=100%
height=100%
verticalGap=0
mx:Canvas
id=listHolder
width=100%
height=100%
mx:List
selectable=false
id=fxList
width=100%
height=100%
dataProvider={listDataProvider}
itemRenderer=ro.fxcodex.itemRenderers.fxListItemRenderer
/
/mx:Canvas
mx:Canvas
id=toolsHolder
width=100%
height=70
mx:TextInput
id=txtAdaugaItem - this gets highlightet as having
the focus
x=40
y=24
/
mx:Button
id=btnAdaugaItem - this is displayed as being the next
focusable
x=208
y=24
label=Adauga item
click=btnAdaugaItemHandler(event)/
/mx:Canvas
/mx:VBox
/mx:Application
--- In flexcoders@yahoogroups.com, Alex Harui [EMAIL PROTECTED] wrote:
You'll need more code in keyFocusChangeHandler. It has to not call
preventDefault when it is time to transfer the tab to the next
renderer.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED]
On
Behalf Of Claudiu Ursica
Sent: Sunday, August 03, 2008 5:52 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Tabbing children from custom item renderer
inside List
Ok, I managed to send the focus to the second numeric stepper, but
when
I hit tab again I loose the tab and cannot sent the focus to the
second
item in the list on the first numeric stepper.
Now my code looks something like this:
mx:HBox
xmlns:mx=http://www.adobe.com/2006/mxml;
implements=mx.managers.IFocusManagerComponent
width=100%
height=100%
verticalAlign=middle
.. skins and other stuff ..
mx:Script
![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.collections.ArrayCollection;
import mx.controls.List;
nb! sp;
/** EVENT HANDLERS **/
private function itemRendererDeleteButtonHandler(event:MouseEvent) :
void {
// lista va fi tot timpul si in toate situatiile
itemRenderer.parent.parent
var parentList : List = this.parent.parent as List;
var parentListDataProvider:ArrayCollection = parentList.dataProvider
as
ArrayCollection;
var itemIndex:int = parentList.itemRendererToIndex(this);
parentListDataProvider.removeItemAt(itemIndex);
}
public override function set data (val : Object) : void
{
super.data = val;
}
override protected function focusInHandler(even! t:FocusEvent):void
{
trace(Focu! sHandler );
addEventListener(keyFocusChange, keyFocusChangeHandler);
}
protected function keyFocusChangeHandler(event:FocusEvent):void
{
event.preventDefault();
trace(event.target);
stepperTwo.setFocus();
}
]]
/mx:Script
mx:Spacer width=10 /
mx:NumericStepper id=stepperOne
minimum=2
maximum=100
width=46
height=20
cornerRadius=3
nbs
RE: [flexcoders] Re: Tabbing children from custom item renderer inside List
tabbing in a DG is not handled by the FocusManager. If the FocusManager
gets involved then something else is wrong. The DG has its own
keyFocusChangeHandler that should be picking up the event when you don't
call preventDefault when you get keyFocusChange. The DG will take care
of switching focus to the next editable renderer.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Claudiu Ursica
Sent: Monday, August 04, 2008 12:13 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Tabbing children from custom item renderer
inside List
The problem here is that the default behaviour sends the focus outside
the list in the document that contains the list... ie the
txtAdaugaItem textfield in the code below... I managed before to switch
the tab between the 2 steppers catching the focusOut event of the first
stepper (stepperOne), but I had the same problem when the focus leaves
the second stepper (stepperTwo). It goes outside the list. If I prevent
default I don't know how to send the focus to the second renderer on the
first stepper (stepperOne). I can get it's index, but that is as far as
I got ...
Another strange thing is that I traced getNextFocusManagerComponent() on
the focusOut event of the stepperTwo and it displays the button
(btnAdaugaItem) which is after the textfield that is actually focused
(see bold id's below).
Sorry for being such a apin in the a** but this is getting a little
frustrating and I am unde! r pressure here te meet a deadline.
Thanks,
Claudiu
?xml version=1.0 encoding=utf-8?
mx:Application
xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
initialize=appInitializeHandler(event)
mx:Script
![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var listDataProvider : ArrayCollection;
! /** EVENT HANDLERS **/ ;
private function appInitializeHandler(event:FlexEvent) :
void {
listDataProvider = new
ArrayCollection([unu,doi,trei]);
}
private function btnAdaugaItemHandler(event:MouseEvent) :
void {
(txtAdaugaItem.text.length 1) ?
listDataProvider.addItem(txtAdaugaItem.text) : txtAdaugaItem.text = ;
txtAdaugaItem.text = ;
}
!
]]
/mx:Script
mx:VBox
width=100%
height=100%
verticalGap=0
mx:Canvas
id=listHolder
width=100%
height=100%
mx:List
selectable=false
nbs! p; id=fxList
! nbsp; n bsp; width=100%
height=100%
dataProvider={listDataProvider}
itemRenderer=ro.fxcodex.itemRenderers.fxListItemRenderer
/
/mx:Canvas
mx:Canvas
id=toolsHolder
width=100%
height=70
mx:TextInp! ut
id=txtAdaugaItem - this gets highlightet as having
the focus
x=40
y=24
/
mx:Button
id=btnAdaugaItem - this is displayed as being the next
focusable
x=208
y=24
label=Adau! ga item
!nbsp; click=btnAdaugaItemHandler(event)/
/mx:Canvas
/mx:VBox
/mx:Application
--- In flexcoders@yahoogroups.com, Alex Harui [EMAIL PROTECTED] wrote:
You'll need more code in keyFocusChangeHandler. It has to not call
preventDefault when it is time to transfer the tab to the next
renderer.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED]
On
Behalf Of Claudiu Ursica
Sent: Sunday, August 03, 2008 5:52 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Tabbing children from custom item renderer
inside List
Ok, I managed to send the focus to the second numeric stepper, but
when
I hit tab again I loose the tab and cannot sent the focus to the
second
item in the list on the first numeric stepper.
Now my code looks something like this:
mx:HBox
xmlns:mx=http://www.adobe.com/2006/mxml;
implements=mx.managers.IFocusManagerComponent
width=100%
height=100%
verticalAlign=middle
.. skins and other stuff ..
mx:Script
![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.collections.ArrayCollection;
import mx.controls.List;
nb! sp;
/** EVENT HANDLERS **/
private function it! emRendererDeleteButtonHandler(event:MouseEvent)!
:
g t; void {
// lista va fi tot timpul si in toate situatiile
itemRenderer.parent.parent
var parentList : List = this.parent.parent as List;
var parentListDataProvider:ArrayCollection = parentList.dataProvider
as
ArrayCollection;
var itemIndex:int
RE: [flexcoders] Re: Tabbing children from custom item renderer inside List
I posted a quick attempt to get something like this working. It uses
DataGrid though.
http://blogs.adobe.com/aharui/2008/08/datagrid_itemeditor_with_two_i.htm
l
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Claudiu Ursica
Sent: Monday, August 04, 2008 12:13 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Tabbing children from custom item renderer
inside List
The problem here is that the default behaviour sends the focus outside
the list in the document that contains the list... ie the
txtAdaugaItem textfield in the code below... I managed before to switch
the tab between the 2 steppers catching the focusOut event of the first
stepper (stepperOne), but I had the same problem when the focus leaves
the second stepper (stepperTwo). It goes outside the list. If I prevent
default I don't know how to send the focus to the second renderer on the
first stepper (stepperOne). I can get it's index, but that is as far as
I got ...
Another strange thing is that I traced getNextFocusManagerComponent() on
the focusOut event of the stepperTwo and it displays the button
(btnAdaugaItem) which is after the textfield that is actually focused
(see bold id's below).
Sorry for being such a apin in the a** but this is getting a little
frustrating and I am unde! r pressure here te meet a deadline.
Thanks,
Claudiu
?xml version=1.0 encoding=utf-8?
mx:Application
xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
initialize=appInitializeHandler(event)
mx:Script
![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var listDataProvider : ArrayCollection;
! /** EVENT HANDLERS **/ ;
private function appInitializeHandler(event:FlexEvent) :
void {
listDataProvider = new
ArrayCollection([unu,doi,trei]);
}
private function btnAdaugaItemHandler(event:MouseEvent) :
void {
(txtAdaugaItem.text.length 1) ?
listDataProvider.addItem(txtAdaugaItem.text) : txtAdaugaItem.text = ;
txtAdaugaItem.text = ;
}
!
]]
/mx:Script
mx:VBox
width=100%
height=100%
verticalGap=0
mx:Canvas
id=listHolder
width=100%
height=100%
mx:List
selectable=false
nbs! p; id=fxList
! nbsp; n bsp; width=100%
height=100%
dataProvider={listDataProvider}
itemRenderer=ro.fxcodex.itemRenderers.fxListItemRenderer
/
/mx:Canvas
mx:Canvas
id=toolsHolder
width=100%
height=70
mx:TextInp! ut
id=txtAdaugaItem - this gets highlightet as having
the focus
x=40
y=24
/
mx:Button
id=btnAdaugaItem - this is displayed as being the next
focusable
x=208
y=24
label=Adau! ga item
!nbsp; click=btnAdaugaItemHandler(event)/
/mx:Canvas
/mx:VBox
/mx:Application
--- In flexcoders@yahoogroups.com, Alex Harui [EMAIL PROTECTED] wrote:
You'll need more code in keyFocusChangeHandler. It has to not call
preventDefault when it is time to transfer the tab to the next
renderer.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED]
On
Behalf Of Claudiu Ursica
Sent: Sunday, August 03, 2008 5:52 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Tabbing children from custom item renderer
inside List
Ok, I managed to send the focus to the second numeric stepper, but
when
I hit tab again I loose the tab and cannot sent the focus to the
second
item in the list on the first numeric stepper.
Now my code looks something like this:
mx:HBox
xmlns:mx=http://www.adobe.com/2006/mxml;
implements=mx.managers.IFocusManagerComponent
width=100%
height=100%
verticalAlign=middle
.. skins and other stuff ..
mx:Script
![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.collections.ArrayCollection;
import mx.controls.List;
nb! sp;
/** EVENT HANDLERS **/
private function it! emRendererDeleteButtonHandler(event:MouseEvent)!
:
g t; void {
// lista va fi tot timpul si in toate situatiile
itemRenderer.parent.parent
var parentList : List = this.parent.parent as List;
var parentListDataProvider:ArrayCollection = parentList.dataProvider
as
ArrayCollection;
var itemIndex:int = parentList.itemRendererToIndex(this);
parentListDataProvider.removeItemAt(itemIndex);
}
public override function set data (val : Object) : void
{
super.data = val
[flexcoders] Re: Tabbing children from custom item renderer inside List
Ok, I managed to send the focus to the second numeric stepper, but when
I hit tab again I loose the tab and cannot sent the focus to the second
item in the list on the first numeric stepper.
Now my code looks something like this:
mx:HBox
xmlns:mx=http://www.adobe.com/2006/mxml;
implements=mx.managers.IFocusManagerComponent
width=100%
height=100%
verticalAlign=middle
.. skins and other stuff ..
mx:Script
![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.collections.ArrayCollection;
import mx.controls.List;
/** EVENT HANDLERS **/
private function itemRendererDeleteButtonHandler(event:MouseEvent) :
void {
// lista va fi tot timpul si in toate situatiile
itemRenderer.parent.parent
var parentList : List = this.parent.parent as List;
var parentListDataProvider:ArrayCollection = parentList.dataProvider as
ArrayCollection;
var itemIndex:int = parentList.itemRendererToIndex(this);
parentListDataProvider.removeItemAt(itemIndex);
}
public override function set data (val : Object) : void
{
super.data = val;
}
override protected function focusInHandler(event:FocusEvent):void
{
trace(FocusHandler);
addEventListener(keyFocusChange, keyFocusChangeHandler);
}
protected function keyFocusChangeHandler(event:FocusEvent):void
{
event.preventDefault();
trace(event.target);
stepperTwo.setFocus();
}
]]
/mx:Script
mx:Spacer width=10 /
mx:NumericStepper id=stepperOne
minimum=2
maximum=100
width=46
height=20
cornerRadius=3
backgroundColor=white
borderStyle=solid
borderThickness=0
tabEnabled=true
/mx:NumericStepper
mx:Spacer width=10 /
mx:NumericStepper id=stepperTwo
minimum=2
maximum=100
width=46
height=20
cornerRadius=3
backgroundColor=white
borderStyle=solid
borderThickness=0
tabEnabled=true
/mx:NumericStepper
mx:Button
tabEnabled=false
id=buttonRemoveItem
width=15
height=14
styleName=removeItemButtonSkin
click=itemRendererDeleteButtonHandler(event)
buttonMode=true
/
mx:Spacer width=5 /
/mx:HBox
As said before the only components that I am interested in being in the
tabloop are the 2 numeric steppers. Maybe I'm missing something but
when the focus is on the stepperTwo and I hit tab it goes away. I have
no idea how to send the focus on the second item in the list, eg the
first numeric stepper of the second item...
I have tried to do stuff in the focuOut evt handler for the second
numeric stepper but it doesn't seem to work
TIA,
Claudiu
[flexcoders] Re: Tabbing children from custom item renderer inside List
Ok, I managed to send the focus to the second numeric stepper, but when
I hit tab again I loose the tab and cannot sent the focus to the second
item in the list on the first numeric stepper.
Now my code looks something like this:
mx:HBox
xmlns:mx=http://www.adobe.com/2006/mxml;
implements=mx.managers.IFocusManagerComponent
width=100%
height=100%
verticalAlign=middle
.. skins and other stuff ..
mx:Script
![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.collections.ArrayCollection;
import mx.controls.List;
/** EVENT HANDLERS **/
private function itemRendererDeleteButtonHandler(event:MouseEvent) :
void {
// lista va fi tot timpul si in toate situatiile
itemRenderer.parent.parent
var parentList : List = this.parent.parent as List;
var parentListDataProvider:ArrayCollection = parentList.dataProvider as
ArrayCollection;
var itemIndex:int = parentList.itemRendererToIndex(this);
parentListDataProvider.removeItemAt(itemIndex);
}
public override function set data (val : Object) : void
{
super.data = val;
}
override protected function focusInHandler(event:FocusEvent):void
{
trace(FocusHandler);
addEventListener(keyFocusChange, keyFocusChangeHandler);
}
protected function keyFocusChangeHandler(event:FocusEvent):void
{
event.preventDefault();
trace(event.target);
stepperTwo.setFocus();
}
]]
/mx:Script
mx:Spacer width=10 /
mx:NumericStepper id=stepperOne
minimum=2
maximum=100
width=46
height=20
cornerRadius=3
backgroundColor=white
borderStyle=solid
borderThickness=0
tabEnabled=true
/mx:NumericStepper
mx:Spacer width=10 /
mx:NumericStepper id=stepperTwo
minimum=2
maximum=100
width=46
height=20
cornerRadius=3
backgroundColor=white
borderStyle=solid
borderThickness=0
tabEnabled=true
/mx:NumericStepper
mx:Button
tabEnabled=false
id=buttonRemoveItem
width=15
height=14
styleName=removeItemButtonSkin
click=itemRendererDeleteButtonHandler(event)
buttonMode=true
/
mx:Spacer width=5 /
/mx:HBox
As said before the only components that I am interested in being in the
tabloop are the 2 numeric steppers. Maybe I'm missing something but
when the focus is on the stepperTwo and I hit tab it goes away. I have
no idea how to send the focus on the second item in the list, eg the
first numeric stepper of the second item...
I have tried to do stuff in the focuOut evt handler for the second
numeric stepper but it doesn't seem to work
TIA,
Claudiu
RE: [flexcoders] Re: Tabbing children from custom item renderer inside List
You'll need more code in keyFocusChangeHandler. It has to not call
preventDefault when it is time to transfer the tab to the next renderer.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Claudiu Ursica
Sent: Sunday, August 03, 2008 5:52 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Tabbing children from custom item renderer
inside List
Ok, I managed to send the focus to the second numeric stepper, but when
I hit tab again I loose the tab and cannot sent the focus to the second
item in the list on the first numeric stepper.
Now my code looks something like this:
mx:HBox
xmlns:mx=http://www.adobe.com/2006/mxml;
implements=mx.managers.IFocusManagerComponent
width=100%
height=100%
verticalAlign=middle
.. skins and other stuff ..
mx:Script
![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.collections.ArrayCollection;
import mx.controls.List;
nb! sp;
/** EVENT HANDLERS **/
private function itemRendererDeleteButtonHandler(event:MouseEvent) :
void {
// lista va fi tot timpul si in toate situatiile
itemRenderer.parent.parent
var parentList : List = this.parent.parent as List;
var parentListDataProvider:ArrayCollection = parentList.dataProvider as
ArrayCollection;
var itemIndex:int = parentList.itemRendererToIndex(this);
parentListDataProvider.removeItemAt(itemIndex);
}
public override function set data (val : Object) : void
{
super.data = val;
}
override protected function focusInHandler(even! t:FocusEvent):void
{
trace(Focu! sHandler );
addEventListener(keyFocusChange, keyFocusChangeHandler);
}
protected function keyFocusChangeHandler(event:FocusEvent):void
{
event.preventDefault();
trace(event.target);
stepperTwo.setFocus();
}
]]
/mx:Script
mx:Spacer width=10 /
mx:NumericStepper id=stepperOne
minimum=2
maximum=100
width=46
height=20
cornerRadius=3
nbs! p; backgroundColor=white
borderStyle=solid
borderThickness=0
tabEnabled=true
/mx:NumericStepper
mx:Spacer width=10 /
mx:NumericStepper id=stepperTwo
minimum=2
maximum=100
width=46
height=20
cornerRadius=3
backgroundColor=white
borderStyle=solid
borderThickness=0
tabEnabled=true
! /mx:NumericStepper
n! bsp;nbs p; mx:Button
tabEnabled=false
id=buttonRemoveItem
width=15
height=14
styleName=removeItemButtonSkin
click=itemRendererDeleteButtonHandler(event)
buttonMode=true
/
mx:Spacer width=5 /
/mx:HBox
As said before the only components that I am interested in being in the
tabloop are the 2 numeric steppers. Maybe I'm missing something but
when the focus is on the stepperTwo and I hit tab it goes away. I have
no idea how to send the focus on the second item in the list, eg the
first numeric stepper of! the second item...
I have tried to do stuff in the focuOut evt handler for the second
numeric stepper but it doesn't seem to work
TIA,
Claudiu
