Expressive Web Application Design | WEEK 2 : FLEX.HTML5

익스프레시브 웹 응용 디자인Expressive Web Application Design

2012 KGIT [CLASS 03 | 0322]

Expressive Web Application Design | WEEK 2 : FLEX.HTML5

Third Class | 0322

Latest Updates(Discuss)

Your Webs(Presentation)

Let’s Flex(Practice)

Website : ewd.jylee6977.com/tc

| Latest Updates

1. Latest updated design news & sns & tutorials

| Flex

1. Install Flex (Flash Builder)

1. Java SDK 설치

2. Flex Builder Install 파일

3. Flash Player 이전버젼 삭제

1. Installing Flex Builder 3.0

001. 설치 준비사항

1. Flex SDK + Flash Player2. UI Design을 위한 WYSIWYG방식

3. Compile + Debugging + Project Managing

1. Installing Flex Builder 3.0

002. About Flex Builder

What you see is what you get

1. 영어지원

2. 디렉토리 지정

3. Flash Player선택 (디버그 기능 지원x/별도 설치 필요)4. 빌더 설치 완료

1. Installing Flex Builder 3.0

003. Let’s Install

>> 플랙스 3 SDK는 액션스크립트를 위한 자바소스/MXML컴파일러/액션스트립

트 디버거를 라이센스하에 오픈소스화함.

http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK;jsessionid=449E72E3C0EB10642CA30ED45825367C

>>플랙스 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 등

1. Installing Flex Builder 3.0

004. Open Source Flex 3 SDK

>> Flex Charting은 Flex 3 data visualization 패키지 포함(Flex Professional을 설치시 자동 설치)

>> 정식 라이센스를 넣지 않으면 워터마크 표시

>>OLAPDataGrid / AdvancedDataGrid

>> 다음과 같은 구성요소 설치 필요1. Mercury QuickTest Professional 9.12. Adobe Flex 2 Plug-in for Mercury QuickTest Pro3. 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

1. Installing Flex Builder 3.0

004. Flex Data Visualization

2. Hello Flex

2. Hello Flex

001. New Project

>> Flex Project일반적인 플렉스 어플리케이션 또는 데스크탑용 어플리케이션 만들때 생성

>> Flex Library ProjectSWC라는 플렉스 컴포넌트 아카이브 파일을 만들때 생성

>> Action Script Project플래시의 API를 사용하는 액션스크립트 클래스를 만들때 생성

2. Hello Flex

001. New Project1. 플렉스 프로젝트 생성

2. 플렉스 프로젝트 생성 옵션① Project Name “Week3”② Project Location “..”③ Application Type

* Web Application :기본적인 플렉스 어플리케이션/브라우져에서 작동

* Desktop Application : AIR 어플리케이션/데스크탑에 설치되어 작동. 설치를 위 해서는

플렉스 빌더에서 Export Release Build기능 이용하여 *.air 파일 만듦

2. Hello Flex

001. New Project3. 플렉스 컴파일 경로 지정** 기본적으로 ‘프로젝트 경로\bin-debug ‘폴더에 위치

• History : 이 폴더에서 브라우져에서 앞/뒤가기 눌렀을때 히스토리 정보

를 처리해주는 자바스크립트와 히든 프레임 html이 들어있어 플렉스에

서 히스토리가 유지됨

• Hello.html : Hello.swf를 보여줄수 있는 래퍼파일

• Hello.swf : 실행파일

4. 플렉스 어플리케이션 파일명 입력- 따로 지정하지 않으면 src폴더가 기본폴더

2. Hello Flex

002. New Application File5. 워크벤치⊃ 퍼스펙티브⊃뷰 | 퍼스펙티브⊃여러개의 뷰들

2. Hello Flex

002. New Application File6. 어플리케이션 파일 생성

Navigator View

Editor

Problem View

Source/Design ModeRUN

2. Hello Flex

002. New Application File6. 어플리케이션 파일 생성

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)

