[EFL] Elementary 위젯

기본사항

Elementary 위젯은 Evas smart object 이다. 위젯은 evas 메쏘드를 사용할 수 있으며, 콜백도 evas 콜백을 사용해 시그널을 처리할 수 있다. 별도의 객체가 아닌 모든 객체가 Evas_Object로 동일하므로 복잡도는 증가된다. 잘못된 오브젝트를 넣을 경우 문제가 발생하므로 주의가 필요하다. 콜백의 경우에도 evas_object_smart_callback_add 와 같은 smart 계열 메쏘드를 사용해야 한다.

기타 evas 관련 내용은 해당 포스트 참조.

---

레이블

Evas_Object *label;

label = elm_label_add( win );

elm_object_text_set( label, "문자열" );

evas_object_move( label, 0, 0 );

evas_object_resize( label, 100, 10 );

evas_object_show( label );

설정

슬라이딩

elm_label_slide_speed_set( label, double speed);

elm_label_slide_duration_set( label, double duration);

elm_label_slide_mode_set( label, ELM_LABEL_SLIDE_MODE_ALWAYS );

ELM_LABEL_SLIDE_MODE_NONE

ELM_LABEL_SLIDE_MODE_AUTO

ELM_LABEL_SLIDE_MODE_ALWAYS

elm_label_slide_go( label );

생략 문자("...") 설정, 슬라이딩시는 동작하지 않는다.

elm_label_ellipsis_set( label, Eina_Bool ellipsis );

랩핑 모드 설정

elm_label_wrap_width_set( label, Evas_Coord width);

elm_label_line_wrap_set( label, ELM_WRAP_NONE );

ELM_WRAP_NONE

ELM_WRAP_CHAR

ELM_WRAP_WORD

ELM_WRAP_MIXED

---

이미지

Evas_Object *image;

image = elm_image_add( win );

if( !elm_image_file_set( image, "file_name" , NULL ))

{

}

시그널

"drop"

"clicked"

방향설정

void elm_image_orient_set( Evas_Object *image, Elm_Image_Orient orient );

ELM_IMAGE_ORIENT_NONE : 기본

ELM_IMAGE_ROTATE_90_CW : 시계방향으로 90도

ELM_IMAGE_ROTATE_180_CW : 시계방향으로 180도

ELM_IMAGE_ROTATE_90_CCW : 반시계방향으로 90도

ELM_IMAGE_FLIP_HORIZONTAL : 좌우반전

ELM_IMAGE_FLIP_VERTICAL : 상하반전

ELM_IMAGE_FLIP_TRANSVERSE : 사선으로 반전

ELM_IMAGE_FLIP_TRANSPOSE : 사선으로 반전

스케일 고정 여부

void elm_image_no_scale_set( Evas_Object *image, Eina_Bool no_scale );

이미지가 리사이즈 가능한지 설정

void elm_image_resizable_set( Evas_Object *image, Eina_Bool size_up, Eina_Bool size_down );

Smooth 효과

Eina_Bool elm_image_smooth_set( Evas_Object *image, Eina_Bool smooth );

비율고정

void elm_image_aspect_fixed_set( Evas_Object *image, Eina_Bool fixed );

---

리스트

Evas_Object *list;

Elm_Object_Item *item;

list = elm_list_add(win);

