FLEX Builder 2 를이용한 FLEX 어플리케이션제작 홍성원 한국어도비시스템즈기술영업부차장 FLEX 어플리케이션을제작하기위해서는먼저 FLEX의컴포넌트기반개발방법을이해해야한다. FLEX는컴포넌트기반개발방법을지원하므로개발자는제공되는 FLEX 컴포넌트를사용하여어플리케이션을개발하거나컴포넌트를조합하여새로운컴포넌트를제작할수있다. FLEX 어플리케이션을제작할때가장먼저하는작업은컨테이너라는컴포넌트를사용하여사용자인터페이스를정의하는것이다. 컨테이너는다양한사용자인터페이스컨트롤이나다른컨테이너를포함하는스크린상의사각형영역으로 Box, Grid 컨테이너등이있다. 컨트롤은 Button이나 TextInput 등과같이사용자인터페이스를구성하는요소를말한다. 예를들어보자. < 그림 1> 은 Box 컨테이너에 3개의 Button과 1개의 ComboBox를추가한예다. 왼쪽에있는화면은 HBox(Horizontal Box) 라는컨테이너를사용한예로, HBox 컨테이너를사용하면이컨테이너내에포함된사용자인터페이스컨트롤을수평으로배치한다. 오른쪽화면은 VBox (Vertical Box) 컨테이너를사용한예로, 컨테이너내의컨트롤을수직으로배치한다. < 그림 1> Box 컨테이너에 3 개의 Button 과 1 개의 ComboBox 를추가한예 FLEX 어플리케이션에서는다양한컨테이너와컨트롤을사용하여사용자인터페이스를구성하게되고이는 MVC(Model-View-Controller) 디자인패턴에의하면 View에해당하는요소이다. FLEX 어플리케이션에서 Model은 MXML이나 ActionScript 언어를사용하여정의할수있다. MXML은사용자정의메쏘드가필요하지않은단순한데이터모델을정의할때사용되고 ActionScript는사용자정의메쏘드를가지거나복잡한데이터모델을정의할때사용된다. FLEX Builder 2 를이용한 FLEX 어플리케이션제작 1/12
< 그림 2> 는데이터모델을사용하는 FLEX 어플리케이션구조를보여준다. FLEX에서는이와같이데이터모델을정의한후데이터바인딩이라는개념을사용해서데이터를사용자인터페이스컨트롤에디스플레이하게된다. 데이터바인딩을사용하면사용자인터페이스에서사용자가입력하거나선택한데이터를데이터모델로보내거나데이터모델의데이터를사용자인터페이스에디스플레이할수있다. 또한서버측데이터를직접 FLEX 사용자인터페이스컨트롤에바인딩할수도있다. 웹서비스의결과값을정의된데이터모델로바인딩하고, 이값을 TextInput이나 Label 등의사용자인터페이스에디스플레이하는것이그예이다. 또한데이터모델에서 FLEX가제공하는 Validator 클래스를사용하면데이터에대한유효성검사를자동으로수행할수있다. 예를들어우편번호를입력받는화면에서 ZipCode validator를사용하면우편번호형식의데이터가입력되었는지를클라이언트단에서검사하고적절한오류메시지를디스플레이할수있다. 이와같이 FLEX 어플리케이션은어플리케이션의사용자인터페이스, 데이터와비즈니스로직을분리시킬수있는 MVC 디자인패턴으로구성할수있다. < 그림 2> 데이터모델을사용하는 FLEX 어플리케이션구조 FLEX 어플리케이션의작동구조그러면간단한 FLEX 어플리케이션을작성해보기전에 FLEX 어플리케이션의작동구조를알아보자. FLEX 어플리케이션은 FLEX 소스코드를컴파일하면생성되는바이너리형태의 swf 파일을웹서버에올려놓고사용자가지정된 url을호출하면웹서버가 FLEX swf을서비스하는구조로동작하게된다. FLEX Builder 2 를이용한 FLEX 어플리케이션제작 2/12
FLEX 어플리케이션을서비스할수있는웹서버는다음세가지유형이있다. 단순웹서버정적인페이지요청에대해 HTML 페이지를서비스하는단순한웹서버를말한다. IIS나아파치등의그예이며, 이경우개발자는 FLEX 어플리케이션을미리컴파일한후 FLEX 어플리케이션을임베디드하는 wrapper html 페이지를작성해서웹서버에올려놓고사용자는 wrapper html 페이지를실행해서 FLEX 어플리케이션을실행하게된다. 웹어플리케이션서버 JRun, Coldfusion 등과같이동적으로 FLEX 어플리케이션을구동하는페이지를생성할수있는서버를말한다. 이경우에도역시 FLEX Data Service 2 기능을사용하지않는다면 FLEX 어플리케이션을미리컴파일해서생성된 swf 파일을웹어플리케이션서버에올려놓고웹어플리케이션서버가동적으로 FLEX 어플리케이션을구동하는페이지를생성하도록할수있다. J2EE 어플리케이션서버나서블릿컨테이너 :FLEX 어플리케이션에서 FLEX Data Service 2 기능을사용할경우에는 JRun, Tomcat, 웹스피어, 웹로직등의 J2EE 어플리케이션서버나서블릿컨테이너가필요하다. 참고로 FLEX Date Service 2를설치할때 JRun 4 개발자버전이같이제공되는데이개발자버전은실제운영에는사용할수없고개발시테스트용도로만사용가능하다. 그러면 FLEX 어플리케이션을개발하는단계를살펴보도록하자. 1. FLEX Builder 2 등의통합개발환경을사용한 MXML 파일 (FLEX 소스코드 ) 작성 2. 필요한컨테이너추가 3. 컨테이너내에 Button, TextInput 등의필요한사용자인터페이스컨트롤추가 4. 데이터모델정의 5. 데이터호출을위한웹서비스나 HTTP 서비스, 원격자바객체지정 6. 입력된데이터에대한유효성검사루틴추가 7. 컴포넌트를확장하는기능이필요한경우, ActionScript 코드추가 8. 완성된어플리케이션의 swf 파일컴파일 FLEX 어플리케이션개발시에는 MXML 언어와 ActionScript 라는두가지언어를사용하게된다. MXML 은 XML 기반언어로 FLEX 에서제공하는다양한사용자인터페이스컨트롤들을사용하여 사용자인터페이스를정의하는데사용된다. FLEX Builder 2 를이용한 FLEX 어플리케이션제작 3/12
ActionScript는 ECMA-262 Edition 4 기반의스크립트언어로주로클라이언트단에서처리되는로직이나함수를정의하기위해사용된다. FLEX에서제공되는컴포넌트는 ActionScript 클래스라이브러리로구성되어있기때문에 MXML 태그는 ActionScript 클래스나 ActionScript 클래스의속성에해당되게된다. MXML로작성한어플리케이션을컴파일하면사용한 MXML 태그에해당하는 ActionScipt 객체를포함하는 swf 파일이생성되는것이다. 예를들어 MXML 태그를아래와같이작성하면 label 속성값에 Submit 라는값을갖는 Button 객체가하나생성되게된다. <mx:button label= Submit /> FLEX 어플리케이션개발예제그러면 FLEX Builder 2를사용해서 TextInput, TextArea, Button 컨트롤로구성된간단한 FLEX 어플리케이션을하나만들어보도록하자. 먼저 < 그림 3> 과같이 File/New/FLEX Project를메뉴를선택하고새로운 FLEX 프로젝트를생성한다. FLEX Project는하나의 FLEX 어플리케이션을구성하기위해필요한모든파일의집합으로, 프로젝트유형은 < 그림 4> 와같이 3가지유형이있다. 이번실습에서는 FLEX Data service 2나 Coldfusion, Flash Remoting을사용하지않을것이므로첫번째 Basic 옵션을선택하고프로젝트이름을 FirstDemo 라고입력한뒤 Next 버튼을누른다. < 그림 3> 새로운 FLEX 프로젝트생성 FLEX Builder 2 를이용한 FLEX 어플리케이션제작 4/12
< 그림 4> 프로젝트유형선택 다음화면에서는 Project name 항목에 FristDemo 를입력하고 folder 는 Browse 버튼을눌러 Project 파일을저장할디렉토리를지정한다. < 그림 5> < 그림 5> 프로젝트이름및디렉토리지정 이렇게 Project 가생성되면다음과같은서브디렉토리와파일이생성되고각각의파일은다음과 같은용도로활용된다. bin : 컴파일된 FLEX 어플리케이션파일 (swf 파일 ) 이저장되는디렉토리 FLEX Builder 2 를이용한 FLEX 어플리케이션제작 5/12
html-template : 생성된 swf를임베드할수있는 html wrapper 페이지가저장되는디렉토리.settings : 해당프로젝트에관련된 FLEX Builder에대한여러가지설정파일이저장되는디렉토리.actionSciprtProperties,.FLEXProperties,.project 파일 : 프로젝트설정파일들 파일명을따로지정하지않으면 Main application file은프로젝트이름과동일하게생성되므로 First Demo.mxml이라는파일이생성된다. FirstDemo.mxml 파일을선택하고 FLEX Builder 2 상단의 Run 버튼을누르면 FLEX 어플리케이션이컴파일된후실행된다. < 그림 8> 과같이 Project 메뉴에서 Build Automatically 옵션을선택해놓으면 main application file이수정되고저장될때마다자동으로 FLEX Builder 2가 mxml 파일을컴파일해서업데이트된 swf 파일을생성해준다. < 그림 7> FLEX 어플리케이션실행하기 < 그림 8> Build Automatically 옵션이선택된상태 FLEX Builder 2 를이용한 FLEX 어플리케이션제작 6/12
FLEX 어플리케이션개발과정점검 간단한 FLEX 어플리케이션을 3 페이지에서설명한 FLEX 어플리케이션개발단계에따라작성해 보도록하자. < 그림 9> < 그림 9> 간단한 FLEX 어플리케이션 1. MXML 어플리케이션파일은프로젝트생성단계에서이미만들었고파일이름은 FirstDemo. mxml 이다. 2. 필요한컨테이너를추가한다. < 그림 9> 에서보면사용자인터페이스에서사용된컨트롤들이세로로배치되어있으므로 VBox라는컨테이너를사용하면된다. main application에서사용되는 Application 컨테이너의 layout 속성을아래와같이 vertical 로지정하면 VBox 컨테이너와동일하게동작하므로추가로 VBox 컨테이너를삽입할필요가없다. <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> </mx:application> 3. 다음으로필요한사용자인터페이스컨트롤을구성하기위해 DataGrid 와 Button 을추가한 다. FLEX 에서제공하는컨트롤은 Editor 에서 Source 보기모드로 MXML 태그를직접입 FLEX Builder 2 를이용한 FLEX 어플리케이션제작 7/12
력할수도있고, Design 모드로전환한후왼쪽하단 Component 패널에서드래그해서삽입할수도있다. 두가지방법중더편리하다고생각되는옵션으로 < 그림 10> 과같이 DataGrid와 Button을삽입한다. 차후에재사용하기위해 DataGrid의속성은미리지정해준다. dataprovider라는속성은 DataGrid에표시될데이터를지정하는속성으로 reivewlist라는변수에데이터모델을정의할예정이므로미리아래와같이데이터바인딩을지정해놓는다. <mx:datagrid dataprovider ="{reviewlist}"> <mx:columns> <mx:datagridcolumn datafield=" 이름 " id="reviewercol" headertext="reviewer"/> <mx:datagridcolumn datafield=" 날짜 " headertext="review Date" labelfunction="mydateformat"/> </mx:columns> </mx:datagrid> < 그림 10> DataGrid 와 Button 을삽입한화면 4. 다음으로어플리케이션에서사용할데이터모델을정의하기위해간단한 xml 파일을하 나만들고 FristDemo 프로젝트폴더에 testdata.xml 이라는이름으로저장한다. FLEX Builder 2 를이용한 FLEX 어플리케이션제작 8/12
<?xml version="1.0" encoding="utf-8"?> <list> <review> <reviewer> 홍길동 </reviewer> <review_date>2005-07-11 10:00:38.0</review_date> </review> <review> <reviewer> 김영수 </reviewer> <review_date>2005-02-15 11:00:38.0</review_date> </review> <review> <reviewer> 박찬호 </reviewer> <review_date>2005-02-15 11:00:38.0</review_date> </review> </list> 5. 다음단계는데이터모델을액세스하기위한객체를정의하는단계로, 여기에서는 HTTPSerivce 객체를이용할예정이므로다음과같은코드를 mx:application 태그바로아 래 3 번째줄에삽입한다. <mx:httpservice id="simpletest" url="testdata.xml" result="reviewlist=simpletest.lastresult.list.review"/> 여기서 HTTPService 태그의 result 속성은 http 서비스를통해데이터를제대로불러온후수행할명령을입력하는부분인데, HTTPSerivice에서가져온결과값은 HTTPService의 id.lastreult라는속성으로액세스가능하므로 reviewlist라는변수에가져온결과값중에서반복되는 reviewer와 review_date 데이터를지정하기위해위와같이코드를작성한다. 6. 이어플리케이션에는데이터유효성검사루틴이별도로필요하지않으므로날짜데이터를 DD-MMM-YY" 형식으로포맷하여보여주는함수를추가해보자. 먼저 FLEX에서제공하는 DateFormatter 클래스를선언하고 formatstring을 DD-MMM-YY" 라는형식으로지정한다. <mx:dateformatter id="mydate" formatstring="dd-mmm-yy"/> FLEX Builder 2 를이용한 FLEX 어플리케이션제작 9/12
그리고위에서선언된 DateFormatter 를이용하여 DataGrid 의날짜데이터를포맷할때사 용할함수를 <mx:script> 태그내에삽입한다. private function mydateformat(item:object,column:datagridcolumn):string { return mydate.format(item[column.datafield]); } 7. HttpService 를수행한결과를저장하기위한 reviewlist 라는이름을가지는변수를선언하 고변수유형은 ArrayCollection 으로지정한다. 참고로 ArrayCollection 은 FLEX 어플리케이 션에서반복적인데이터구조를저장하기위해가장많이사용되는데이터유형이다. <mx:script> <![CDATA[ import mx.collections.arraycollection; [Bindable] private var reviewlist:arraycollection; ]]> </mx:script> 마지막으로어플리케이션이실행될때 HTTPService 를호출하기위해다음과같이어플리 케이션태그를수정한다. <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationcomplete="simpletest.send();" fontsize="12" > 8. Run 버튼을눌러 FLEX 어플리케이션을수행해본다. 이상으로기본적인 FLEX Builder 2 를사용하여 FLEX 어플리케이션을작성해보았다. 기본개념만이해하면 FLEX Component explorer 어플리케이션 * 이나 FLEX 2 Language reference 문서 ** 에서제공되는다양한 FLEX 컨트롤의 API 를참조하면다양한형태의 FLEX 컨트롤을사용 FLEX Builder 2 를이용한 FLEX 어플리케이션제작 10/12
한어플리케이션개발이충분히가능하다. 다음글에서는 FLEX 에서제공되는 Chart 컨트롤의사용법을알아보고이를활용하여데이터를 시각적으로보여주는 Chart 어플리케이션을작성해보도록하겠다. * FLEX Component explorer 어플리케이션 http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html ** FLEX 2 Language reference 문서 http://livedocs.macromedia.com/flex/2/langref/index.html <Tip> FLEX Builder 2 에대한추가정보는 Using FLEX Builder 2 문서 (http://download.macromedia.com/pub/documentation/en/flex/2/flex2_usingflexbuilder.pdf) 나 FLEX Builder 2 의 Help 메뉴에서제공되는도움말을참고하면된다. FLEX Builder 2 를이용한 FLEX 어플리케이션제작 11/12
< 별첨자료 > 완성된코드 <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationcomplete="simpletest.send();" fontsize="12" > <mx:script> <![CDATA[ import mx.collections.arraycollection; [Bindable] private var reviewlist:arraycollection; private function mydateformat(item:object,column:datagridcolumn):string { return mydate.format(item[column.datafield]); } ]]> </mx:script> <mx:httpservice id="simpletest" url="testdata.xml" result="reviewlist=simpletest.lastresult.list.review"/> <mx:dateformatter id="mydate" formatstring="dd-mmm-yy"/> <mx:datagrid dataprovider ="{reviewlist}"> <mx:columns> <mx:datagridcolumn datafield="reviewer" id="reviewercol" headertext=" 이름 "/> <mx:datagridcolumn datafield="review_date" headertext=" 날짜 " labelfunction="mydateformat"/> </mx:columns> </mx:datagrid> <mx:button label="button"/> FLEX Builder 2 를이용한 FLEX 어플리케이션제작 12/12