천재태지의 세상 돌려보기

seoz.egloos.com

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



[EFL] 글자를 표현하는 Text/TextBlock 오브젝트 (2/5) - 실전 예제 (evas 사용) ├ Enlightenment, EFL

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


안녕하세요? 천재태지 서주영입니다.

지난 포스팅[1]에서는 글자를 표현하는 Text/TextBlock 오브젝트의 개념 및 차이점을 설명했습니다.
이번에는 Evas 오브젝트를 이용한 예제 코드를 살펴보겠습니다.

// gcc evas-text.c -o evas-text `pkg-config --libs --cflags elementary`
#include <Elementary.h>

static void
my_win_main()
{
   Evas_Object *win, *t, *tb;
   Evas *e;
   Evas_Textblock_Style *st;

   // 기본 윈도우 위젯 생성
   win = elm_win_util_standard_add("sample", "Sample");
   elm_win_autodel_set(win, EINA_TRUE);
   evas_object_resize(win, 300, 150);
   evas_object_show(win);

   // 1. elm_win에서 Evas 얻어오기
   e = evas_object_evas_get(win);

   // 2. Text 오브젝트 생성
   t = evas_object_text_add(e);
   evas_object_text_font_set(t, "DejaVu", 30);
   evas_object_text_text_set(t, "Text Object Test");
   evas_object_color_set(t, 255, 0, 0, 255);
   evas_object_move(t, 10, 10);
   evas_object_show(t);

   // 3. TextBlock 오브젝트 생성
   tb = evas_object_textblock_add(e);
   st = evas_textblock_style_new();
   evas_textblock_style_set(st,
                            "DEFAULT='font=Sans font_size=20 color=#000 wrap=mixed'");
   evas_object_textblock_style_set(tb, st);
   evas_object_textblock_text_markup_set(tb, "<b>TextBlock</b> Object<br> <i>Test</i>");
   evas_object_resize(tb, 300, 50);
   evas_object_move(tb, 10, 70);
   evas_object_show(tb);
   evas_textblock_style_free(st);
}

// main 함수
EAPI_MAIN int
elm_main(int argc, char **argv)
{
   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
   my_win_main();
   elm_run();
   elm_shutdown();
}
ELM_MAIN()

위 코드를 evas-text.c로 저장하시고 아래와 같이 빌드하세요. 직접 코드를 타이핑할 필요 없이 여기[2]에서 소스 코드를 다운로드 받으실 수도 있습니다.
$ gcc evas-text.c -o evas-text `pkg-config --libs --cflags elementary`

아래와 같이 실행하면 윈도우에 "Text Object Test"와 "TextBlock Object Test"라는 글자가 보입니다.
$ ./evas-text


예제 코드는 elementary의 윈도우 위젯을 사용하고 있습니다. elm_win_util_standard_add() API를 이용하여 evas나 ecore를 초기화하고 윈도우를 생성합니다.
물론 elementary를 사용하지 않고 evas와 ecore를 직접 생성하고 사용해도 되지만, 제 블로그에서는 elementary 위젯을 기반으로 된 예제를 만들 예정이라 이 예제에서도 elementary의 윈도우 위젯을 사용하였습니다.
Elementary로 애플리케이션을 작성하는 가이드는 "elementary로 애플리케이션 작성하기 (1) 윈도우 만들기"[3]를 참고하시기 바랍니다.

그럼 Text 오브젝트와 TextBlock 오브젝트를 처리하는 코드를 살펴보겠습니다.

1. elm_win에서 Evas 얻어오기

Text 오브젝트와 TextBlock 오브젝트는 elementary 위젯이 아니라 Evas에서 제공하는 기본 오브젝트입니다. 그래서 생성 시 인자로 캔버스(canvas)에 해당하는 Evas *를 넘겨줘야 합니다. 그런데 우리는 캔버스를 직접 생성하지 않았습니다. 그럼 어떻게 캔버스를 인자로 넘겨줄 수 있을까요?
사실 캔버스는 예제 코드에서 elm_win_util_standard_add() API내에서 자동으로 생성됩니다. 그래서 elm_win으로부터 캔버스를 얻어와야 합니다. 이 때 사용하는 API가 evas_object_evas_get()입니다. 이 API를 사용하면 기존에 캔버스에 추가된 아무 Evas 오브젝트를 이용하여 캔버스를 얻어올 수 있습니다.
e = evas_object_evas_get(win);
이는 elm_win이라는 Evas 오브젝트를 이용하여 캔버스(evas)를 얻어오는 API입니다.

2. Text 오브젝트 생성
t = evas_object_text_add(e);
evas_object_text_font_set(t, "DejaVu", 30);
evas_object_text_text_set(t, "Text Object Test");
evas_object_color_set(t, 255, 0, 0, 255);
evas_object_move(t, 10, 10);
evas_object_show(t);

evas_object_text_add(e);
Text 오브젝트를 생성합니다. 이 때, 인자로 Evas *를 전달합니다.

evas_object_text_font_set(t, "DejaVu", 30);
사용할 폰트를 설정합니다.

evas_object_text_text_set
(t, "Text Object Test");
Text 오브젝트가 표현할 글자를 설정합니다.

