Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le conteneur Spark BorderContainer

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 09 février 2011

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Présentation

Pour changer l'apparence visible d'un conteneur SkinnableContainer, vous devez créer une skin personnalisée. Cependant, pour simplement ajouter une bordure ou changer la couleur d'arrière-plan, Flex définit le conteneur Spark BorderContainer comme un classe enfant du conteneur SkinnableContainer. Le conteneur BorderContainer fournit un jeu de styles CSS et des propriétés de classes pour contrôler la bordure et l'arrière-plan du conteneur.

Note: Comme vous utilisez des styles CSS et des propriétés de classes pour contrôler l'apparence du conteneur BorderContainer, vous ne créez généralement pas de skin personnalisée pour cela. Si vous devez créer une skin personnalisée, votre classe de skin doit appliquer tous les styles pour contrôler l'apparence du conteneur.

L'exemple suivant utilise les styles backgroundColor, borderStyle, borderWeight, et cornerRadius du conteneur BorderContainer pour contrôler son apparence.

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:s="library://ns.adobe.com/flex/spark" width="340" height="150"> 
 
	<s:BorderContainer 
		backgroundColor="red" cornerRadius="10"
		borderStyle="inset" borderWeight="4" >
		<s:layout>
			<s:HorizontalLayout 
				paddingLeft="5" paddingRight="5" 
				paddingTop="5" paddingBottom="5"/>
		</s:layout>
		<s:Button label="Button 1"/>
		<s:Button label="Button 2"/>
		<s:Button label="Button 3"/>
		<s:Button label="Button 4"/>
	</s:BorderContainer> 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Utilisez le style backgroundImage pour spécifier une image en tant qu'arrière-plan du conteneur, comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderImage.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:s="library://ns.adobe.com/flex/spark" width="160" height="190"> 
 
	<fx:Script> 
		<![CDATA[
			[Embed(source="/assets/logo.jpg")]
			[Bindable]
			public var imgCls:Class;
		]]>
	</fx:Script> 
 
	<s:BorderContainer 
		backgroundImage="{imgCls}" 
		borderStyle="inset" borderWeight="2" 
		width="150" height="180">
	</s:BorderContainer> 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le conteneur BorderContainer définit 2 propriétés qui vous permettent aussi de contrôler l'apparence du conteneur:

  • La propriété backgroundFill, de type IFill, définit le remplissage du conteneur. Si vous définissez la propriété backgroundFill, alors le conteneur ignore les styles backgroundAlpha, backgroundColor, backgroundImage, and backgroundImageResizeMode.
  • La propriété borderStroke, de type IStroke, définit le contour de la bordure. Si vous définissez la propriété borderStroke, alors le conteneur ignore les styles borderAlpha, borderColor, borderStyle, borderVisible et borderWeight.

L'exemple suivant définit les propriétés backgroundFill et borderStroke.

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderFillStroke.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:s="library://ns.adobe.com/flex/spark">
 
	<s:BorderContainer cornerRadius="10">
		<s:layout>
			<s:HorizontalLayout 
				paddingLeft="5" paddingRight="5" 
				paddingTop="5" paddingBottom="5"/>
		</s:layout>
		<s:backgroundFill>
			<s:SolidColor 
				color="red" 
				alpha="100"/>
		</s:backgroundFill>
		<s:borderStroke>
			<mx:SolidColorStroke 
				color="black" 
				weight="3"/>
		</s:borderStroke>
 
		<s:Button label="Button 1"/>
		<s:Button label="Button 2"/>
		<s:Button label="Button 3"/>
		<s:Button label="Button 4"/>
	</s:BorderContainer> 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Comme le conteneur BorderContainer n'implémente pas l'interface IViewport, il ne supporte pas directement les barres de défilement. Cependant, vous pouvez englober un contrôle Scroller à l'intérieur du conteneur BorderContainer pour ajouter des barres de défilement, comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkScrollBorder.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:s="library://ns.adobe.com/flex/spark" >
 
	<s:BorderContainer width="100" height="100" 
					   borderWeight="3" borderStyle="solid">
		<s:Scroller width="100%" height="100%">
			<s:Group
				horizontalScrollPosition="50" 
				verticalScrollPosition="50"> 
				<mx:Image width="300" height="400" 
						  source="@Embed(source='/assets/logo.jpg')"/> 
			</s:Group>                 
		</s:Scroller>        
	</s:BorderContainer> 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.