플렉스 UI 컴포넌트 정리

- Button : Button은 UIComponent를 확장해서 만든 컴포넌트로 주로 다음과 같이 정의 해서 사용한다.

<mx:Button id =”id명” label=”버튼명” click=”이벤트핸들러명”
Icon=”아이콘파일명 ”
Color=”0x0B333C”
textAllign=”center | left | rigth”
click=”버튼을 마우스로 눌렀다가 놓았을 때 이벤트 핸들러”
buttonDown=”버튼을 눌렀을 때 이벤트핸들러”
/>

- LinkButton : LinkButton은 Button의 하위 컴퍼넌트로 Button과 유사하지만 마우스를 올렸을 때 커서의 모양이 바뀐다는 점이 다르다. Button도 buttonMode=’true’ useHandCursor=’true’로 설정하면 LinkButton처럼 사용할 수 있다.

<mx:LinkButton id=”id명” label=”링크버튼명” click=”이벤트핸들러명”
icon=’아이콘파일명”
color=”0x0B333C”’
textAllign=”center | left | rigth”
click=”버튼을 마우스로 눌렀다가 놓았을 때 이벤트 핸들러”
buttonDown=”버튼을 눌렀을 때 이벤트핸들러”
/>

- CheckBox : CheckBox는 설문조사에서 여러 개의 항목을 선택할 수 있게 해준다. CheckBox는 Button을 확장한 컴퍼넌트이기 때문에 태그 사용법은 버튼과 유사하다. CheckBox를 선택하게 하려면 selected속성을 true로 설정한다.

<mx:CheckBox id=”id명” label=”체크박스에 나타날 설명”
labelPlacement=”right | left | top | bottom”
click=”CheckBox 클릭시 이벤트 핸들러” selected=”true | false” color=”글자색” />

- RadioButton : RadioButton도 CheckBox처럼 Button을 확장한 컴퍼넌트 이기 대문에 태그 사용법은 버튼과 유사하다. Radiobutton은 설문조사에서 여러 개 중 한 개의 항목만 선탹할수 있도록 해준다. 그래서 CheckBox와는 달리 groupName의 속성으로 RadioButtonGroup을 주면 그룹명이 같은 것 중에서 한 개만 선택할수 있게 한다. RadioButton을 선택되게 하려면 selected 속성을 true로 설정한다.

<mx:RadioButton id=”id명” label=”RadioButton에 나타날 설명”
labelPlacement=”right | left | top | bottom” groupName=”라디오버튼 그룹명”
click=”RadioButton 클릭시 이벤트 핸들러” selected=”true | false” color=”글자색” />

RadioButtonGroup : RadioButtonGroup은 EventDispatcher를 확장한 넌비주얼 컴퍼넌트로서 하나만 선택할 수 있도록 RadioButton들을 groupName으로 묶어주는 역할을 한다.

- ColorPicker : ColorPicker 컴퍼넌트는 RGB 색상을 고를 수 있는 컴퍼넌트로 콤보박스의 상위 클래스인 ComboBase 클래스를 확장해서 만들었다.

showTextField는 ColorPicker를 클릭했을 때 RGB값을 같이 보여줄지를 설정한다.
사용자가 선택한 색상은 ColorPicker의 selectedColor값을 통해서 읽어올 수 있다.

<mx:ColorPicker id=”id명” showTextField=”true” selectedColor=”0xFFFFFF” />

- DateChooser : DateChooser는 UIComponent를 확장해서 만든 달력 컴퍼넌트이다. DateChooser 컴퍼넌트는 달력기능을 위해 추가된 속성이 많으며 그 용도는 다음 태그와 함께 정리했다. DateChooser를 선택하면 change 이벤트가 발생한다. 날짜에서 월을 나타내는 값은 0부터 시작해서 11로 끝난다. 즉 0은 1월을 의미하며 11이 12월을 의미한다.

