EUI EXML內部類Skin和ItemRenderer

沒認真看過...現在試試...

 

EXMl支持內部類

兩種支持做為內部類的：Skin和ItemRenderer

優點：

這種最大的好處就是皮膚如果只用一次，不需要單獨寫成一個exml文件，只需要寫在組件所在的exml里就行了。

如果是復用的皮膚，還是單獨寫成一個exml文件比較好，這樣修改的時候只需要修改exml文件一處。

缺點：

沒法可視化編輯...比如居個中 (horizontalCenter="0" verticalCenter="0")， 如果你對exml的語法不熟的話...你就...

 

下面是一個Button的內部皮膚Skin：

<e:Button id="btn" label="Button" x="230" y="217">
        <e:skinName>
            <e:Skin states="up,down,disabled" minHeight="50" minWidth="100">
            <e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5" source="button_up_png" source.down="button_down_png"/>
            <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8" size="20" textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"/>
            <e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>
            </e:Skin>
        </e:skinName>
    </e:Button>

 

一個List的內部皮膚itemRendererSkinName：

<e:List id="list" width="200" height="200" x="275" y="212">
        <e:itemRendererSkinName>
            <e:Skin states="up,down,disabled" minHeight="50" minWidth="100">
            <e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5" source="button_up_png" source.down="button_down_png"/>
            <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="{data}" verticalAlign="middle" textAlign="center"/>
            </e:Skin>
        </e:itemRendererSkinName>
    </e:List>

 

將一個exml皮膚轉成內部類時，只需要在組件上右鍵，轉換皮膚為內嵌皮膚。

下圖是將List的條目皮膚ItemRendererSkin轉為內嵌皮膚

 

轉換前：

<e:List width="200" height="200" x="275" y="212" itemRendererSkinName="skins.ItemRendererSkin"/>

 

轉換后：

屬性面板上的皮膚內嵌到exml里了...如果這個皮膚只使用一次，那么ItemRendererSkin.exml可以刪掉了。

<e:List width="200" height="200" x="275" y="212">
        <e:itemRendererSkinName>
            <e:Skin states="up,down,disabled" minHeight="50" minWidth="100">
            <e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5" source="button_up_png" source.down="button_down_png"/>
            <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8" size="20" fontFamily="Tahoma" textColor="0xFFFFFF" text="{data}" verticalAlign="middle" textAlign="center"/>
            </e:Skin>
        </e:itemRendererSkinName>
    </e:List>

 

 

內嵌皮膚怎么轉成exml就不知道了...教程上說一鍵轉換，沒找着... ...

找不着就新建一個exml，然后復制粘貼...

 

 

立即返回高寬

組件實例化后，childrenCreated里訪問立刻返回高寬。原來不是嗎...忘了...

如果立刻獲取不了，使用validateNow()...

class HomScene extends eui.Component{
    private btn:eui.Button; public constructor() { super(); this.skinName = "HomeSceneSkin"; console.log(this.btn.width); //0  } public childrenCreated(){ console.log(this.btn.width); //100  } private onChange(e:eui.UIEvent){ } }