Powered by GitBook

Tizen

Project 3 : 풍차 앱

학습 목표 : entry, dialog, image, gen_grid, button

이번 앱은, 기본적인 컨트롤들을 화면에 배치하는 방법과 다이얼로그를 사용하는 방법에 대해 익혀보자

컨테이너를 설명하기 전에 Tizen EDC에 대해서 설명하고자한다.

EDC는 Edje Data Collection의 약어로, Tizen App Framework의 기반인 EFL의 레이아웃 엔진인 EDJE를 위한 서술 파일이다.

안드로이드로 말하면 GUI를 정의하고있는 xml에 대응된다고 말 할 수 있다.

EDC를 이용해 GUI를 기술하도록 할 수 있도록 한 이유는, GUI 그래픽 디자이너가 EDC를 만들면, 프로그래머는 해당 컨트롤들에 이벤트 핸들러를 달아서, 프로그래밍 하는 협업이 가능하도록 하기 위해서 이다. 물론, EDC를 프로그래머가 만들수도있고, 그래픽 디자이너가 만들수도 있겠지만, 가급적, 화면 구성은 그래픽 디자이너가 하는게 분업화에 있어 유리한점이 있다.

EDC의 활용 예로는, 서로 상이한, 해상도의 기기에서 다른 GUI를 가지고 있을 때(앱을 만들었는데, 1개는 스마트폰용으로, 한개는 태블릿용으로 만들었다고 생각해보자), 프로그래머 소스파일에서, 2본에 대해 if else 처리를 하지 않고, EDC를 2개를 만들고, 소스파일은 1개로 처리할 수 도 있다.

이러한 EDC는 Tizen API에서는 layout으로 로딩되어 실체화되어 사용되게 된다.

보통 화면에 위젯들을 배치할 때에는, layout이나 elm_grid와 같은 컨테이너에 위젯들을 붙인다.

이렇게 붙일 때 컨테이너는 부모가 되고, 위젯들은 자식이 된다.

예를 들어 화면에

와 같이 Entry 와 이미지를 배치해보도록 하자.

// elm_grid
Evas_Object *elmgrid = elm_grid_add(ad->conform);
elm_grid_size_set(elmgrid, 480, 720);
evas_object_size_hint_weight_set( elmgrid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND );
elm_object_content_set(ad->conform, elmgrid);
evas_object_show(elmgrid);

// Entry
Evas_Object *entry1 = elm_entry_add(elmgrid);
elm_entry_entry_set(entry1, "Plz Enter txt");
elm_grid_pack(elmgrid, entry1, 20, 300, 200, 50);
evas_object_show(entry1);

// Image
Evas_Object *iconImg = elm_image_add(elmgrid);
elm_image_file_set(iconImg, "/opt/usr/apps/org.tizen.windmill/shared/res/windmill.png", NULL);
elm_grid_pack(elmgrid, iconImg, 20, 400, 200, 200);
evas_object_show(iconImg);

위와 같이 컨트롤들을 컨테이너에 붙이고 elm_grid_pack을 통해 배치를 할 수 있다.

이러한 배치는 위와 같이 프로그래머가 직접할 수도 있지만, Tizen 은 이러한 방식보다는 layout을 활용하여 하도록 하는 방법을 더 추천한다.

왜냐하면 프로그래밍 코드(예를 들면 *.c)에 디자인 좌표가 들어가는 것은 코드 관리를 어렵게 하며 디자이너와의 공동 개발을 할 때에, 파일이 나누어져있어야 서로 공동개발이 편리하다.

따라서 가급적 디자이너가 EDC파일을 만들면, 프로그래머는 해당 layout을 로딩하여, 프로그래밍 하는 것이 좋겠다.

이번에는 다이얼로그를 만들어 보자.

// popup
Evas_Object *popupQuestion = elm_popup_add(ad->conform);
elm_object_part_text_set(popupQuestion, "title,text", "This is a popup title");
elm_object_text_set(popupQuestion, "Do you want a fun?");

// button
Evas_Object *buttonNo = elm_button_add(popupQuestion);
elm_object_part_content_set(popupQuestion, "button1", buttonNo);
elm_object_text_set(buttonNo, "No");
evas_object_smart_callback_add(buttonNo, "clicked", cbButtonNo, popupQuestion);

// button
Evas_Object *buttonYes = elm_button_add(popupQuestion);
elm_object_part_content_set(popupQuestion, "button2", buttonYes);
elm_object_text_set(buttonYes, "Yes");
evas_object_smart_callback_add(buttonYes, "clicked", cbButtonYes, popupQuestion);

evas_object_show(popupQuestion);

여기서 elm_object_part_content_set에 지정한 영역 이름인 button1, button2는 popup.edc파일에 미리 정의된 영역을 의미한다.

와 같이 다이얼로그를 만들고 다이얼로그 제목과, 내용에 텍스트를 설정해보고, 버튼을 배치해보자.

버튼에 대한 callback 함수는 함수 선언부에

void cbButtonYes(void *data, Evas_Object *obj, void *event_info)
{
    Evas_Object *popup = data;
    if(popup)
        evas_object_del(popup);

    LOGI("cbButtonYes");
}

void cbButtonNo(void *data, Evas_Object *obj, void *event_info)
{
    Evas_Object *popup = data;
    if(popup)
        evas_object_del(popup);

    LOGI("cbButtonNo");
}

과 같이 넣어주면 되겠다.