Flex 모듈 화 응용 프로그램 개발

http://developer.51cto.com/art/201008/215642.htm
 
 
본 고 는 여러분 과 Flex 모듈 화 응용 프로그램 개발 에 중심 을 두 고 토론 하고 자 합 니 다. 모듈 (Module) 은 대형 Flex 응용 프로그램 을 만 드 는 해결 방안 입 니 다. 본 고의 소개 가 반드시 얻 을 수 있 을 것 이 라 고 믿 습 니 다.
Flex 모듈 화 응용 프로그램 개발
Roger Gonzalez 의 블 로그 에서 모듈 (Module) 에 관 한 글 을 보지 못 했다 면 플 렉 스 2 라 는 특성 뒤의 세부 사항 과 생각 을 알 아 봐 야 한다.여기 서 저 는 왜 이러 는 지 많이 연구 하고 싶 지 않 고 모듈 (Module) 을 사용 한 간단 한 Flex 프로그램 을 보 여 드 리 고 싶 습 니 다. 그 중에서 시사 점 을 얻 을 수 있 습 니 다.
모듈 (모듈)
모듈 (Module) 은 대형 Flex 프로그램 을 만 드 는 솔 루 션 입 니 다. 사용자 인 터 페 이 스 를 여러 가지 용도 로 분 산 된 작은 블록 으로 나 눌 수 있 습 니 다.예 를 들 어 (아래 Flex 2 문서 에서 나 온 것) 한 보험회사 에 수백 개의 양식 이 있 을 수 있 습 니 다. 각 분야 에 대한 각종 요구 유형 과 각종 응용 등 이 있 습 니 다.이 모든 폼 을 포함 하 는 Flex 프로그램 을 만 들 면 커 다란 SWF 파일 이 생 길 것 입 니 다. 많은 문제 가 있 을 것 입 니 다.
?응용 프로그램 이 클 수록 개발 과정 이 복잡 하 다.응용 프로그램 이 클 수록 테스트 과정 이 복잡 하 다.응용 프로그램 이 클 수록 배치 과정 이 복잡 하 다.SWF 파일 이 클 수록 불 러 오 는 시간 이 길 어 집 니 다.
나의 예제 프로그램 은 Flex 2 문서 의 프로그램 을 기반 으로 하지만, 나 는 그것 을 몇 가지 일반적인 문 제 를 설명 하기 위해 변경 을 했다.이 예 는 공유 데 이 터 를 공유 하 는 메 인 프로그램 과 다른 세 개의 모듈 (Module) 을 보 여 줍 니 다.
그 중의 한 디자인 요 소 는 인터페이스의 사용 이 고 이 인 터 페 이 스 는 실질 적 으로 인터페이스 실현 자 와 사용자 간 의 계약 이다.이 예 는 내 가 말 한 뜻 을 설명 할 것 이다.모듈 (Module) 의 인터페이스 부분 은 필요 한 것 은 아니 지만 이후 의 개발 과 유 지 를 크게 간소화 할 수 있다.예 를 들 어 개발 자가 한 팀 이 보고 부분 을 맡 고 다른 팀 이 도표 부분 을 맡 는 다 면 처음에 인 터 페 이 스 를 사용 했다 면 필요 하면 인터페이스의 실현 은 공사 결과 에 영향 을 주지 않 고 충분 한 변형 을 할 수 있다.인 터 페 이 스 는 모듈 (Module) 에서 또 다른 역할 을 하 는데 나 는 다음 글 에서 이 점 을 밝 힐 것 이다.
모듈 (Module) 은 < mx: Application > 대신 < mx: Module > 을 루트 탭 으로 하 는 MXML 파일 (또는 ActionScript 파일) 입 니 다.< mx: Module > 탭 이 있 는 것 을 프로그램 으로 볼 수 있 지만 실행 할 수 없습니다.
이 예제 에는 메 인 프로그램 파일 과 인터페이스 가 있 는 두 모듈 이 있다.주 프로그램 파일 을 열 면 다음 을 볼 수 있 습 니 다:
프로그램 코드 

 


  
<mx:Panelxmx:Panelx="10"y="41"width="169"height="500"layout="absolute"title="Modules"> 

  
 <mx:Textxmx:Textx="10"y="24"text="Checkamoduletoloadit;unchecktounloadit"width="129"/>  

  
 <mx:RadioButtonxmx:RadioButtonx="10"y="97"label="None"selected="true"   

  
 click="removeModule()"/>  

  
 <mx:RadioButtonxmx:RadioButtonx="10"y="123"label="Chart"  

  
 click="removeModule();loadModule('ChartModule.swf')"/>  

  
 <mx:RadioButtonxmx:RadioButtonx="10"y="175"label="Table"  

  
 click="removeModule();loadModule('GridModule.swf')"/>  

  
 </mx:Panel>  

  
 

  
 <mx:Panelxmx:Panelx="187"y="41"width="500"height="500"layout="absolute"title="Module:{moduleName}">  

  
 <mx:ModuleLoaderidmx:ModuleLoaderid="currentModule"ready="readyModule(event)"   

  
 width="100%"height="100%"/>  

  
 </mx:Panel>  

  
 

 

