[KGIT_EWD]class03 0322

751 views

Published on

KGIT 2012 Spring Semester EWD Class Notes _ Week3

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
751
On SlideShare
0
From Embeds
0
Number of Embeds
134
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[KGIT_EWD]class03 0322

  1. 1. 2012 KGIT [CLASS 03 | 0322]익스프레시브 웹 응용 디자인Expressive Web Application Design Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  2. 2. Third Class | 0322Latest Updates (Discuss) Your Webs (Presentation) Let’s Flex (Practice) Website : ewd.jylee6977.com/tc Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  3. 3. | Latest Updates
  4. 4. 1. Latest updated design news & sns & tutorials
  5. 5. | Flex
  6. 6. 1. Install Flex (Flash Builder)
  7. 7. 1. Installing Flex Builder 3.0001. 설치 준비사항 1. Java SDK 설치 2. Flex Builder Install 파일 3. Flash Player 이전버젼 삭제
  8. 8. 1. Installing Flex Builder 3.0002. 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. 9. 1. Installing Flex Builder 3.0003. Let’s Install 1. 영어지원 2. 디렉토리 지정 3. Flash Player선택 (디버그 기능 지원x/별도 설치 필요) 4. 빌더 설치 완료
  10. 10. 1. Installing Flex Builder 3.0004. 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. 11. 1. Installing Flex Builder 3.0004. 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. 12. 2. Hello Flex
  13. 13. 2. Hello Flex001. New Project >> Flex Project 일반적인 플렉스 어플리케이션 또는 데스크탑용 어플리케이션 만들때 생성 >> Flex Library Project SWC라는 플렉스 컴포넌트 아카이브 파일을 만들때 생성 >> Action Script Project 플래시의 API를 사용하는 액션스크립트 클래스를 만들때 생성
  14. 14. 2. Hello Flex001. New Project 1. 플렉스 프로젝트 생성 2. 플렉스 프로젝트 생성 옵션 ① Project Name “Week3” ② Project Location “..” ③ Application Type * Web Application : 기본적인 플렉스 어플리케이션/브라우져에서 작동 * Desktop Application : AIR 어플리케이션/데스크탑에 설치되어 작동. 설치를 위 해서는 플렉스 빌더에서 Export Release Build기능 이용하여 *.air 파일 만듦
  15. 15. 2. Hello Flex001. New Project 3. 플렉스 컴파일 경로 지정 ** 기본적으로‘프로젝트 경로bin-debug ‘폴더에 위치 • History : 이 폴더에서 브라우져에서 앞/뒤가기 눌렀을때 히스토리 정보 를 처리해주는 자바스크립트와 히든 프레임 html이 들어있어 플렉스에 서 히스토리가 유지됨 • Hello.html : Hello.swf를 보여줄수 있는 래퍼파일 • Hello.swf : 실행파일 4. 플렉스 어플리케이션 파일명 입력 - 따로 지정하지 않으면 src폴더가 기본폴더
  16. 16. 2. Hello Flex002. New Application File 5. 워크벤치 ⊃ 퍼스펙티브 ⊃ 뷰 | 퍼스펙티브 ⊃ 여러개의 뷰들
  17. 17. 2. Hello Flex002. New Application File 6. 어플리케이션 파일 생성 RUN Source/Design Mode Navigator View Editor Problem View
  18. 18. 2. Hello Flex002. 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. 19. 2. Hello Flex003. Layout 잡기 1. Design Mode에서 화면 “Layout” 잡기 : Panel Component Drag&Drop Drag
  20. 20. 2. Hello Flex004. Control 배치 1. TextInput Component 삽입 | Property id = txtName Drag
  21. 21. 2. Hello Flex004. Control 배치 2 . Button Component Drag | Property onClick에 입력 Drag mx.contol.Alert.show(‘Hello!’+txtName.text) mouse를 클릭하면 Alert창에 보여줘라 (Hello+텍스트 필드의 입력값)
  22. 22. 2. Hello Flex005. Source Code
  23. 23. 2. Hello Flex006. 실행
  24. 24. 2. Hello Flex006. 실행
  25. 25. 3. Flex Development Perspective
  26. 26. 3. Flex Development Perspective001. Views Navigator View MXML Editor View State View ,Component View Property View
  27. 27. 3. Flex Development Perspective002. Navigator View 프로젝트 관리 Navigator View 프로젝트생성 프로젝트 이동 프로젝트 열기/닫기 프로젝트 복사/붙여넣기/.. 프로젝트 임포트/익스포트 프로젝트내의 리소스 관리 디렉토리 추가/수정/삭제 파일변경추적 리소스 소팅/필터링 프로젝트 속성관리 프로젝트 환경설정 프로젝트 파일 열기
  28. 28. 4. Flex Source Coding Sample
  29. 29. 4. Flex Source Coding Sample000. Goals 1. Layout 배치 2. Panel에 타이틀 입력 3. Data Chooser component 추가 4. 주석 블럭 추가 5. 속성 번경 및 함수 호출 6. 함수정의 7. 편집 명령 작업 : 작업취소/원상복구/파일저장
  30. 30. 4. Flex Source Coding Sample001. Layout * New Project  Component View  layout | panel 배치
  31. 31. 4. Flex Source Coding Sample002. Title * Source Mode  <mx:panel> 태그 끝으로 이동하여 “t”입력시 코드 자동완성으로 Title선택
  32. 32. 4. Flex Source Coding Sample003. DataChooser * <mx:panel> 다음줄에 <mx:Da> 코드 자동입력으로 DataChooser선택
  33. 33. 4. Flex Source Coding Sample004. Comment 입력 * 주석 입력 부분에 우클릭하여 Source Toggle Block Comment
  34. 34. 4. Flex Source Coding Sample005. 속성 변경 및 함수 호출 * <mx:DateChooser>뒤에 가로/세로길이 속성 정의와 showMsg라는 함수 호출 <mx:DateChooser width="100%" height="100%" change="showMsg(MyFlex!)">
  35. 35. 4. Flex Source Coding Sample006. 함수 정의 * showMsg 함수를 정의하기 위해 <mx:Application>아래에 <mx:Script> 입력 후, 태그안에 정의 <fx:Script> <![CDATA[ // [주석] <ms:Scrpit>입력시 자동생성됨 private function showMsg(input:String):void { mx.controls.Alert.show(input); } ]]> </fx:Script>
  36. 36. 4. Flex Source Coding Sample006. 함수 정의
  37. 37. 5. MXML Basics
  38. 38. 5. MXML Basics000. 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. 39. 5. MXML Basics000. MXML의 일곱가지 규칙 역활 첫번째. MXML은 다국어 표현을 위해 UTF-8사용을 권장한다. 두번째. 루트태그는 하나여야 한다. 세번째. 태그는 대소문자를 구분한다. 네번째. 태그를 열였으면 반드시 닫아줘야한다. 다섯번째. 태그는 다른 태그를 포함할 수 있지만 엇갈리게 쓸수 없다. 여섯번째. 태그의 속성은 큰타옴표나 작은따옴표를 표시한다. 일곱번째. 태그의 속성은 하위 엘리먼트로 빼내어 쓸수 있다. <mx:Button label=“test” /> <mx:Button><mx:label>test</mx:label></mx:Button>
  40. 40. 6. Interface Layout
  41. 41. 06. Layout001. 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. 42. 06. Layout002. Layout Goal 1. 컨테이너들을 사용한다. 2. 디자인모드에서 어플리케이시션 레이아웃한다. 3. 제약기반 레이아웃에서 작업한다.
  43. 43. 06. Layout003. Design Mode : Layout A1. 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 = btnViewCart6. Button을 View Cart아래쪽에 “CheckOut” : id =btnCheckOut7. Constraints를 각각 우측에서 10/110으로 제약
  44. 44. 06. Layout003. Design Mode : Layout A
  45. 45. 06. Layout003. Design Mode : Layout B1. 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 Cart4. BodyArea를 선택한 후, Layout>VBox를 BodyArea 우측에 드래그 하여 위치 ( Height = 100% | id = CartArea )5. CartArea를 선택한 후, ① Control>Label을 드래그 하여 위치 (Text = “Your Total Amout $ ) ② Control>Link Button을 Label아래 드래그 하여 위치 (id=lkbtnViewCart)
  46. 46. 06. Layout003. Design Mode : Layout B
  47. 47. 07. State
  48. 48. 07. State000. Goal 1. View State를 사용한다. 2. View State를 제어한다.
  49. 49. 07. State001. State Layout1. 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. 50. 07. State001. State Layout
  51. 51. 07. State002. State Control1. BaseState 에서 , lkbtnViewCart 버튼 선택 후 property에서 On Click에 this.currentState=CartView‘ 입력2. Script를 Copy하여 btnViewCart의 On Click Property에도 동일하게 입력3. lkbtnContinue의 On Click Property에는 다시 BaseState로 돌아가는 this.currentState=‘ 입력
  52. 52. 07. State002. State Control
  53. 53. FOR Next Week* 본인의 사이트로 간단한 State만들어 오기 Expressive Web Application Design | WEEK 2 : FLEX.HTML5

×