Flex - Contenedor Skinnable

Introducción

La clase SkinnableContainer es la clase base para todos los contenedores modificables que tienen contenido visual.

Declaración de clase

A continuación se muestra la declaración de spark.components.SkinnableContainer clase -

public class SkinnableContainer
   extends SkinnableContainerBase
      implements IDeferredContentOwner, IVisualElementContainer

Propiedades publicas

No Señor	Descripción de propiedad
1	autoLayout : Boolean Si es verdadero, la medición y el diseño se realizan cuando se cambia la posición o el tamaño de un niño.
2	creationPolicy : String Política de creación de contenido para este componente.
3	deferredContentCreated : Boolean [solo lectura] Contiene true si se ha creado contenido diferido.
4	layout : LayoutBase El objeto de diseño de este contenedor.
5	mxmlContent : Array [solo escritura] Los elementos secundarios de contenido visual de este grupo.
6	mxmlContentFactory : IDeferredInstance [solo escritura] Un objeto de fábrica que crea el valor inicial para la propiedad de contenido.
7	numElements : int [solo lectura] El número de elementos visuales en este contenedor.

Métodos públicos

No Señor	Método y descripción
1	SkinnableContainer() Constructor.
2	addElement(element:IVisualElement):IVisualElement Agrega un elemento visual a este contenedor.
3	addElementAt(element:IVisualElement, index:int):IVisualElement Agrega un elemento visual a este contenedor.
4	createDeferredContent():void Cree el contenido de este componente.
5	getElementAt(index:int):IVisualElement Devuelve el elemento visual en el índice especificado.
6	getElementIndex(element:IVisualElement):int Devuelve la posición de índice de un elemento visual.
7	removeAllElements():void Elimina todos los elementos visuales del contenedor.
8	removeElement(element:IVisualElement):IVisualElement Elimina el elemento visual especificado de la lista secundaria de este contenedor.
9	removeElementAt(index:int):IVisualElement Elimina un elemento visual de la posición de índice especificada en el contenedor.
10	setElementIndex(element:IVisualElement, index:int):void Cambia la posición de un elemento visual existente en el contenedor visual.
11	swapElements(element1:IVisualElement, element2:IVisualElement):void Intercambia el índice de los dos elementos visuales especificados.
12	swapElementsAt(index1:int, index2:int):void Intercambia los elementos visuales en las dos posiciones de índice especificadas en el contenedor.

Métodos protegidos

No Señor	Método y descripción
1	createChildren():void [invalidar] Cree elementos secundarios de contenido, si la propiedad creationPolicy no es igual a none.
2	partAdded(partName:String, instance:Object):void [anular] Se llama cuando se agrega una parte de la máscara.
3	partRemoved(partName:String, instance:Object):void [anular] Se llama cuando se elimina una instancia de una parte de la piel.

Eventos

No Señor	Descripción del evento
1	contentCreationComplete Se envía después de que se haya creado el contenido de este componente.
2	elementAdd Se envía cuando se agrega un elemento visual al contenedor de contenido.
3	elementRemove Se envía cuando se elimina un elemento visual del contenedor de contenido.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de contenedor flexible flexible

Sigamos los siguientes pasos para verificar el uso de SkinnableContainer en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Cree un skin SkinnableContainerSkin para un componente host SkinnableContainer bajo un paquete com.tutorialspoint.skin como se explica en Flex - Style con skinchapter . Mantenga el resto de los archivos sin cambios.
3	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
4	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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>

A continuación se muestra el contenido del archivo mxml modificado 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>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ ]

↰ Previous page