Tizen UIFW - EFL by Woohyun Jung

1. 정우현
Samsung Electronics
Software R&D Center
타이젠 UI앱의 필수!!
EFL 파헤치기

2. Copyright © 2014 Samsung Electronics, Co., Ltd. All rights reserved. 2
Window 위에 놓여진 도화지에 그림을 그리는 …

3. EFL 이란?
Enlightenment Foundation Libraries
Enlightenment를 위한 Graphical User Interface Toolkit
라이브러리 모음

4. Enlightenment 프로젝트
• Window Manager + EFL 라이브러리
• 삼성이 주도하는 오픈소스 프로젝트
• 리눅스 기반 (윈도우, 맥, BSD도 지원)
• 타이젠의 핵심 UIFW

5. Enlightenment Window Manager
• Compositor, File Manager, App Launcher, Wallpaper…
• 다양한 리눅스 배포판에 탑재
• Bodhi
• Elive
• HUMANity
• Macpup
• MoonOS
• OpenGEU
• Pentoo
• PCLinuxOS
• Sabayon
• Unite17
• Yellow Dog

6. EFL 라이브러리
• EFL: Collection of EFL Core Libraries
• Eina: 자료구조 & 알고리즘 라이브러리
• Eo: 객체 지향 오브젝트 모델 인터페이스
• Ector: 벡터 그래픽스 엔진
• Evas: 캔버스/렌더링 엔진
• Ecore: 이벤트 루프 라이브러리
• Edje: 고급 GUI & 스크립트 엔진
• …
• Elementary: 위젯 라이브러리
Elementary
EFL
ECTOR

7. EFL로 할 수 있는 것
• GUI
• 테마
• 애니메이션
• 위젯
• 사용자 입력 이벤트 (키, 마우스 …)
• 다양한 프로파일 환경 제공
• IPC/소켓 통신
• 3D 그래픽
• 비디오/사운드 출력
• …

8. EFL in Tizen?

9. • ECORE : 이벤트 루프 라이브러리
• EVAS : 캔버스 / 렌더링 엔진
• EDJE : 고급 GUI & 스크립트 엔진
• ELEMENTARY : 위젯 라이브러리
Today !!

10. ECORE
이벤트 루프 라이브러리

11. 이벤트 루프 라이브러리 (Ecore)
• Event Driven Mainloop
출처: http://egloos.zum.com/seoz/v/3827472

12. 이벤트 루프 라이브러리 (Ecore)
• Event Driven Mainloop
• 렌더링 UI
• 애플리케이션 상태 관리
• Block을 유발하지 않을 정도의 작은 규모의 작업(이벤트) 처리

13. EVAS
캔버스 / 렌더링 엔진

14. 캔버스 / 렌더링 엔진 (Evas)
• Scene Graph 기반 렌더링
• 화면에 출력 가능한 모든 오브젝트 상태를 트래킹
• 각 오브젝트의 화면 출력을 담당
• 폰트, Glyph 렌더링, 이미지 로딩, 스케일링, 블렌딩 등
• 렌더링 최소화
• 오직 변경된 영역만 화면 출력(Parital Rendering)
• 가려서 보이지 않는 객체를 식별하여 렌더링에서 제외
• 렌더링 최적화
• OpenGL, Software, SIMD(MMX, SSE, SSE3, NEON)
• Retained Mode 렌더링
• 애플리케이션이 직접 Drawing Command를 요청하지 않음
• Idle enterer에서 rendering을 수행

15. 캔버스 / 렌더링 엔진 (Evas)
• Automated update handling
• Start here

16. 캔버스 / 렌더링 엔진 (Evas)
• Automated update handling
• Next frame is here

17. 캔버스 / 렌더링 엔진 (Evas)
• Automated update handling
• Calculate actual update region deltas

18. 캔버스 / 렌더링 엔진 (Evas)
• Automated update handling
• Only draw updated regions

19. 캔버스 / 렌더링 엔진 (Evas)
• Automated update handling
• Result

20. EDJE
고급 GUI & 스크립트 엔진

21. 고급 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

22. 고급 GUI & 스크립트 엔진 (Edje)
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

23. 고급 GUI & 스크립트 엔진 (Edje)
.edc .cCompile-time
Run-time .edj
executable
edje_cc compile
Elm_layoutload
Run

24. ELEMENTARY
위젯 라이브러리

25. 위젯 라이브러리 (Elementary)

26. 위젯 라이브러리 (Elementary)
• 위젯 종류
• 일반 위젯
• 시각적 외양을 가짐: 버튼, 레이블, 체크박스, 리스트, 이미지 …
• 컨테이너 위젯
• 레이아웃 구성에 필요: Scroller, Layout, Box, Table, Grid …
• 스크린 확장성
• 해상도/스크린 크기에 따른 Scalability 제공
• 테마
• 같은 위젯 이더라도 테마에 따른 다양한 Look & Feel 구성 가능
• 디바이스 프로파일
• 구동 환경에 따른 Configurable한 위젯 동작 및 특성 제공

27. 위젯 라이브러리 (Elementary)
• Screen Scalable GUI

28. 위젯 라이브러리 (Elementary)
• Changeable Theme

29. • Configurable Device Profile Environment
위젯 라이브러리 (Elementary)
Wearable
Mobile

30. 위젯 라이브러리 (Elementary)
• 위젯 커스터마이징 기능 제공
• 앱 특화된 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

31. 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);
}

32. EFL 기본 프로그래밍
void btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
elm_object_text_set(obj, "Clicked!");
}

33. 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)

34. 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

35. Q&A

36. Thank you