Flex - SkinnableContainer

introduction

La classe SkinnableContainer est la classe de base pour tous les conteneurs habillables qui ont un contenu visuel.

Déclaration de classe

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

public class SkinnableContainer
   extends SkinnableContainerBase
      implements IDeferredContentOwner, IVisualElementContainer

Propriétés publiques

Sr.Non	Propriété et description
1	autoLayout : Boolean Si vrai, la mesure et la mise en page sont effectuées lorsque la position ou la taille d'un enfant est modifiée.
2	creationPolicy : String Politique de création de contenu pour ce composant.
3	deferredContentCreated : Boolean [lecture seule] Contient true si un contenu différé a été créé.
4	layout : LayoutBase L'objet de mise en page de ce conteneur.
5	mxmlContent : Array [écriture seule] Les enfants de contenu visuel pour ce groupe.
6	mxmlContentFactory : IDeferredInstance [écriture seule] Objet de fabrique qui crée la valeur initiale de la propriété de contenu.
sept	numElements : int [lecture seule] Le nombre d'éléments visuels dans ce conteneur.

Méthodes publiques

Sr.Non	Méthode et description
1	SkinnableContainer() Constructeur.
2	addElement(element:IVisualElement):IVisualElement Ajoute un élément visuel à ce conteneur.
3	addElementAt(element:IVisualElement, index:int):IVisualElement Ajoute un élément visuel à ce conteneur.
4	createDeferredContent():void Créez le contenu de ce composant.
5	getElementAt(index:int):IVisualElement Renvoie l'élément visuel à l'index spécifié.
6	getElementIndex(element:IVisualElement):int Renvoie la position d'index d'un élément visuel.
sept	removeAllElements():void Supprime tous les éléments visuels du conteneur.
8	removeElement(element:IVisualElement):IVisualElement Supprime l'élément visuel spécifié de la liste enfant de ce conteneur.
9	removeElementAt(index:int):IVisualElement Supprime un élément visuel de la position d'index spécifiée dans le conteneur.
dix	setElementIndex(element:IVisualElement, index:int):void Modifie la position d'un élément visuel existant dans le conteneur visuel.
11	swapElements(element1:IVisualElement, element2:IVisualElement):void Échange l'index des deux éléments visuels spécifiés.
12	swapElementsAt(index1:int, index2:int):void Échange les éléments visuels aux deux positions d'index spécifiées dans le conteneur.

Méthodes protégées

Sr.Non	Méthode et description
1	createChildren():void [override] Créez des enfants de contenu, si la propriété creationPolicy n'est pas égale à aucun.
2	partAdded(partName:String, instance:Object):void [override] Appelé lorsqu'une partie d'habillage est ajoutée.
3	partRemoved(partName:String, instance:Object):void [override] Appelé lorsqu'une occurrence d'une partie d'habillage est supprimée.

Événements

Sr.Non	Description de l'évenement
1	contentCreationComplete Distribué après la création du contenu de ce composant.
2	elementAdd Distribué lorsqu'un élément visuel est ajouté au conteneur de contenu.
3	elementRemove Distribué lorsqu'un élément visuel est supprimé du conteneur de contenu.

Méthodes héritées

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

spark.components.supportClasses.SkinnableContainerBase
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 SkinnableContainer

Suivons les étapes suivantes pour vérifier l'utilisation de SkinnableContainer 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	Créez un skin SkinnableContainerSkin pour un composant hôte SkinnableContainer sous un package com.tutorialspoint.skin comme expliqué dans Flex - Style avec skinchapter . Gardez le reste des fichiers inchangé.
3	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
4	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/skin/SkinnableContainerSkin.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:fb = "http://ns.adobe.com/flashbuilder/2009" alpha.disabled = "0.5">
   
   <fx:Metadata>  
      <![CDATA[ 
         /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
         [HostComponent("spark.components.SkinnableContainer")]
      ]]>
   </fx:Metadata> 
   
   <s:states>
      <s:State name = "normal" />
      <s:State name = "disabled" />
   </s:states>
   
   <s:Rect left = "0" right = "0" top = "0" 
      bottom = "0" radiusX = "5" radiusY = "5">
      <s:stroke>
         <s:LinearGradientStroke weight = "2" />
      </s:stroke>
      <s:fill>
         <s:LinearGradient rotation = "90">
            <s:entries>
               <s:GradientEntry color = "0xdddddd" />
               <s:GradientEntry color = "0x020202" alpha = ".5" />
            </s:entries>
         </s:LinearGradient>    
      </s:fill>
   </s:Rect>
   
   <s:Group id = "contentGroup" left = "0" right = "0" 
      top = "0" bottom = "0" minWidth = "0" minHeight = "0">
      <s:layout>
         <s:BasicLayout/>
      </s:layout>
   </s:Group>
</s:Skin>

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" />
   <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 = "skinnableContainerPanel" title = "Using SkinnableContainer" 
            width = "500" height = "300" >
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />
            </s:layout>
            
            <s:SkinnableContainer 
               skinClass = "com.tutorialspoint.skin.SkinnableContainerSkin" 
               width = "50%" height = "50%" horizontalCenter = "0"
               verticalCenter = "0">
               
               <s:HGroup horizontalCenter = "0" verticalCenter = "0">
                  <s:BorderContainer width = "50" height = "50" 
                     borderWeight = "2" color = "0x323232" />
                  <s:BorderContainer width = "50" height = "50" 
                     borderWeight = "2" color = "0x323232" />
                  <s:BorderContainer width = "50" height = "50" 
                     borderWeight = "2" color = "0x323232" />
               </s:HGroup>
            </s:SkinnableContainer>
         </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: [ Essayez-le en ligne ]

↰ Previous page