<mx:DateVhooser
allowMultipleSelection=”false | true” //여러 날을 선택할 수 있는 옵션
allowDisjointSelection=”true | false”
// Control 키를 이용해서 이웃해있지 않은 날짜를 선택할 수 있는 옵션으로
// allowMultipleSelection=’true’ 로 되어 있어야 함.
dayNames=”[“S”,”M”,”T”,”W”,”T”,”F”,”S”]” // 요일 이름 배열
disabledDays=”No default” // 비활성화할 일자들
disabledRanges=”No default” // 비활성화할 날짜 영역
displayedMonth=”Current month”
// 현재 달로서 0이 1월을 표현하며 11이 12월을 표현함
displayedYear=”Current year” // 현재 연도
firstDayOfWeek=”0” // 0으로 되어있으면 일요일부터 시작
maxYear=”2100”
minYear=”1900”
monthNames=”[“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”
,”September”,”October”,”November”]” // 월의 이름
monthSymbol=”월” // 원 다음에 표시되는 이름
selectableRange=”No default” // 선택가능한 날짜 영역
selectedDate=”No default” // 선택한 날짜
selectedRanges=”No default” // 선택된 날짜 영역
showToday=”true | false” // 오늘 날짜 표시 옵션
yearNavigationEnabled=”false | true” // 연도 이동 컨트롤 표시 여부
yearSymbol=”년” // 년 다음에 표시되는 이름
change=”날짜를 선택했을 때 발생”
/>


- DateField : DateField는 ComboBase를 확장한 컴퍼넌트로서 TextInput과 DateChooser의 기능을 합쳐놓은 컴퍼넌트라고 보면 되겠다.

<mx:DateField
Properties
dayNames=”[“S”,”M”,”T”,”W”,”T”,”F’,”S’]” // 요일 이름 배열
disabledDays=”No default” // 비활성화 일자들
disabledRanges=”No default” // 비활성화 날짜 영역
displayedMonth=”Current month”
// 현재 달로서 0이 1월을 표현하며 11이 12월을 표현함
displayedYear=”Current year” // 현재 연도
firstDayOfWeek=”0” // 0으로 되어있으면 일요일부터 시작
formatString=”MM/DD/YYYY” // 텍스트 필드에 표시될 날짜 형식
labelFunction=”텍스트필드에 표시될 내용에 사용할 함수명”
maxYear=”2100”
minYear=”1900”
monthNames=” [“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”
,”September”,”October”,”November”]” // 월의 이름
monthSymbol=”월” // 월 다음에 표시되는 이름
parseFunction=”텍스트필드에 들어오는 입력값을 처리해주는 함수명”
selectableRange=”No default” // 선택가능한 날짜 영역
selectedDate=”No default” // 선택한 날짜
showToday=”true | false” // 오늘 날짜 표시 옵션
yearNavigationEnabled=”false | true” // 연도 이동 컨트롤 표시 여부
yearSymbol=”년” // 년 다름에 표시되는 이름
change=”날짜를 선택했을 때 발생”
close=”달력을 닫을 때”
open=”달력을 열 때”
/>

- HSlider/VSlider : Slider를 확장한 컴퍼넌트로서 슬라이더썸(Thumb:조절바)을 움직여서 다른 컨트롤의 값을 설정하는 데 사용하는 컨트롤이다. 상하로 움직이는 것은 VSlider, 좌우로 움직이는 것은 HSlider이다.

<mx:VSlider id=”slider1”
thumbCount=”1’ // 슬라이더썸의 수로서 어려 개 지정이 가능하다.
minimum=”0” // 슬라이더의 최소값
maximum=”2” // 슬라이더의 최대값
labels=”[0배,0.5배,1배,1.5배,2배]” // 슬라이더에 나타날 라벨값
values=”[1]” // 초기화될 때 선택된 값
tickInterval=”0.5” // 눈금자 간격
snapInterval=’0.5” // 눈금 이동 간격
liveDragging=”true” // 마우스를 슬라이더썸을 드래그하는 동안의 가밧도 처리할 것인지 여부
dataTipPlacement=”left | right | top | bottom” // 슬라이더를 움직일 때 보이는
데이터텁의 위치
change=”슬라이더값이 변할 때 발생하는 이벤트”
/>


- NumericStepper : NumericStepper는 UIComponent를 확장한 컴퍼넌트로서 최대/최소값 사이를 상하 조절 버튼을 누르면서 바꿔 줄 수 있다. 이때 최대값과 최소값이 뒤바뀌지 않도록 해야한다.

