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

Flex Control Bars – Les Composants ControlBar et ApplicationControlBar

 Les composants de type Control Bar (barre de composants) permettent de grouper des composants pour un Panel ou une TitleWindow. ApplicationControlBar sont similaires aux ControlBar sauf qu'elles portent sur Application. Chacun de ces composants vous permettent de grouper des composants, même s'ils ne sont pas uniformes (tous des boutons, etc.).

Le composant mx:ControlBar

Les ControlBar fonctionnent avec les TitleWindow et les Panel Flex, et vous devez les ajouter en tant que dernier composant par rapport à ces conteneurs. Vous pouvez ensuite placer vos composants à l'intérieur de la ControlBar.
Voici un exemple de code utilisant une ControlBar. Le premier bouton change la taille de la police de manière aléatoire et un ColorPicker permet de choisir la couleur de background du panel:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Panel id="panel" width="300" height="250">
		<mx:TextArea id="textArea" width="80%" height="80%" text="Exemple"/>
		<mx:ControlBar>
			<mx:Button label="Taille Aléatoire" click="textArea.setStyle('fontSize', Math.random() * 20 + 8)"/>
			<mx:ColorPicker id="color" change="panel.setStyle('backgroundColor', color.value)"/>
		</mx:ControlBar>
	</mx:Panel>
</mx:Application>

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

Le composant ApplicationControlBar

Le composant ApplicationControlBar fonctionne de la même manière mais il est appliqué au conteneur application. Par défaut, l'ApplicationControlBar scroll (défile) avec le reste du contenu. Cependant, il est possible de fixer la propriété dock à true pour que l'ApplicationControlBar soit toujours visible.
Voici un exemple d'application de la propriété dock:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Canvas x="0" y="0" width="200" height="2000"/>
	<mx:ApplicationControlBar dock="true">
		<mx:Label text="Changer de Chapitre"/>
		<mx:ComboBox>
			<mx:dataProvider>
				<mx:ArrayCollection>
					<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:ArrayCollection>
			</mx:dataProvider>
		</mx:ComboBox>
		<mx:VRule width="20" height="28"/>
		<mx:TextInput/>
		<mx:Button label="Rechercher"/>
	</mx:ApplicationControlBar>
</mx:Application>

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