천재태지의 세상 돌려보기

seoz.egloos.com

- About Me... - Enlightenment, EFL - 타이젠 Tizen



[EFL] elementary로 애플리케이션 작성하기 (2) 배경, 레이블, 버튼 만들기 ├ Enlightenment, EFL

[ EFL 게시물 목차 : http://seoz.egloos.com/3458699 ]


< elementary 애플리케이션 개발 목차 >
(1) 윈도우 만들기
(2) 배경, 레이블, 버튼 만들기
(3) elementary 매크로를 이용한 메인 함수 작성

안녕하세요? 천재태지 서주영입니다.
지난 포스팅 "elementary로 애플리케이션 작성하기 (1) 윈도우 만들기 "[1]에서는 main 함수를 만들고 아래와 같이 빈 윈도우를 만들어보았습니다.
< 그림 1. 빈 윈도우 >

이번 포스팅에서는 아래 3 가지를 해봄으로써 아주 간단한 애플리케이션을 제작해보겠습니다.

1. 기본 배경 넣기
2. 레이블 추가하기
3. window를 닫을 수 있는 버튼 추가하기

이정도하면 어디가서 EFL로 hello world 프로그램은 만들어봤다고 말할 수 있겠습니다 ^^

설명하기에 앞서 코드를 먼저 보여드리겠습니다.
지난 포스팅 "elementary로 애플리케이션 작성하기 (1) 윈도우 만들기 "[1]과 다른 부분은 파란색으로 표시했습니다.

#include <Elementary.h>

// 4. 버튼에 콜백 추가하기
static void
_btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
   elm_exit();
}

int
main(int argc, char **argv)
{
   Evas_Object *win, *lb, *btn;

   elm_init(argc, argv);
   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);

   // 1. 윈도우에 기본 배경 사용하기
   win = elm_win_util_standard_add("sample", "Sample");
   elm_win_autodel_set(win, EINA_TRUE);

   // 2. 레이블 위젯 사용하기
   lb = elm_label_add(win);
   elm_object_text_set(lb, "Welcome to SeoZ's EFL Lecture!");
   evas_object_resize(lb, 200, 50);
   evas_object_show(lb);

   // 3. 버튼 위젯 사용하기
   btn = elm_button_add(win);
   elm_object_text_set(btn, "Click to close.");
   evas_object_move(btn, 0, 50);
   evas_object_resize(btn, 200, 50);
   evas_object_show(btn);
   
   // 4. 버튼에 콜백 추가하기
   evas_object_smart_callback_add(btn, "clicked", _btn_clicked_cb, NULL);

   // 5. window 보여주기
   evas_object_resize(win, 200, 100);
   evas_object_show(win);

   elm_run();
   elm_shutdown();
   
   return 0;
}

만약 소스코드를 타이핑하기 귀찮으신 분은 아래 링크에서 마우스 우클릭 후 "다른 이름으로 저장"을 이용하여 소스 코드를 다운로드 받으시기 바랍니다.

1. 기본 배경 넣기

이전 포스팅[1]에서 윈도우를 만들 때 아래와 같이 elm_win_add() API[2]를 사용하였습니다. 

win = elm_win_add(NULL, "sample", ELM_WIN_BASIC);
그런데 elementary에서는 윈도우 오브젝트를 생성할 때 아예 배경을 만들어주는 API를 제공하고 있습니다. 바로 elm_win_util_standard_add() API[8][3]입니다.
이 API는 elm_win_add()와 elm_win_title_set(), elm_bg_add() 등을 합쳐놓은 API입니다.
elm_win_util_standard_add() API에 대한 자세한 설명은 "[EFL] elm_win_util_standard_add() API로 elementary 윈도우 생성하기[8]"를 참고하시기 바랍니다.

Evas_Object *elm_win_util_standard_add(const char *name, const char *title)

첫 번째 인자는 윈도우의 이름이고 두 번째인자는 윈도우의 타이틀입니다.

이전 시간에 했던 것 처럼[1] 컴파일을 하고 실행을 해봅니다. 우선 소스코드를 sample2.c로 저장을 합니다.

$ gcc sample2.c -o sample2 `pkg-config --cflags --libs elementary`
$ ./sample2

< 그림 2. 기본 배경이 있는 윈도우 >

2. 레이블 추가하기


다음은 가장 간단한 위젯인 레이블(label) 위젯을 사용해보겠습니다.
레이블 위젯은 elm_label_add() API[4]로 생성합니다. 인자로는 레이블 위젯의 부모 오브젝트인 윈도우 오브젝트를 넘겨줬습니다.

lb = elm_label_add(win);
elm_object_text_set(lb, "Welcome to SeoZ's EFL Lecture!");
evas_object_resize(lb, 200, 50);
evas_object_show(lb);

레이블에 들어가는 글자를 설정하기 위해서 elm_object_text_set() API를 사용하였습니다.
elm_object_text_set() API는 위젯의 기본 텍스트 부분에 글자를 설정하는 API입니다. 이 API는 대부분의 위젯에 사용할 수 있으며 label 위젯의 경우 label의 글자를 설정하는데 사용됩니다.
마찬가지로 오브젝트를 resize하고 show해줘서 화면에 보일 수 있게 합니다.


3. 버튼 추가하기

이번엔 프로그램을 종료할 수 있는 버튼(button) 위젯을 추가해보겠습니다. 왼도우, 레이블 위젯과 마찬가지로 elm_xxx_add()처럼 생긴 elm_button_add() API[5]를 이용해서 위젯을 생성합니다. 인자로는 버튼 위젯의 부모 오브젝트인 윈도우 오브젝트를 넘겨줬습니다.

btn = elm_button_add(win);
elm_object_text_set(btn, "Click to close.");
evas_object_move(btn, 0, 50);
evas_object_resize(btn, 200, 50);
evas_object_show(btn);