evas_object_size_hint_weight_set( list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

evas_object_size_hint_align_set( list, EVAS_HINT_FILL, EVAS_HINT_FILL);

elm_list_item_append( list, 

const char* label, // 아이템 레이블

Evas_Object* icon, // 아이템의 왼쪽 오브젝트

Evas_Obejct* end, // 아이템의 오른쪽 오브젝트

Evas_Smart_Cb func, // 아이템 선택 시 콜백

const void* data );

elm_list_item_insert_before(...);

elm_list_ltem_insert_after(...);

item = elm_list_selected_item_get( list );

elm_list_go( list);

시그널

"activated"

"clicked,double" 아이템 더블클릭

"selected" 아이템 선택

"unselected" 아이템 선택 취소

"longpressed" 롱클릭

"focused" 리스트 포커스

"unfocused"

"language,changed"

"edge,top" 최 상단으로 스크롤됨

"edge,bottom" 하단으로 스크롤됨

"edge,left"

"edge,right"

리스트모드

void elm_list_mode_set( Evas_Object* list, Elm_List_Mode mode );

ELM_LIST_COMPRESS

ELM_LIST_SCROLL : 기본값

ELM_LIST_LIMIT

ELM_LIST_EXPAND

ELM_IST_LAST

리스트 선택 모드

void elm_list_select_mode_set( Evas_Object *obj, Elm_Object_Select_Mode mode );

ELM_OBJECT_SELECT_MODE_DEFAULT

ELM_OBJECT_SELECT_MODE_ALWAYS

ELM_OBJECT_SELECT_MODE_NONE

가로방향 설정

void elm_list_horizontal_set( Evas_Object *list, Eina_Bool horizontal );

다중선택 설정 

void elm_list_multi_select_set( Evas_Object *list, Eina_Bool multi );

---

박스

box위젯은 범용적으로 사용가능한 컨테이너 위젯이다. 화면 구성단위별로 box로 구현해 스크롤러나 레이아웃에 붙이는 형태로 화면을 구성하게 된다.

Evas_Object *box;

box = elm_box_add( win );

evas_object_size_hint_weight_set( box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

elm_win_resize_object_add( win, box);

evas_object_show( box);

목록에 추가하기

// 리스트의 끝에 추가한다.

void elm_box_pack_end( Evas_Object *box, Evas_Object *object );

// 리스트의 처음에 추가한다.

void elm_box_pack_start( Evas_Object *box, Evas_Object *object);

// 리스트의 특정 오브젝트(after) 다음에 추가한다.

void elm_box_pack_after( Evas_Object *box, Evas_Object *object, Evas_Object *after);

// 리스트의 특정 오브젝트(before) 앞에 추가한다.

void elm_box_pack_before( Evas_Object *box, Evas_Object *object, Evas_Object *before);

목록에서 제거

void elm_box_unpack( Evas_Object *box, Evas_Object *object);

void elm_box_unpack_all( Evas_Object* box);

방향, 패딩, 정렬

가로방향으로 오브젝트를 배치할지를 설정한다.

void elm_box_horizontal_set( Evas_Object* box, Eina_Bool horizontal);

박스의 패딩값

void elm_box_padding_set( Evas_Object* box, Evas_Coord horizontal, Evas_Coord vertical );

정렬설정

void elm_box_align_set( Evas_Object* box, double horizontal, double vertical);

Evas_Object_Box_Layout

Evas는 스마트 오브젝트를 위한 메쏘드들을 제공하는데, 레이아웃 콜백등이 사용 가능하다. evas에 정의된 box 에 해당하는 레이아웃 콜백들은 다음과 같다.

evas_object_box_layout_vertical()

evas_object_box_layout_horizontal()

evas_object_box_layout_homogeneous_horizontal()

evas_object_box_layout_homogeneous_vertical()

evas_object_box_layout_homogeneous_max_size_horizontal()

evas_object_box_layout_homogeneous_max_size_vertical()

evas_object_box_layout_flow_horizontal()

evas_object_box_layout_flow_vertical()

evas_object_box_layout_stack()

레이아웃 변환

레이아웃간 변환 에니메이션은 위에 언급된 evas 레이아웃간의 변환을 다시 elemantary box 레이아웃으로 변경함을 의미한다. 우선, evas 레이아웃간의 transition 을 만들고, 이 transition을 elm_box_layout_set()을 사용해 설정해준다.

Elm_Box_Transition* 

elm_box_transition_new( 

const double    duration,

Evas_Object_Box_Layout    start_layout,

void*    start_layout_data,

Ecore_Cb    start_layout_free_data,

Evas_Object_Box_Layout    end_layout,

void*    end_layout_data,

Ecore_Cb    end_layout_free_data,

Ecore_Cb    transition_end_cb,

void*    transition_end_data

)

elm_box_layout_set( Evas_Object * obj,

Evas_Object_Box_Layout     cb,

const void*    data,

Ecore_Cb    free_data )

예를 들어 evas_object_box_layout_vertical 에서 evas_object_box_layout_horizontal 로 변환 하는 경우 아래와 같이 transition 생성 후 box에 레이아웃으로 설정하면 된다. box의 레이아웃 콜백들은 이미 구현되어 있으므로, 해당 콜백을 지정해도 되고, 별도의 콜백으로 결과를 받을 수도 있다.

Elm_Box_Transition *trans = elm_box_transition_new( 

1.0 , 

evas_object_box_layout_vertical,

NULL,

NULL,

evas_object_box_layout_horizontal,

NULL,

NULL,

anim_end,

NULL );

elm_box_layout_set( box, 

elm_box_layout_transition, 

trans,

elm_box_transition_free);

---

웹

elementary에서 웹킷을 사용하려면 WebKit/Efl(EWebKit)이 필요하다.

Evas_Object *web;

Eina_Bool result;

if( !elm_need_web() )

{

return;

}

web = elm_web_add( win );

result =  elm_web_url_set( web, "http://url );

시그널

"inputmethod,changed"

"link,hover,in"

.

.

"load,document,finished"

"load,error"

"load,finished"

"load.newwindow.show"

"uri.changed"

.

.

다이얼로그 설정

자바스크립트나 파일선택등 다이얼로그 표시시에 inwin위젯으로 표시할지 설정한다.

elm_web_inwin_mode_set( Evas_Object *web, Eina_Bool value );

ewk

웹킷 오브젝트로부터 ewk_view를 얻는다. elementary보다 세부적인 처리가 가능.

Evas_Object *ewk_view;

Evas_Object *frame;

const char contents[] ="<html></html>\n";

ewk_view = elm_web_webkit_view_get( Evas_Object *web );

frame = ewk_view_frame_main_get( ewk_view );

ewk_frame_contents_set( frame, contents, sizeof(contents) -1, "text/html", "UTF-8", NULL );

History

다시읽기

elm_web_reload( Evas_Object *web );

elm_web_reload_full( Evas_Object *web );

히스토리 설정

elm_web_history_enabled_set( Evas_Object *web, Eina_Bool enabled );

이동

Eina_Bool elm_web_back( Evas_Object *web);

Eina_Bool elm_web_forward( Evas_Object *web);

Eina_Bool elm_web_navigate( Evas_Object *web, int steps );

콜백

페이지 윈도우 생성시 호출되는 콜백 정의, 콜백 반환값은 웹 오브젝트

Evas_Object*(*Elm_Web_Window_Open)(

void *data, 

Evas_Object *obj, 

Eina_Bool java_script,

const Elm_Web_Window_Features *window_features );

 

elm_web_window_create_hook_set( web, Elm_Web_Window_Open func, void* data);

자바 스크립트 후킹 관련 콜백

Elm_Web_Dialog_Alert

Elm_Web_Dialog_Confirm

자바 스크립트 콘솔 메시지 후킹

void( * Elm_Web_Console_Message)(

void *data,

Evas)Object *web,

const char *message,

unsigned int line_number,

const char *source_id );

elm_web_console_message_hook_set( web, Elm_Web_Console_Message func, void *data);

설정

user-agent

void elm_web_useragent_set( Evas_Object *web, const char* user_agent);

배경색

void elm_web_bg_color_set( Evas_Object *web, int r, int g, int b);

---

Layout

UI를 위해 중요한 위젯이 Layout 이다. elementary 위젯에서 edje 스크립트 파일을 사용 가능케 하는 위젯이므로, 잘 활용하면 ui 구성이 간단해 질 수 있다. 세부적인 내용은 EDC 관련 포스트에서 다룬다.

시그널

theme,changed

language,changed

---

Scroller

스크롤 기능을 위한 위젯으로 하나의 오브젝트만 가질 수 있는 컨테이너 위젯이다. 하나의 오브젝트만 가지므로 box 같은 다른 컨테이너 위젯에 다른 위젯들을 넣고, 스크롤 위젯에 포함시켜야 한다. EDC로 UI 구성시 swallow 파트에 scroller를 붙이고, 여기에 다시 box, table 위젯을 포함시키는 형태로 구현한다. 하지만, 스크롤바 UI 자체가 구려(?)서 실제 사용은 다른 UI 요소들과 혼합해 사용해야 할 듯 싶다. 별 내용은 없으니 그냥 자주 쓸 함수들만 정리

시그널

focused / unfocused

edge,left / edge,right /edge,top / edge,bottom

scroll / scroll,left / scroll,right / scroll,up / scroll,down / scroll,drag,start / scroll,drag,stop / scroll,anim,start / scroll,anim,stop / scroll,page,cahged

vbar,drag / vbar,press / vbar,unpress

hbar,drag / hbar,press / hbar,unpress

ex)

Evas_Object* scroller;

scroller = elm_scroller_add( win );

evas_object_size_hint_weight_set( scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

elm_win_resize_object_add( win, scroller);

evas_object_show( scroller);

Evas_Object* box;

.

.

elm_object_content_set( scroller, box );

elm_scroller_bounce_set( scroller, EINA_TRUE, EINA_FALSE);

// 스크롤바를 항상 보일지..

elm_scroller_policy_set( scroller, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_ON);

elm_scroller_page_relative_set( scroller, 0, 1);

elm_scroller_region_show( scroller, x, y, w, h );

elm_scroller_propagate_events_set( scroller, EINA_TRUE);