<mx:NumericStepper
imeMode=”null”
maxChars=”10”
maximum=”10” // 표현최대값
minimum=”0” // 표현최소값(음수도 가능)
stepSize=”1” // 컨트롤을 누를 때 마다 바뀌는 값의 크기
value=”0” // 기본 선택값
change=”값이 변경되었을 때 발생하는 이벤트”
/>

- Label : Label은 화면에 글자로 설명을 넣어야 하는 곳에 사용하는 컴퍼넌트로 Button과 마찬 가지로 UIComponent를 확장해서 만든 컴퍼넌트이지만 이벤트를 써서 사용자와 인터랙션하는 곳에는 잘 쓰지 않는다. Text 속성에 Label에 나타낼 문자를 적어주면 되고 selectable 속성은 기본적으로 false로 되어있다. 이 속성을 true로 주면 Label의 text를 마우스로 선택해 복사할수 있다.

<mx:Label text=”” selectable=”true | false” />

- Text : Text 컴퍼넌트는 Label을 확장해 만든 컴퍼넌트로 Label과 마찬가지로 사용자의 입역을 받지는 못하지만 여러 줄로 텍스트를 표시할 수 있다. Text에는 상위 컴퍼넌트에서 상속받은 이벤트가 있지만 주로 텍스트를 보여주는 데에만 사용하기 대문에 이벤트를 그다지 활용하지 않는다. 텍스트의 속성에는 text와 htmlText가 있는데 두 속성에 값이 동시에 들어오면 htmlText값을 보여준다. Text 컴퍼넌트의 태그는 다음과 같이 사용한다.

<mx:Text text=”표시할 내용” >
<mx:htmlText>
<![CDATA[
<font color=”#FF0000”>HTML 텍스트</font>
]]>
</mx:htmlText>
</mx:Text>

htmlText에사 사용할 수 있는 HTML 태그는 다음과 같다.
Anchor 태그 (<a>)
Bold 태그 (<b>)
Break 태그 (<br>)
Font 태그 (<font>)
Image 태그 (<img>)
Italic 태그 (<i>)
List item 태그 (<li>)
Paragraph 태그 (<p>)
Text format 태그 (<textformat>)
Underline 태그 (<u>)

- TextArea : TextArea는 UIComponent에 스트롤 기능을 추가한 ScrollControlBase 컴퍼넌트의 하위 컴퍼넌트로서 HTML의 TextArea처럼 사용자의 입력을 받으면서 여러 줄로 표시가 가능한 텍스트 처리 컨트롤이다. TextArea는 Label,Text와 달리 상용자의 입력을 받으므로 다음과 같이 다양한 속성들이 있다.

<mx:TextArea
condenseWhite=”false | true”
// true로 되어있으면 htmlText에 들어있는 모든 줄바꿈 공백을 무시한다.
diaplayAsPassword=”false | true” // true로 되어있으면 *형식으로 글자를 표시한다.
editable=”true | false” // 에디팅 가능 여부
horizontalScrollPolicy=”auto | on | off” // 수평 스트롤바 표시 여부
htmlText=”null” // html태그를 사용한 텍스츠 내용
imeMode=”KOREAN” // KOREAN이라 설정하면 바로 한글 입력모드로 설정된다.
length=”0” // 화면에 표시될 글자수
maxChars=”0” // 최대 수용 글자수
restrict=”null” // 입력제한
styleSheet=”null” // text 영역에 적용할 스타일시트
text=”” // 표시할 text내용
textHeight=”height of text” // text의 높이
textWidth=”width of text” // text의 넓이
verticalScrollPolicy=”auto | on | off” // 수직 스크롤바 표시 여부
wordWrap=”true | false” // 자동 줄바꿈 기능 사용여부
change=”No default” // 텍스트 내용이 바뀌었을 때 발생하는 이벤트
/>

- TextInput : TextInput는 UIComponent의 하위 컴퍼넌트로서 TextArea와 기능은 우사하나 한 줄로만 표시된다는 점에서 다를다. TextInput에서 데이터를 입력하고 엔터키를 치면 enter이벤트가 발생하며 여기서 입력처리(입력값 검증 및 서버 전송)를 할 수가 있다.