2. Hello Flex

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

Drag

2. Hello Flex

004. Control 배치1. TextInput Component 삽입 | Property id = txtName

Drag

2. Hello Flex

004. Control 배치2 . Button Component Drag | Property onClick에 입력

Drag

mx.contol.Alert.show(‘Hello!’+txtName.text)mouse를 클릭하면 Alert창에 보여줘라 (Hello+텍스트 필드의 입력값)

2. Hello Flex

005. Source Code

2. Hello Flex

006. 실행

2. Hello Flex

006. 실행

3. Flex Development Perspective

3. Flex Development Perspective

001. Views

Navigator View

,Component View

State View

Property View

MXML Editor View

Navigator View프로젝트 관리프로젝트생성프로젝트 이동프로젝트 열기/닫기프로젝트 복사/붙여넣기/..프로젝트 임포트/익스포트

프로젝트내의 리소스 관리디렉토리 추가/수정/삭제파일변경추적리소스 소팅/필터링

프로젝트 속성관리프로젝트 환경설정프로젝트 파일 열기

3. Flex Development Perspective

002. Navigator View

4. Flex Source Coding Sample

4. Flex Source Coding Sample

000. Goals

1. Layout 배치

2. Panel에 타이틀 입력

3. Data Chooser component 추가

4. 주석 블럭 추가

5. 속성 번경 및 함수 호출

6. 함수정의

7. 편집 명령 작업 : 작업취소/원상복구/파일저장

4. Flex Source Coding Sample

001. Layout* New Project Component View layout | panel 배치

4. Flex Source Coding Sample

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

4. Flex Source Coding Sample

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

4. Flex Source Coding Sample

004. Comment 입력* 주석 입력 부분에 우클릭하여 Source Toggle Block Comment

4. Flex Source Coding Sample

005. 속성 변경 및 함수 호출

* <mx:DateChooser>뒤에 가로/세로길이 속성 정의와 showMsg라는 함수 호출

<mx:DateChooser width="100%" height="100%" change="showMsg('MyFlex!')">

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>

4. Flex Source Coding Sample

006. 함수 정의

5. MXML Basics

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의 데이터로 연결함.

5. MXML Basics

000. MXML의 일곱가지규칙 역활

첫번째. MXML은 다국어 표현을 위해 UTF-8사용을 권장한다.

두번째. 루트태그는 하나여야 한다.

세번째. 태그는 대소문자를 구분한다.

네번째. 태그를 열였으면 반드시 닫아줘야한다.

다섯번째. 태그는 다른 태그를 포함할 수 있지만 엇갈리게 쓸수 없다.

여섯번째. 태그의 속성은 큰타옴표나 작은따옴표를 표시한다.

일곱번째. 태그의 속성은 하위 엘리먼트로 빼내어 쓸수 있다.

<mx:Button label=“test” /><mx:Button><mx:label>test</mx:label></mx:Button>

6. Interface Layout

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

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

06. Layout

002. Layout Goal

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으로 제약

06. Layout

003. Design Mode : Layout A

06. Layout

003. Design Mode : Layout A

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)

06. Layout

003. Design Mode : Layout B

06. Layout

003. Design Mode : Layout B

07. State

1. View State를 사용한다.2. View State를 제어한다.

07. State

000. Goal

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)

07. State

001. State Layout

07. State

001. State Layout

1. BaseState 에서 , lkbtnViewCart 버튼 선택 후 property에서 On Click에 this.currentState='CartView‘ 입력

2. Script를 Copy하여 btnViewCart의 On Click Property에도 동일하게 입력

3. lkbtnContinue의 On Click Property에는 다시 BaseState로 돌아가는 this.currentState='‘ 입력

07. State

002. State Control

07. State

002. State Control

Expressive Web Application Design | WEEK 2 : FLEX.HTML5

FOR Next Week* 본인의 사이트로 간단한 State만들어 오기