Flex - SkinnableContainer
Introdução
A classe SkinnableContainer é a classe base para todos os contêineres de skinnable que possuem conteúdo visual.
Declaração de Classe
A seguir está a declaração para spark.components.SkinnableContainer classe -
public class SkinnableContainer
extends SkinnableContainerBase
implements IDeferredContentOwner, IVisualElementContainer
Propriedades Públicas
Sr. Não | Descrição da Propriedade |
---|---|
1 | autoLayout : Boolean Se verdadeiro, a medição e o layout são feitos quando a posição ou o tamanho de uma criança é alterado. |
2 | creationPolicy : String Política de criação de conteúdo para este componente. |
3 | deferredContentCreated : Boolean [somente leitura] Contém verdadeiro se o conteúdo adiado foi criado. |
4 | layout : LayoutBase O objeto de layout para este contêiner. |
5 | mxmlContent : Array [somente gravação] Os filhos de conteúdo visual para este Grupo. |
6 | mxmlContentFactory : IDeferredInstance [somente gravação] Um objeto de fábrica que cria o valor inicial para a propriedade de conteúdo. |
7 | numElements : int [somente leitura] O número de elementos visuais neste contêiner. |
Métodos Públicos
Sr. Não | Método e Descrição |
---|---|
1 | SkinnableContainer() Construtor. |
2 | addElement(element:IVisualElement):IVisualElement Adiciona um elemento visual a este contêiner. |
3 | addElementAt(element:IVisualElement, index:int):IVisualElement Adiciona um elemento visual a este contêiner. |
4 | createDeferredContent():void Crie o conteúdo para este componente. |
5 | getElementAt(index:int):IVisualElement Retorna o elemento visual no índice especificado. |
6 | getElementIndex(element:IVisualElement):int Retorna a posição do índice de um elemento visual. |
7 | removeAllElements():void Remove todos os elementos visuais do contêiner. |
8 | removeElement(element:IVisualElement):IVisualElement Remove o elemento visual especificado da lista de filhos deste contêiner. |
9 | removeElementAt(index:int):IVisualElement Remove um elemento visual da posição de índice especificada no contêiner. |
10 | setElementIndex(element:IVisualElement, index:int):void Altera a posição de um elemento visual existente no contêiner visual. |
11 | swapElements(element1:IVisualElement, element2:IVisualElement):void Troca o índice dos dois elementos visuais especificados. |
12 | swapElementsAt(index1:int, index2:int):void Troca os elementos visuais nas duas posições de índice especificadas no contêiner. |
Métodos Protegidos
Sr. Não | Método e Descrição |
---|---|
1 | createChildren():void [substituir] Crie filhos de conteúdo, se a propriedade creationPolicy não for igual a nenhum. |
2 | partAdded(partName:String, instance:Object):void [substituir] Chamado quando uma parte da capa é adicionada. |
3 | partRemoved(partName:String, instance:Object):void [substituir] Chamado quando uma instância de uma parte da capa está sendo removida. |
Eventos
Sr. Não | Descrição do Evento |
---|---|
1 | contentCreationComplete Enviado após a criação do conteúdo para este componente. |
2 | elementAdd Enviado quando um elemento visual é adicionado ao portador de conteúdo. |
3 | elementRemove Enviado quando um elemento visual é removido do portador de conteúdo. |
Métodos herdados
Esta classe herda métodos das seguintes classes -
- 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
Exemplo de Flex SkinnableContainer
Vamos seguir as etapas a seguir para verificar o uso de SkinnableContainer em um aplicativo Flex criando um aplicativo de teste -
Degrau | Descrição |
---|---|
1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
2 | Crie um skin SkinnableContainerSkin para um componente host SkinnableContainer sob um pacote com.tutorialspoint.skin conforme explicado em Flex - Style com skinchapter . Mantenha o resto dos arquivos inalterados. |
3 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
4 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo 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 seguir está o conteúdo do arquivo 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>
Quando estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com sua aplicação, ele produzirá o seguinte resultado: [ ]