<mx:TextInput
condenseWhite=”false | true”
// true로 되어있으면 htmlText에 들어있는 모든 줄바꿈 공백을 무시한다.
displayAsPassword=”false | true” // true로 되어있으면 * 형식으로 글자를 표시한다.
Editable=”true | false” // 에디팅 가능 여부
horizontalScrollPolicy=”auto | on | off” // 수평 스트롤바 표시 여부
htmlText=”null” // html태그를 사용한 텍스트 내용
imeMode=”KOREAN” // KOREAN이라 설정하면 바로 한글 입력모드로 설정된다.
length=”0” // 회면에 표시될 글자수
maxChars=”0” // 최대 수용 글자수
restrict=”null” // 입력제한
text=”” // 표시할 text내용
textField=”internal subcontrol”
textHeight=”height of text” // text의 높이
textWidth=”width of text” // text의 넓이
change=”No default” // 텍스트 내용이 바뀌었을 때
enter=”No default” // 텍스트 입력후 엔터키를 쳤을 때
textInput=”No default” // 텍스트 내용을 입력했을 때(키입력,붙여넣기,지우기 등)

restrict

restrict=”[abc]” : abc만 입력 가능
restrict=”[0-9]” : 숫자만 입력 가능
restrict=”[A-z]” : 영어만 입력 가능
restrict=”[A-z0-9.@\-]” : 이메일 입력
restrict=”[0-9\-]” : 전화번호 입력


- RichTextEditor : RichTextEditor는 Panel을 확장해서 TextInput,Button,TextArea,ComboBox,ColorPicker등의 컴퍼넌트를 합쳐서 만든 간단한 HTML입력용 컴퍼넌트이다.

<RichTextEditor
defaultLinkProtocol=”http://” // 화면에 표시되는 링크 방식
htmlText=”” // htmlText 내용
showControlBar=”true | false”
// RichTextEditor의 하단 버튼이 들어있는 ControlBar의 표시 여부
showToolTips=”false | true” // 풍선도움말(툴팁) 표시 여부
text=”” // 일반 텍스트 내용
change=” // 텍스트 내용이 바뀌었을 때발생하는 이벤트
/>

- Image : Image 컴퍼넌트는 SWFLoader를 확장한 컴퍼넌트로서 JPEG,PNG,GIF,SWF 파일을 실행시 화면에 보여줄수 있다. 보통 SWFLoader는 플렉스 애플리케이션 또한 로딩하는 데 사용하고, Image는 정적인 이미지를 로드하는 데에 사용한다. Image 컴퍼넌트에 source=”@Embed(source=’filenme’)” 형식으로 속성을 표시하면 SVG파일 또한 보여줄수 있으며 컴파일된 플렉스 애플리케이션 내에 이미지가 같이 포함된다.

<mx:Image source=”@Embed(‘assets/Nokia_6630.png’)” />


- SWFLoader : SWFLoader는 UIComponent를 확장한 컴퍼넌트로서 JPEG,PNG,GIF,SWF 파일을 실행시 화면에 보여줄 수 있다. 주로 동적인 SWF를 로드하는 데에 사용한다.

<mx:SWFLoader
autoLoad=”true | false” // 컨텐츠 자동 로딩 여부
maintainAspectRatio=”true | false”
// 원본이미지의 width,height의 비율을 유지할 것인지 여부
scaleContent=”true | false” // 이미지의 스케일 조절 여부
showBusyCursor=”false | true” // 컨텐츠를 로드할 때 작동중 커서를 보여줄 것인지의 여부
source=”No default” // 컨텐츠 경로
complete=”No default” // 로딩 완료시 발생
progress=”No default” // 로딩 중
unload=”No default” // 로딩한 객체를 언로드할 때
/>

- ProgressBar : ProgressBar는 UIComponent를 확장한 컴퍼넌트로서 어떤 작업의 진행상황을 bar모양을 채워가면서 보여주는 컴퍼넌트로서 전체 작업에 대한 예측치가 있는 determinate와 그렇지 않고 시간을 기준으로 진행하는 indeterminate방식이있다.

