KGIT 2012 Spring Semester EWD Class Notes _ Week3

1. 2012 KGIT [CLASS 03 | 0322]
익스프레시브 웹 응용 디자인
Expressive Web Application Design
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

2. Third Class | 0322
Latest Updates (Discuss)
Your Webs (Presentation)
Let’s Flex (Practice)
Website : ewd.jylee6977.com/tc
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

3. | Latest Updates

4. 1. Latest updated design news & sns & tutorials

5. | Flex

6. 1. Install Flex (Flash Builder)

7. 1. Installing Flex Builder 3.0
001. 설치 준비사항
1. Java SDK 설치
2. Flex Builder Install 파일
3. Flash Player 이전버젼 삭제

8. 1. Installing Flex Builder 3.0
002. About Flex Builder
1. Flex SDK + Flash Player
2. UI Design을 위한 WYSIWYG방식
3. Compile + Debugging + Project Managing
What you see is what you get

9. 1. Installing Flex Builder 3.0
003. Let’s Install
1. 영어지원
2. 디렉토리 지정
3. Flash Player선택 (디버그 기능 지원x/별도 설치 필요)
4. 빌더 설치 완료

10. 1. Installing Flex Builder 3.0
004. Open Source Flex 3 SDK
>> 플랙스 3 SDK는 액션스크립트를 위한 자바소스/MXML컴파일러/액션스트립
트 디버거를 라이센스하에 오픈소스화함.
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK;jsessionid=449
E72E3C0EB10642CA30ED45825367C
>>플랙스 3의 오픈소스 리스트
1. 툴
MXML Compiler /AS3 Compiler / Flex command line debugger / View source
utilities / Web Tier Compiler modules / Automated Testing Framework
2. 라이브러리
Flex Core Components /Flex Apollo Components / Graphic Tags Libraries /
Themes(Halo) / RPC Libraries 등

11. 1. Installing Flex Builder 3.0
004. Flex Data Visualization
>> Flex Charting은 Flex 3 data visualization 패키지 포함
(Flex Professional을 설치시 자동 설치)
>> 정식 라이센스를 넣지 않으면 워터마크 표시
>>OLAPDataGrid / AdvancedDataGrid
>> 다음과 같은 구성요소 설치 필요
1. Mercury QuickTest Professional 9.1
2. Adobe Flex 2 Plug-in for Mercury QuickTest Pro
3. IE 6.0버젼 이후
4. Flash Player ActiveX control ver 9.0.28.0이상
http://livedocs.adobe.com/flex/3/html/help.html?content=olapdatagrid_2.html

12. 2. Hello Flex

13. 2. Hello Flex
001. New Project
>> Flex Project
일반적인 플렉스 어플리케이션 또는 데스크탑용 어플리케이션 만들때 생성
>> Flex Library Project
SWC라는 플렉스 컴포넌트 아카이브 파일을 만들때 생성
>> Action Script Project
플래시의 API를 사용하는 액션스크립트 클래스를 만들때 생성

14. 2. Hello Flex
001. New Project
1. 플렉스 프로젝트 생성
2. 플렉스 프로젝트 생성 옵션
① Project Name “Week3”
② Project Location “..”
③ Application Type
* Web Application :
기본적인 플렉스 어플리케이션/브라우져에서 작동
* Desktop Application :
AIR 어플리케이션/데스크탑에 설치되어 작동. 설치를 위 해서는
플렉스 빌더에서 Export Release Build기능 이용하여 *.air 파일 만듦

15. 2. Hello Flex
001. New Project
3. 플렉스 컴파일 경로 지정
** 기본적으로‘프로젝트 경로bin-debug ‘폴더에 위치
• History : 이 폴더에서 브라우져에서 앞/뒤가기 눌렀을때 히스토리 정보
를 처리해주는 자바스크립트와 히든 프레임 html이 들어있어 플렉스에
서 히스토리가 유지됨
• Hello.html : Hello.swf를 보여줄수 있는 래퍼파일
• Hello.swf : 실행파일
4. 플렉스 어플리케이션 파일명 입력
- 따로 지정하지 않으면 src폴더가 기본폴더

16. 2. Hello Flex
002. New Application File
5. 워크벤치 ⊃ 퍼스펙티브 ⊃ 뷰 | 퍼스펙티브 ⊃ 여러개의 뷰들

17. 2. Hello Flex
002. New Application File
6. 어플리케이션 파일 생성
RUN
Source/Design Mode
Navigator View
Editor
Problem View

