하루가 다르게 신기술이 쏟아진다. 시시각각 변화하는 IT 환경을 보고 있자면 문득 스펜서 존슨의 「누가 내 치즈를 옮겼을까」라는 책이 떠오른다. 사람들은 변화를 진행하고 있는 일의 일부라고 생각할 뿐 생활의 일부로 받아들이지 않는다. 자신이 하고 있는 일이 언제까지 계속 안정적으로 지속될 수 있을 것인가? 우리는 언제나 변화하고 있는 환경에 대처하는 준비가 필요하다. X인터넷의 활용 가치가 부각되는 요즘 관련 기술들에 대해 조금만 더 귀를 기울여 보자. 준비가 되었다면 지금부터 새로운 치즈인 ‘플렉스’를 향한 여행을 시작해 보자.

플렉스의 설치
플렉스의 탄생과 그 특성에 대해서는 각각 1, 2부에서 살펴봤다. 이 글에서는 플렉스의 설치에 관한 내용부터 접근해 보겠다. 여기서 설치하는 플렉스는 윈도우용 버전이며, 설치 파일은 .exe 파일로 제공되어 더블클릭만으로 쉽게 설치할 수 있다(만약 자바 애플리케이션 서버가 설치되어 있는 상태에서 플렉스를 설치한다면 설치 완료 후 해당 디렉토리에 war 파일의 압축을 풀어 배포하면 된다). 설치 도중 인스톨 옵션을 선택하는 항목이 나타나는데, 기존 자바 애플리케이션 서버가 설치되어 있는 곳에 플렉스를 설치할 것인지 또는 JRun4와 통합된 플렉스를 설치할 것인지를 선택해야 한다. 필자는 JRun4와 통합되어 있는 설치를 선택했다. JRun4와 통합된 플렉스를 설치하면 다음과 같은 폴더가 구성된다.

JRun4와 통합된 플렉스를 설치하면 war 파일 형태가 아닌 세 개의 폴더(flex, profiler, samples)가 생성되어 시스템에 위치하며, 기본적으로 8700포트가 사용된다. http://locathost:8700/samples 설치가 끝나면 샘플로 제작된 플렉스의 데모를 볼 수 있다. 자세한 설치 관련 사항은 플렉스 인스톨 문서(http://www.macromedia.com/go/flex_install)를 참고하기 바란다.

플렉스에서는 콜드퓨전이나 커뮤니케이션 서버와 같은 어드민 콘솔 형식의 사용자 컨피규레이션 툴은 제공하지 않는다. 서버의 설정은 flex-config 파일을 통해 가능하며, 여기서는 디버깅 정보 생성 여부(프로파일링 포함), 컴포넌트 관련 경로, 웹 서비스나 HTTP 서비스 그리고 리모트 오브젝트, 캐싱, 컴파일러, 플래시 플레이어 자동 감지, 로깅, 폰트 등을 설정할 수 있다.

플렉스 애플리케이션 제작에는 MXML과 액션스크립트가 사용된다. 두 가지의 언어로 작성된 코드는 플렉스 컴파일러에 의해 브라우저가 MXML 파일을 요청할 때 그에 상응하는 swf 파일로 컴파일해 사용자의 브라우저에서 보여진다. 현재 베타 4 테스트 중인 플렉스 빌더 ‘브래디(Brady)’로 제작하면 쉽고 빠르게 제작이 가능하지만, 일반적인 텍스트 에디터나 메모장을 사용해도 상관없다. 물론 자바 개발 툴인 이클립스 등을 사용해도 된다.

플렉스 컴포넌트
흔히 컴포넌트는 프로그램의 꽃이라 비유된다. 컴포넌트의 장점이라 한다면 간단한 설정을 통해 프래그램에서 다양한 효과를 손쉽게 구현할 수 있다는 데에 있다. 플렉스에서 컴포넌트들은 모두 액션스크립트의 MovieClip 클래스로부터 상속받아 사용된다(<그림 1>).

<그림 1> 플렉스 컴포넌트의 계층 구조

무비클립은 플래시에서 가장 많이 사용되는 요소 중 하나로, 외부로부터 불러들이는 플래시 무비나 그림들은 모두 무비클립 형태로 이용된다. 플렉스 프로그램의 개발시에도 개발자가 직접 만든 플래시 컴포넌트를 플렉스 애플리케이션에서 사용할 수 있다. 그러나 이때에는 작성된 결과물을 일반 swf 파일이 아닌 swc 파일 형식으로 만들어 사용해야 한다.

