Flex Spark: Comment ajouter un bouton Annuler sur le bouton TabBar?

J'essaie d'ajouter une icône d'annulation à mes TabBarButtons dans Flex 4.0 (Spark), et je me suis rapproché, mais maintenant je suis coincé sur l'obtention de l'icône "cliquable"Flex Spark: Comment ajouter un bouton Annuler sur le bouton TabBar?

J'ai vu d'autres approches, comme FlexWiz Blog (http://flexwiz.amosl.com/flex/spark-tabs-with-close-button/), mais espérait trouver quelque chose de plus propre.

En utilisant l'approche similaire trouvée dans le Tour de Flex sample on Tabbed Navigation, voici ce que j'ai dans ma peau jusqu'à présent:

<s:HGroup top="5" right="5" left="5" verticalAlign="middle">   
     <s:Label id="labelDisplay" 
       textAlign="left" 
       maxDisplayedLines="1" 
       top="10" 
       width="100%"> 
     </s:Label>  

     <s:Graphic x="16" y="16" 
        buttonMode="true" 
        mouseEnabledWhereTransparent="false" 
        useHandCursor="true" 
        click="closeEmployeeButtonClicked()" 
        color="0x00FF00"> 
      <s:BitmapImage source="@Embed('assets/images/icons/close.png')"        
          height="16" width="16" fillMode="scale"/> 
     </s:Graphic> 
</s:HGroup>

L'icône apparaît dans l'onglet, cependant, je ne peux pas cliquer dessus. J'ai aussi essayé un bouton et c'est presque comme si le conteneur du bouton parent ne permettait pas à l'enfant d'être cliquable. J'ai joué avec certaines propriétés parent (comme super.mouseChildren), mais je n'ai pas réussi à le faire fonctionner.

Des pensées!

Cordialement, = Dave

Source

2010-08-19 Dave Meurer

Est-ce que closeEmployeeButtonClicked() jamais appelée? –

Bonne question - Il n'est pas appelé. Lorsque l'utilisateur clique sur l'image, le bouton de l'onglet entier est enfoncé. Donc, c'est presque comme si quelque chose dans les limites du bouton ne pouvait pas être "cliquable". J'ai également essayé d'enlever tout l'ombrage et les bordures dans la peau de bouton, mais n'ai pas réussi à obtenir la zone graphique pour voir le clic. Merci pour l'aide !! –

Au lieu de l'image graphique/bitmap, j'ai également essayé un bouton avec un habillage personnalisé qui affiche une icône: Mais il se comportait de la même façon ... en prenant ces deux boutons de fermeture à l'extérieur du conteneur parent de bouton fonctionne bien –

Il est déjà fait dans la bibliothèque de flexlib. Vous trouverez ici quelques exemples:

http://flexlib.googlecode.com/svn/trunk/examples/SuperTabNavigator_Sample.swf

et voici sa page d'accueil du projet:

http://code.google.com/p/flexlib/

Source

2010-08-19 21:25:54 2DH

Bonne idée, mais le SuperTabNavigator est basé sur mx (Flex 3) composants. La question est spécifique aux composants et aux peaux d'étincelles Flex 4. –

Oh oui, vous avez raison. Désolé. J'utilisais cette lib dans mon projet Flex 3 et j'ai remarqué qu'il y avait aussi la version Flex 4, donc j'ai pensé qu'ils ont tout réécrit pour Flex 4. Oh naïf moi;) Quoi qu'il en soit, Dave peut toujours l'utiliser comme un exemple résoudre certains problèmes qui peuvent survenir. – 2DH

Oui, bonne idée, merci! Je vais voir comment SuperTabNavigator a été construit. J'essaie également de rester à l'écart des composants tiers, pour voir si cela peut être fait en utilisant simplement la peau dans Flex 4. Merci! –

Je vois que le poste est assez vieux, mais je suis sur la même question . Pour que le bouton soit cliquable, vous devez activer mouseChildren sur un TabBarButtonSkin. Vous pouvez le faire comme suit:

override protected function commitProperties():void 
{ 
    super.commitProperties(); 
    hostComponent.mouseChildren = true; 
}

Maintenant votre bouton devrait être cliquable. Au moins, cela a fonctionné pour moi.

Source

2012-07-15 23:49:14

Voici un contrôle onglet base Flex 4 qui semble très bien fait, la source complète inclus:

http://saturnboy.com/2010/08/terrifictabbar-custom-component/

Source

2013-05-02 22:35:49

Flex Spark: Comment ajouter un bouton Annuler sur le bouton TabBar?

Répondre

Questions connexes