finerss's world!


웹페이지가 HTML 태그로 만들어진 것처럼 플렉스에서 XML 태그를 이용해 화면 요소를 정의한 것을 MXML이라고 한다.

MXML은 XML 태그를 사용하기 때문에 XML의 문법을 따른다.




<XML의 이해>

XML은 확장 마크업 랭귀지(eXtended Markup Language)의 약어로서 태그를 이용해 데이터를 구조적으로 표현하는 데 사용한다.

XML은 플렉스뿐만 아니라 여러분야에서 데이터 또는 화면을 구조적으로 정의하는데 사용된다. 




<XML의 구조>

XML은 지시문, 루트 엘리먼트(루트태그), 자식 엘리먼트로 구성된다.

-처리지시문: 문서의 인코딩 방식을 설정하는 부분으로서 플렉스에서는 'utf-8'을 사용한다. 'utf-8'을 사용하면 다국어 처리가 가능하다.

-루트 엘리먼트(루트태그):처리 지시문 다음에 오는 태그로서 그 XML문서에서는 하나만 존재해야한다. 
                                    또한 자식엘리먼트는 루트 엘리먼트 안에 반드시 포함되어야한다.

-자식 엘리먼트: 루트 엘리먼트 안에 포함되는 것으로서 데이터를 구조적으로 표현한다.

 *인코딩방식
한국은 예전 관행이 남아 국내 일부 사이트에서는 euc-kr을 사용하는 곳도 있는데, 그렇게하면 utf-8을 사용하는 플렉스에서 한글이 꺠진다.
그럴 떄는 System.useCodePage=true로 설정하면 한글을 볼수있다. 하지만 이것도 운영체제가 한국어인 PC에만 해당되므로
근본적으로 utf-8을 사용해 데이터를 처리할 것을 권한다.






<XML의 주요 개념>

HTML도 태그를 이용한다는  점에서 XML과 유사하지만 다음과 같은 차이점이 있다.

-HTML태그는 사용할 수 있는 태그의  종류가  한정적이지만  XML은 태그를 필요한 만큼 사용자가 정의해서 사용할 수 있다.
-HTML태그는 시작태그와 종료태그의 짝이나 문법에 약간 오류가 있더라도 에러 없이 사용할 수 있지만 XML은 문법적인 오류가 있으면 쓸 수 없다.


1) XML 파싱과 파서
HTML은 문법 체크를 느슨하게 하지만 XML은 엄격하다. 이러한 과정을 XML파싱이라고 하며 전용파서에서 처리한다.
XML 파서에는 태그의 중첩구조를 트리 구조로 표시해 DOM(Document Object Model)파서와 XML을 파싱할 때 발생하는 이벤트에서 데이터를 처리하는
SAX(Simple API for MXL) 파서가 있다. 웹브라우저와 이클립스에는 DOM파서가 내장되 있다.

2) wel-formed문서와 valid 문서
파싱했을 때 문법적인 오류가 없는 XML 문서를 wel-formed 문서라고 한다. valid 문서는 문법적인 오류가 없을 뿐만 아니라 태그의 순서와 속성까지 엄격하게 정의하는 DTD(Document Type Definition)까지 준수하는 문서다. valid문서는 주로 서버설정파일에 사용되며 WAS(Web Application Server)의 Web.xml이 대표적인 예다.

3) 엘리먼트의 노드값과 속성값
엘리먼트는 XML 문서를 논리적으로 구성하는 단위로서, 하나의 엘리먼트는 시작태그와 종료태그로 구성된다. 시작태그와 종료태그 안에는 노드값 또는 여타 엘리먼트가 들어갈수있다. 다음은 <finerss>라는 엘리먼트에 노드값과 하위 엘리먼트를 표시한 예다.

-노드값 표시
<finerss>http://finerss.tistory.com</finerss>

-하위 엘리멘트표시
<finerss>
<url>http://finerss.tistory.com</url>
</finerss>

또한 시작태그 안에는 속성값을 정의할 수 있다. 다음은 <finerss>라는 엘리먼트에 url이라는 속성을 정의한 2가지 예다.

-시작,종료태그 모두 표시
<finerss url="http://finerss.tistory.com"> </finerss>

-종료태그 생략
<finerss url ="http://finerss.tistory.com"  />

