Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

15jan/0910

Flex Curseur – Afficher le Hand Cursor (main) sur un composant Flex (Image, Label …)

Vous l'avez peut-être remarqué, par défaut, Flex n'affiche pas le Hand Cursor (la main) quand on survole les Button Flex. Il affiche seulement ce curseur main quand on passe sur un LinkButton par exemple. Alors comment faire pour afficher le curseur main au survol d'un bouton (on de n'importe quel autre composant Flex). Sur Sprite, il y a une propriété nommée useHandCursor. En la passant à true, on pourrait se dire qu'on aura l'effet attendu. Et bien non, rien de se produit. Il faut en  fait aussi passer la propriété buttonMode à true.

Si vous expérimentez un peu, vous verrez que cela fonctionne sur la plupart de composants (mx:Image, mx:Button, ...) mais si vous essayez sur Label par exemple vous n'aurez pas de handCursor. Comment se fait-il ? Et bien le composant peut avoir des enfants qui peuvent empêcher le passage de ce curseur. Le champ texte d'un Label par exemple. La solution est de désactiver les évènements souris des enfants afin qu'ils ne se propagent plus. Et pour cela, flash a pensé à tout avec la propriété mouseChildren qu'il faut passer à false.

Voici un exemple Flex avec un composant Image, Button et Label ayant un curseur main affiché:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

	<mx:Image source="@Embed('assets/icone-flex.png')" useHandCursor="true" buttonMode="true"/>
	<mx:Button label="Main au survol" useHandCursor="true" buttonMode="true"/>
	<mx:Label text="Main au survol" useHandCursor="true" buttonMode="true" mouseChildren="false"/>

</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

Articles similaires

Commentaires (10) Trackbacks (0)
  1. Comment faire pour avoir la même chose sur un item d'une List ?
    Merci.

  2. Salut,
    de base, ce sont de simple textes qui sont affichés dans une mx:List. Si tu veux avoir un affichage différent, tu doit utiliser des itemRenderer (j'ai commencé à écrire des articles à ce propos, si tu es curieux).
    Voici un exemple simple pour faire une liste avec une main au rollover sur un item:

    MXML:
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    3.     <mx:List>
    4.         <mx:itemRenderer>
    5.             <mx:Component>
    6.                 <mx:Label text="{data.label}" useHandCursor="true" buttonMode="true" mouseChildren="false"/>
    7.             </mx:Component>
    8.         </mx:itemRenderer>
    9.         <mx:dataProvider>
    10.             <mx:String>ahah</mx:String>
    11.             <mx:String>ihih</mx:String>
    12.             <mx:String>ohoh</mx:String>
    13.         </mx:dataProvider>
    14.     </mx:List>
    15. </mx:Application>

    Fabien

  3. Au temps pour moi, j'ai pas encore le réflexe itemRenderer bien ancré ;)
    Marche nickel ton exemple. Merci bien ...

  4. Bon, j'ai encore une question. Décidément je m'en sors pas avec les itemRenderers.

    En partant du code précédent, j'aimerais que lors d'un clic sur un item, le style de cet item change (couleur de fond de la cellule, poids de la fonte, etc ...). Bien entendu, le style des autres items doit être remis aux valeurs par défaut, sachant que j'ai fixé alternatingItemColors à la List.
    J'ai donc ajouté l'événement itemClick à la List et fait un event.itemRenderer.styleName="highlightItem".
    J'arrive à passer le texte en gras mais pas changer la couleur de fond. Pareil pour la remise par défaut du style des autres items.
    Je précise que les data ne changent pas et que d'autres actions sont lancées sur le clic.

    Merci.

  5. Salut,
    alors le fait que la data ne change pas est assez problematique d'un point de vue archi parce qu'un itemRenderer ne sert qu'à afficher de la data et il réagit suivant cette data (et pas à l'interaction utilisateur. Peut etre tu peux jeter un coup d'oeil la dessus:
    http://www.returnundefined.com/2007/11/cellulardatagrid-for-flex-2
    Mais le plus simple, c'est de modifier la data au moment de ton click et à ce moment là, ton itemRenderer va réagir et peut changer son style, je pense

    fabien

  6. Vla le bazar pour highlighter une cellule !
    T'aurais un piste pour créer l'itemRenderer qui va bien ? inline ou externe, peu importe.
    A la rigueur, je recolle la même data ...

  7. Je vais bientot le traduire mais en attendant, tu peux jeter un oeil à cet article:
    http://www.adobe.com/devnet/flex/articles/itemrenderers_pt4_02.html

  8. Bon, c'est vraiment bidon pour faire un pov' truc.
    Là, je suis l'article, et je tombe sur "Initializer for property 'states' is not allowed here.".
    Pourtant : "Place this just below the root tag.". Ben nan, ça compile pas.

    Va faire 2h que je suis sur cette $£*%µù#, j'en reviens pas que ce soit aussi tordu pour un truc aussi simple !
    Le gars le dit lui-même : "This example is a bit far-fetched in that it is overly complicated to do a simple task, but it shows how to use states.". Sauf qu'en plus, ça marche pas son truc ... Je suis en inline, ça viendrait de là ?

  9. Bon, en jouant tout simplement sur selectionColor de la List, je m'en sort pas trop mal.

  10. Peut-être, si ton itemRenderer devient trop complexe, il est toujours plus simple de l'externaliser. Sinon, tu peux définir quelques styles sur les éléments sélectionnés selon la doc:
    http://livedocs.adobe.com/flex/201/langref/mx/controls/List.html#styleSummary


Leave a comment

(required)

Aucun trackbacks pour l'instant