18. 2. Hello Flex
002. New Application File
6. 어플리케이션 파일 생성
1. <?xml version="1.0" encoding="utf-8"?>
XML도큐먼트 타입 선언 | MXML은 XML의 표준언어이므로 도큐먼트선언은 필수
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
플렉스 메인 어플리케이션 페이지 정의
<mx:Application>태그는 컨테이너 바깥부분이나 플렉스 어플리케이션 안의 모든 컨텐트를 담고 있는 부분.
플렉스 어플리케이션 하나당 한개의 <mx:application>태그 사용가능
<mx:application>태그 안에 URL을 포함하고 있는 속성/값 쌍인 xmlns:mx=http://www.adobe.com/2006/mxml플랙스 태그들
의 네임스페이스 정의
- 태그셋과 관련이 되도록 정의
- 이 URI는 Manifest 파일이라고 불리는 파일과 연관. Mx접두어와 함께 사용되리수 있는 모든 적법한 태그를 담고 있음.
< layout="absolute”>
- x,y좌표를 사용하여 애플리케이션의 자식요소 위치 지정가능. (vertial/horizontal)

19. 2. Hello Flex
003. Layout 잡기
1. Design Mode에서 화면 “Layout” 잡기 : Panel Component Drag&Drop
Drag

20. 2. Hello Flex
004. Control 배치
1. TextInput Component 삽입 | Property id = txtName
Drag

21. 2. Hello Flex
004. Control 배치
2 . Button Component Drag | Property onClick에 입력
Drag
mx.contol.Alert.show(‘Hello!’+txtName.text)
mouse를 클릭하면 Alert창에 보여줘라 (Hello+텍스트 필드의 입력값)

22. 2. Hello Flex
005. Source Code

23. 2. Hello Flex
006. 실행

24. 2. Hello Flex
006. 실행

25. 3. Flex Development Perspective

26. 3. Flex Development Perspective
001. Views
Navigator View MXML Editor View State View
,Component View Property View

27. 3. Flex Development Perspective
002. Navigator View
프로젝트 관리
Navigator View 프로젝트생성
프로젝트 이동
프로젝트 열기/닫기
프로젝트 복사/붙여넣기/..
프로젝트 임포트/익스포트
프로젝트내의 리소스 관리
디렉토리 추가/수정/삭제
파일변경추적
리소스 소팅/필터링
프로젝트 속성관리
프로젝트 환경설정
프로젝트 파일 열기

28. 4. Flex Source Coding Sample

29. 4. Flex Source Coding Sample
000. Goals
1. Layout 배치
2. Panel에 타이틀 입력
3. Data Chooser component 추가
4. 주석 블럭 추가
5. 속성 번경 및 함수 호출
6. 함수정의
7. 편집 명령 작업 : 작업취소/원상복구/파일저장

30. 4. Flex Source Coding Sample
001. Layout
* New Project  Component View  layout | panel 배치

31. 4. Flex Source Coding Sample
002. Title
* Source Mode  <mx:panel> 태그 끝으로 이동하여 “t”입력시 코드 자동완성으로 Title선택

32. 4. Flex Source Coding Sample
003. DataChooser
* <mx:panel> 다음줄에 <mx:Da> 코드 자동입력으로 DataChooser선택

33. 4. Flex Source Coding Sample
004. Comment 입력
* 주석 입력 부분에 우클릭하여 Source Toggle Block Comment

34. 4. Flex Source Coding Sample
005. 속성 변경 및 함수 호출
* <mx:DateChooser>뒤에 가로/세로길이 속성 정의와 showMsg라는 함수 호출
<mx:DateChooser width="100%" height="100%" change="showMsg('MyFlex!')">

35. 4. Flex Source Coding Sample
006. 함수 정의
* showMsg 함수를 정의하기 위해 <mx:Application>아래에 <mx:Script> 입력 후, 태그안에 정의
<fx:Script>
<![CDATA[ // [주석] <ms:Scrpit>입력시 자동생성됨
private function showMsg(input:String):void {
mx.controls.Alert.show(input);
}
]]>
</fx:Script>

36. 4. Flex Source Coding Sample
006. 함수 정의

37. 5. MXML Basics

38. 5. MXML Basics
000. MXML의 세가지 역활
첫번째 화면으로 보여줄 비쥬얼한 컴포넌트를 정의한다.
< mx:Button label=“OK”/>
OK라고 표시된 버튼의 정의
두번째 어플리케이션에서 사용할 데이터를 정의한다.
<mx:Model id”dataModel” source = “http…rss.xml”/>
Rss.xml이라는 XML형식의 데이터 정의
세번째 UI에 데이터를 바인딩 해준다.
<mx:DataGrid id=”DataGrid” dataProvider = “{dataModel}”/>
dataModel이라는 데이터소스를 DataGrid의 데이터로 연결함.

39. 5. MXML Basics
000. MXML의 일곱가지 규칙 역활
첫번째. MXML은 다국어 표현을 위해 UTF-8사용을 권장한다.
두번째. 루트태그는 하나여야 한다.
세번째. 태그는 대소문자를 구분한다.
네번째. 태그를 열였으면 반드시 닫아줘야한다.
다섯번째. 태그는 다른 태그를 포함할 수 있지만 엇갈리게 쓸수 없다.
여섯번째. 태그의 속성은 큰타옴표나 작은따옴표를 표시한다.
일곱번째. 태그의 속성은 하위 엘리먼트로 빼내어 쓸수 있다.
<mx:Button label=“test” />
<mx:Button><mx:label>test</mx:label></mx:Button>