4)주석과 CDATA 섹션
주석은 파싱되지 않도록 하는 텍스트로서 HTML처럼 <!-- 주석내용 -->의 형식으로 기술한다.
그래서 주석은 데이터 구조에는 반영되지 않는다. 하지만 CDATA 섹션은 모든 문자를 텍스트 그대로 처리하도록 하면서 데이터 구조에도 반영된다.
예를 들어 데이터에 '>''<' 같은 기호가 들어가면 태그로 인지되므로 파싱에러가 발생한다. 따라서 그런부분은
<![CDATA[내용]]> 으로 처리를 해줘야 파싱 에러가 발생하지 않는다. 플렉스에서는 액션스크립트를 정의하는 영역을 CDATA 섹션으로 처리한다.

-CDATA 섹션 처리가 안 된 경우
<finerss>
<url><http://finerss.tistory.com></url>
</finerss>

-CDATA 섹션 처리가 되어 있는 경우
<finerss>
      <url>
              <![CDATA[http://finerss.tistory.com>]]
      </url>
</finerss>


5)엔티티 레퍼런스
<,>,&,'," 같은 기호는 XML에서 특수한 의미로 사용되는 문자다.하지만 문자그대로를 테이터로 표현해야 할경우가있는데
그럴경우 밑에표와같이 엔티티 레퍼런스로 표현을 해줘야한다.
  
                 개체
                표현 문자
                  &lt;;                      <
                  &gt;                      >
                  &amp;                      &
                  &apos;                      '  
                  &quot;                      "



6) 네임스페이스
XML 네임스페이스는 동일한 이름의 태그를 구분하고 애플리케이션에서 다르게 처리하도록 하는데 사용한다. 플렉스에서는 컴포넌트 계열(패키지 경로)를 분리해 처리하는데 사용된다. 예를 들어 플렉스에서 <s:Button>과 <mx:Button> 둘 다 버튼이긴 하지만, 전자는 플렉스 4에서 새로 추가된 spark 계열의 버튼이고 후자는 플렉스 4 이전에 할로 계열 버튼이다.





MXML은 XML을 확장해 정의한 것이기 떄문에 XML의 문법이 곧 MXML의 문법이다. 따라서 MXML은 다음과 같이 사용해야 한다.



<MXML 문법의 7가지 규칙>


규칙1. MXML은 다국어 표현을위해 UTF-8 사용을 권장한다.
첫 줄의 인코딩 속성을 변경하면 다른 코드셋을 사용할 수 있다.
-UTF-8 코드셋 : <?xml version="1.0" encoding="utf-8"?>
-EUC-KR 코드셋 : <?xml version="1.0" encoding="euc-kr"?>


규칙2. 루트 태그는 하나여야 한다.
플렉스는 웹 애플리케이션의 경우 3버전은 <mx:Application>, 4.x 버전은 <s:Application>  이 루트태그이다.

규칙3. 태그는 대소문자를 구분한다.

규칙4. 태그를 열었으면 반드시 닫아줘야 한다.
태그는 '<태그>' 로 시작해서 '</태그>' 로 끝난다. 하위 엘리먼트가 없는 태그는 '<태그/>' 로 쓸 수도있다.

규칙5. 태그는 다른 태그를 포함할 수 있지만 엇갈리게 쓸 수는 없다.
<mx:Button>                (o)                     <mx:Button>                  (x)
       <mx:Label>                                            <mx:Label>
       </mx:Label>                                           </mx:Button>
</mx:Button>                                         </mx:Label>

규칙6. 태그의 속성은 큰따옴표나 작은따옴표로 표시한다.
<mx:Button 속성명='xxx' />  와 <mx:Button 속성명="xxx" /> 의 결과는 같다.

규칙7. 태그의 속성은 하위 엘리먼트로 빼내어 쓸 수 있다.
속성 <mx:Button label="Test" /> 와 하위 엘리먼트로 표현한 <mx:Button><mx:label>Test</mx:label></mx:Button>은 동일한 내용이다.



<MXML과 플렉스 컴포넌트의 관계>

플렉스 빌더의 컴포넌트 뷰에 있는 컴포넌트들을 디자인 에디터로 끌어다 놓고 소스보기를 하면 그 컴포넌트에 해당하는 MXML 태그 코드가 생성되 있다. 이는 하나의 MXML 태그는 하나의 플렉스 컴포넌트와 매핑돼 있기 떄문이다. MXML과 실제 태그가 나타내는 플렉스 컴포넌트의 이름은 동일하다.




