2010. 8. 6. 16:42 flex
[01-D1] Flex 개론, Flex 4 설치, 기본 Flex Application
[01-D1] Flex 개론, Flex 4 설치, 기본 Flex Application
[01] Flex 개론
- WebPage 상에서 동적인 애니메이션 기능이나 화려한 인터페이스를
구현하려면 개발자는 Flash와 JSP기술을 배워야 했습니다.
하지만 Flash는 프로그램과 개념적으로 다르기 때문에 즉 디자인 분야라
어려운 문제가 있었습니다. 이에따라 ADOBE사에서 Flex 프로젝트가 진행이
되었습니다.
Flex는 XML을 기반으로 하는 MXML파일과 OOP Action Script를 기반으로
클래스를 생성하여 구성되어 있으며 MXML은 디자인, User Interface를
처리하고, AS파일인 ActionScript 파일은 클래스를 구현하는데 사용됩니다.
이런 구조는 닷넷과 비슷한 형태이나 닷넷은 MS기반의 운영체제에서만
실행이되지만 Flex는 기존에 대부분의 브러우저가 Flash Player를
Plug In으로 가지고 있음으로 별다른 프로그램의 설치 없이 바로
모든 운영체제에서 실행 할 수 있습니다.
또한 안드로이드 2.2버전부터는 별다른 설치 없이 Flash, Flex의 사용이 가능함.
자바의 Applet은 JVM이 필요해 많은 클라이언트와 충돌이 발생했으나
Flex는 Flash Player를 기반으로 함으로 추가적인 VM등의 설치가 필요
없습니다.
또한 Flex는 ActiveX가 가지고 있는 실시간 Socket 통신 기능을 지원함으로
ActiveX에서 가능했던 메신저, 채팅등의 Application도 개발가능하며,
전자결재등의 솔루션도 구현이 가능합니다.
- Flex 2.0은 Flex 1.5버전에 비해 뛰어난 처리 속도를 지원하며,
Action Script 3.0을 지원하여 폭넓은 프로그램 문법을 지원 합니다.
Flex 3.0은 Desktop Application 개발이 가능하여 인터넷과 상관없는
프로그램을 개발가능하도록 Air가 추가되었습니다.
- XML을 사용하여 다양한 이기종간의 언어와 쉽게 연동 될 수 있습니다.
Flex는 서버단위 처리 언어로 JSP, ASP, PHP전부 사용 가능합니다.
- Flash 기반에 서버측 스크립트를 연동하는 기술과 원리는 같으나
개발자가 빠르게 화려한 User Interface를 개발할 수 있도록
미리 플래시 콘트롤을 제작하여 제공합니다.
- Ajax와 서버와의 통신원리등이 비슷하나 Ajax는 기존의 JavaScript+HTML의
확장 기술이나, Flex는 이를 이용하지 않고 새로운 MXML이라는 XML기반의
User Interface를 지원합니다.
- 플렉스 API 견본 예제: http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
1. Client/Server와의 비교
구분 Client/Server(VB) WEB(JSP) RIA(Flex)
---------------------------------------------------------------------
유저 인터페이스 자체 콤포넌트 HTML(JSP 등) 자체 콤포넌트
설치 프로그램 클라이언트 모듈 없음 플래시 플레이어
웹서비스 이용 낮다 높다 높다
대용량 데이터 처리 가능 제한적 가능
오프라인 작업 가능 불가능 가능
실시간 모니터링 가능 제한적 가능
프로그램 배포 설치 프로그램 없음 자동 배포
콤포넌트 개발 제한적 템플릿화 가능
네트워크 사용량 적음 높음 적음
레거시 시스템 연동 제한적 가능 가능
실행 환경 특정인 설치필요 제한적(ASP) 모든환경
2. Flex Application의 구성
Design+Script Script server Oracle
--------------------- -------- -------------- ------
UI + Action Script ---> Class ---> JSP, PHP, ASP ---> DBMS
*.mxml *.as Servlet 10g
[02] Flex 4 설치
1. Flex 4의 구조
- 플렉스 4 SDK
. MXML
. Action Script
. Class Library
. Debugger
- 플렉스빌더 4
. 이클립스 기반의 플렉스 개발 IDE
. 위지윅 방식의 UI 디자인
. MXML, AS 코드 자동 생성
. MXML을 컴파일하여 SWF 자동 생성
. 데스크탑 RIA인 AIR 개발 지원
. 인증 RSL을 지원하여 어플리케이션 경량화
. 메모리 성능 모니터링 및 프로파일링 지원
- 라이브사이클 데이터 서비스 2.5
. 데이터 서비스
. JMS
. RPC
. 자동화된 테스팅
. PDF 레포팅
. 라이브사이클 리모팅
. Ajax Data Services
. FABridge
- 플렉스 Chart
3. 설치 유형
- Eclipse Plugin Version, Eclipse Builder Version이 있슴
1) Flex4 다운로드 설치
- Flex3 Eclipse Plugin버전은 설치하지 말것: Flash Player 실행에 버그가 있슴
- 플렉스 빌더 다운로드: http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
. Free Adobe Flex 4 SDK
2) 이클립스 WTP Galileo 버전 다운로드
http://archive.eclipse.org/eclipse/downloads/index.php
http://www.poweredbypulse.com/eclipse_packages_win.php
- 개발시 Flex Builder와 eclipse 툴 모두 실행하고 개발합니다.
4. Eclipse 4.X setting
- workspace: workspace_flex
- Font : General --> Apperance --> Colors and Fonts --> Text Font에서 수정
- Line Number: General --> Editors --> Text Editors --> "Show Line Number" Check
[03] 기본 Flex Application
- Flex의 결과는 swf 파일로 생성되어 각 jsp등의 스크립트가
있는 곳에 복사하면 배포가 됩니다.
- Flex는 eclipse에서 저장하는 순간 컴파일되어 *.as, *.mxml파일이
함께 묶여 *.swf파일을 생성합니다.
- eclipse workspace: workspace_flex4
eclipse project: Flex Project
project name: StartFlex
★ IE Explorer의 Cache로 인해 swf 파일이 새로 인식이 안될 수 있음으로 브러우저의 옵션을
6.0 [도구 -- 인터넷 옵션 -- 인터넷 임시 파일 -- 설정 -- 페이지 열때 마다]로 변경합니다.
7.0 [도구 -- 인터넷 옵션 -- 일반 -- 검색 기록 -- 설정 -- 페이지 열때 마다]로 변경합니다.
1. 기본 시작 mxml 파일
>>>>> StartFlex.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label x="93.5" y="143" text="Start Flex Example 입니다." width="281" fontSize="20" color="#FEFEFE" id="lblMsg"/>
</mx:Application>
2. Flex의 원리
1) swf파일이 저장하면 자동으로 생성되며 이후는 flash와 같은 규칙을 적용 받음.
2) 'StartFlex.swf' 파일을 'F:/200910_cbd19/workspace_flex/temp'폴더로 복사.
3) Editplus에서 작업: bin-debug/StartFlex.html 참고하여 아래의 파일 편집
>>>>> F:/200910_cbd19/workspace_flex/temp/StartFlex.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> StartFlex.html </TITLE>
</HEAD>
<BODY>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="StartFlex" width="100%" height="47"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="StartFlex.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="StartFlex.swf" quality="high" bgcolor="#869ca7"
width="100%" height="47" name="StartFlex" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</BODY>
</HTML>
3. 메시지창의 출력
>>>>> alertExam.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style> <!-- CSS 적용 -->
.alertTitle {
fontSize: 12;
}
.alertMessage {
fontSize: 12;
}
Alert {
title-style-name: "alertTitle";
message-style-name: "alertMessage";
}
</mx:Style>
<mx:Script> <!-- Action Script -->
<![CDATA[
import mx.controls.Alert;
public function showMsg():void{
Alert.show("Alert 테스트입니다." , "알림");
}
]]>
</mx:Script>
<mx:Button x="103" y="104" label="클릭하세요. Alert test" fontSize="12"
click="showMsg();"/>
</mx:Application>
'flex' 카테고리의 다른 글
| [06-D2] Class, MXML, Array 실습 (0) | 2010.08.06 |
|---|---|
| [05-D2] static, interface, extends (0) | 2010.08.06 |
| [04-D2] Package, Class, constructor(생성자), Array(배열) (0) | 2010.08.06 |
| [03-D1] Flex3 API Document, Debug, ActionScript 3.0 개론 (0) | 2010.08.06 |
| [02-D1] 기본 콤포넌트(mx:Label, mx:TextArea, mx:TextInput, mx:Button) (0) | 2010.08.06 |
