[FlexExample] 스킨제작연습1 - 영역나누기

<?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"

                       xmlns="*">

      

       <!-- 스킨기본이해 - 영역잡기 -->

       <MySkinableComponent width="100%" height="100%">

            

             <topContent>

                    <s:Label text="Top영역" horizontalCenter="0" verticalCenter="0"/>

             </topContent>

            

             <middleContent>

                    <s:Label text="Middle영역" horizontalCenter="0" verticalCenter="0"/>

             </middleContent>

            

             <bottomContent>

                    <s:Label text="Bottom영역" horizontalCenter="0" verticalCenter="0"/>

             </bottomContent>

            

       </MySkinableComponent>

</s:Application> 

<?xml version="1.0" encoding="utf-8"?>

<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"

                                   xmlns:s="library://ns.adobe.com/flex/spark"

                                   xmlns:mx="library://ns.adobe.com/flex/mx"

                                   skinClass="MySkinableComponentSkin">

 

       <fx:Script>

             <![CDATA[

                    import spark.components.Group;

                    /**

                     *  컨테이너  topGroup 정의

                     */

                    [SkinPart(required="false")]

                    public var topGroup:Group;

 

                    private var _topContent:Array=[];

 

                    /**

                     *  컨테이너 topContent mxml 리스트

                     */

                    [Bindable]

                    [ArrayElementType("mx.core.IVisualElement")]

                    public function get topContent():Array

                    {

                           return _topContent;

                    }

 

                    public function set topContent(value:Array):void

                    {

                           _topContent=value;

                           if (topContent)

                                 topContent.mxmlContent=value;

                    }

 

                    /**

                     *  컨테이너  middleGroup 정의

                     */

                    [SkinPart(required="false")]

                    public var middleGroup:Group;

 

                    private var _middleContent:Array=[];

 

                    /**

                     *  컨테이너 middleContent mxml 리스트

                     */

                    [Bindable]

                    [ArrayElementType("mx.core.IVisualElement")]

                    public function get middleContent():Array

                    {

                           return _middleContent;

                    }

 

                    public function set middleContent(value:Array):void

                    {

                           _middleContent=value;

                           if (middleContent)

                                 middleContent.mxmlContent=value;

                    }

 

                    /**

                     *  컨테이너  bottomGroup 정의

                     */

                    [SkinPart(required="false")]

                    public var bottomGroup:Group;

 

                    private var _bottomContent:Array=[];

 

                    /**

                     *  컨테이너 bottomContent mxml 리스트

                     */

                    [Bindable]

                    [ArrayElementType("mx.core.IVisualElement")]

                    public function get bottomContent():Array

                    {

                           return _bottomContent;

                    }

 

                    public function set bottomContent(value:Array):void

                    {

                           _bottomContent=value;

                           if (bottomContent)

                                 bottomContent.mxmlContent=value;

                    }

 

                    /**

                     *  override partAdded

                     */

                    override protected function partAdded(partName:String, instance:Object):void

                    {

                           super.partAdded(partName, instance);

 

                           switch (instance)

                           {

                                 case topGroup:

                                        topGroup.mxmlContent=_topContent;

                                        break;

                                 case middleGroup:

                                        middleGroup.mxmlContent=_middleContent;

                                        break;

                                 case bottomGroup:

                                        bottomGroup.mxmlContent=_bottomContent;

                                        break;

                           }

                    }

 

                    /**

                     *  override partAdded

                     */

                    override protected function partRemoved(partName:String, instance:Object):void

                    {

                           super.partRemoved(partName, instance);

 

                           switch (instance)

                           {

                                 case topGroup:

                                        topGroup.mxmlContent=null;

                                        break;

                                 case middleGroup:

                                        middleGroup.mxmlContent=null;

                                        break;

                                 case bottomGroup:

                                        bottomGroup.mxmlContent=null;

                                        break;

                           }

                    }

             ]]>

       </fx:Script>

 

</s:SkinnableContainer> 

<?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>

      

       <fx:Script fb:purpose="styling">

             <![CDATA[        

                    /**

                     *  @private

                     */

                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

                    {

                           if (isNaN(getStyle("backgroundColor")))

                           {

                                 background.visible = false;

                           }

                           else

                           {

                                 background.visible = true;

                                 bgFill.color = getStyle("backgroundColor");

                                 bgFill.alpha = getStyle("backgroundAlpha");

                           }

                          

                           super.updateDisplayList(unscaledWidth, unscaledHeight);

                    }

             ]]>       

       </fx:Script>

      

       <s:states>

             <s:State name="normal" />

             <s:State name="disabled" />

       </s:states>

      

       <!--- 레이어0 백그라운드칼라 -->

       <s:Rect id="background" left="0" right="0" top="0" bottom="0">

             <s:fill>

                    <!--- @private -->

                    <s:SolidColor id="bgFill" color="#FFFFFF"/>

             </s:fill>

       </s:Rect>

      

      

       <!--- 레이어2 영역설정 -->

       <s:VGroup width="100%" height="100%" gap="0">

             <!-- Top Group -->

             <s:Group width="100%" height="50">

                    <s:Rect width="100%" height="100%">

                           <s:fill>

                                 <s:SolidColor color="0x999999" />

                           </s:fill>

                    </s:Rect>                 

                    <s:Group id="topGroup" width="100%" height="100%" />

             </s:Group>

            

             <!-- Middle Group -->

             <s:Group width="100%" height="100%">

                    <s:Rect width="100%" height="100%">

                           <s:fill>

                                 <s:SolidColor color="0xCCCCCC" />

                           </s:fill>

                    </s:Rect>                 

                    <s:Group id="middleGroup" width="100%" height="100%" />

             </s:Group>

            

             <!-- Bottom Group -->

             <s:Group width="100%" height="50">

                    <s:Rect width="100%" height="100%">

                           <s:fill>

                                 <s:SolidColor color="0xEEEEEE" />

                           </s:fill>

                    </s:Rect>                 

                    <s:Group id="bottomGroup" width="100%" height="100%" />

             </s:Group>

       </s:VGroup>

      

       <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>