Flex ItemRenderer empêche l'utilisation de la tabulation entre les saisies de texte
J'ai un custom ItemRenderer qui affiche 5 saisies de texte dans chacune des 3 panneaux:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
height="300"
width="800"
creationComplete="onCreationComplete()"
>
<!-- code-behind -->
<mx:Script source="ChainListRenderer.mxml.as" />
<mx:Label text="{data.title}" fontSize="25" fontWeight="bold" width="100%" textAlign="center" />
<mx:HBox>
<mx:Panel id="triggerPanel" title="Trigger" width="260">
<mx:VBox id="tpBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:TextInput id="trigger1" width="100%" textAlign="left" tabIndex="0" tabEnabled="true" />
<mx:TextInput id="trigger2" width="100%" textAlign="left" tabIndex="1" tabEnabled="true" />
<mx:TextInput id="trigger3" width="100%" textAlign="left" tabIndex="2" tabEnabled="true" />
<mx:TextInput id="trigger4" width="100%" textAlign="left" tabIndex="3" tabEnabled="true" />
<mx:TextInput id="trigger5" width="100%" textAlign="left" tabIndex="4" tabEnabled="true" />
</mx:VBox>
</mx:Panel>
<mx:Panel id="linkPanel" title="Link" width="260">
<mx:VBox id="lpBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:TextInput id="link1" width="100%" textAlign="left" tabIndex="5" tabEnabled="true" />
<mx:TextInput id="link2" width="100%" textAlign="left" tabIndex="6" tabEnabled="true" />
<mx:TextInput id="link3" width="100%" textAlign="left" tabIndex="7" tabEnabled="true" />
<mx:TextInput id="link4" width="100%" textAlign="left" tabIndex="8" tabEnabled="true" />
<mx:TextInput id="link5" width="100%" textAlign="left" tabIndex="9" tabEnabled="true" />
</mx:VBox>
</mx:Panel>
<mx:Panel id="answerPanel" title="Answer" width="260">
<mx:VBox id="apBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:TextInput id="answer1" width="100%" textAlign="left" tabIndex="10" tabEnabled="true" />
<mx:TextInput id="answer2" width="100%" textAlign="left" tabIndex="11" tabEnabled="true" />
<mx:TextInput id="answer3" width="100%" textAlign="left" tabIndex="12" tabEnabled="true" />
<mx:TextInput id="answer4" width="100%" textAlign="left" tabIndex="13" tabEnabled="true" />
<mx:TextInput id="answer5" width="100%" textAlign="left" tabIndex="14" tabEnabled="true" />
</mx:VBox>
</mx:Panel>
</mx:HBox>
</mx:VBox>
Malheureusement, lorsqu'il est utilisé comme un ItemRenderer, tabulation entre les saisies de texte ne fonctionne pas, même avec le tabIndex valeurs ci-dessus. Si je copie ce code pour une application MXML de sa propre, de tabulation entre les saisies de texte fonctionne comme prévu.
Personne ne sait comment faire pour restaurer la tabulation dans ce scénario? Ce sera une honte si je dois libérer de cette application, sans que cette utilisation simple élément.
Je suppose que je peut-être besoin de mettre en œuvre mx.managers.IFocusManagerComponent
, mais je ne peux pas trouver des exemples sur la façon de le faire, et le FocusManager docs n'aide pas non plus.
J'ai essayé tout à l'heure, il ne semble pas aider.
Quand tu dis "onglet indexation ne fonctionne pas" quel comportement avez-vous observé? Est-il sauter à la commande suivante après votre Liste de composants ou est-il de la tabulation à travers le navigateur chrome?
Le ItemRenderer ci-dessus est utilisé dans un HorizontalList de contrôle. Lorsque l'un des contrôles TextInput ci-dessus a le focus et que je appuyer sur la touche tab, l'accent sauts à l'extérieur de la HorizontalList contrôle et à la commande suivante sur l'application de la Toile. Frapper onglet un peu plus de temps n'cycle via les commandes du navigateur, comme la barre d'adresse.
OriginalL'auteur Adam Tuttle | 2009-05-18
Vous devez vous connecter pour publier un commentaire.
J'ai été en utilisant un mx:VBox comme une coutume itemRenderer avec rendererIsEditor="true" pour mon datagrid, et j'ai été en cours d'exécution dans l'ordre de tabulation question.
Ce que j'ai trouvé est le itemRenderer besoins pour mettre en œuvre IFocusManagerComponent pour que l'application principale de la classe FocusManager() pour être en mesure de tabulation correctement. J'ai essayé la mise en œuvre de cette interface:
...et il s'avère être assez complexe à faire...beaucoup de fonctions de l'interface à mettre en œuvre.
Cependant dans mon cas, j'ai de la chance; je n'avais qu'une TextInput élément dans mon itemRenderer (le reste était tout simplement le code personnalisé, les validateurs & formateurs) donc j'ai converti mon itemRenderer de mx:VBox pour mx:TextInput (qui implémente déjà le IFocusManagerComponent):
Le tour est joué! Mon ordre de tabulation problème a été résolu.
Je suppose que la conclusion pour ceux d'entre vous avec les plus complexes itemRenderers est que vous devez mettre pleinement en œuvre l'interface IFocusManagerComponent dans votre classe...ce qui est probablement bonne, car il semble qu'il serait de dire flex comment personnalisé-onglet par l'intermédiaire de votre itemRenderer champs. Ou peut-être vous pouvez changer votre haut niveau de la balise de quelque chose qui a déjà implémente l'interface, par exemple: pourriez-vous nest le mx:VBox à l'intérieur de quelque chose comme:
...et l'ont peut-être? Quelqu'un avec un code plus complexe que je devrais lui donner un essai et voir ce qui se passe.
Sinc l'URL fournie dans le commentaire précédent est cassé, voici une autre/mise à jour de l'URL: IFocusManagerComponent.
OriginalL'auteur datico
J'ai rencontré le même problème avec un itemRender utilisés dans un "ListBase" dérivée " de la composante.
J'ai trouvé que tous les "ListBase dérivé de" composants de l'emballage de tous les élément rendereres dans un ListBaseContentHolder.
De la ListBase source:
La tabChildren et tabEnabled propriétés de cette classe sont à false par défaut. La seule solution que j'ai pu trouver était de créer un Maliste composant dérivant de la Liste et de redéfinir la méthode createChildren (où le listContent est initialisée) de cette façon:
Puis à l'aide de "<Maliste tabChildren="true"/>" au lieu de "<mx:Liste/>" composant m'a donné la tabulation fonctionnalité dans le ItemRender.
Espérons que cela aide,
OriginalL'auteur
Je pense que je peut être en mouvement dans la bonne direction, mais je ne suis pas entièrement là.
J'ai ma principale de l'application, avec la HorizontalList à l'aide d'un custom ItemRenderer:
J'ai mis à jour l'exemple de code dans la question d'origine pour contenir l'ensemble de la ItemRenderer MXML (parties applicables); et voici le code ActionScript-derrière:
Essentiellement, ce que j'essaie de faire ici est de re-mettre en œuvre la tabulation par la vérification de la touche de TABULATION sur key_down cas de chaque champ de texte, et en les utilisant pour déplacer le focus vers la prochaine TextInput (habillage pour la première TextInput à partir de la dernière). Ce n'est pas l'effet escompté, bien que, et l'accent est mis saute à la prochaine contrôle à l'extérieur de cette HorizontalList.
Des idées où aller à partir d'ici?
OriginalL'auteur Adam Tuttle
Pourquoi faites-vous tabChildren="false"? Vous ne voulez pas d'onglet les enfants de la HorziontalList? depuis le itemRenderer est un enfant de la liste....
OriginalL'auteur Shua
Ce ne semble pas être possible avec la méthode que j'utilisais. Au lieu d'utiliser une liste avec un Rendu d'Élément, je suis passé à un seul point de vue de composant et une autre liste pour afficher un résumé de tous les éléments, et cela m'a permis de régler mon problème.
OriginalL'auteur Adam Tuttle
J'ai eu le même problème, résolu en essayant de reproduire le comportement de la touche tab. La clef de la réussite est tout simplement à l'aide de la
event.preventdefault()
méthode. Le code utilisé est indiqué à l'avance.OriginalL'auteur Julio
C'est la façon dont il est vers le bas avec un ComboBox itemEditor:
http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/
OriginalL'auteur thargenediad
J'ai eu les mêmes problèmes de tabulation à l'un des itemRenderer dans mon AdvancedDataGrid (en passant, je suis à l'aide du kit SDK Flex 3.5), mais ce post a été extrêmement utile dans de me permettre de faire mon onglet conviviale itemRenderer donc, je tiens à apporter une contribution aussi bien 🙂
Pour faire ce travail, vous devez également modifier quelques propriétés sur la grille et gridColumn.
Laisser de la 1ère parler de la grille et gridColumn.
Comme vous le savez, lorsque vous définissez la grille est "modifiable" à la propriété "vrai", vous pourriez onglet par chaque colonne de la cellule (en supposant que vous n'avez pas défini de la colonne "modifiables" à la propriété "false").
Étape #1, faites votre grille est "modifiable" jeux de propriétés à un "vrai"
Étape #2, faire de votre grille de la colonne "modifiable" propriété définit également à "true" et "rendererIsEditor" à "true"
Il est important de définir le champ de données pour un bidon de champ parce que depuis que nous avons mis le moteur de rendu comme éditeur qui signifie que vous mettre à jour dans le itemRenderer sera affecté à la dataField c'est à dire vous définissez le champ de données pour "Foo" qui a un type int et non des objets primitifs remplissage d'une zone de liste déroulante itemRenderer. Lorsque vous effectuez une sélection, cet objet sera attribué à "Foo"
Étape #3, faire de votre grille de la colonne "dataField" propriété définit également à un faux champ.
Maintenant, nous allons faire la chose qui permettent de tabulation pour travailler sur itemRenderer
Je sais que ce n'est pas une version optimisée, mais ce sera pour la 1ère passe.
Exemple sur la façon de l'utiliser sur votre itemRenderer:
Puis juste mis dans le gridColumn et c'est tout.
Profiter.
OriginalL'auteur handitan
Fondamentalement, vous voulez supprimer le comportement par défaut de changement de focus de l'événement. Je pense que vous avez besoin pour ce faire:
OriginalL'auteur Cocu_1012