첫 번 째 Panel 은 예제 에서 모듈 (Module) 로 딩 과 마 운 트 를 제어 하 는 RadioButtons 를 포함 하고 있 습 니 다.두 번 째 Panel 은 < mx: ModuleLoader > 탭 로드 모듈 (Module) 을 사용 하 는 곳 입 니 다.그 id 는 currentModule 의 ModuleLoader 입 니 다. ready 이벤트 에 관 한 이벤트 프로세서 가 있 습 니 다.Flex 모듈 화 에서 모듈 SWF 파일 을 충분히 불 러 와 서 사용 할 수 있 을 때 ModuleLoader 는 ready 이벤트 (또는 ModuleEvent. READY) 를 할당 합 니 다.
여기에 ready Module 함수 가 있 습 니 다. < mx: Script > 블록 에 있 습 니 다.
프로그램 코드 

 


  
privatefunctionreadyModule(event:ModuleEvent):void  

  
{  

  
 varml:ModuleLoader=event.targetasModuleLoader;   

  
 

  
 varichild:IExpenseReport=ml.childasIExpenseReport;   

  
if(ichild!=null){  

  
 ichild.expenseReport=expenses;   

  
}  

  
}  

  
 

 

ModuleLoader 의 child 속성 이 IExpense Report 류 로 어떻게 전환 되 는 지 주의 하 십시오.IExpense Report 는 모든 모듈 (Module) 이 실 현 된 인터페이스 이다.모든 모듈 이 이 인 터 페 이 스 를 실현 하기 만 하면 응용 프로그램 에 쉽게 적응 할 수 있다.다른 폼 이나 보고 서 를 만 들 필요 가 있 을 때 그 용 도 를 상상 해 보 세 요.주 프로그램 을 새 모듈 에 IF 문 구 를 추가 할 필요 가 없습니다. 새 모듈 에서 IExpensereport 인 터 페 이 스 를 실현 하면 프로그램 에서 완벽 하 게 실행 할 수 있 습 니 다.
IExpenseReport 인터페이스:
프로그램 코드 

 


  
publicinterfaceIExpenseReport  

  
{  

  
functionsetexpenseReport(ac:ArrayCollection):void;  

  
}  

  
 

 

각 모듈 (Module) 은 이 인 터 페 이 스 를 실현 하고 각자 의 expense Report 라 는 set 함 수 를 정의 합 니 다.다음은 ChartModule 의 루트 태그 와 인터페이스 IExpense Report 의 실현 입 니 다.
프로그램 코드 

 


  
<mx:Modulexmlns:mxmx:Modulexmlns:mx="http://www.adobe.com/2006/mxml"implements="IExpenseReport"  

  
 layout="vertical"  

  
 percentWidth="100"percentHeight="100">  

  
 <mx:Script><![CDATA[  

  
importmx.collections.ArrayCollection;  

  
[Bindable]publicvarexpenses:ArrayCollection;  

  
 

  
publicfunctionsetexpenseReport(ac:ArrayCollection):void  

  
{  

  
expenses=ac;  

  
}  

  
]]></mx:Script> 

  
...  

  
 </mx:Module>  

  
 

 

주 프로그램 으로 돌아 갑 니 다. RadioButton 의 click 이 벤트 는 현재 불 러 온 모듈 을 마 운 트 해제 하고 새 모듈 을 불 러 옵 니 다.다음은 ChartModule 의 RadioButton 태그 입 니 다.
프로그램 코드 

 


  
<mx:RadioButtonxmx:RadioButtonx="10"y="123"label="Chart"click="readyModule('ChartModule.swf')"/> 

  
 

 

