Enventor를 활용한 EDC 작성하기

조재현 (삼성전자) jae_hyun_cho@naver.com

EDC 란?

• GUI 레이아웃에 대해 기술하는 스크립트 파일

– GUI 레이아웃 구성

– GUI 레이아웃의 이벤트에 대한 동작

• Edje 라이브러리에서 지원

– edje_cc 컴파일러로 컴파일

– EDJ 파일은 실행시간 때 로드됨

EDC 양식

collections { // 테마 group { // 테마를 구성하는 위젯 스타일 parts { // GUI 레이아웃을 구성하는 기본 요소 목록 part { // GUI 레이아웃 기본 요소 // (i.e. RECT, TEXT, IMAGE, SWALLOW, TEXTBLOCK, GROUP, BOX, TABLE, // EXTERNAL) } } programs { // GUI 레이아웃의 각 이벤트에 대한 동작 목록 program { // 이벤트 수신 및 이에 대한 동작 } } } }

EDC 양식

collections { // 테마 group { // 테마를 구성하는 위젯 스타일 parts { // GUI 레이아웃을 구성하는 기본 요소 목록 part { // GUI 레이아웃 기본 요소 // (i.e. RECT, TEXT, IMAGE, SWALLOW, TEXTBLOCK, GROUP, BOX, TABLE, // EXTERNAL) } } programs { // GUI 레이아웃의 각 이벤트에 대한 동작 목록 program { // 이벤트 수신 및 이에 대한 동작 } } } }

Part 구성하기 (1/2)

• 각 Part는 사각형 영역으로 표기

– 왼쪽 상단 꼭지점(rel1)과 오른쪽 하단 꼭지점(rel2)로 사각형 영역 구성

rel1 (x = 0.0, y = 0.0)

rel2 (x = 1.0, y = 1.0)

Part 구성하기 (2/2)

• 각 Part는 하나 이상의 State 포함

– 각 State별로 해당 Part의 속성 지정 가능

(e.g. 위치, 크기, 색상, 이미지, 텍스트 등)

part { name: “rect”; type: RECT; description { state: “default” 0.0; rel1.relative: 0.0 0.0; rel2.relative: 1.0 1.0; color: 0 0 255 255; } description { state: “small_red” 0.0; rel1.relative: 0.0 0.0; rel2.relative: 0.5 0.5; color: 255 0 0 255; } }

Part 구성하기 (2/2)

• 각 Part는 하나 이상의 State 포함

– 각 State별로 해당 Part의 속성 지정 가능

(e.g. 위치, 크기, 색상, 이미지, 텍스트 등)

part { name: “rect”; type: RECT; description { state: “default” 0.0; rel1.relative: 0.0 0.0; rel2.relative: 1.0 1.0; color: 0 0 255 255; } description { state: “small_red” 0.0; rel1.relative: 0.0 0.0; rel2.relative: 0.5 0.5; color: 255 0 0 255; } }

Program 작성하기 (1/2)

• 각 Program은 이벤트 송수신 가능

– Evas 라이브러리로부터 이벤트 수신

(e.g. 마우스 클릭 이벤트 등)

– 애플리케이션으로부터 시그널 수신 및 송신

Application (.c 파일)

Edje

Evas

시그널 발신

시그널 수신

이벤트 수신

Program 작성하기 (2/2)

• 각 Program은 Part의 State 변경 가능

– 특정 Part의 현재 State를 다른 State로 변경 가능

– 애니메이션 기능 지원

program { name: “animation”; signal: “move”; source: “”; action: STATE_SET “point_b” 0.0; transition: LINEAR 5.0; target: “ball”; }

EDC 예제

collections { group { name: “example”; parts { part { name: “rect”; type: RECT; description { state: “default” 0.0; rel1.relative: 0.0 0.0; rel2.relative: 1.0 1.0; color: 0 0 255 255; } description { state: “small_red” 0.0; rel1.relative: 0.0 0.0; rel2.relative: 0.5 0.5; color: 255 0 0 255; }

programs { program { name: “animation”; signal: “move”; source: “”; action: STATE_SET “point_b” 0.0; transition: LINEAR 5.0; target: “rect”; } } } }

Enventor 란?

• EDC 파일 작성용 툴

– 텍스트 에디팅 기반

– 프리뷰 지원

• 다운로드 http://download.enlightenment.org/rel/apps/enventor/enventor-0.3.2.tar.gz

git clone http://git.enlightenment.org/tools/enventor.git

Enventor 데모

감사합니다