Flex Builder 2 & 차트

Similar documents
Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

MVVM 패턴의 이해

Microsoft Word - src.doc

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

Microsoft PowerPoint - 2.Building RIA with SEAM_1_이동호.ppt [호환 모드]

iii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다.

슬라이드 1

슬라이드 1

본 강의에 들어가기 전

Research & Technique Apache Tomcat RCE 취약점 (CVE ) 취약점개요 지난 4월 15일전세계적으로가장많이사용되는웹애플리케이션서버인 Apache Tomcat에서 RCE 취약점이공개되었다. CVE 취약점은 W

Microsoft PowerPoint - chap01-C언어개요.pptx

. 스레드 (Thread) 란? 스레드를설명하기전에이글에서언급되는용어들에대하여알아보도록하겠습니다. - 응용프로그램 ( Application ) 사용자에게특정서비스를제공할목적으로구현된응용프로그램을말합니다. - 컴포넌트 ( component ) 어플리케이션을구성하는기능별요

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

PowerPoint Presentation

Chapter 1

서현수

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과

Flex Builder 2 & 차트

쉽게 풀어쓴 C 프로그래밍

Microsoft PowerPoint - aj-lecture1.ppt [호환 모드]

Microsoft Word - 임베디드월드_WindowsEmbeddedCompact7_rev

Microsoft Word - 문필주_수정_.doc

DE1-SoC Board

<4D F736F F F696E74202D203137C0E55FBFACBDC0B9AEC1A6BCD6B7E7BCC72E707074>

PowerPoint Template

View Licenses and Services (customer)

소프트웨어공학 Tutorial #2: StarUML Eun Man Choi

제8장 자바 GUI 프로그래밍 II

2_안드로이드UI

ISP and CodeVisionAVR C Compiler.hwp

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES ActiveX 컴포넌트가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

임베디드시스템설계강의자료 6 system call 2/2 (2014 년도 1 학기 ) 김영진 아주대학교전자공학과

WAS 의동작과 WEB, Servlet, JSP 엑셈컨설팅본부 /APM 박종현 웹어플리케이션서버란? 웹어플리케이션서버방식은웹서버가직접어플리케이션프로그램을처리하는것이아니라웹어플리케이션서버에게처리를넘겨주고어플리케이션서버가어플리케이션프로그램을처리한다. 여러명의사용자가동일한페

슬라이드 1

표준프레임워크로 구성된 컨텐츠를 솔루션에 적용하는 것에 문제가 없는지 확인

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2

Visual Basic Visual Basic 소개

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

슬라이드 1

PowerPoint 프레젠테이션

윈도우시스템프로그래밍

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

PowerPoint Presentation

윈도우시스템프로그래밍

경우 1) 80GB( 원본 ) => 2TB( 복사본 ), 원본 80GB 는 MBR 로디스크초기화하고 NTFS 로포맷한경우 복사본 HDD 도 MBR 로디스크초기화되고 80GB 만큼포맷되고나머지영역 (80GB~ 나머지부분 ) 은할당되지않음 으로나온다. A. Window P

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

슬라이드 1

Spring Boot

Data Sync Manager(DSM) Example Guide Data Sync Manager (DSM) Example Guide DSM Copyright 2003 Ari System, Inc. All Rights reserved. Data Sync Manager

Microsoft PowerPoint - Keynote_Ryan Stewart_KOR.ppt [사용자가 마지막으로 저장]

Microsoft PowerPoint - e pptx

*2008년1월호진짜

q 이장에서다룰내용 1 객체지향프로그래밍의이해 2 객체지향언어 : 자바 2

C. KHU-EE xmega Board 에서는 Button 을 2 개만사용하기때문에 GPIO_PUSH_BUTTON_2 과 GPIO_PUSH_BUTTON_3 define 을 Comment 처리 한다. D. AT45DBX 도사용하지않기때문에 Comment 처리한다. E.

Windows 8에서 BioStar 1 설치하기

Javascript

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E >

Windows Server 2012

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

6. 설치가시작되는동안 USB 드라이버가자동으로로드됩니다. USB 드라이버가성공적으로로드되면 Setup is starting( 설치가시작되는중 )... 화면이표시됩니다. 7. 화면지침에따라 Windows 7 설치를완료합니다. 방법 2: 수정된 Windows 7 ISO

PowerPoint Template

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각

슬라이드 1

2장 변수와 프로시저 작성하기

untitled

이도경, 최덕재 Dokyeong Lee, Deokjai Choi 1. 서론

슬라이드 1

DLL(Dynamic Linked Library)

쉽게 풀어쓴 C 프로그래밍

Microsoft Word - Modelsim_QuartusII타이밍시뮬레이션.doc

게시판 스팸 실시간 차단 시스템

gnu-lee-oop-kor-lec06-3-chap7

MF5900 Series MF Driver Installation Guide

PowerPoint Template

쉽게 풀어쓴 C 프로그래밍

을풀면된다. 2. JDK 설치 JDK 는 Sun Developer Network 의 Java( 혹은 에서 Download > JavaSE 에서 JDK 6 Update xx 를선택하면설치파일을

ThinkVantage Fingerprint Software

OCW_C언어 기초

Microsoft PowerPoint 세션.ppt

Microsoft PowerPoint - 4강.pptx

tut_modelsim(student).hwp

untitled

슬라이드 1

Microsoft PowerPoint App Fundamentals[Part1](1.0h).pptx

Convenience Timetable Design

Microsoft PowerPoint - Java7.pptx

<4D F736F F F696E74202D20C1A63139C0E520B9E8C4A120B0FCB8AEC0DA28B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

Microsoft PowerPoint - chap06-2pointer.ppt

PowerPoint 프레젠테이션

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx

안드로이드기본 11 차시어댑터뷰 1 학습목표 어댑터뷰가무엇인지알수있다. 리스트뷰와스피너를사용하여데이터를출력할수있다. 2 확인해볼까? 3 어댑터뷰 1) 학습하기 어댑터뷰 - 1 -

사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을

대규모 자바스크립트 웹어플리케이션개발하기 with BackboneJS and RequireJS 넷스루개발 2 팀이병주

1. Windows 설치 (Client 설치 ) 원하는위치에다운받은발송클라이언트압축파일을해제합니다. Step 2. /conf/config.xml 파일수정 conf 폴더에서 config.xml 파일을텍스트에디터를이용하여 Open 합니다. config.xml 파일에서, 아

표준프레임워크 Nexus 및 CI 환경구축가이드 Version 3.8 Page 1

DBMS & SQL Server Installation Database Laboratory

<4D F736F F F696E74202D20332DC1F6B9DDC1A4BAB8BDC3BDBAC5DB>

Transcription:

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