<XML네임스페이스>

네임스페이스는 태그의 속성처럼 다음과 같이 정의한다. URI에는 웹사이트 주소나 패키지 주소가 들어갈 수 있다. URI는 파서가 태그를 구분지어 처리하기 위해 사용하는 것이므로 유효한 웹사이트 주소가 들어갈 필요는 없다.

xmlns:네임스페이스명="URI"

네임스페이스는 정의가 된 엘리먼트를 포함한 자식 엘리먼트에 적용할 수 있다.
루트엘리먼트에 적용하면 모든 자식 엘리먼트가 그 네임스페이스를 사용할수있다

플렉스4에는 다음과같은 네임 스페이스가 루트 엘리먼트에 정의되어있다.

-xmlns:"http://ns.adobe.com/mxml/2009"
화면요소가 아닌 데이터나 로직 처리를 위한 엘리먼트에 적용된다.
ex><fx:Script>, <fx:Declaration>

-xmlns:s="library://ns.adobe.com/flex/spart"
플렉스 4에 새로이 추가된 spark계열의 컴포넌트에 사용하고자 할때 정의한다.

-xmlns:mx="livrary://ns.adobe.com/flex/mx"
플렉스 4 이전 버전에서 사용되는 할로 계열의 컴포넌트를 사용하고자 할떄 정의한다.

플렉스에서 네임스페이스를 추가하는 경우는 사용자 정의 컴포넌트의 패키지 경로를 지정할 때다. 알고보면 fx,s, mx의경우도 URI가 웹사이트 주소와 유사하지만 내부적으로는 플렉스 프레임웍 패키지의 경로를 처리하도록 되어있다.




<데이터바인딩>

데이터 바인딩은 특정 컴포넌트에서 사용할 데이터를 연결해주는 것이다. 무엇보다도 데이터가 바뀌면 플렉스가 해당 데이터를 사용하는 컴포넌트에게 변경사항을 알려 화면이 자동으로 업데이트된다는 장점이 있다.

*플렉스에서 데이터바인딩을 이용하면 데이터변경에 따른 화면 업데이트를 별도로 코딩하지 않아도 된다. 따라서 변경될 가능성이 있는 데이터를 화면에 보여줄 때는 데이터바인딩을 이용해야한다.

데이터바인딩을 하려면 참조하려는 변수값에 대해 속성명="{변수}" 로 해줘야한다.

*플렉스 4부터는 양방향 데이터바인딩을 사용할 수 있기떄문에 @기호를 {} 앞에붙여주면 두컴포넌트 모두 서로에게 데이터 변경을 적용할 수 있다.
 
만일 바인딩하려는 데이터가 액션스크립트 변수라면 변수명 앞에 [Bindable] 라고 표시해줘야한다.

'공부 > Flex' 카테고리의 다른 글

플렉스 UI 컴포넌트 정리  (0) 2011.08.25
플렉스란?  (0) 2011.08.25
Flex공부시작  (0) 2011.08.24



- 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값 읽어오기

'공부 > Flex' 카테고리의 다른 글

XML과 MXML의 이해  (0) 2011.08.25
플렉스란?  (0) 2011.08.25
Flex공부시작  (0) 2011.08.24

플렉스란?

공부/Flex2011. 8. 25. 10:35

플렉스는 XML태그로 된 소스파일(*mxml)을 컴파일해 다양한 플랫폼에서 구동 가능한 실행파일을 만들어내는 개발 플랫폼이다.

플렉스2 버전까지는 웹브라우저의 플래시 플레이어에서 구동가능한 실행파일(*.swf)만 만들어냈지만, 플렉스 3 버전에서는 데스크탑 애플리케이션(*.air),
플렉스 4.5버전에서는스마트폰에서 실행가능한 애플리케이션을 만들수 있게 되었다.

플렉스와 플래시의 차이점

플렉스가 플래시로부터 나온 기술이기 떄문에 서로 닮은 점이 많지만 사실 다른 점도 많다.

