SkinnableContainer類是具有可視內(nèi)容的所有可Skinnable容器的基類。
以下是 spark.components.SkinnableContainer 類的聲明:
public class SkinnableContainer extends SkinnableContainerBase implements IDeferredContentOwner, IVisualElementContainer
S.N. | 屬性和描述 |
---|---|
1 | autoLayout:Boolean 如果為true,則當(dāng)孩子的位置或大小改變時(shí),進(jìn)行測(cè)量和布局。 |
2 | creationPolicy:String 此組件的內(nèi)容創(chuàng)建策略。 |
3 | deferredContentCreated:Boolean [只讀]如果已創(chuàng)建延遲內(nèi)容,則包含true。 |
4 | layout:LayoutBase 此容器的布局對(duì)象。 |
5 | mxmlContent:Array [只寫(xiě)]此組的可視內(nèi)容子項(xiàng)。 |
6 | mxmlContentFactory:IDeferredInstance [write-only]為內(nèi)容屬性創(chuàng)建初始值的工廠對(duì)象。 |
7 | numElements:int [只讀]此容器中的可視元素的數(shù)量。 |
S.N. | 方法和描述 |
---|---|
1 | SkinnableContainer() 構(gòu)造函數(shù)。 |
2 | addElement(element:IVisualElement):IVisualElement 向此容器添加可視元素。 |
3 | addElementAt(element:IVisualElement,index:int):IVisualElement 向此容器添加可視元素。 |
4 | createDeferredContent():void 創(chuàng)建此組件的內(nèi)容。 |
5 | getElementAt(index:int):IVisualElement 返回指定索引處的視覺(jué)元素。 |
6 | getElementIndex(element:IVisualElement):int 返回視覺(jué)元素的索引位置。 |
7 | removeAllElements():void 從容器中刪除所有可視元素。 |
8 | removeElement(element:IVisualElement):IVisualElement 從此容器的子列表中刪除指定的可視元素。 |
9 | removeElementAt(index:int):IVisualElement 從容器中指定的索引位置刪除視覺(jué)元素。 |
10 | setElementIndex(element:IVisualElement,index:int):void 更改可視容器中現(xiàn)有可視元素的位置。 |
11 | swapElements(element1:IVisualElement,element2:IVisualElement):void 交換兩個(gè)指定可視元素的索引。 |
12 | swapElementsAt(index1:int,index2:int):void 在容器中的兩個(gè)指定索引位置交換可視元素。 |
S.N. | 方法和描述 |
---|---|
1 | createChildren():void [override]如果creationPolicy屬性不等于none,則創(chuàng)建內(nèi)容子節(jié)點(diǎn)。 |
2 | partAdded(partName:String,instance:Object):void [override]當(dāng)添加皮膚部分時(shí)調(diào)用。 |
3 | partRemoved(partName:String,instance:Object):void [override]當(dāng)皮膚部分的實(shí)例被刪除時(shí)調(diào)用。 |
S.N. | 事件和描述 |
---|---|
1 | contentCreationComplete 此組件的內(nèi)容創(chuàng)建后分派。 |
2 | elementAdd 將視覺(jué)元素添加到內(nèi)容持有者時(shí)分派。 |
3 | elementRemove 從內(nèi)容持有者刪除視覺(jué)元素時(shí)分派。 |
此類繼承以下類中的方法:
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
讓我們按照以下步驟通過(guò)創(chuàng)建測(cè)試應(yīng)用程序來(lái)檢查Flex應(yīng)用程序中SkinnableContainer的使用:
步驟 | 描述 |
---|---|
1 | 在 Flex - 創(chuàng)建應(yīng)用程序章節(jié)中所述,在包 com.tutorialspoint.client 下創(chuàng)建名為 HelloWorld 的項(xiàng)目。 |
2 | 為 SkinnableContainerSkin 創(chuàng)建一個(gè)包含 com.tutorialspoint.skin 下的主機(jī)組件 SkinnableContainer / i>章。 保持文件的其余部分不變。 |
3 | 修改 HelloWorld.mxml ,如下所述。 保持文件的其余部分不變。 |
4 | 編譯并運(yùn)行應(yīng)用程序,以確保業(yè)務(wù)邏輯按照要求工作。 |
以下是修改的mxml文件 src / com.tutorialspoint / skin / SkinnableContainerSkin.mxml 的內(nèi)容。
<?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>
以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的內(nèi)容。
<?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>
準(zhǔn)備好所有更改后,讓我們以正常模式編譯和運(yùn)行應(yīng)用程序,就像在 Flex - 創(chuàng)建應(yīng)用程序中一樣 章節(jié)。 如果一切順利,您的應(yīng)用程序,這將產(chǎn)生以下結(jié)果:[在線試用]
更多建議: