Tizen UIFW - EFL

정우현Samsung Electronics

Software R&D Center

타이젠 UI앱의필수!! EFL파헤치기

Copyright © 2014 Samsung Electronics, Co., Ltd. All rights reserved. 2

Window 위에놓여진도화지에그림을그리는…

EFL 이란?

Enlightenment Foundation Libraries

Enlightenment를 위한 Graphical User Interface Toolkit라이브러리 모음

Enlightenment 프로젝트

• Window Manager + EFL 라이브러리

• 삼성이 주도하는 오픈소스 프로젝트

• 리눅스 기반 (윈도우, 맥, BSD도 지원)

• 타이젠의 핵심 UIFW

Enlightenment Window Manager

• Compositor, File Manager, App Launcher, Wallpaper…

• 다양한 리눅스 배포판에 탑재• Bodhi

• Elive

• HUMANity

• Macpup

• MoonOS

• OpenGEU

• Pentoo

• PCLinuxOS

• Sabayon

• Unite17

• Yellow Dog

EFL 라이브러리

• EFL: Collection of EFL Core Libraries

• Eina: 자료구조 & 알고리즘 라이브러리

• Eo: 객체 지향 오브젝트 모델 인터페이스

• Ector: 벡터 그래픽스 엔진

• Evas: 캔버스/렌더링 엔진

• Ecore: 이벤트 루프 라이브러리

• Edje: 고급 GUI & 스크립트 엔진

• …

• Elementary: 위젯 라이브러리

Elementary

EFLECTOR

EFL로 할 수 있는 것

• GUI

• 테마

• 애니메이션

• 위젯

• 사용자 입력 이벤트 (키, 마우스 …)

• 다양한 프로파일 환경 제공

• IPC/소켓 통신

• 3D 그래픽

• 비디오/사운드 출력

• …

EFL in Tizen?

• ECORE : 이벤트 루프 라이브러리

• EVAS : 캔버스 / 렌더링 엔진

• EDJE : 고급 GUI & 스크립트 엔진

• ELEMENTARY : 위젯 라이브러리

Today !!

ECORE이벤트 루프 라이브러리

이벤트 루프 라이브러리 (Ecore)

• Event Driven Mainloop

출처: http://egloos.zum.com/seoz/v/3827472

이벤트 루프 라이브러리 (Ecore)

• Event Driven Mainloop

• 렌더링 UI

• 애플리케이션 상태 관리

• Block을 유발하지 않을 정도의 작은 규모의 작업(이벤트) 처리

EVAS캔버스 / 렌더링 엔진

캔버스 / 렌더링 엔진 (Evas)• Scene Graph 기반 렌더링

• 화면에 출력 가능한 모든 오브젝트 상태를 트래킹

• 각 오브젝트의 화면 출력을 담당

• 폰트, Glyph 렌더링, 이미지 로딩, 스케일링, 블렌딩 등

• 렌더링 최소화

• 오직 변경된 영역만 화면 출력(Parital Rendering)

• 가려서 보이지 않는 객체를 식별하여 렌더링에서 제외

• 렌더링 최적화

• OpenGL, Software, SIMD(MMX, SSE, SSE3, NEON)

• Retained Mode 렌더링

• 애플리케이션이 직접 Drawing Command를 요청하지 않음

• Idle enterer에서 rendering을 수행

캔버스 / 렌더링 엔진 (Evas)

• Automated update handling

• Start here



• Next frame is here



• Calculate actual update region deltas



• Only draw updated regions



• Result

EDJE고급 GUI & 스크립트엔진

고급 GUI & 스크립트 엔진 (Edje)

• Complex Graphical Design and Layout library

• EDC 스크립트 언어 제공

• C 코드 없이 GUI 작성 가능

• 애플리케이션을 다음으로 분리 가능

• A graphical part: GUI Layout binary (.edc)

• A functionality: Executable logic binary (.c)

• 파일 타입

• .edc: Edje Text script file

• .edj: GUI layout binary


