[09-D3] Container & Component 배치

[09-D3] Container & Component 배치

[01] Container & Component 배치

     - http://flex.org/showcase/

★ 최상단 Application Container에서 Layout을 'absolute'로 했을 경우 컨트롤이 

   출력이 되지 않는 경우가 있슴으로 컨트롤 배치시 Layout을 'vertical, horizontal'로

   지정할것

1. Layout Container

   - 수평 방향 배치: HBox, HDividedBox

   - 수직 방향 배치: VBox, VDividedBox

   - 좌표 기준 배치: Canvas, layout 속성을 absolute로 설정한 Container

   - 패널 형태 배치: Application, Panel, TitleWindow

   - 폼형태 배치: Form

   - 격자 형태 배치: Grid, Tile

   - 화면 구분자: HRule, VRule

   - eclipse project: Flex Project

     project name: layout

2. Layout 기본 속성

>>>>> layout_absolute.mxml 

>>>>> layout_vertical.mxml

>>>>> layout_horizontal.mxml

3. Layout Constraints

   - 부모 컨테이너의 Layout이 absolute로 지정되어 있는 경우는 부모의 크기에 따라 자동으로 

     포함된 콘트를의 사이즈가 변경되는 기능.

   - Padding과 유사한 기능을 가지고 있습니다.

   - <mx:ControlBar>: Panel의 하단에 콘트롤 배치됨

>>>>> constraints.mxml

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#DBF3D8" themeColor="#33AB17" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#8FE863, #2C7907]">

    <mx:Panel layout="absolute" left="10" top="10" right="10" bottom="10">

        <mx:Panel layout="absolute" left="10" top="10" bottom="10" right="10">

        </mx:Panel>

    </mx:Panel>

    

</mx:Application>

>>>>> src/controlBar.mxml

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 

     creationComplete="init()" width="368" height="350">

    <mx:Script>

        <![CDATA[

        function show():void{

            txaMsg.text = "버튼을 이벤트를 이용한 문자열 출력";

        } 

        

        function delMsg():void{

            txaMsg.text = "";

        }           

        

        function init():void{

            txaMsg.text = "문자열이 출력됩니다.";

        }

        ]]>

    </mx:Script>

     

    <mx:Panel title="컨테이너 실습" layout="absolute" fontSize="12" top="10" bottom="10" left="10" right="10">

        <mx:TextArea top="5" left="5" bottom="5" right="5" backgroundColor="#D8F8CC" id="txaMsg" text=""/>

        <mx:ControlBar>

            <mx:Button label="메시지 출력" id="btnShow" click="show()"/>

            <mx:Button label="메시지 삭제" id="btnClear" click="delMsg()"/>

            <mx:Button label="초기값" id="btnInit" click="init()"/>

        </mx:ControlBar>

    </mx:Panel>

</mx:Application>

3. Panel

>>>>> src/panel.mxml

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="582" height="406">

    <mx:Panel width="175" height="170" layout="vertical" title="패널 테스 트-vertical" id="pnlTest" fontSize="12" x="10" y="10">

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

    </mx:Panel>

    <mx:Panel width="315" height="170" layout="horizontal" title="패 널 테스트-horizontal" fontSize="12" id="pnl2Test" x="193" y="10">

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

        <mx:Button label="Button"/>

    </mx:Panel>

    <mx:Panel width="498" height="200" layout="absolute" title="패널 테스 트-absolute" fontSize="12" id="pnl3Test" x="10" y="188">

        <mx:Button label="Button" x="0" y="0"/>

        <mx:Button label="Button" x="69" y="62"/>

        <mx:Button label="Button" x="204.5" y="31"/>

        <mx:Button label="Button" x="253" y="109"/>

    </mx:Panel>

    

</mx:Application>

4. Canvas 사용

-  컨테이너와 안쪽의 내용 콘트롤과의 거리지정 

   paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"