이러한 차이점이 생기는 근본적인 이유는 개발의 편의성 여부에 있다. 어느 한 쪽이 더 개발하기 편리하다는 것이 아니라 각 용도에 맞게 편리하게 개발할

수 있도록 만들어졌다는 뜻이다. 즉 플래시는 화면을 그려낼 수있는 디자인 성향이 강한 반면, 플렉스는 태그 기반 스크립트로 되어 있어 

일반 텍스트 에디터로도 개발이 가능한 개발자 성향이 강하다.


플렉스의 화면 구성 방법

플렉스는 UI를 빠르고 쉽게 만들 수 있도록 여러가지 컴포넌트를 기본적으로 제공한다.

플렉스 UI컴포넌트는 크게 컨트롤과 컨테이너로 분류할수있다. 하나의 플렉스 애플리케이션 화면은 컨트롤과 컨테이너의 조합으로 만들어진다.

컨테이너는 자식컴포넌트들을 수직, 수평, 바둑판 형태 등 다양한 방식으로 배치하거나 화면을 이동할 때 사용하는 것으로 컨트롤이나 또 다른 컨테이너를
포함 할 수 있다. 반면 컨트롤은 주로 사용자 키보드나 마우스 조작과 같은 입력을 처리하는 컴포넌트로서 컨테이너의 자식으로 들어간다.

플렉스의 역사

 플렉스1은 매크로미디어에서 2004 년 3월 출시했다. *,mxml소스를 WAS에 설치되어 작동하는 플렉스 프리젠테이션 서버에 올려 놓으면 서버에서

*.swf로 컴파일해서 화면에보여준다. 이때까지만해도 플렉스가 작동하려면 반드시 서버가 있어야 했따. 이방식은 1.5버전까지 지속됬으며

서버는 고가였기 떄문에 플렉스 대중화에 걸림돌이었다.

하지만 플렉스 2버전으로 오면서 서버 모듈 없이도 이클립스 기반으로 만들어진 개발툴인 플렉스 빌더에서 컴파일하면 *.swf 가 생성 되도록했다.

무엇보다도 플렉스 개발툴킷(Flex SDK)을 오픈소스로 전환해 많은 오픈소스 플렉스 컴포넌트가 만들어지는 계기가 되었다. 또한 개발 언어인

액션스크립트가 3.0으로 버전업되면서 랭귀지 지원, 실행 성능이 향상되었다.

플렉스 3 버전으로 오면서 웹에서만 실행되던 플렉스의 플랫폼을 데스크탑으로 확장하기위해 AIR 런타임을 함께 출시한다.

그리고 이떄부터 애플리케이션 성능과 디자인 협업, 개발 생산성 향상에 초점을 본격적으로 맞추기 시작한다.

플렉스4 버전으로 오면서 기존 컴포넌트의 구조적인 문제점을 해결하고자 spark이라는 컴포넌트를 추가했다. spark컴포넌트는 컴포넌트 모양과

기능을 개선했을 뿐만 아니라 MXML코드 안에서 화면정의, 변수 선언, 스킨, 스테이트 정의 영역을 구분함으로써 성능과 디자인협업 향상을 도모한다.

또한 새로운 CSS 정의 방법을 추가해 스타일을 유연하게 적용할 수 있게 했다. 그리고 플래시 플랫폼의 통합성을 강조하고자 플렉스 빌더의 브랜드명을

플래시 빌더로 바꾼다.

플렉스 4.5 는 데이터그리드, 폼, 밸리데이터, 포매터, 이미지 같은 새로운 spark 컴포넌트가 추가됬으며 스마트폰 앱 버전 개발을 지원한다.





'공부 > Flex' 카테고리의 다른 글

XML과 MXML의 이해  (0) 2011.08.25
플렉스 UI 컴포넌트 정리  (0) 2011.08.25
Flex공부시작  (0) 2011.08.24

Flex공부시작

공부/Flex2011. 8. 24. 17:44


한장한장 공부할때 마다 그흔적들을 남기면서

정리하여, 후에 간편하게 보면서 참고할수있도록 해야겠다

책은 okgosu의 플렉스4.5& 플래시빌더 정석

'공부 > Flex' 카테고리의 다른 글

XML과 MXML의 이해  (0) 2011.08.25
플렉스 UI 컴포넌트 정리  (0) 2011.08.25
플렉스란?  (0) 2011.08.25