Dans la catégorie des Option Bars, on trouve 4 composants Flex: ButtonBar, LinkBar, MenuBar et ToggleButtonBar. Ces types se ressemblent par leur capacité à rassembler des composants par groupe (LinkButton, Button, Menu...). De plus, vous pouvez utiliser ces Option Bars en conjonction avec des ViewStack/TabNavigator.
Voici un exemple montrant ces 4 composants Flex:
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Les
ButtonBar,
LinkBar et
ToggleButtonBar permettent de créer des groupes de boutons de manières horizontale ou verticale. De plus, dans le cas d'un
ToggleButtonBar, vous avez un comportement spécial qui fait que seul un des boutons peut être sélectionné à la fois. Ces 3 composants utilisent des dataProviders.
Les MenuBar quant à elles, permettent de grouper des Menu dans un seul dataProvider.
Voici la source qui à permit de générer l'exemple ci-dessus:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:VBox>
<mx:HBox>
<mx:Label text="ButtonBar" width="150"/>
<mx:ButtonBar>
<mx:dataProvider>
<mx:Array>
<mx:String>A</mx:String>
<mx:String>B</mx:String>
<mx:String>C</mx:String>
<mx:String>D</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ButtonBar>
</mx:HBox>
<mx:HBox>
<mx:Label text="ToggleButtonBar" width="150"/>
<mx:ToggleButtonBar>
<mx:dataProvider>
<mx:Array>
<mx:String>A</mx:String>
<mx:String>B</mx:String>
<mx:String>C</mx:String>
<mx:String>D</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
</mx:HBox>
<mx:HBox>
<mx:Label text="LinkBar" width="150"/>
<mx:LinkBar>
<mx:dataProvider>
<mx:Array>
<mx:String>A</mx:String>
<mx:String>B</mx:String>
<mx:String>C</mx:String>
<mx:String>D</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:LinkBar>
</mx:HBox>
<mx:HBox>
<mx:Label text="MenuBar" width="150"/>
<mx:MenuBar labelField="@label">
<mx:XMLList xmlns="">
<item label="File">
<item label="New"/>
<item label="Open"/>
<item label="Close"/>
</item>
<item label="Edit">
<item label="Select All"/>
<item label="Copy"/>
<item label="Paste"/>
</item>
<item label="Help">
<item label="About"/>
<item label="?"/>
</item>
</mx:XMLList>
</mx:MenuBar>
</mx:HBox>
</mx:VBox>
</mx:Application>
28 novembre 2008
Bonjour,
Je te remercie bcp,vraiment ce tutoriel m'a aidé à bien commencer flex.
Merci encore,et on attend toujours vos tutoriels
16 décembre 2008
Salut,
merci pour ce site super bien documenté, c'est un peu grâce a vous que je me suis décidé à passer à flex ( il y a en fait un tout petit pas quand on vient de flash )
J'ai une question qui va sembler un peu bête, mais je débute donc je me lance :
je souhaiterai pouvoir mettre ma XMLList à l'extérieur de mon fichier MXML afin de séparer au maximum la mise en page ( et aussi de prévoir la traduction de façon plus simple )
je ne souhaite pas charger le xml en dynamique, mais juste travailler avec un fichier à l'extérieur pour du code plus propre sous eclipse.
Comment faire ?
Merci pour cous conseils.
16 décembre 2008
Salut,
tu peux utiliser la balise <mx:XML> de Flex (directement dans ton nœud mx:Application). Tu peux donner à cette balise un attribut source="nomDeTonFichier.xml" qui pointe vers le fichier XML en question. Ce fichier sera compilé dans ton application (et pas chargé dynamiquement).
Tu auras donc quelque chose comme:
<mx:XML source="fichierSource.xml">
Il y a aussi une balise mx:XMLList, si tu veux utiliser une XMLList
Fabien
17 décembre 2008
Merci beaucoup, je met ça en pratique dès ce matin !
29 avril 2009
Bonjour à tous,
je souhaiterais savoir s'il est possible de lier les libellés de boutons à partir de données contenues dans un fichier XML.
Je souhaiterais en effet faire le procédé utilisé pour les MenuBar mais avec des ButtonBar.
Par exemple, j'ai un fichier xml suivant:
Mais lorsque j'essaye dans mon fichier MXML la commande suivante:
Je n'obtient aucun résultat comme si mon fichier XML n'avait aucune info.
Merci de votre aide
29 avril 2009
Salut,
tout d'abord, la propriété label n'existe par sur ButtonBar. Regarde plutôt du coté de labelField. Sinon, pour le data provider, voici ce que dit la doc:
http://livedocs.adobe.com/flex/3/langref/mx/controls/ButtonBar.html
dataProvider:
Data used to populate the navigator control. The type of data can either be a ViewStack container or an Array.
Donc tu ne peux pas lui passe un XML, il faut que tu t'arranges pour avoir ce qu'il attend
. Je te conseille d'utiliser un Array d'objets pour avoir accès aux iconField entre autres
Fabien
29 avril 2009
Merci Fabien,
je vais utilisé ce que tu proposes.
Merci de ton aide
Stéphane
20 mai 2009
tout d'abord merci pour le tuto c'est vraiment bien fait.
t maintenant:
Est-ce-que je pourrait avoir un element du DATAGRID clickable ? ca veut dire achaque element du datagrid correspond une page html qui sera ouverte par le simple click de ce dernier ?
20 mai 2009
tu peux écouter l'évènement "itemClick" du dataGrid. Cela va envoyer un évènement chaque fois que tu cliques sur une ligne, tu auras un évènement ( tu pourras récupérer la colonne aussi si tu veux). Après, tu peux récupérer à partir de cet évènement, la data qui est dans la ligne que tu as cliqué et faire le traitement que tu souhaites. Donc tu pourras ouvrir une page HTML ou en faire ce que tu veux
Fabien
20 mai 2009
Merci pour ta reponse maisntenant voila ce ke j'ai fai mais ca ne marche toujours pas :
private function onitemClick( event :Event ) : void
{
native.url = "./1.html";
}
puis je l'est appelé dans le datagrid :
y'a il un problem ici ?
merci
20 mai 2009
Euh native.url, connait pas (native ? tu fais une application Air ?). Si tu veux ouvrir une page web dans un navigateur en popup, utilise la méthode globale navigateToUrl(new URLRequest("mon lien.html"));
20 mai 2009
ah mais quand je met cette methode il me di qu'elle n'est aps definie :s
20 mai 2009
Oublies pas import flash.net.navigateToURL; et puis sinon, tu peux voir sur un forum parce que bon, cette discussion dans les commentaires d'un post n'a pas vraiment sa place
Fabien
20 mai 2009
oki ca na pas encor marché mais bOn Je Vous remerci pour votre attention
7 janvier 2010
Salut,
Est-il possible d'enlever les bordures du toggleButtonBar ?
Voici mon code si cela peut éclaircir.
J'aimerais pouvoir enlever les bordures de chaques boutons et lorsque le bouton n'est pas toggle, qu'il garde une couleure unis et pas un léger dégradé.
Merci d'avance
27 février 2010
bonjour,
merci pour ces tutorials sur flex , sont trés outil.
j'ai entrain de former mon projet de fin étude avec l'outil flex , j'ai pas un développeur mais juste débutant .j cherche une fonction de zoom avant, arrière et comment integre le zoom avec l'image (une carte).
28 février 2010
Bonjour,
Pour si vous voulez utiliser des cartes le plus simple est d'utiliser des API existantes telles que celles de Google Maps, Yahoo! Maps ou OpenScales. Pour leur mise en place, il suffit de suivre les tutoriaux disponibles sur les sites respectifs.
Fabien