>>>>> src/canvasTest.mxml

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"  width="100%" height="100%">

    <mx:Canvas width="100%" height="200" backgroundColor="#efae63">

        <mx:TextArea text="Constraint를 상하좌우 10씩 설정" 

                     left="10" right="10" top="10" bottom="10"/>

    </mx:Canvas>

    

    <mx:VBox width="100%" height="200" backgroundColor="#c6db94" paddingBottom="10" 

             paddingLeft="10" paddingRight="10" paddingTop="10">

        <mx:TextArea width="100%" height="100%" text="padding값을 10으로 설정한 경우"/>

        <mx:TextArea width="100%" height="100%" text="padding값을 10으로 설정한 경우"/>

        <mx:TextArea width="100%" height="100%" text="padding값을 10으로 설정한 경우"/>

    </mx:VBox>  

    

    <mx:VBox width="100%" height="200" backgroundColor="#adb2ce" paddingBottom="20" 

             paddingLeft="20" paddingRight="20" paddingTop="20">

        <mx:TextArea width="100%" height="100%" text="padding값을 20으로 설정한 경우"/>

    </mx:VBox>

</mx:Application>

>>>>> canvas_panel.mxml: Canvas과 Panel의 비교

5. 배경 이미지의 지정

   - backgroundAlpha="1": 0 ~1, 0에 가까울수록 투명

   - src/bg.jpg 파일을 저장합니다.

>>>>> src/background.mxml

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" 

backgroundImage="./images/LongBranch02.jpg" height="556" width="720">

<mx:Panel width="242" height="200" layout="absolute" title="공지사항" 

 backgroundAlpha="1" backgroundColor="#FFFF00" alpha="1.0" x="46" y="24" fontSize="16">

<mx:TextArea left="10" bottom="10" top="10" right="10">

<mx:htmlText>

<![CDATA[backgroundColor="#FFFF00" backgroundAlpha="1" alpha="1.0" ]]>

</mx:htmlText>  

</mx:TextArea>

<mx:ControlBar>

<mx:HBox>

<mx:Button label="Button"/>

</mx:HBox>

</mx:ControlBar>        

</mx:Panel>

<mx:Panel width="244" height="200" layout="absolute" title="메모장" 

 backgroundAlpha="1.0" backgroundColor="#FFFF00" alpha="0.7" x="319" y="24" fontSize="16">

<mx:TextArea left="10" right="10" bottom="10" top="10">

<mx:htmlText>

<![CDATA[backgroundColor="#FFFF00" backgroundAlpha="0.７" alpha="0.７"]]>

</mx:htmlText>

</mx:TextArea>

<mx:ControlBar alpha="0.2">

<mx:HBox backgroundColor="#FFFF00">

<mx:Button label="Button"/>

</mx:HBox>

</mx:ControlBar>

</mx:Panel> 

<mx:Panel x="46" y="255" width="517" height="182" layout="absolute" title="게시판" fontSize="16">

<mx:TextArea left="1" top="1" right="1" bottom="1" text="패널은 기본적으로 투명한 성질을 지원함." fontSize="20" backgroundColor="#7BDF5D" backgroundAlpha="1.0" alpha="1.0"/>

</mx:Panel>

</mx:Application>

6. 수직/ 수평 화면의 분활, Alpha

   - Alpha: 0%(완전 투명) ~ 100%(불 투명) 범위안에서 투명도 지정

>>>>> src/divideTest.mxml

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="horizontal" backgroundImage="@Embed(source='images/LongBranch03.jpg')" height="686" width="968">

<mx:VBox width="100%" height="100%" backgroundColor="#f7f794" 

paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" alpha="0.8" fontSize="16">

<mx:VDividedBox width="100%" height="100%" backgroundColor="#c6db94" 

paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundAlpha="0.7">

<mx:TextArea width="100%" height="20%" text="VDiviedBox 레이아웃"/>

<mx:TextArea width="100%" height="40%"/>

<mx:TextArea width="100%" height="40%"/>

</mx:VDividedBox>

<mx:VBox width="100%" height="100%" backgroundColor="#adb2ce" 

paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundAlpha="0.7">      

<mx:TextArea width="100%" height="100%" text="VBox 레이아웃"/>

<mx:TextArea width="100%" height="100%"/>

</mx:VBox>

</mx:VBox>

<mx:VDividedBox width="100%" height="100%" backgroundColor="#efae63" 

paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundAlpha="0.3" fontSize="16">

<mx:HDividedBox width="100%" height="100%" backgroundColor="#c6db94" 

paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundAlpha="0.3">

<mx:TextArea width="100%" height="100%" text="HDiviedBox 레이아웃" backgroundAlpha="0.4"/>

<mx:TextArea width="100%" height="100%" backgroundAlpha="0.4"/>

</mx:HDividedBox>

<mx:HBox width="100%" height="100%" backgroundColor="#adb2ce" 

paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundAlpha="0.3">      

<mx:TextArea width="100%" height="100%" text="HBox 레이아웃" backgroundAlpha="0.4"/>

<mx:VBox height="100%">

<mx:Button label="Button"/>

<mx:Button label="Button"/>

<mx:Button label="Button"/>

<mx:Button label="Button"/>

<mx:Button label="Button"/>

</mx:VBox>

</mx:HBox>

</mx:VDividedBox>

</mx:Application>

7. Panel과 Form을 이용한 회원가입폼의 예

   - <mx:NumberFormatter id="calFormat" useThousandsSeparator="true"/>: 수치 출력 형식 지정

>>>>> src/formTest.mxml

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="466" width="623">

    <mx:Array id="emails">

        <mx:Object label="이메일 선택" data="NOT_SELECT"/>

        <mx:Object label="yahoo.co.kr" data="yahoo.co.kr"/>

        <mx:Object label="nate.com" data="nate.com"/>

        <mx:Object label="naver.com" data="naver.com"/>

        <mx:Object label="paran.com" data="paran.com"/>

        <mx:Object label="이메일 직접 입력" data="NOT_SELECT"/>

    </mx:Array>

    

    <mx:Panel layout="absolute" left="5" top="5" bottom="5" right="5" title="회원 가입" fontSize="14" textDecoration="normal" horizontalAlign="center" textAlign="center">

        <mx:Form left="10" top="10" bottom="5" right="10">

            <mx:FormItem label="아이디(*)">

                <mx:HBox width="100%">

                    <mx:TextInput/>

                    <mx:Button label="중복 아이디 검사"/>

                </mx:HBox>

            </mx:FormItem>

            <mx:FormItem label="이름(*)">

                <mx:TextInput/>

            </mx:FormItem>

            <mx:FormItem label="비밀번호(*)">

                <mx:HBox width="100%">

                    <mx:TextInput displayAsPassword="true" width="90"/>

                    <mx:Label text="* 4~8자의 영문과 숫자만 사용가능 "/>

                </mx:HBox>

            </mx:FormItem>

            <mx:FormItem label="주민등록번호(*)">

                <mx:HBox width="100%" horizontalGap="-5">

                    <mx:TextInput width="90"/>

                    <mx:Label text="-"/>

                    <mx:TextInput width="90"/>

                </mx:HBox>

            </mx:FormItem>

            <mx:FormItem label="이메일(*)">

                <mx:HBox width="100%" horizontalGap="1">

                    <mx:TextInput width="90"/>

                    <mx:Label text="@"/>

                    <mx:TextInput width="90"/>

                    <mx:ComboBox width="151" dataProvider="{emails}"></mx:ComboBox>

                </mx:HBox>

            </mx:FormItem>

            <mx:FormItem label="취미(*)">

                <mx:HBox width="100%">

                    <mx:CheckBox label="등산"/>

                    <mx:CheckBox label="낚시"/>

                    <mx:CheckBox label="하이킹"/>

                    <mx:CheckBox label="스키"/>

                    <mx:CheckBox label="골프"/>

                </mx:HBox>

            </mx:FormItem>

            <mx:FormItem label="연락 가능한 주소" width="488">

                <mx:VBox height="100%">

                    <mx:HBox width="100%">

                        <mx:TextInput/>

                        <mx:Button label="우편 번호 검색"/>

                    </mx:HBox>

                </mx:VBox>

                <mx:TextInput width="296"/>

                <mx:TextInput width="296"/>

                <mx:Label text="- 우편이 배송됨으로 정확하게 기재해 주십시오."/>

            </mx:FormItem>

        </mx:Form>

        <mx:ControlBar horizontalAlign="center">

            <mx:Button label="회원 가입"/>

            <mx:Button label="가입 취소"/>

        </mx:ControlBar>

    </mx:Panel>

    

</mx:Application>