레이블 위젯과 마찬가지로 버튼의 글자를 설정하기 위해 elm_object_text_set() API를 사용하였습니다.
그리고 move, resize, show를 이용하여 버튼 오브젝트의 위치를 옮기고 크기를 조절하고 화면에 보여줍니다.

< 그림 3. 레이블 및 버튼 위젯 추가 >


자, 버튼도 화면에 나왔습니다. 이제 버튼을 클릭하면 프로그램을 종료할 수 있게 하겠습니다.
버튼을 클릭하는 이벤트가 발생한 경우, 우리가 원하는 코드를 실행시키려면 콜백을 추가해야 합니다.

4. 버튼에 콜백 추가하기

콜백(callback)이란 원하는 시점에 개발자가 미리 지정한 함수를 호출하는 루틴을 말합니다.
이 예제에서는 "원하는 시점"은 "버튼을 클릭한 시점"이 되고 이 때 호출되는 함수는 개발자가 미리 지정한 특정 함수가 됩니다.
이 때 불리는 함수를 콜백 함수(callback function)라고 부릅니다.

버튼 위젯을 위한 콜백을 추가하는 방법은 다음과 같습니다.
evas_object_smart_callback_add(btn, "clicked", _btn_clicked_cb, NULL);

이는 버튼이 클릭("clicked")이 되면 _btn_clicked_cb()라는 콜백 함수를 불러달라는 명령입니다.

그럼 evas_object_smart_callback_add() API[6]에 대해서 알아보겠습니다.
일단 API이름에서 evas_object_smart라는 것은 이 함수의 주체가 되는 오브젝트가 Evas의 스마트 오브젝트(evas smart object)라는 것을 의미합니다. (evas object는 지난 시간[1]에 말씀드린 것 처럼 화면에 그려지는 모든 오브젝트를 말합니다.)
스마트 오브젝트라는 것은 Evas에서 제공하는 기본적인 rect, text, image, polygon, ... 등등의 오브젝트 외의 추가 오브젝트를 의미합니다. Elementary 위젯도 스마트 오브젝트이기 때문에 evas_object_smart라는 용어를 사용했습니다.
그리고 나머지 callback_add라는 것은 말 그대로 콜백을 추가하겠다는 의미입니다.
그래서 evas_object_smart_callback_add()가 됩니다.

이 API의 첫 번째 인자는 스마트 오브젝트가 오며, 여기서는 버튼 위젯입니다.
두 번째 인자는 스마트 콜백의 종류입니다. 스마트 콜백은 스마트 오브젝트를 만드는 사람이 직접 정의할 수 있기 때문에 열거형(enum)이 아닌 문자열로 되어 있습니다. 여기서는 "clicked"라는 스마트 콜백을 의미하는데, 버튼이 클릭된 경우를 말합니다.
세 번째 인자는 해당 이벤트가 발생했을 때 호출할 콜백 함수입니다.
네 번째 인자는 콜백 함수에 인자로 넘겨주는 데이터인데, 여기서는 특별히 필요하지 않아서 NULL을 넘겨줬습니다.

자, 이렇게 하면 버튼 위젯을 클릭했을 때 NULL을 인자로 하는 _btn_clicked_cb() 함수가 호출됩니다.
_btn_clicked_cb() 함수는 아래와 같습니다.

static void
_btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
   elm_exit();
}

evas_object_smart_callback_add() API 마지막에 NULL을 넘겨줬기 때문에 _btn_clicked_cb() 함수의 첫 번째 인자인 void *data는 NULL이 됩니다.
두 번째 인자인 Evas_Object *obj는 스마트 콜백의 주체 오브젝트인 버튼 오브젝트입니다.
마지막 인자인 void *event_info는 각 스마트 콜백마다 넘겨주는 추가 정보가 들어가는데, 버튼 위젯의 "clicked" 스마트 콜백의 경우 NULL이 넘어오기 때문에 여기서는 사용하지 않습니다.

이렇게 _btn_clicked_cb() 함수가 호출이 되면 elm_exit()을 이용하여 애플리케이션의 메인 루프를 종료합니다.
애플리케이션의 메인 루프에 대한 정보는 "[EFL] ecore main loop의 이해[7]"를 참고 하시기 바랍니다.

5. window resize 및 show

지난 시간에는 window만 생성하고 바로 resize 및 show를 해줬기 때문에 별도로 언급을 하지 않았습니다만,
window의 show는 항상 window 내부의 내용을 생성하고 난 다음에 호출해줘야 합니다.
그래서 elm_run() 직전에 window 오브젝트를 show하는 코드가 위치합니다. 이 때, resize도 같이 호출해줬습니다.


자, 이제 우리가 작성한 코드를 다시 컴파일해서 실행해보면 이전과 마찬가지로 다음과 같은 애플리케이션이 실행되지만, 이제 버튼을 클릭하면 애플리케이션이 종료되는 것을 확인하실 수 있습니다.


이렇게 간단히 elementary를 이용하여 애플리케이션을 작성하는 방법을 알아봤는데요,
다음 시간에는 elementary에서 권장하는 매크로를 이용하여 애플리케이션의 메인 함수를 작성하는 방법을 소개하겠습니다.

감사합니다.

< elementary 애플리케이션 개발 목차 >
(1) 윈도우 만들기
(2) 배경, 레이블, 버튼 만들기
(3) elementary 매크로를 이용한 메인 함수 작성




핑백

덧글

  • 천재태지서주영 2014/07/10 03:04 # 답글

    1. 소스코드 다운로드 링크 수정
    2. 일부 코드 내용 수정
    3. 스크린샷 최신 버전으로 업데이트
댓글 입력 영역