evas_object_color_set(t, 255, 0, 0, 255);
글자의 색상을 설정합니다. 예제에서는 R(255), G(0), B(0), A(255) 값을 통해 글자의 색을 빨간색으로 설정했습니다.
R은 빨간색, G는 녹색, B는 파란색, A는 투명도를 위한 알파값입니다.

evas_object_move()
다른 오브젝트 처럼 이 API를 이용하여 위치를 정합니다.

evas_object_show()
화면에 보여줍니다.

그런데 Text 오브젝트는 evas_object_resize() API로 크기를 조절하지 않습니다.
이는 Text 오브젝트는 주어진 폰트와 주어진 글자 내용을 기반으로 자동으로 크기가 결정되기 때문입니다.

3. TextBlock 오브젝트 생성

tb = evas_object_textblock_add(e);
st = evas_textblock_style_new();
evas_textblock_style_set(st,
      "DEFAULT='font=Sans font_size=20 color=#000 wrap=mixed'");
evas_object_textblock_style_set(tb, st);
evas_object_textblock_text_markup_set(tb, "<b>TextBlock</b> Object<br><i>Test</i>");
evas_object_resize(tb, 300, 50);
evas_object_move(tb, 10, 70);
evas_object_show(tb);
evas_textblock_style_free(st);

evas_object_textblock_add(e);
TextBlock 오브젝트를 생성합니다. Text 오브젝트와 마찬가지로 Evas *를 인자로 전달합니다.

TextBlock 오브젝트는 Text 오브젝트와 달리 스타일(style)이라는 개념이 있습니다.
스타일은 TextBlock에 사용될 글자의 속성을 기술하는 개념입니다.

evas_textblock_style_new()

새로운 TextBlock 스타일을 만듭니다.

evas_textblock_style_set()
해당 스타일의 내용을 채워줍니다.
예제에서는 Sans 폰트를 사용하는 크기 20 픽셀, 색은 검은색, 줄바꿈은 mixed 형식의 스타일을 정의했습니다.
evas_textblock_style_set(st, "DEFAULT='font=Sans font_size=20 color=#000 wrap=mixed'");

evas_object_textblock_style_set()
TextBlock에 원하는 스타일을 적용합니다.

evas_object_textblock_text_markup_set()
TextBlock 오브젝트에서 사용할 글자를 설정합니다.
evas_object_textblock_text_markup_set(tb, "<b>TextBlock</b> Object<br><i>Test</i>");
TextBlock 오브젝트는 Text 오브젝트와 달리 태그를 가진 마크업(mark-up) 텍스트를 인식하기 때문에 글자를 설정하는 API 이름이 xxx_markup_set이라고 붙여졌습니다. TextBlock 오브젝트에서 사용가능한 태그는 다른 포스팅에서 설명하겠습니다.

그 다음은 일반 Evas 오브젝트와 마찬가지로 evas_object_resize()로 크기를 결정하고 evas_object_move(), evas_object_show()로 오브젝트를 이동하고 보여줍니다.

그런데 여기서 TextBlock 오브젝트와 Text 오브젝트의 차이점이 드러납니다.
Text 오브젝트와 달리 TextBlock 오브젝트는 여러줄을 차지할 수 있습니다. 그렇기 때문에 어느 시점에서 자동으로 줄을 바꿔줘야 할지는 TextBlock 오브젝트의 가로 사이즈에 의해서 결정이 됩니다.
예를 들어 TextBlock 오브젝트의 가로 사이즈가 100이면 글자의 내용이 길어지는 경우 자연스럽게 100 픽셀 위치에서 글자의 줄바꿈이 발생합니다.
그래서 TextBlock 오브젝트는 evas_object_resize() API를 이용해서 크기를 정해줘야 합니다.

evas_textblock_style_free()
마지막으로 다 사용한 TextBlock 스타일을 메모리에서 해제합니다.

지금까지 간단히 Text 오브젝트와 TextBlock 오브젝트를 사용하는 방법을 알아봤습니다.
그런데 일반 애플리케이션에서 직접 evas의 Text 오브젝트나 TextBlock 오브젝트를 사용하는 일은 별로 없습니다. 보통은 이둘을 감싸고 있는 elementary의 label 위젯이나 edje 오브젝트를 사용합니다만 그래도 기본이 되는 evas Text, TextBlock 오브젝트의 사용법을 알아두면 좋겠죠 ^^

다음 시간에는 elementary의 label 위젯을 사용하는 방법을 알아보도록 하겠습니다.

[ Text/TextBlock 오브젝트 관련 글 ]
글자를 표현하는 Text/TextBlock 오브젝트 (1/5) - 기본 개념 설명
글자를 표현하는 Text/TextBlock 오브젝트 (2/5) - 실전 예제 (evas 사용)
글자를 표현하는 Text/TextBlock 오브젝트 (3/5) - 실전 예제 2 (elm_label 사용)
글자를 표현하는 Text/TextBlock 오브젝트 (4/5) - 실전 예제 3 (edje 사용)
글자를 표현하는 Text/TextBlock 오브젝트 (5/5) - TextBlock이 제공하는 태그



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



핑백

덧글

댓글 입력 영역