[EFL] EDC 스크립트

EDC 스크립트

xml 같이 별도의 스크립트인 edc로 gui 요소를 분리해서 작성할 수 있다. 그대로 사용하면 좋을 텐데 이 역시 컴파일해서 바이너리 형태로 만들어야 한다. 

각 gui 요소는 parts, part 블록들에 정의되고, programs, program 블록에서 이벤트처리나 c파일연동부분이 정의된다.

edc빌드

edc파일은 edje_cc로 컴파일하면 edj가 되고, 빌드된 edj를 바이너리에서 불러와 수행된다. 

edje 빌드.

컴파일 : 'pkg-config --cflags edje'

링크 : 'pkg-config --libs edje'

EDC 스크립트는 대충 아래와 같은 구조를 가진다.

( 참조 : http://docs.enlightenment.org/auto/edje/edcref.html#sec_quickaccess)

리소스

images {

이미지블럭은 이미지파일에 대한 정보를 기술한다.(리소스)

image: "파일명" 압축;

압축방식은 아래와 같다.

RAW : 비압축

COMP : 비손실 압축

LOSSY [0-100] : 품질 설정이 가능한 손실 압축 

USER : 파일을 임베딩하지 않고, 외부파일 참조

set {

각각 이미지 사이즈를 지정하는 경우 set 블록을 사용한다. 

name: "이미지명";

image {

image: "파일명" LOSSY 90;

size: 0 0 10 10;

}

image {

.

.

}

}

}

fonts {

font: "파일명.ext" "폰트명";

font:

.

}

레이아웃 구성

collections {

group {

parts {

part {

}

}

programs {

program {

}

}

}

}

group {

name: "그룹이름";

inherit: "부모 그룹 이름";

alias: "추가적인 그릅 이름";

min: width height;

max: width height;

script { }

limits {

vertical: "이름" height_barrier;

horizontal: "이름" width_barrier;

.

.

}

data {

item: "name" "value";

}

parts {

alias: "theme_part_path" "real_part_path";

part {

name: "파트명";

type: "파트타입";

RECT

TEXT

IMAGE

SWALLOW

TEXTBLOCK

GROUP

BOX

TABLE

EXTERNAL

PROXY

SPACER

physics_body: "물리타입";

mouse_events: 1;

repeat_events: 0;

ignore_flags: NONE;

clip_to: "다른파트이름";

source; "그룹명";

pointer_mode: AUTOGRAB;

use_alternate_font_metrics: 0;

effect: "이펙트" 방향

PLAIN

OUTLINE

SOFT_OUTLINE

SOFT_sHADOW

OUTLINE_SHADOW

OUTLINE_SOFT_SHADOW

FAR_SHADOW

FAR_SOFT_SHADOW

GLOW

.

.

part { }

part 타입이 컨테이너인 경우 아래에 자식 파트 추가하는 형태로 레이아웃을 구성한다.

dragable { }

items { }

box {

BOX타입의 경우 내부에 포함될 레이아웃(그룹)을 지정할 수 있다.

items {

item {

type: 타입;

name: "오브젝트명";

source: "포함될 그룹명";

min: width height;

max: width height;

padding: left right top bottom;

align: x y;

weight: x y;

aspect: w h;

aspect_mode: 모드;

NONE

NEITHER

HORIZONTAL

VERTICAL

BOTH

spred: width height;

position col row;

span: col row;

}

item {

}

}

description {

파트의 세부정보를 정의한다. 기존에 정의된 TYPE에 추가 정보를 지정할 수 있다. 하나의 파트에 여러개의 상태별 DESCRIPTION이 올 수 있다. PROGRAM 에서 상태를 변경하면 해당 상태의 description 정보를 사용해 변화가 일어난다.

inherit: "부모 디스크립션 이름" 인덱스;

state: "default" 0.0;

visible: [0 or 1];

min: 0 0;

max: 1 1;

color: 0 0 0 0;

align: 0.5 0.5;

fixed: 0 0;

aspect: 1 1;

rel1 {

시작점(left top)

relative: 0.0 0.0;

offset: 0 0;

to: "기준 파트명";

to_x: "기준파트명";

to_y: "기준 파트명";

}

rel2 {

종료점(right bottom)

relative: 1.0 1.0;

offset: 0 0;

to: "기준 파트명";

to_x: "기준파트명";

to_y: "기준 파트명";

}

fill {

type: [SCALE, TILE];

smooth: [0 or 1];

origin {

relative: 0.0 0.0;

offset: 0 0;

}

size {

relative: 1.0 1.0;

offset: -1 -1;

}

}

text {

파트 타입이 text인 경우

text: "텍스트";

font: "폰트명";

size: 사이즈;

text_class: "클래스 명";

fit: horizontal vertical;

min: horizontal vertical;

max: horizontal vertical;

align: x축 y 축

source: "파트명";

text_source: "text파트명";

ellipsis: 0.0 - 1.0;

style: "스타일명";

}

box {

layout: "레이아웃";

horizontal

vertical

horizontal_homogeneous

vertical_homogeneous

horizontal_max

vertical_max

horizontal_flow

vertical_flow

stack

padding: horizontal값 vertical값;

align: horizontal값 vertical값;

min: 0 0;

}

table {

homogeneous: NONE;

NONE

TABLE

ITEM

align: 0.5 0.5;

padding: 0 0;

min: 0 0;

}

image {

파트 타입이 image인 경우

normal: "이미지 파일명";

tween: "이미지 파일명";

border: left right top bottom;

middle 0/1/NONE/DEFAULT/SOLID

fill {

type: [SCALE, TILE];

smooth: [0 or 1];

origin {

relative: 0.0 0.0;

offset: 0 0;

}

}

}

}

}

part {

part 내의 part는 RECT 타입에서만 사용하는듯.. 확실치 않음.

}

}

programs {

program {

name: "프로그램명";

signal: "시그널명";

정의된 시그널명을 지정한다. "button,reduce", "mouse,clicked,*"; 등

이 시그널은 소스에서 elm_object_signal_callback_add() 로 전달받는다.

source: "파트명";

filter: "파트명" "상태명";

action: STATE_SET "상태명" 상태값;

상태를 변경하거나 시그널을 전달한다. 커스텀 객체를 만들경우 중요하게 사용하는 항목.

action: STATE_SET "상태명" 상태값;  해당 파트의 상태를 변경한다. 

action: ACTION_STOP;

action: SIGNAL_EMIT "시그널명" "emitter";  외부로 시그널을 전달한다.

action: DRAG_VAL_SET 0.5 0.0;

action: DRAG_VAL_STEP 1.0 0.0;

action: DRAG_VAL_PAGE 0.0 0.0;

action: FOCUS_SET;

action: FOCUS_OBJECT;

action: PARAM_SET "part" "param" "value";

action: PLAY_TONE "tone name" duration;

.

.

transition: LINEAR 0.5;

target: "파트명";

after: "프로그램명";

}

}

}

Evas에서 Edje 얻기

Evas *canvas;

Evas_Object *edje;

// 우선 캔버스(Evas)를 얻는다.

// Ecore_Evas 사용하는 경우 

canvas = ecore_evas_get( windowObj );

// Evas만 사용하는 경우

canvas = evas_object_evas_get( windowObj );

// Evas 객체에서 edje 객체를 얻는다. 

edje = edje_object_add( canvas );

// 읽어올 edc 파일과 그룹을 설정한다.

edje_object_file_set( edje, "/sample.edj" , "그룹" );

// 읽어온 객체의 사이즈나 size_hint  설정등을 한다.

Elementary Layout 위젯과의 연동

Elementary 컨테이너 중에서 layout 이라는 녀석이 있는데, 이 녀석은 Edje 레이아웃을 포함할 수 있다. elementary는 별도의 함수(elm_layout_file_set)가 존재하므로, 해당 함수를 사용해 EDJ 파일을 불러온다.

Evas_Object *win;

Evas_Object *layout;

char buf[256];

.

.

layout = elm_layout_add( win );

// 레이아웃의 경우 weight 를 통해 크기에 따라 변화하게 된다.

// 박스나 테이블의 경우 evas_object_size_hint_align_set() 을 사용해야 사이즈가 적용됨.

evas_object_size_hint_weight_set( layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND );

elm_win_resize_object_add(win, layout );

// edj 파일 위치 얻기

// 플랫폼 별로 바이너리 위치와 해당 edj path를 알아낸다.

snprintf( buf, sizeof(buf), "%s/sample/my_sample.edj" , elm_app_data_dir_get() );

// 해당 레이아웃에 edc 스크립트의 그룹명을 적용한다.

elm_layout_file_set( layout, buf, "레이아웃 그룹명" );

evas_object_show(layout);

// 해당 레이아웃의 data 항목 가져오기

const char *value = elm_layout_data_get( layout, "아이템명" );

레이아웃 하단에 EDC로 작성한 각 파트가 포함되는데, 포함된 파트 중 컨테이너 (BOX, TABLE, SWALLOW) 에 다른 오브젝트를 추가할 수 있다.

// box파트에 위젯 넣기

elm_layout_box_prepend( layout, "박스 파트명", 오브젝트);

// table 파트에 위젯 넣기

elm_layout_table_pack( layout, "파트명", object, col, row, colspan, rowspan );

// 파트에 text값넣기

elm_object_part_text_set(  layout, "파트명", "value" );

//  swallow에 객체삽입

elm_object_part_content_set( layout, "파트명", 오브젝트 );