Flex - BorderContainer

introduction

La classe BorderContainer définit un ensemble de styles CSS qui contrôlent l'apparence de la bordure et du remplissage d'arrière-plan du conteneur.

Déclaration de classe

Voici la déclaration pour spark.components.BorderContainer classe -

public class BorderContainer 
   extends SkinnableContainer

Propriétés publiques

Sr.Non	Propriété et description
1	backgroundFill : IFill Définit l'arrière-plan du BorderContainer.
2	borderStroke : IStroke Définit le contour du conteneur BorderContainer.

Méthodes publiques

Sr.Non	Méthode et description
1	BorderContainer() Constructeur.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

spark.components.SkinnableContainer
spark.components.supportClasses.SkinnableContainerBase
spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemple de Flex BorderContainer

Suivons les étapes suivantes pour vérifier l'utilisation de BorderContainer dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">  
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         private function applyBorderContainerProperties():void {
            borderContainer.setStyle("borderWeight",weightStepper.value);
            borderContainer.setStyle("borderColor",colorPicker.selectedColor);
            borderContainer.setStyle("dropShadowVisible",chkShadow.selected);
         }		
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Layout Panels Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "borderContainerPanel" 
            title = "Using BorderContainer" width = "500" 
            height = "300" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />
            </s:layout>				
               
            <s:HGroup>
               <s:VGroup>
                  <s:HGroup verticalAlign = "middle" >
                     <s:Label text = "Border Weight:" width = "100" />
                     <s:NumericStepper id = "weightStepper" value = "1" />
                  </s:HGroup>
                  
                  <s:HGroup verticalAlign = "middle">
                     <s:Label text = "Border Color:" width = "100" />
                     <mx:ColorPicker id = "colorPicker" color = "0x323232" />
                  </s:HGroup>
                  
                  <s:HGroup verticalAlign = "middle">
                     <s:Label text = "Drop Shadow:" width = "100" />
                     <s:CheckBox id = "chkShadow" selected = "false" />
                  </s:HGroup>    
                  
                  <s:Button label = "Apply Properties" 
                     click = "applyBorderContainerProperties()" />
               </s:VGroup>
               
               <s:BorderContainer id = "borderContainer" width = "200"
                  backgroundColor = "0xff99ff">
               </s:BorderContainer>    
            </s:HGroup>
         </s:Panel>				
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ ]

↰ Previous page