Flex/AIR/AS3/Etc2010.04.28 00:17

Flex4에서 변경된 부분 중 하나인 Declarations 데크레이션? 디크레이션? 음;; 하여간 이놈이 처음 나왔을때 과연 이놈이 뭐하는 놈인가 무지하게 궁금했습니다;; 물론, 설명이 있긴했지만

<!-- Place non-visual elements (e.g., services, value objects) here -->

위 설명으로 보면 서비스들이랑 vo 같은 non-visual elements를 코딩하는 곳이라는 건 알겠는데 실제 프로젝트에서 서비스랑 vo를 보통 클래스로 빼서 쓰기 때문에 크게 사용할 일이 없지 않을까 하는 생각이 들었습니다. 뭐 effect나 그런것만 정의하면 되지 않을까하는 생각이었는데 오늘 Cairngorm 프레임워크를 사용하다가 재미있는 사실을 알았습니다. 물론, 이미 알고 계신분들도 많겠지만 전 나름대로 신선한 느낌이었습니다;; 저만 그럴지도;;

오늘 사용해 보고 사용자 콤포넌트를 만들때 속성을 바로 이곳에서 컨트롤할 수 있다는걸 깨달았습니다. 음... 쉽게 설명하기 위해 일단 예제를 하나 만들어 보겠습니다.

우선 간단한 버튼이 3개있는 콤포넌트를 만들어 보았습니다.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" width="248" height="64">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
  <fx:Boolean id="button1Visible">true</fx:Boolean>
  <fx:Boolean id="button2Visible">true</fx:Boolean>
  <fx:Boolean id="button3Visible">true</fx:Boolean>
  <fx:uint id="button1Color">#000000</fx:uint>
  <fx:uint id="button2Color">#000000</fx:uint>
  <fx:uint id="button3Color">#000000</fx:uint>
 </fx:Declarations>
 <s:Label x="10" y="10" text="Custom Component" fontWeight="bold"/>
 <s:Button x="10" y="30" label="버튼1" visible="{button1Visible}" color="{button1Color}"/>
 <s:Button x="88" y="30" label="버튼2" visible="{button2Visible}" color="{button2Color}"/>
 <s:Button x="166" y="30" label="버튼3" visible="{button3Visible}" color="{button3Color}"/>
</s:Group>




음... 참 간단한 콤포넌트입니다 ㅋ;;
위 콤포넌트 처럼 Declarations에 Boolean, uint 등의 변수를 Flex 태그로 만들 수가 있습니다.

위 예제만 보더라도 어느 정도 이해하실 분들도 있겠지만 이제 저걸 어떻게 사용할지 보도록하겠습니다.

<?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:component="*" width="270" height="85">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <component:testComponent x="10" y="10"
        button1Color="#586421"
        button3Color="#A49F21"
        button2Visible="false">
 </component:testComponent>
</s:Application>




위 그림처럼 콤포넌트에서 만든 속성을 바로 사용할 수 있습니다.

이렇게 만들면 액션스크립트 없이도 간단한 속성은 바로 만들 수 있습니다. 나름 편리한것 같기도 ^^;


저작자 표시 비영리
신고
Posted by 코멧'★

티스토리 툴바