Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tizen UIFW - EFL

1,358 views

Published on

Tizen UIFW - EFL by Woohyun Jung

Published in: Software
  • Be the first to comment

Tizen UIFW - EFL

  1. 1. 정우현 Samsung Electronics Software R&D Center 타이젠 UI앱의 필수!! EFL 파헤치기
  2. 2. Copyright © 2014 Samsung Electronics, Co., Ltd. All rights reserved. 2 Window 위에 놓여진 도화지에 그림을 그리는 …
  3. 3. EFL 이란? Enlightenment Foundation Libraries Enlightenment를 위한 Graphical User Interface Toolkit 라이브러리 모음
  4. 4. Enlightenment 프로젝트 • Window Manager + EFL 라이브러리 • 삼성이 주도하는 오픈소스 프로젝트 • 리눅스 기반 (윈도우, 맥, BSD도 지원) • 타이젠의 핵심 UIFW
  5. 5. Enlightenment Window Manager • Compositor, File Manager, App Launcher, Wallpaper… • 다양한 리눅스 배포판에 탑재 • Bodhi • Elive • HUMANity • Macpup • MoonOS • OpenGEU • Pentoo • PCLinuxOS • Sabayon • Unite17 • Yellow Dog
  6. 6. EFL 라이브러리 • EFL: Collection of EFL Core Libraries • Eina: 자료구조 & 알고리즘 라이브러리 • Eo: 객체 지향 오브젝트 모델 인터페이스 • Ector: 벡터 그래픽스 엔진 • Evas: 캔버스/렌더링 엔진 • Ecore: 이벤트 루프 라이브러리 • Edje: 고급 GUI & 스크립트 엔진 • … • Elementary: 위젯 라이브러리 Elementary EFL ECTOR
  7. 7. EFL로 할 수 있는 것 • GUI • 테마 • 애니메이션 • 위젯 • 사용자 입력 이벤트 (키, 마우스 …) • 다양한 프로파일 환경 제공 • IPC/소켓 통신 • 3D 그래픽 • 비디오/사운드 출력 • …
  8. 8. EFL in Tizen?
  9. 9. • ECORE : 이벤트 루프 라이브러리 • EVAS : 캔버스 / 렌더링 엔진 • EDJE : 고급 GUI & 스크립트 엔진 • ELEMENTARY : 위젯 라이브러리 Today !!
  10. 10. ECORE 이벤트 루프 라이브러리
  11. 11. 이벤트 루프 라이브러리 (Ecore) • Event Driven Mainloop 출처: http://egloos.zum.com/seoz/v/3827472
  12. 12. 이벤트 루프 라이브러리 (Ecore) • Event Driven Mainloop • 렌더링 UI • 애플리케이션 상태 관리 • Block을 유발하지 않을 정도의 작은 규모의 작업(이벤트) 처리
  13. 13. EVAS 캔버스 / 렌더링 엔진
  14. 14. 캔버스 / 렌더링 엔진 (Evas) • Scene Graph 기반 렌더링 • 화면에 출력 가능한 모든 오브젝트 상태를 트래킹 • 각 오브젝트의 화면 출력을 담당 • 폰트, Glyph 렌더링, 이미지 로딩, 스케일링, 블렌딩 등 • 렌더링 최소화 • 오직 변경된 영역만 화면 출력(Parital Rendering) • 가려서 보이지 않는 객체를 식별하여 렌더링에서 제외 • 렌더링 최적화 • OpenGL, Software, SIMD(MMX, SSE, SSE3, NEON) • Retained Mode 렌더링 • 애플리케이션이 직접 Drawing Command를 요청하지 않음 • Idle enterer에서 rendering을 수행
  15. 15. 캔버스 / 렌더링 엔진 (Evas) • Automated update handling • Start here
  16. 16. 캔버스 / 렌더링 엔진 (Evas) • Automated update handling • Next frame is here
  17. 17. 캔버스 / 렌더링 엔진 (Evas) • Automated update handling • Calculate actual update region deltas
  18. 18. 캔버스 / 렌더링 엔진 (Evas) • Automated update handling • Only draw updated regions
  19. 19. 캔버스 / 렌더링 엔진 (Evas) • Automated update handling • Result
  20. 20. EDJE 고급 GUI & 스크립트 엔진
  21. 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. 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. 23. 고급 GUI & 스크립트 엔진 (Edje) .edc .cCompile-time Run-time .edj executable edje_cc compile Elm_layoutload Run
  24. 24. ELEMENTARY 위젯 라이브러리
  25. 25. 위젯 라이브러리 (Elementary)
  26. 26. 위젯 라이브러리 (Elementary) • 위젯 종류 • 일반 위젯 • 시각적 외양을 가짐: 버튼, 레이블, 체크박스, 리스트, 이미지 … • 컨테이너 위젯 • 레이아웃 구성에 필요: Scroller, Layout, Box, Table, Grid … • 스크린 확장성 • 해상도/스크린 크기에 따른 Scalability 제공 • 테마 • 같은 위젯 이더라도 테마에 따른 다양한 Look & Feel 구성 가능 • 디바이스 프로파일 • 구동 환경에 따른 Configurable한 위젯 동작 및 특성 제공
  27. 27. 위젯 라이브러리 (Elementary) • Screen Scalable GUI
  28. 28. 위젯 라이브러리 (Elementary) • Changeable Theme
  29. 29. • Configurable Device Profile Environment 위젯 라이브러리 (Elementary) Wearable Mobile
  30. 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. 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. 32. EFL 기본 프로그래밍 void btn_clicked_cb(void *data, Evas_Object *obj, void *event_info) { elm_object_text_set(obj, "Clicked!"); }
  33. 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. 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. 35. Q&A
  36. 36. Thank you

×