<mx;ProgressBar
Conversion=”1” // 로드한 바이트수/전체바이트수를 나눈는 값으로 1이 기본값임
direction=”right | left” // progressBar의 진행방향
indeterminate=”false | true” // indeterminate방식 여부
label=”No default” // progressBar의 라벨
labelPlacement=”bottom | top | left | right | center” // 라벨위치
maximum=”0” // 최대 표시값
minimum=”0” // 최소 표시값
mode=”event | polled | manual” // bar를 업데이트하는 방식
source=”No default” // ProgressBar 가 표시하려는 작업 객체
complete=”No default” // 작업 완료
progress=”No default” // 작업 진행중
/>


- VideoDisplay : VideoDisplay는 UIComponent를 확장한 컴퍼넌트로서 FLV(플래시 비디오) 파일을 플렉스 애플리케이션에서 보여준다. FLV파일은 웹서버로부터 조금씩 다운받아서 보여주거나 웹캠이나 플래시 미디어 서버에서 스트리밍해서 보여줄 수 있다.

<mx:VideoDisplay
autoBandWidthDetection=”false | true” // 밴드대역폭의 자동여부
autoPlay=”true | false” // 자동 실행 여부
autoRewind=”true | false”
// 플레이하다가 정지하거나 플레이가 끝났을 때 맨앞으로 자동 되감기 여부
bufferTime=”0.1’ // 비디오 버퍼에 넣을시간
cuePoints=”” // 미디어 내에 들어있는 특정 지점으로 큐포인트로 바로 이동할 수 있다.
idleTimeout=”300000”
// 아무것도 안하고 있을 동안 얼마나 커넥션을 유지할 것인가를 밀리초로 설정
Live=”false | true” // 라이브 스트리밍 실행 여부
maintainAspectRatio=”true : false”
// 원본 비디오의 width,height의 비율을 유지할 것인지 여부
source=”” // 미디어 파일 경로
totalTime=”” // 미디어의 총 길이(초)
volume=”0.75” // 볼륨크기 (0~1 사이)
/>


-- 데이터 바인딩 --
데이터 바인딩은 두 개 이상의 컴퍼넌트들이 있을 때 한쪽 컴퍼넌트의 속성이 바뀌면
다른 쪽의 컴퍼넌틑에도 바뀌 내용이 속성에 반영되도록 컴퍼넌트의 관계를 엮는 것을 말한다.
MAML에서 일반적인 속성 표기는 <mx:컴퍼넌트 속성=”참조값” /> 으로 하지만, 데이터 바인딩이 이뤄지게 하려면 속성값을 표시할 때 { } 기호를 써서 <mx;컴퍼넌트명 속성=”{참조값}” />과 같이 표시해야 한다.

참조값은 보통 다른 컴퍼넌트이 id.속성명으로 표현한다, 한편 액션스크립트에서 일반적으로 선언해 사용하는 변수를 데이터 바인딩이 일어나게 하려면 다음과 같이 변수 앞에 [Bindable] 이라고 명시를 해줘야 한다.

[Bindable]
Private vaar myData:ArrayCollection;
…
<mx:DataGrid dataProvider=”{myData}” />

콤퍼넌트 간의 데이터 바인딩
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
// 이 변수는 TextInput에 바인딩 되어 있어 반드시 [Bindable]로 선언해줘야 함
[Bindable]
private var bindableVar:Number = 0;
]]>
</mx:Script>
<!-- 이 Label의 text값은 TextInput의 text값과 바인딩 되어 있음 -->
<mx:Label text="TextInput의 값 : {myTxt.text}" />
<!-- 이 TextInput의 text는 변수 bindableVar와 바인딩 되어 있음 -->
<mx:TextInput id="myTxt" text="{bindableVar}" />
<!-- 버튼을 클릭하면 bindableVar을 바꾸고 바뀐 값이 Button과 TextInput에 반영됨 -->
<mx:Button label="Change Variable" click="bindableVar++" />
</mx:Application>
dataProvider, 컴퍼넌트 데이터 연결 창구

데이터 바인딩은 주로 데이터가 필요한 컴퍼넌트의 데이터값을 지정해주는 데 사용한다.
아래의 컴퍼넌트들은 데이터 바인딩을 통해 사용할 데이터를 화면으로 보여주는 컴퍼넌트들로서 dataProvider 속성에 배열값이나 XML 데이터값을 넘겨줌으로써 데이터를 보여줄 수 있다.