40. 6. Interface Layout

41. 06. Layout
001. Flex에서 화면 구성할때 1.2.3
첫번째. 화면의 크기를 정한다. (유동.수동)
1.1 Size 속성 설정 (width/height, minWidth/minHeight,horizontal gap/vertical gap, scaleX/scaleY)
1.2 Layout Constraints 속성 설정
두번째. 화면 분활
2.1 수직/수평으로 화면을 분리할 때 (HGroup/VGroup, VRule/HRule)
2.2 Component Layout에 따른 사이즈 결정논리
2.3 가로 세로로 들어갈 컴포넌트들의 나열을 보여줄 때 ( Grid, Tile)
세번째. 적절한 컨트롤의 사용
3.1 사용자의 선택을 유도하는 컨트롤 ( Radio Box, Check Box, Combo Box, …)
3.2 숫자값을 입력 받는 컨트롤 (Text Input, Numberic Stepper, Slider…)
3.3 텍스트 입력 ( Text Input, Text Area, Rich Text Editor, HTML…)
3.4 기타( Data Field, Progress Bar, Color Picker…)
네번째. 화면 전환
4.1 단계별 화면전환 : Accordion
4.2 컨텐츠를 제목과 함께 나누어서 보여줄 때 : TabNavigator
4.3 탭/메뉴바의 위치를 원하는 곳에 두고 싶을 때 : Tab Bar, ToggleButtonBar, LinkBar, ButtonBar

42. 06. Layout
002. Layout Goal
1. 컨테이너들을 사용한다.
2. 디자인모드에서 어플리케이시션 레이아웃한다.
3. 제약기반 레이아웃에서 작업한다.

43. 06. Layout
003. Design Mode : Layout A
1. 720 * 480사이즈의 Application 만들기
2. Layout>BoarderContainer를 어플리케이션 상단에 드래그 ( Width = 100%, Height = 30%)
3. Layout>Group컨테이너를 드래그 하여 BoarderContainer 위에 위치 ( Width = 100%,
Height = 100%)
4. Label을 Group위에 드래그 하여 “Title Text” 입력
5. Button을 우측 중앙에 드래그 “View Cart” : id = btnViewCart
6. Button을 View Cart아래쪽에 “CheckOut” : id =btnCheckOut
7. Constraints를 각각 우측에서 10/110으로 제약

44. 06. Layout
003. Design Mode : Layout A

45. 06. Layout
003. Design Mode : Layout B
1. Layout>HBox ApplicationControlBar아래에 위치 ( Width = 100%, Height = 100% | id = BodyArea )
2. Layout>VBox를 BodyArea 좌측에 드래그 하여 위치 ( Width = 100%, Height = 100% | id = ProductArea )
3. ProductArea를 선택한 후,
① Control>Label을 드래그 하여 위치 (Text= “Product01”)
② Control>Image를 드래그 하여 Label아래에 위치 , Image Import하여 가지고 올것.
③ Control>Button을 드래그 하여 Image아래에 위치, id = Add to Cart
4. BodyArea를 선택한 후, Layout>VBox를 BodyArea 우측에 드래그 하여 위치 ( Height = 100% | id = CartArea )
5. CartArea를 선택한 후,
① Control>Label을 드래그 하여 위치 (Text = “Your Total Amout $ )
② Control>Link Button을 Label아래 드래그 하여 위치 (id=lkbtnViewCart)

46. 06. Layout
003. Design Mode : Layout B

47. 07. State

48. 07. State
000. Goal
1. View State를 사용한다.
2. View State를 제어한다.

49. 07. State
001. State Layout
1. State View>New State ( Id = CartView)
2. CartView선택 후, BodyArea 삭제
3. CartArea Width = 100%로 조정
4. Control>DataGrid을 Label아래에 위치 (width = 100%, id = dgView)
5. lkbtnViewCart 삭제 후 Control>LinkButton 그 위치에 드래그 (id = Continue Shopping)

50. 07. State
001. State Layout

51. 07. State
002. State Control
1. BaseState 에서 , lkbtnViewCart 버튼 선택 후 property에서 On Click에 this.currentState='CartView‘ 입력
2. Script를 Copy하여 btnViewCart의 On Click Property에도 동일하게 입력
3. lkbtnContinue의 On Click Property에는 다시 BaseState로 돌아가는 this.currentState='‘ 입력

52. 07. State
002. State Control

53. FOR Next Week
* 본인의 사이트로 간단한 State만들어 오기
Expressive Web Application Design | WEEK 2 : FLEX.HTML5