플래시에서는 컴포넌트의 개념이 스마트클립에서 출발해 MX 버전부터 본격적으로 적용됐다. 따라서 역사가 길다고 할 수는 없으나 유용한 컴포넌트들이 많이 존재한다. 컴포넌트 중 가장 일반적인 UI 컴포넌트 사용 예제를 살펴보자(<리스트 1>).

<리스트 1> component.mxml

<?xml version="1.0" encoding="utf-8"?><!--MXML 파일의 시작 부분에는 항상 XML을 선언해야 한다.--> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">     <mx:Accordion heightFlex="1">       <mx:Canvas label="BUTTON">         <mx:Button x="70" y="45" alpha="20" label="submit" />         <mx:Button x="160" y="45" label="cancel" />       </mx:Canvas>       <mx:Canvas label="RADIO BUTTON">         <mx:RadioButton x="70" y="45" label="radio1" groupName="radio" />         <mx:RadioButton x="70" y="65" label="radio2" groupName="radio" />         <mx:RadioButton x="70" y="85" label="radio3" groupName="radio" />         </mx:Canvas>       <mx:Canvas label="CALENDAR">       <mx:DateField x="70" y="45" width="100"/>       <mx:DateChooser x="70" y="85" />       </mx:Canvas>     </mx:Accordion> </mx:Application>

<리스트 1>에서 컴포넌트의 내부 구성이 어떻게 되어 있는지는 전혀 알 수 없다(컴포넌트를 사용하면 사용자의 간단한 조작으로 원하는 형태의 결과물을 얻을 수 있다. 플렉스에서 사용되는 플래시 컴포넌트는 swc 파일로 존재한다). 몇 줄 되지 않는 코드에서 보여지는 화면은 정말 흥미롭다. 앞에서도 언급했듯 플렉스 컴포넌트는 무비클립 클래스에 기반을 두고 있다. 무비클립 클래스에 대한 자세한 내용은 「Flex ActionScript and MXML API Reference」를 참조하기 바란다.

<화면 1> 컴포넌트 예제

플렉스 컨트롤
컨트롤은 UI 컴포넌트의 컨트롤을 의미한다. 여기서는 Checkbox, Button, Text Area, 그리고 Combobox 컨트롤에 대해서 알아보자. 플렉스에서는 기본적인 컨트롤(버튼, 체크박스, 라디오 버튼 등)과 데이터 프로바이더 컨트롤(리스트, 트리, 콤보박스 등)을 제공한다.

<리스트 2> Control.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">   <mx:Script><!-- MXML에서 액션스크립트 구문을 사용할 때에는 항상 <mx:Script></mx:Script> 태그 안에서 사용해야 한다.-->     <![CDATA[     var cityArray : Array=[ <!?배열을 만들고 해당 값을 넣는다.-->       {label : "SEOUL", data :"SEOUL"},       {label : "TORONTO", data :"TORONTO"},       {label : "NEW YORK", data :"NEW YORK"}];     function addCity(){ <!--콤보박스에 새로운 아이템을 추가한다.-->       cityCombo.dataProvider.addItem("BUSAN","BUSAN");     }     function removeCity(){<!?콤보박스의 3번째 인덱스 아이템을 지운다.-->       cityCombo.dataProvider.removeItemAt(3);     }     ]]>   </mx:Script>   <mx:VBox id="myVbox">     <mx:CheckBox width="100" label="Checkbox?" />     <mx:ComboBox id="colorCombo">       <mx:dataProvider>       <mx:Array>         <mx:Object label="RED" data="RED"/>         <mx:Object label="BLUE" data="BLUE"/>         <mx:Object label="BLACK" data="BLACK"/>         </mx:Array>       </mx:dataProvider>     </mx:ComboBox>     <mx:ComboBox id="cityCombo" dataProvider="{cityArray}"/>       <!?콤보박스에 액션스크립트로 정의된 배열 값을 넣는다.-->     <mx:Button label="Add City" click="addCity()"/>     <mx:Button label="Remove City" click="removeCity()" /> <mx:TextInput id="myInput" width="150" /> …중략…

<리스트 2>에서 데이터 ComboBox 컨트롤에 데이터를 넣는 법, CDATA 섹션을 사용해 데이터를 처리하는 부분, MXML에서 Action 함수를 호출하는 부분은 유심히 봐야 한다. 기존의 데이터 ComboBox에 데이터를 설정하는 방법은 두 가지로 분류했다. colorCombo ComboBox에는 MXML 코드에서 직접 데이터를 넣었고, cityCombo ComboBox에는 프로그램적인 요소가 섞여 있을 경우 액션스크립트를 사용해 처리했다.