컨트롤 계열 컴퍼넌트
ComboBox / DataGrid / List / HorizontalList / TileList / Tree / Repeater / ColorPicker / DateField / Menu / MenuBar / PopUpMenuButton

모든 차트 컴퍼넌트
LineChart / ColumnChart / AreaChart / BarChart / PieChart / PlotChart /BubbleChart /CandleStickChart / HLOCChart

레이아웃 계열 컴퍼넌트
ButtonBar / LinkBar / TabBar / ToggleButtonBar

예제

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<!-- List와 DataGrid에서 사용할 데이터 선언 -->
<mx:ArrayCollection id="myAC">
<mx:source>
<mx:Object label="한국" data="1"/>
<mx:Object label="미국" data="2"/>
<mx:Object label="일본" data="3"/>
</mx:source>
</mx:ArrayCollection>
<!-- List와 DataGrid의 dataProvider 속성으로 myAC를 설정함 -->
<mx:List dataProvider="{myAC}" width="282"/>
<!-- DataGrid는 editable속성을 true로 하여 셀을 클릭하면 편집되도록 함 -->
<mx:DataGrid dataProvider="{myAC}" editable="true" />
</mx:Application>

- ComboBox : ComboBox는 UIComponent를 확장한 ComboBase의 하위 컴퍼넌트로서 HTML의 Select객체처럼 드롭다운 리스트형식으로 데이터를 보여준다. 사용자는 여기서 값을 하나만 선택할 수 있다. ComboBox에서 선택한 아이템의 배열은 selectedIndex로 알아낼 수 있으며 선택한 값은 selectedItem으로 값을 읽을 수 있다. 여러 개의 아이템을 선택하려면 List나 PopupButton을 사용한다.

<mx:ComboBox
dataProvider=”null” // 데이터 속성
dropdownWidth=”100” // ComboBox의 폭
labelField=”label” // ComboBox의 이름으로 나타날 필드명
prompt=”null” // 처음 ComboBox의 리스트에 표시할 값
rowCount=”5” // ComboBox의 리스트에 표시할 아이템 최대 개수
selectedIndex=”-1” // 선택한 아이템의 인덱스
selectedItem=”null” // 선택한 아이템
change=”No default” // 아이템을 선택할 때
open=”No default” // 리스트를 오픈할 때
/>

1. dataProvider 데이터 연결하기
2. ComboBox의 아이템 추가
3. Combobox의 아이템 삭제
4. 원하는 ComboBox의 아이템이 선택되게 하기
5. ComboBox에서 다른 아이템을 선택했을 때 선택된 아이템의 인덱스,label,data값 읽어 오기

- Tree : Tree는 List를 확장해서 만든 컴퍼넌트로서 트리 메뉴 구조를 보여주는 역할을 한다. 다른 데이터 관련 컨트롤과는 달리 Tree는 XML 데이터를 dataProvider에 연결해주어야 한다. XML의 특정 노드의 엘리먼트가 하위 노드를 가지면 자동으로 폴더모양의 아이콘으로 설정되어 클릭하면 하위 노드를 보여준다.

<mx:Tree
dataProvider=”null” // 트리가 사용할 XML 데이터의 정의
dragMoveEnabled=”true | false” // 트리의 아이템을 드래그로 이동하게 하는 설정
firstVisibleItem=”” // 트리의 제일 위에 보여줄 엘리먼트에 대한 설정
hasRoot=”false | true” // 현재의 노드가 최상위의 노드인지를 판단
itemIcons=”null” // 트리의 아이콘 설정
openItems=”null” // 트리를 보여줄 때 모든 노드를 펼질지의 여부
showRoot=”true | false” // 트리의 루트 엘리먼트를 보이게 하는 설정
change=”No default” // 트리의 노드를 클릭했을 때 발생
itemClose=”No default” // 트리의 노드를 열었을 때 발생
itemOpen=”No default” // 트리의 노드를 받았을 때 발생
/>

1. dataProvider에 XML 데이터 연결하기
2. Tree 열고 닫기
3. Tree 에 아이템 추가
4. Teee 노드 이동
5. Tree 노드를 선택했을 때 선택된 노드의 인덱스,label,data값 읽어 오기