이 click 이 벤트 는 위 에 열 거 된 ready Module 이 벤트 를 호출 합 니 다.
컴 파일 및 실행 프로그램
FlexBuilder 2 를 사용 했다 면 프로젝트 를 변경 한 Properties 가 모듈 (Module) 을 "Applications" 로 포함 하 는 지 확인 하 십시오.이렇게 FlexBuilder 2 회 는 SWF 파일 에 컴 파일 하여 bin 폴 더 에 넣 습 니 다.
FlexBuilder 메모: 모듈 (Module) 을 사용 하 는 프로젝트 를 만 들 려 면 프로젝트 의 Properties 를 사용 하여 모듈 파일 을 "Applications" 로 사용 하 십시오.이것 은 그들 을 SWF 파일 로 컴 파일 할 것 이다.
SWF 파일 이 생 성 되면 메 인 프로그램 을 실행 하고 RadioButtons 를 눌 러 모듈 (Module) 사 이 를 전환 할 수 있 습 니 다.
FlexBuilder 주의: FlexBuilder 는 모듈 (Module) 과 메 인 프로그램 에 대한 종속 정 보 를 저장 하지 않 습 니 다.모듈 (Module) 을 변경 하기 만 하면 주 프로그램 이나 다른 종속 모듈 (Module) 을 다시 컴 파일 해 야 할 수도 있 습 니 다.
SWF 파일 최적화
주 프로그램의 SWF 파일 과 Flex 모듈 화 된 모듈 의 SWF 파일 을 살 펴 보면 크기 차이 가 많 지 않 습 니 다.모듈 의 SWF 와 메 인 프로그램 SWF 에는 같은 구성 요소 정의 가 많다 는 뜻 이다.
FlashPlayer 는 키 트 (symbol) 의 복사 본 을 저장 하지 않 습 니 다.예 를 들 어 메 인 프로그램 에 Button 구성 요소 가 있 고 모듈 (Module) 에 도 Button 구성 요소 가 있다 면 FlashPlayer 는 모듈 에서 Button 을 불 러 오지 않 을 것 입 니 다. 메 인 프로그램 에 정의 되 어 있 기 때 문 입 니 다.
- link - report = report. xml 를 사용 하여 주 프로그램 에 연 결 된 모든 부품 정 보 를 포함 하 는 파일 을 만 듭 니 다.그리고 모듈 (Module) 을 컴 파일 할 때 그 report. xml 파일 을 사용 합 니 다.
프로그램 코드 

 

  
mxmlc-load-externs=report.xmlChartModule.mxml 
 

ChartModule 이 컴 파일 될 때 report. xml 파일 에 열 거 된 모든 부품 은 SWF 에서 생략 됩 니 다.내 가 report. xml 파일 을 사용 하지 않 고 ChartModule. swf 를 컴 파일 할 때 크기 는 202 K 이다.내 가 report. xml 파일 을 사용 할 때 SWF 의 크기 는 68K 에 불과 했다.이것 은 모듈 (Module) 의 로드 시간 을 크게 줄 였 다.
글 의 시작 이 모듈 (Module) 에 이 를 때 나 는 인터페이스 가 또 다른 역할 을 한다 고 말 한 적 이 있다.인 터 페 이 스 를 사용 하지 않 고 메 인 프로그램 에서 모듈 을 참조 하 는 클래스 를 가정 합 니 다.링크 - report 를 실행 할 때 모듈 류 는 report. xml 에 나타 납 니 다.링크 - report 컴 파일 모듈 (Module) 을 사용 할 때 모듈 은 자신의 SWF 에 포함 되 지 않 습 니 다!처음에 이것 은 문제 가 되 지 않 았 다. 비록 메 인 프로그램 이 모듈 의 정 의 를 포함 하기 때문에 매우 커 졌 지만.그러나 모듈 을 바 꿀 때 무슨 일이 일 어 났 느 냐 가 중요 하 다.주 프로그램 을 다시 컴 파일 하지 않 았 다 면, 주 프로그램의 SWF 파일 은 변 경 된 것 이 아니 라 모듈 (Module) 의 오래된 정 의 를 포함 할 것 입 니 다.
프로그램 코드 

 


  
mxmlc-link-report=report.xmlMain.mxml  

  
 mxmlc-load-externs=report.xmlChartModule.mxml   

  
//etc.  

  
 

 

이 기술 을 사용 하여 모듈 (Module) 의 크기 를 줄 이기 로 결정 하면 터미널 사용자 가 사용 하 는 항상 모듈 (Module) 의 최신 버 전 을 확보 하기 위해 인 터 페 이 스 를 사용 하 십시오.
FlexBuilder 주의: FlexBuilder 는 한 프로젝트 에서 이 를 할 수 없습니다.모듈 (Module) 을 사용 하 는 프로젝트 를 만 들 것 이 확실 하 다 면, 공공 클래스 와 인터페이스 (이벤트 클래스 포함) 를 SWC (FlexLibrary Project) 에 넣 고 모듈 (Module) 을 각자 의 프로젝트 로 분리 하 는 것 을 고려 해 보 세 요.
또는 모든 것 을 하나의 Flex 프로젝트 로 만 들 고 제품 화 전 또는 테스트 전 배치 절 차 를 FlexBuilder 밖에서 최적화 할 수 있 습 니 다.
Flex 모듈 화 총화
?프로그램 을 여러 블록 으로 나 누 는 것 은 모든 사람 이 모듈 (Module) 을 사용 하 는 것 이 아니다.이런 방법 을 사용 하면 메 인 프로그램 이 평소 보다 작 을 뿐만 아니 라, 대부분의 사용자 들 은 전체 프로그램의 일부분 만 사용 합 니까?인 터 페 이 스 를 사용 하여 메 인 프로그램 이나 모듈 (Module) 을 불 러 오 는 모듈 과 통신 합 니 다.이것 은 유지 보 수 를 쉽게 합 니 다.?- link - report 명령 매개 변 수 를 사용 하여 주 프로그램 을 컴 파일 하여 사용 부품 목록 을 만 듭 니 다.?주 프로그램 에서 - load - externs 와 report. xml 컴 파일 모듈 (Module) 을 사용 하면 더 작 아 질 수 있 습 니 다.