만일 XML 파서가 액션스크립트 구문 안에 ‘{‘ 나 ‘<’ 같은 문자들을 XML 코드로 인식해 파싱하게 되면 에러가 발생한다. 이런 경우에는 CDATA 섹션을 사용해 파싱하지 않고 파서에 넘겨주는 방법을 사용하며, 일반적으로 액션스크립트 블럭은 CDATA섹션으로 감싸주는 것이 좋다.

<화면 2> 컨트롤 예제

컨테이너 사용
컨테이너란 컴포넌트가 실행되는 것으로 알려져 있는 프로그램 빌딩 블럭 내의 애플리케이션이나 서브시스템을 말한다. 플렉스에서 컨테이너의 개념은 컨트롤을 담는 컴포넌트를 일컫는다. 보통 웹 프로그램에서는 화면을 프레임, 테이블 등으로 구성하지만 일반 윈도우 응용 프로그램 작성시에는 panel이나 Group Box 등을 이용해 화면을 구성하게 된다.

얼마 전 후배가 델파이로 작성된 프로그램을 갑자기 수정해야 할 일이 생겼다며 필자를 찾아 온 적이 있었다. 이 후배는 ASP, PHP, JSP 등 웹 프로그램만을 하다가 윈도우 응용 프로그램은 처음 접한 상황이었다. 그 후배가 필자를 급히 찾았던 이유는 기존에 구성된 폼에 패널을 추가해 화면을 재구성하는 내용이었다.

플래시는 Panel이나 Canvas 등을 사용해 화면을 구성하는 개념 없이 무비를 구성한다. 이 때문에 플렉스에서 컨테이너를 구성과 배치하는 것이 어색하게 느껴질 수도 있을 것이다. 가장 좋은 방법은 머릿속에 화면 구성을 생각해 놓고 자신이 생각한 그대로를 만들어 보는 것이다. 플렉스에서 컨테이너를 사용해 구성한 예제를 살펴보자(<리스트 3>).

<리스트 3> container.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">   <mx:XML id="treeModel" source="tree.xml"/><!?외부 XML 파일을 treeModel 변수로 참조--> 　   <mx:Panel id="main" title="Flex Samples Explorer">       <mx:HDividedBox backgroundColor="#FFFFFF" >         <mx:Tree id="topicTree" dataProvider="{treeModel}"/>}"/><!--tree 컴포넌트에 treeModel 변수로 참조된 XML 데이터를 삽입--> 　         <mx:TabNavigator id="tn"> 　      <mx:VBox label="Sample1">           아코디언 메뉴바 위치         </mx:VBox> 　      <mx:VBox > 　        <mx:VDividedBox > 　          데이터 그리드 위치 　        </mx:VDividedBox> 　        … 　      </mx:TabNavigator> 　      </mx:HDividedBox> 　      <mx:ControlBar horizontalAlign="right"> 　      </mx:ControlBar> 　    </mx:Panel> 　</mx:Application>

　
Panel 안에 Horizonatl divider로 좌우를 나눈 다음 좌측은 Tree가 위치하고, 우측은 다시 Tab TabNavigator로 나누었다. 오른쪽의 Tree 메뉴에서는 XML 파일에서 데이터를 읽어와 Tree 메뉴를 구성했다. 컨테이너를 사용해 화면을 구성할 때에는 일반 메모장이나 에디터 프로그램보다는 ‘브래디’를 활용하는 것이 더욱 편리하다. 마치 HTML로 화면 구성시 드림위버를 사용하는 것에 비유할 수 있다.

<화면 3> 컨테이너 예제

이벤트 사용
이벤트란 프로그램에 의해 감지되는 어떤 행동이나 발생된 사건 등을 가리킨다. 예를 들어 마우스 단추나 키보드 키를 누르는 것과 같이 사용자에 의해 발생하는 행위뿐 아니라, 특정 조건에 의해 시스템에서 발생한 일들도 이벤트로 간주된다.

대부분의 최신 응용 프로그램들은 이벤트에 반응하도록 설계되어 있기 때문에 프로그램을 만드는 데 있어 이벤트처리는 매우 중요하다. 플렉스 애플리케이션 역시 이벤트 처리가 중요한 것은 말할 것도 없다. 플렉스 애플리케이션에서는 액션스크립트를 사용해 발생되는 이벤트를 처리한다.

<리스트 4>는 기본적인 버튼 이벤트의 구성이다. 사용자가 버튼을 클릭하면 btnClick 함수를 호출한다. 여기서 MXML 파일에서 click 이벤트를 호출하는 방법은 자바스크립트의 문법과 거의 유사하다. ComboBox에 두 가지의 이벤트가 사용됐다. 콤보박스가 열릴 때 openEvt() 함수를 호출하고, 내용이 바뀔 때 changeEvt()가 실행되어 Object를 인자로 넘긴다.

<리스트 4> event1.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">   <mx:Script>     <![CDATA[       function openEvt(){<!--콤보박스가 열릴 때 호출된다.-->       forChange.text="";       }       function changeEvt(e){<!?콤보박스가 변경될 때 호출된다.-->         forChange.text=e.target.value+" "+" "+e.target.selectedIndex;       }       ]]>   </mx:Script>       <mx:ComboBox open="openEvt()" change="changeEvt(event)">       <mx:dataProvider>         <mx:Array>           <mx:String>Orange</mx:String>           <mx:String>Apple</mx:String>           <mx:String>Mango</mx:String>         </mx:Array>       </mx:dataProvider>   </mx:ComboBox>   <mx:TextArea id="forChange" width="100"/> </mx:Application>

　

<화면 4> 이벤트 1 예제		<화면 5> 이벤트 2 예제

<리스트 5>는 이벤트 리스너를 사용한 이벤트 처리 예제이다. 이벤트 리스너는 함수가 아닌 객체이므로 객체를 생성한 다음 addEventListener 메쏘드로 해당 이벤트를 추가한 후 사용해야 한다.

<리스트 5> event2.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application initialize="createListener()" xmlns:mx="http://www.macromedia.com/2003/mxml">   <mx:Script>     <![CDATA[       function createListener(){         var myListener = new Object();         myListener.click = function(event){           if(event.target.className == "Button"){             alert("Button Event");           }else if(event.target.className == "CheckBox"){             alert("CheckBox Event");           }         }         button1.addEventListener("click", myListener);         cb1.addEventListener("click", myListener);       }     ]]>   </mx:Script>   <mx:Button label="submit" id="button1"/>   <mx:CheckBox label="All Words" id="cb1"/> </mx:Application>

　
스타일 사용
플렉스 컴포넌트의 외형을 바꾸기 위해서는 스타일 프로퍼티를 사용해야 한다. 프로퍼티로는 크기, 폰트, 라벨 컨트롤 또는 배경색을 수정하는 데 사용되며, 한번 정의된 스타일을 이용해 모든 타입과 클래스에 이 속성을 적용시킬 수 있다. 또한 이 속성을 이용해 사용자가 적용하고 싶은 곳에만 스타일을 적용시킬 수도 있어 사용자가 애플리케이션을 제작할 때 매우 유연하게 컨트롤할 수 있다.

일반적으로 이 방법은 해당 파일에만 스타일을 적용할 경우 사용되며, 태그 안에 스타일 속성을 정의한다. 또한 StyleManager 클래스를 사용해 스타일을 적용하면 글로벌하게 스타일을 적용시킬 수 있다. StyleManager를 사용한 스타일의 적용 문법은 mx.styles.StyleMamager.styles.style_name.setStyle(“property”, value);과 같다.

<화면 6> 스타일 예제

스타일 프로퍼티를 직접 제어하는 방법은 mx.styles.StyleMamager.styles.style_name.property=“value”;과 같다. 글로벌한 스타일을 적용시킬 경우에는 타입과 클래스를 선택해서 적용시킬 수 있다.


다음은 setStyle()과 getStyle 메쏘드를 적용시킨 예제이다.

스타일시트가 적용되는 우선 순위는 <그림 2>와 같다.
◆ 해당 코드 라인에 정의된 경우 :
◆ setSyle() 메쏘드가 정의된 경우 : btn1.setStyle(“color”, “red”)
◆ 인스턴스 클래스 선택의 경우 :
◆ 타입 선택의 경우 : Button{ color : red }
또는 StyleManager.styles.Button.setStyle(“color”, “red”)
◆ Global 스타일 타입 선택의 경우 : Global{ color : red }
또는 StyleManager.styles.global.setStyle ("color”, "red”)

<그림 2> 스타일시트 적용 우선순위

드래그 앤 드롭 매니저 사용
리치 인터넷애플리케이션의 장점을 그대로 보여지게 하는 기능 중 하나이다. 컴포넌트 또는 리스트, 이미지 등의 데이터 이동이 마우스의 드래그 앤 드롭만으로 가능하다. <화면 7>에서 볼 수 있듯이 놀라운 효과의 구성이 플렉스에서는 너무도 간단하게 구현 가능하다.

<화면 7> 드래그 앤 드롭 예제 1

이 기능을 활용하면 시각적인 효과가 뛰어나고 사용하기 쉬운 애플리케이션을 제작할 수 있다. <리스트 6>은 Canvas 컨테이너에는 드래그가 가능하도록 MouseDown 이벤트를 정의하고, List 컨트롤에는 dragEnter, dragExit, dragOver, dragdrop 이벤트를 정의해 구성된 예제이다.

<리스트 6> dragAndDrop.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="400" height="600" marginLeft="6" marginRight="6" initialize="appInit()"> <mx:Script source="DragHandlers.as"/> <!--액션스크립트 코드를 불러들인다.--> <mx:Tile width="263"> <mx:Canvas backgroundColor="#FF0000" width="30" height="30" mouseDown="dragIt(event, 'Red 1','red')"> <!?Canvas에 드래그를 위해 mouseDown 이벤트를 정의한다.-->   <mx:Label text="1" x="8" y="6" width="22" height="24"/> </mx:Canvas> ... </mx:Tile> <mx:VBox> <mx:Label text="Drag red items into this list" /> <mx:List dragEnter="doDragEnter(event,'red')" <!?리스트 컨트롤에 dragEnter, dragExit, dragOver, dragDrop 이벤트를 정의한다.-->   dragExit="doDragExit(event);"   dragOver="doDragOver(event);"   dragDrop="doDragDrop(event,'firstList',['red'])"   widthFlex="1"   heightFlex="1"   height="50"   id="firstList" /> <mx:Label text="Drag blue items into this list" /> … DragHandlers .as import mx.managers.DragManager; <!--드래그 매니저, 드래그 소스의 클래스에서 임포트해야 한다.--> import mx.core.DragSource; function dragIt(event,text,format){   var ds : DragSource = new DragSource();     ds.addData(text, format); <!?데이터 소스에 인자 값으로 넘겨받은 text, format 데이터를 넣는다.-->     DragManager.doDrag(event.target , ds, mx.containers.Canvas,     {backgroundColor:event.target.backgroundColor, width : 30 , height:30},     undefined, undefined, 30); <!?doDrog 메소드를 호출한다. --> } function doDragEnter(event, format){ <!?인자 값으로 넘겨받은 format 값을 비교해 list 컨트롤에 추가 여부를 판단한다.-->   if(event.dragSource.hasFormat(format)||format=="any"){     event.handled = true;     event.target.drawFocus(true); } } function doDragOver(event){ <!?키값을 체크하여 copy, link, move를 결정한다.-->   if(Key.isDown(Key.CONTROL))     event.action = DragManager.COPY;   else if(Key.isDown(Key.SHIFT))     event.action = DragManager.LINK;   else     event.action = DragManager.MOVE; } function doDragDrop(event, target, formats){ <!--doDragOver 함수에서 정의된 내용을 바탕으로 list컨트롤에 추가한다.-->   var prefix:String = "";   if(event.action == DragManager.COPY)     prefix = "Copy of ";   else if(event.action == DragManager.LINK)     prefix = "Link to ";   doDragExit(event)   for(var i=0; i<formats.length; i++){     var data = event.dragSource.dataForFormat(formats[i]);     if(data != undefined){       this[target].addItem(prefix + data);       }   } } …

소스를 하나씩 살펴보자. 사용자가 Canvas 컨테이너를 드래그할 때 dragIt() 함수를 호출하며, 함수 내에 정의된 DragManager 클래스인 dodrag 메쏘드가 실행되어 Canvas가 드레그된다. 이때 드래그된 컨테이너가 타겟 컨테이너 위에 위치하면 dragEnter() 함수가 해당 컨테이너로의 추가 여부를 판단한다. 만일 조건이 성립되면 doDragDrop 함수를 통해 해당 아이템을 추가한다.

또한 doDragDrop() 함수는 doDragOver() 함수에서 데이터의 복사, 링크, 이동 여부를 판단해(함수에서 정의한 대로 <Ctrl> 키를 누르고 타겟 컨테이너 위에 위치하면 복사, <Shift> 키는 링크, 아무런 키의 누름이 없으면 이동으로 처리된다) 각 조건에 맞는 문자열을 List 컨트롤에 추가한다.

<화면 8> 드래그 앤 드롭 예제 2

액션스크립트 프로파일러
기존의 스크립트 언어에서 코드의 성능 측정(performance profiling)은 거의 불가능한 일이었다. 그러나 플렉스에서는 자신이 만든 프로그램의 성능을 측정할 수 있는 액션스크립트 프로파일러가 존재한다. 프로파일러는 J2SE 1.3 스펙을 지원하는 운영체제와 애플리케이션 서버에서 동작하며, 플래시 플레이어에서 실행되는 액션스크립트의 성능 데이터를 출력하고 리포트 생성기를 통해 출력된 데이터를 바탕으로 보고서를 보여준다(웹 브라우저를 통해 보여진다, http://localhost:8700/profiler).

프로파일러는 플래시 플레이어가 swf 파일을 실행할 때(플래시에서 디버깅 모드로 컴파일해야 한다. 즉 swd 파일이 존재해야 한다) 함수가 실행된다. 이 때 요구되는 시간은 밀리세컨드 단위로 측정하고 파일에 바이너리 포맷으로 시간 데이터를 기록한다. 파일에 기록된 바이너리 데이터는 프로파일링 세션 동안 swf 애플리케이션의 실행 내용을 보여준다. 액션스크립트 프로파일러를 통해 다음과 같은 성능 데이터 측정이 가능하다.

◆ 성능 스냅샷 요약(Performance Snapshot Summary) : 프로파일링 세션 동안 플레이어가 실행하는 모든 함수를 요약해서 보여준다. 요약 보고서는 다른 성능 분석의 시작점이 된다. 이 보고서는 호출 횟수, 누적 시간, 셀프타임 등이 보여진다. 셀프타임(self-time)이란 하나의 메쏘드가 실행되는데 걸린 총 시간을 말하고, 사용자들은 누적 시간 별, 셀프타임 별로 데이터를 정렬할 수 있다. 그리고 요약 보고서에 있는 이름을 클릭함으로써 성능이 좋지 않은 함수를 발견하고 수정 및 보완할 수 있다.
◆ 메쏘드 레벨 통계(Method-Level Statistics) : 한 명의 사용자가 로파일링 세션 동안 플레이어에서 실행하기 위해 선택되는 함수 하나의 통계를 보여준다. 성능 스냅샷 요약과 유사하게 호출 횟수, 누적 시간, 셀프타임을 보여준다. 정렬 기능을 지원하며 사용자들은 다른 메쏘드 레벨 통계로 가기 위해 함수 이름을 클릭할 수 있다.
◆ MXML/액션스크립트 소스 레벨 통계 : 액션스크립트 소스 레벨 통계 페이지는 로파일링 세션 동안 사용자가 선택한 함수의 통계를 보여준다. 이것은 호출 횟수를 라인별로 보여주며, MXML 컴포넌트들의 모든 태그 안에 있는 함수의 실행 시간을 보여준다.
◆ 프레임 기반 성능 요약(Frame-Based Performance Summary) : 프로파일링 세션 동안 업데이트되는 프레임 사이에 실행되는 모든 함수의 실행 시간을 보여준다. 그러나 기본적으로 프레임 기반 관점으로 데이터를 보여주는 성능 스냅샷 요약 보고서와 같다.
◆ 비동기 함수 레이턴시(Asynchronous Function Latencies) :모든 네트워크 함수의 지연 시간을 밀리세컨드로 보여준다.

일신우일신 ‘플렉스’
지금까지 플렉스에서 사용되는 기본 요소들에 대해 간단히 살펴봤다. 매크로미디어는 X인터넷의 선두 주자이며, 그 중 플렉스는 확실히 리치 인터넷 애플리케이션을 쉽고 빠르게 개발하기 위한 좋은 도구임에 틀림없다. 또한 지금 베타 4 테스트중인 플렉스 IDE 툴 ‘브래디’가 정식 발매되어 사용된다면 그 효과는 더할 나위가 없을 것이다. 플래시가 버전을 거듭할수록 언제나 새로운 모습을 보여왔듯 플렉스 역시 계속해서 새로운 모습을 보일 것임을 믿어 의심치 않는다. @