- List : List는 DataGrid처럼 ListBase를 확장한 컴퍼넌트로서 ComboBox와 유사하지만 여러건의 아이템을 선택할 수 있다. 이는 HTML에서 다중 선택이 가능한 Select 객체와 유사하다.

<mx:List
Editable=”false | true” // 에디팅 가능 여부
imeMode=”null” // IME 설정
itemEditor=”TextInput”
// 아이템을 편집모드 시 List에 보여지는 컴퍼넌트로 TextInput의 형태로 편집한다.
rendererIsEditor=”false | true” // 아이템 에디터를 화면에 그대로 표현할지를 결정
itemEditBegin=”No default” // 아이템이 편집될 때
itemEditEnd=”No default” // 아이템 편집이 끝났을 때
/>

- TileList : ListBase에 열과 행의 개념을 적용한 TileBase 컴퍼넌트를 확장하여 만든 컴퍼넌트로서 아이템들을 지정된 공간 안에 차례대로 배치한다. 배치할 수 있는 아이템이 5개인데 데이터로 갖고 있는 아이템이 15개라면 3줄에 걸쳐서 5개씩 아이템을 보여준다.

<mx:TileList
allowDragSelection=”false | true” // 드래그해서 아이템을 선택하도록 하는 옵션
allowMultipleSelection=”false | true” // 여러 개의 아이템을 선택하도록 하는 옵션
columnCount=”4” // 화면에 보여줄 열 개수
columnWidth=”NaN” // 열의 폭
dataProvider=”null” // 사용할 데이터 객체
data=”Object” // itemRenderer를 사용할 때 참조하는 객체 속성
iconField=”null” // 아이콘으로 보여줄 필드 속성
itemRenderer=”null” // itemRenderer 이름
labelField=”label” // 데이터에서 label로 보여줄 필드명
rowCount=”-1” // 화면에 보여줄 행의 개수
rowHeight=”NaN” // 화면에 보여줄 행의 높이
selectable=”true | false” // 리스트에 보여주는 아이템을 선택가능하도록 하는 옵션
selectedIndex=”-1” // 리스트에 선택된 아이템 배열의 인덱스
selectedIndices=”null” // 리스트에 여러 개로 선택된 아이템 배열의 인덱스들
selectedItem=”null” // 선택된 아이템 객체
selectedItems=”null” // 선택된 아이템 객체들
showDataTips=”false | true” // dataTip을 보여주는 옵션
wordWrap=”false | true” // 아이템에서 줄바굼을 하는 옵션
change=”No default” // 다른 아이템을 선택했을 때 (selectedIndex가 바뀔때)
itemClick=”No default” // 아이템을 클릭했을 때 ”
/>

TileList에서 자주 사용하는 속성은 itemRenderer이다. itemRenderer는 화면에 데이터를 보여줄 때 다른 컴퍼넌트를 사용해서 화면에 보여줄 수 있도록 해부는 속성이다. 이 컴퍼넌트는 사진 갤러리에서 이미지를 리스트로 보여주는 데 많이 사용한다.

여기서는 itemRenderer에 <mx:Component> 속성 안에 사용할 MXML 태그를 넣었다. 이때 두가지를 정확히 처리해야 한다.

1. <mx:Component> 태그 안에 들어가는MXML 태그 또는 컴퍼넌트 명은 반드시 하나여야 한다.
예) 다음 예는 VBox안에 컴퍼넌트가 들어간 itemRenderer의 예이다.

<mx;TileList>
<mx;itemRendrer>
<mx:Component>
<mx:VBox width=”100” height=”250”>
<mx:Label text=”{data.label}” />
<mx:Image source=”{data.data}” />
</mx:VBox>
</mx:component>
</mx;itemRendrer>
</mx:TileList>
예) 다음 예는 itemRenderer로 MXML 컴퍼넌트를 사용한 예이다.

<mx:TileList>
<mx:itemRenderer>
<mx:Component>
<MyRD/>
</mx:Component>
</mx:itemRenderer>
</mx;TileList>

