'flex' 카테고리의 글 목록 (16 Page)

'flex'에 해당되는 글 24건

2010.08.06 [09-D3] Container & Component 배치

2010. 8. 6. 18:17 flex

[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: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:Panel>

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

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

</mx:FormItem>

</mx:Form>

<mx:ControlBar horizontalAlign="center">

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

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

</mx:ControlBar>

</mx:Panel>

</mx:Application>

'flex' 카테고리의 다른 글

[11-D3][notice] DTO, Manager의 제작 및 사용 (0)	2010.08.06
[10-D3][notice] DB, ActionScript Class, getter, setter function (0)	2010.08.06
[08-D3] 기본 콤포넌트(ListBox, ComboBox, Panel, Form, ControlBar.....) (0)	2010.08.06
[07-D2] 기본 콤포넌트(Radio Button, CheckBox, Image, LinkButton, DateField) (0)	2010.08.06
[06-D2] Class, MXML, Array 실습 (0)	2010.08.06