collections { //A theme

group { name: “elm/naviframe/base/default”; //A style of a theme

images {

image: “naviframe_bg.png” COMP; //Declare image resource to be used in this group

image: “naviframe_bg2.png” COMP;

}

parts {

part { name: “base frame”; //This base layout consists of one base frame part

type: IMAGE;

scale: 1; //Enable scailibility

mouse_events: 0; //Disable mouse events

description { state: “default” 0.0; //Default status of this base frame

align: 0.5 0.5; //Align this part based on its group

rel1 { relative: 0 0; offset: 0 0; } //Relative position (left top)

rel2 { relative: 1 1; offset: -1 -1; } //Relative position (right bottom)

image {

normal: “naviframe_bg.png” //This part uses “naviframe_bg.png“ image

}

}

}

}

• EDC Example


.edc .cCompile-time

Run-time .edjexecutable

edje_cc compile

Elm_layoutload

Run

ELEMENTARY위젯 라이브러리

위젯 라이브러리 (Elementary)


• 위젯 종류• 일반 위젯

• 시각적 외양을 가짐: 버튼, 레이블, 체크박스, 리스트, 이미지 …

• 컨테이너 위젯

• 레이아웃 구성에 필요: Scroller, Layout, Box, Table, Grid …

• 스크린 확장성• 해상도/스크린 크기에 따른 Scalability 제공

• 테마• 같은 위젯 이더라도 테마에 따른 다양한 Look & Feel 구성 가능

• 디바이스 프로파일• 구동 환경에 따른 Configurable한 위젯 동작 및 특성 제공


• Screen Scalable GUI


• Changeable Theme

• Configurable Device Profile Environment


Wearable

Mobile


• 위젯 커스터마이징 기능 제공• 앱 특화된 Look & Feel 구현 가능

system-theme

app-theme

Default Button style

Customized Button style

Basic Themes:

/user/share/elementary/themes/tizen-default.edj

Extension Theme:

/opt/apps/org.tizen.app/data/app_theme.edj

EFL 기본 프로그래밍

void create_base_gui(){

/* Window */Evas_Object *win = elm_win_util_standard_add(PACKAGE, PACKAGE);

/* Button */Evas_Object *btn = elm_button_add(win);elm_object_text_set(btn, “Default");evas_object_smart_callback_add(btn, "clicked", btn_clicked_cb, NULL);evas_object_move(btn, 150, 300);evas_object_resize(btn, 400, 350);evas_object_show(btn);

/* Image */Evas_Object *img = elm_image_add(btn);elm_image_file_set(img, "icon.png", NULL);elm_object_content_set(btn, img);

evas_object_show(win);}

EFL 기본 프로그래밍

void btn_clicked_cb(void *data, Evas_Object *obj, void *event_info){

elm_object_text_set(obj, "Clicked!");}

EFL 관련 좋은 정보

• Source in Tizen

• https://review.tizen.org

• EFL : platform/upstream/efl

• Elementary : platform/upstream/elementary

• UI Practices

• https://developer.tizen.org/development/ui-practices/native-application/efl

• API reference

• https://developer.tizen.org/dev-

guide/latest/org.tizen.native.mobile.apireference/EFL.html (EFL)

• https://developer.tizen.org/dev-

guide/latest/org.tizen.native.mobile.apireference/Elementary.html (Elementary)

https://developer.tizen.org/development/ui-practices/native-application/efl

http://developer.tizen.org/dev-guide/latest/org.tizen.native.mobile.apireference/EFL.html

http://developer.tizen.org/dev-guide/latest/org.tizen.native.mobile.apireference/Elementary.html

EFL 관련 좋은 정보

• Official : www.enlightenment.org

• SCM : phab.enlightenment.org

• 메일링 리스트• 개발자: lists.sourceforge.net/lists/listinfo/enlightenment-dev

• 사용자: lists.sourceforge.net/lists/listinfo/enlightenment-users

• IRC

• 주소: irc.freenode.net/6667

• 채널: #e, #edevelop, #e.kr

• 소스코드 : git.enlightenment.org

• 문서 : www.enlightenment.org/docs

• EFL 한국 커뮤니티 : efl.or.kr

http://www.enlightenment.org/

phab.enlightenment.org

http://www.enlightenment.org/

http://www.enlightenment.org/docs

efl.or.kr

Q&A

Thank you