// MyRD.mxml의 내용
<?xml version=”1.0” encoding=”utf-8”?>
<mx:VBox xmlns:mx=http://www.adobe.com/2006/mxml width=”100” height=”250”>
<mx:Label text=”{data.label}”/>
<mx:Image source=”{data.data}”/>
</mx:VBox>

예) 다음의 예는 itemRenderer에 MXML컴퍼넌트의 이름을 사용한 예이다.
<mx:TileList itemRenderer=”MyRD” />

2. itemRenderer에 들어가는 데이터는 data라는 참조명으로 가져온다.
데이터 구조가 아래와 같이 되어 있으면,
<mx:Object label=”힌드폰1” data=”phone_1.png” />
data.data, data.label 식으로 itemRenderer에사 값을 가져올 수 있다.

- HorizontalList : ListBase에 열과 행의 개념을 적용한 TileBase 컴퍼넌트를 확장하여 만든 컴퍼넌트이다.
아이템들을 수평으로 배열하는 컴퍼넌트로서 사진들을 슬라이드 형식으로 보여주는 데에 많이 사용한다.

<mx:HorizontalList
allowDragSelection=”false | true” // 드래그해서 아이템을 선택하도록 하는 옵션
allowMultipleSelection=”false | true” // 여러 개의 아이템을 선택하도록 하는 옵션
columnCount=”4” // 화면에 보여줄 열 개수
columnWidth=’NaN” // 열의 폭
dataProvider=”null’ // 사용할 데이터 객체
data=”Object” // itemRenderer를 사용할 때 참조하는 객체 속성
iconField=”null” // 아이콘으로 보여줄 필드 속성
itemRenderer=”null” // itemRenderer 이름
labalField=”label’ // 데이터에서 label로 보여줄 필드명
rowCount=”-1” // 화며넹 보여줄 행의 개수
rowHeight=”NaN” // 화면에 보여줄 행의 높이
selectable=”true | false” // 리스트에 보여주는 아이템을 선택가능하도록 하는 옵션
selectedIndex=”-1” // 리스트에 선택된 아이템 배열의 인덱스
selectedIndices=”null” // 리스트에 여러 개로 선택된 아이템 배열의 인덱스들
selectedItem=”null’ // 선택된 아이템 객체
selectedItems=”null” // 선택된 아이템 객체들
showDataTips=”false | true” // dataTip을 보여주는 옵션
wordWrap=”false | true” // 아이템에서 줄바꿈을 하는 옵션
change=”No default” // 다른 아이템을 선택했을 때 (selectedIndex가 바뀔 때 )
itemClick=”No default” // 아이템을 클릭했을 때
/>

- DataGrid : DataGrid는 DataGrid List 의 상위 컴퍼넌트인 ListBase를 뿌리에 두고있다. DataGrid는 플렉스에서 데이터를 표현하는 데 가장 많이 사용하는 컴퍼넌트로서 테이블 형태의 데이터를 보여주는 데 사용한다. DataGrid의 기능은 다음과 같다.

1. 배열 형태의 데이터를 테이블 리스트로 표현한다.
2. 각 열별 정렬 기능
3. 열 간에 드래그앤드랍으로 이동 가능
4. 셀 내용을 직접 편집가능
<mx:DataGrid
Columns=”From dataProvider” // 데이터그리드의 열 지정
draggableColumns=”true | false” // 열을 드래그앤드랍으로 이동할 수 있게 하는 속성
editable=”false | true” // 데이터그리드의 각 셀의 값을 편집할 수 있게 하는 속성
horizontalScrollPosition=”null”
imeMode=”KOREAN” // KOREAN이라 설정하면 바로 한글 입력모드로 설정
minColumnWidth=”NaN” // 열이 최소 폭
resizableColumns=”true | false” // 열의 크기를 바꿀 수 있게 할지 설정
sortableColumns=”true | false” // 열을 정렬할 수 있게 할지 설정
change=”” // 데이터가 바뀌었을 때 발생
itemClick=”” // 데이터그리드 아이템을 클릭했을 때 발생
/>
1. dataProvider 데이터 연결하기
2. DataGrid의 행 추가
3. DataGrid의 행 삭제
4. 원하는 DataGrid의 아이템이 선택되도록 하기
5. DataGrid에서 다른 아이템을 선택했을 때 선택된 행의 인덱스 ,label,data값 읽어오기