Tizen UI Screen Layouts

Application의 UI를 개발하기 위해서는 체계적으로 UI Frame을 구성해야 효율적인 Application을 개발할 수 있습니다. 이에 이번 포스터에서는 Tizen Native Application UI개발을 위한 효율적인 UI Frame구성 방법과 각 Object의 기능에 대해 살펴보겠습니다.

Tizen Developer Site에서는 Tizen Native Application UI개발에 있어 Base Layout에 Applcation을 배치하는 것을 권장하고 있습니다. 그럼 먼저, Base Layout은 어떻게 구성되어 있는지 살펴보겠습니다.

(참고. https://developer.tizen.org/development/guides/native-application/user-interface/efl/ui-containers/creating-ui-screen-layouts)

base

<그림1. Base Layout wireframe and UI component hierarchy>

Tizen의 UI Frame은 그림1과 같이 Window – Conformant – Naviframe – View 순으로 계층형식으로 이루어져 있는 것을 볼 수 있습니다. 여기서 Window – Conformant – Naviframe은 Base Layout이고, Application Layout(View)는 Naviframe 위에 추가되는 것을 볼 수 있습니다.

각 계층은 다음과 같은 역할을 하고 있습니다.

1. Window(elm_win)

Window는 Screen Layout의 최상위 Object로 모든 UI 구성요소는 Window에 렌더링 됩니다.

2. Conformant(elm_conformant)

Conformant는 회전 또는 키패드로 인해 영역이 할당될 시 표시될 영역을 지원하고, Application의 크기를 조정합니다.

3. Naviframe(elm_naviframe)

Naviframe은 View의 Manager 역할을 하며, 선택적으로 Application의 Title을 제공합니다.

Naviframe은 잠시 후 자세히 설명하겠습니다.

Base Layout을 사용하는 것은 권장사항이며 필요에 의해 배제할 수 있습니다.(단, Window는 필수)

즉, Window에 직접적으로 View를 구성할 수 있고, 필요에 의해서 Conformant 혹은 Naviframe 혹은 둘 중하나는 배제하고 UI를 구성할 수 있습니다. 하지만, 효율적인 Layout을 구성하기 위해서는 Base Layout에 View를 구성하는 것이 좋습니다.

그럼 예제를 통해 Base Layout을 구성해보고 Base Layout에 간단한 Text를 출력하는 Application Layout을 추가해보겠습니다.

Tizen Studio에서 제공되는 ‘Basic UI with EDC’ Template을 활용하여 새로운 프로젝트를 생성하겠습니다.

생성된 프로젝트에서 create_base_gui 함수로 이동하시면 다음과 같이 Naviframe을 제외한 Base Layout이 기본적으로 생성되는 것을 볼 수 있습니다.(현 포스트에서는 가독성을 올리기 위해 소스상에서 appdata_s 구조체를 제거하였습니다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
static void
create_base_gui(appdata_s *ad)
{
    char edj_path[PATH_MAX] = {0, };
    /* Window */
    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
    elm_win_conformant_set(ad->win, EINA_TRUE);
    elm_win_autodel_set(ad->win, EINA_TRUE);
    if (elm_win_wm_rotation_supported_get(ad->win)) {
        int rots[4] = { 0, 90, 180, 270 };
        elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
    }
    evas_object_smart_callback_add(ad->win, “delete,request”, win_delete_request_cb, NULL);
    /* Conformant */
    ad->conform = elm_conformant_add(ad->win);
    elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
    elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
    evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    elm_win_resize_object_add(ad->win, ad->conform);
    evas_object_show(ad->conform);
    /* Base Layout */
    app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
    ad->layout = elm_layout_add(ad->win);
    elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
    elm_object_part_text_set(ad->layout, “txt_title”, “Hello Tizen”);
    evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
    elm_object_content_set(ad->conform, ad->layout);
    /* Show window after base gui is set up */
    evas_object_show(ad->win);
}

그럼, Conformant 밑에 Naviframe을 추가하여 Base Layout을 완성해보겠습니다.

1
2
3
4
5
6
7
/* naviframe */
Evas_Object *naviframe;
naviframe = elm_naviframe_add(ad->conform);
evas_object_size_hint_weight_set(naviframe, EVAS_HINT_EXPAND,EVAS_HINT_EXPAND);
elm_object_content_set(ad->conform, naviframe);
evas_object_show(naviframe);

위 naviframe소스는 예제소스로 상황에 맞춰 변경될 수 있습니다.

이로서 Base Layout은 완료되었습니다. Base Layout에 사용된 중요 API를 설명드리겠습니다.

1. elm_win_util_standard_add() : Window Object 생성 API

Parameter : Window Name, Window Title

2. elm_object_smart_callback_add() : 위젯 혹은 컨터이너 같은 스마트 object에 이벤트 콜백 함수를 지정하는 API

Parameter : Smart Object, Event Name(String), Callback Function, Data

3. elm_conformant_add() : Conformant Object 생성 API. 하나의 APP은 하나의 Conformant 만을 가져야 하며, 필요에 의해 Conformant가 없어도 문제 되지 않습니다.

Parameter : Parent Object

4. elm_win_indicator_mode_set() : indicator 표시 여부를 지정하는 API

Parameter : Window Object, 설정 모드(#Elm_Win_Indicator_Mode 중 선택)

5. elm_win_indicator_opacity_set() : indicator 투명도 지정 API

Parameter : Window Object, 설정 모드(#Elm_Win_Indicator_Opacity_Mode 중 선택)

6. elm_object_resize_object_add() : Window Object에 다른 Object를 추가하면서 크기를 변경하는 API

Parameter : Window Object, resize할 Object

Base Layout이 완료되었으므로 간단한 text를 출력하는 Application Layout을 Base Layout에 추가해보겠습니다.

(Application Layout은 Layout 뿐만 아니라 Table, Grid 등 상황에 맞춰 적용이 가능합니다.)

1
2
3
4
5
6
7
8
9
/* Base Layout */
layout = elm_layout_add(naviframe);
elm_layout_file_set(layout, EDJ_FILE, GRP_MAIN);
evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_content_set(naviframe, layout);
evas_object_show(layout);
elm_naviframe_item_push(naviframe,NULL,NULL,NULL,layout,”empty”);

Application Layout은 지난 포스터와 같이 text를 출력하는 EDJ파일의 PATH를 잡아 layout에 적용하였습니다.

여기서 중요한 부분은 코드의 마지막 줄인 elm_naviframe_item_push() API 입니다.

elm_naviframe_item_push() API에 대해 살펴보겠습니다.

1. elm_naviframe_item_push() : 새 item을 naviframe stack 위에 추가합니다.(and show)

Parameter : naviframe Object, lable in the title area, 이전 항목 이동 버튼, 다음 항목으로 이동 버튼,                                                                   main content Object, 현재 item style name

Return : Success Or Fail

즉, 위 소스에서 생성한 Item인 layout을 naviframe Stack 최상단에 올려 화면에 출력하는 것입니다. Application Layout은 layout, table, grid등 상황에 맞춰 적용이 가능하기 때문에 naviframe에 push되는 item은 사용자가 원하는 item을 지정할 수 있습니다. 이로서, Base layout에 Application layout을 올려 화면에 출력되는 것을 볼 수 있습니다.

hello-hoyun

<사진1. Base Layout and Application Layout>

위에 언급 했듯이, naviframe은 View의 Manager역할을 합니다. 단 하나의 화면을 출력할 경우에는 naviframe없이 window에 직접적으로 Layout을 적용할 수 있습니다. 하지만, 여러 개의 화면을 가지고 있는 Application의 경우 naviframe 활용에 따라 더욱 효율적인 UI를 개발할 수 있습니다. 이에 naviframe에 대해 조금 더 살펴보겠습니다.

naviframe을 통해 현 화면에 어떠한 view를 출력할지 결정하고 또한, view의 전환이 될 수 있게 지원합니다. naviframe은 view stack으로 구성되어 있습니다. 새로 push된 view는 이전 view 위에 push되고 stack 최상단 view만 화면에 출력됩니다. 이전 view는 삭제되지 않습니다. 이전 view는 상단의 view가 POP되면 화면에 출력됩니다. 이해를 돕기 위해 그림을 통해 설명하겠습니다.

asfsf

<그림2. naviframe Stack>

A라는 Layout과 B라는 Layout 두 개의 Layout을 가지고 있는 Application이 있습니다. 첫 화면인 A Layout을 출력하기 위해 navifarme stack에    A Layout을 Push하여 화면에 출력합니다. 이어서 어떠한 이벤트를 통해 B Layout이 화면 출력이 요구되는 상황이 발생하면, B Layout을 출력하기 위해 B Layout을 navifarme에 Push하여 화면에 출력합니다. navifarme은 Stack 최상단 View만 출력하기 때문에 최상단 View인 B Layout만 출력하게 됩니다. B Layout이 화면에 출력이 되고 있지만, A Layout은 제거가 된 것이 아니고, B Layout 밑에 존재하고 있게 됩니다. B Layout이 A Layout을 가리고 있다고 생각하면 쉽습니다. 다시 A Layout을 출력하기 위해서는 Stack 최상단 View인 B Layout을 POP하게 되면 Stack의 최상단인 A Layout이 화면에 출력됩니다.

그럼 이제 소스코드를 작성하여 naviframe에 대해 살펴보겠습니다.

예제로 개발될 프로젝트는 Main View에서 버튼을 클릭하면 Sub View가 출력되고 다시 버튼을 클릭하면 Main View가 출력되는 화면 전환 프로젝트입니다.

Tizen Studio에서 제공되는 ‘Basic UI with EDC’ Template을 통해 프로젝트를 생성합니다.

먼저 EDC 파일을 통해 다음과 같이 두 개의 Layout에 적용될 UI를 두 개의 Group으로 나누어 만듭니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
collections {
   group { name: “main_layout”;
      parts {
         part { name: “txt_title”;
            type: TEXT;
            mouse_events: 0;
            description { state: “default” 0.0;
               text { text: “A Layout”; font: “Tizen:style=regular”; size: 20; min: 1 1; align: 0.5 0; ellipsis: -1; }
               color: 0 255 255 255;
               rel1.relative: 0.5 0.25;
               rel2.relative: 0.5 0.5;
            }
         }
      }
   }
   group { name: “sub_layout”;
      parts {
         part { name: “txt_title”;
            type: TEXT;
            mouse_events: 0;
            description { state: “default” 0.0;
               text { text: “B Layout”; font: “Tizen:style=regular”; size: 20; min: 1 1; align: 0.5 0; ellipsis: -1; }
               color: 0 255 255 255;
               rel1.relative: 0.5 0.25;
               rel2.relative: 0.5 0.5;
            }
         }
      }
   }
}

다음으로 create_base_gui함수로 이동하여 다음과 같이 conformant 밑에 nivaframe을 추가하여 base layout을 소스를 작성합니다.

1
2
3
4
5
6
7
8
/* naviframe */
Evas_Object *naviframe;
naviframe = elm_naviframe_add(conformant);
evas_object_size_hint_weight_set(naviframe, EVAS_HINT_EXPAND,
EVAS_HINT_EXPAND);
elm_object_content_set(conformant, naviframe);
evas_object_show(naviframe);

이어서 naviframe에 다음과 같이 main Layout을 추가 후 EDJ FILE의 PATH를 설정하고, Sub Layout으로 이동할 수 있는 버튼을 만들겠습니다.

먼저 layout에 적용할 EDJ파일의 PATH를 define합니다.

#define EDJ_FILE “/opt/usr/apps/org.example.screenlayouts/res/edje/screenlayouts.edj”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* main Layout */
Evas_Object *main_layout;
main_layout = elm_layout_add(naviframe);
elm_layout_file_set(main_layout, EDJ_FILE, “main_layout”);
evas_object_size_hint_weight_set(main_layout, EVAS_HINT_EXPAND,EVAS_HINT_EXPAND);
evas_object_show(main_layout);
/* main button */
Evas_Object *main_button;
main_button = elm_button_add(main_layout);
elm_object_text_set(main_button,
        “<align=center><font_size=20>Go To <br> Sub Layout</font_size></align>”);
evas_object_resize(main_button, 150, 50);
evas_object_move(main_button, 110, 200);
elm_object_content_set(main_layout, main_button);
evas_object_show(main_button);
elm_naviframe_item_push(naviframe, NULL, NULL, NULL, main_layout,”empty”);

생성된 itme 즉, main Layout을 elm_naviframe_item_push를 통해 naviframe stack 최상단에 push시키는 것을 볼 수 있습니다.

프로젝트를 run하게되면 다음과 같이 Main화면이 출력되는 것을 볼 수 있습니다.

main

<사진2. Main Layout>

이어서, 다음과 같이 두 번째 화면이 되는 sub layout을 create_base_gui 함수 위에 create_sub_layout함수를 작성하여 추가 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
void create_sub_layout(void *data, Evas_Object *obj, void *event_info) {
    Evas_Object *naviframe = data;
    /* sub layout */
    Evas_Object *sub_layout;
    sub_layout = elm_layout_add(naviframe);
    elm_layout_file_set(sub_layout, EDJ_FILE, “sub_layout”);
    evas_object_size_hint_weight_set(sub_layout, EVAS_HINT_EXPAND,
    EVAS_HINT_EXPAND);
    evas_object_show(sub_layout);
    Evas_Object *sub_button;
    sub_button = elm_button_add(sub_layout);
    elm_object_text_set(sub_button,
            “<align=center><font_size=20>Go To <br> Main Layout</font_size></align>”);
    evas_object_resize(sub_button, 150, 50);
    evas_object_move(sub_button, 110, 200);
    elm_object_content_set(sub_layout, sub_button);
    evas_object_show(sub_button);
    elm_naviframe_item_push(naviframe, NULL, NULL, NULL, sub_layout, “empty”);
}

두 번째 화면이 호출될 시 naviframe에 새 item 즉, sub Layout이 push되게 됩니다. 이로서 naviframe stack의 최상단에는 sub Layout이 존재하게 되고 출력되는 것입니다.

이제 각 버튼에 evas_object_smart_callback_add() API를 통해 클릭 event를 부여하여 버튼을 클릭 시 화면이 전환되는 것을 확인해보겠습니다.

먼저, main Layout에서 sub Layout으로 전환될 수 있게 main_button에 다음과 같이 이벤트를 부여합니다.

1
2
evas_object_smart_callback_add(main_button, “clicked”, create_sub_layout,
            naviframe);

create_sub_layout 함수에 sub Layout을 구성해두었기 때문에, 버튼이 클릭되면 create_sub_layout 함수가 호출되고, sub layout이 naviframe stack의 최상단에 push되어 화면에 출력이 될것입니다.

이어서 sub Layout에서 main Layout으로 화면이 전환될 수 있게 sub_button에 다음과 같이 이벤트를 부여합니다.

1
2
evas_object_smart_callback_add(sub_button, “clicked”, naviframe_pop_cb,
            naviframe);

그리고, create_sub_layout 함수 위에 다음과 같은 함수를 추가합니다.

1
2
3
4
5
void naviframe_pop_cb(void *data, Evas_Object *obj, void *event_info) {
    Evas_Object *naviframe = data;
    elm_naviframe_item_pop(naviframe);
}

sub Layout에서 버튼을 클릭 시 elm_naviframe_item_pop() API를 통해 naviframe stack 최상단에 있는 item을 POP시키는 것을 볼 수 있습니다.

1. elm_naviframe_item_pop() : naviframe 최상단 item pop

Parameter : naviframe

즉, Application이 처음 실행될 시 naviframe stack 최상단에는 main Layout이 존재하고 있습니다. 버튼을 클릭하여 sub Layout으로 화면 전환을 요구시 sub Layout이 naviframe stack 최상단에 Push되어 최상단 item인 sub Layout이 화면에 출력되게됩니다. 다시 main Layout으로 전환하기 위해 버튼을 클릭하면 naviframe 최상단 item 즉, sub layout이 POP이 되어 main layout이 naviframe 스택의 최상단에 위치하게 되어 main layout이 화면에 출력됨을 볼 수 있습니다.

gjsgsksj

<사진3. Naviframe을 통한 화면 전환>

추가로 naviframe에 사용되는 API입니다.

https://developer.tizen.org/dev-guide/native/2.3.0/org.tizen.mobile.native.apireference/group__Naviframe.html

 

감사합니다.

Prepared by : 신재규

Tizen Studio를 통한 Text 및 사각형 출력

Tizen SDK가 지난 9월 Tizen Studio로 새 출시되었습니다.

먼저 기존 Tizen SDK에서 Tizen Studio로 변하게되며 어떠한 기능이 추가되었는지 간단히 살펴보겠습니다.

1. 인증 없이 에물레이터를 통한 APP개발 가능

기존 Tizen SDK에서는 7단계에 걸친 복잡한 인증 절차를 걸처야 에물레이터를 통해 APP개발과 테스트가 가능했습니다.(단, 디바이스를 통해 개발 및 테스트를 진행할 경우 인증을 받아야합니다. 인증 방법은 잠시 후 설명하겠습니다.) 하지만, Tizen Studio에서는 복잡한 인증 절차를 간소화 하고 인증서 생성 없이 에물레이터를 통해 APP개발과 테스트가 가능해졌습니다.

certificate-manager

       <사진1. Tizen Studio Certificate Manager>

2. Window에서도 EDC Editor 사용 가능

기존 Tizen SDK의 경우 Linux환경에서만 EDC Editor를 제공하였습니다. 이에 Window환경에서는 EDJ를 통해 UI를 구성할 경우 미리보기 없이 사진2와 같이 Text파일 형식을 통해 코딩만 가능하였습니다.

tizen-edc-sample

                           <사진2. Tizen EDC Sample>

하지만, Tizen Studio에서는 Window환경에서도 사진3과 같이 EDC Editor를 제공하여 쉽게 UI구성을 할 수 있게 제공합니다.

tizen-studio-edc-editor

              <사진3. Tizen Studio EDC Editor>

3. 안정적인 에물레이터 제공

필자의 경우 Window10을 사용하게 되는데 기존 Tizen SDK는 에물레이터가 실행이 되지 않은 경우가 빈번하여 Linux환경을 사용했습니다. 하지만, Tizen Studio는 Window10에서도 안정적으로 에물레이터를 제공하고 있어 Window상에서도 개발이 더욱 편리하게 되었습니다.

tizen-%ec%98%88%eb%ac%bc%eb%a0%88%ec%9d%b4%ed%84%b0

                <그림4. Tizen 에물레이터>

이 외에도 Tizen Studio에서 많은 변화가 있지만, 가장 눈에 띄는 변화를 간단하게 정리하였습니다. 이제 APP개발에 있어 복잡한 인증절차가 없어지고, Window환경에서도 EDC Editor가 제공될 뿐더러, 안정적인 에물레이터가 제공되어 APP개발이 더욱 편리하게 되었습니다.

그럼 이제 Tizen Studio를 통해 간단한 Text 및 사각형을 출력해보겠습니다.

먼저, EDC Editor를 사용하여 Text와 사각형을 구성해 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
collections {
   group { name: “main”;
      parts {
         part { name: “txt_title”;
            type: TEXT;
            mouse_events: 0;
            description { state: “default” 0.0;
               text { text: “Hello Tizen”; font: “Tizen:style=regular”; size: 20; min: 1 1; align: 0.5 0; ellipsis: -1; }
               color: 0 255 255 255;
            }
         }
         part { name: “rect_eJhZ”;
            type: RECT;
            scale: 1;
            description { state: “default” 0.0;
               color: 0 255 255 255;
               visible: 1;
               align: 0.5 0.5;
               rel1.relative: 0.25 0.25;
               rel2.relative: 0.75 0.75;
            }
         }
      }
   }
}

EDC Editor를 통해 group을 생성한 후 part를 추가해 text와 사각형을 추가한 후 색상과 위치 등을 설정하였습니다.

EDC를 통한 UI구성은 복잡하지 않아 자세한 설명은 생략하겠습니다.

컴파일을 하게 되면 Edje라이브러리를 통해 바이너리파일인 EDJ파일이 생성되게 됩니다.

그럼 생성된 UI인 EDJ파일을 Layout에 적용시켜보겠습니다.

먼저 EDJ파일의 PATH를 define시킵니다.

#define EDJ_FILE “/opt/usr/apps/org.example.basicuiwithedc/res/edje/basicuiwithedc.edj”

이후 create_base_gui 함수로 이동하여 아래와 같이 layout에 EDJ파일을 SET시킵니다.

1
2
3
4
5
6
7
/* Layout */
Evas_Object *layout = elm_layout_add(ad->win);
elm_layout_file_set(layout, EDJ_FILE, “main”);
elm_object_part_text_set(layout, “txt_title”, “Hello Tizen”);
evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_content_set(ad->conform, layout);
evas_object_show(layout);

사용된 API를 살펴보겠습니다.

  • elm_layout_add() : layout를 생성하는 API
    • parameter : parent object
  • elm_layout_file_set() : layout에 EDJ파일을 SET하는 API
    • parameter : layout object, layout에 사용되파일 경로, Group
  • elm_object_part_text_set() : object에 text를 SET하는 API
    • parameter : Elementary object, part, text
  • evas_object_size_hint_weight_set() : object의 크기를 대략적으로 지정하는 API
    • parameter : evas object , x, y
  • elm_object_content_set() : 컨터이너에 콘텐츠를 지정하는 API
    • parameter : Container, Content
  • evas_object_show() : 지정된 evas object를 출력하는 API
    • parameter : evas object

이제 project를 RUN시키면 아래 사진5와 같이 TEXT와 사각형이 출력되는 것을 볼 수 있습니다.

text%eb%b0%8f-%ec%82%ac%ea%b0%81%ed%98%95

       <사진5. Tizen TEXT 및 사각형 출력>

※참고 : USB 커넥터가 없는 SAMSUNG의 Galaxy Gear S2모델의 디버깅 방법

1. Galaxy Gear S2의 설정 -> Gear정보 -> 디버깅 활성화

2. Galaxy Gear S2와 개발에 사용될 PC가 같은 WIFI에 접속(Galaxy Gear S2의 Bluetooth는 비활성화 하는게 더욱 좋습니다.)

3. Tizen Studio의 Remote Device Manager 실행

   Tizen Studio Connetion Explorer의 아래 사진6과 같이 빨간네모박스 표시된 버튼을 클릭하시면 쉽게 실행할 수 있습니다.

connect

      <사진6. Tizen Studio Connection Explorer>

4. 실행된 Remote Device Manager의 + 버튼을 클릭하여 Device를 추가

    IP주소는 Gear의 설정 -> 연결 -> WIFI -> WIFIR 네트워크 에서 확인할 수 있습니다.

anjaj

                          <사진7. Device 설정>

5. 다음과 같이 Connect를 확인할 수 있고 이제 WIFI를 사용하여 Galaxy Gear S2를 통해 디버깅 및 업로드가 가능합니다.

%ec%97%b0%ea%b2%b0%ec%99%84%eb%a3%8c

               <사진8. Device 연결 완료>

다른 방법으로는 Tizen의 sdb기능을 사용하여 연결할 수 있습니다.(필자의 경우 이방법을 더욱 선호)

cmd를 실행 시킨 후 아래와 같이 Tizen Studio의 sdb가 설치된 경로로 이동합니다.

이동 후 ‘sdb connect ip주소’ 를 입력하면 device와 연결할 수 있습니다.

연결 해제의 경우 ‘sdb disconnect ip주소’를 입력하면 해제할 수 있습니다.

%eb%aa%85%eb%a0%b9%ec%96%b4

              <사진9. sdb를 사용한 device 연결>

단, 이 2가지 방법을 통해 device와 연결을 하였더라도 최소 연결시에는 디바이스 인증을 받아야합니다.(인증은 한번만 받으면 되고, 만약 tizen studio를 재설치할 경우 다시 인증을 받아야합니다.)

인증 방법은 다음과 같습니다.

1. Certificate Manager 실행 후 인증서 추가를 위해 + 버튼 클릭

2. SAMSUNG 클릭

%ec%9d%b8%ec%a6%9d%ec%a0%88%ec%b0%a81

                     <사진10. Deivce 인증 절차1>

3. Mobile/Wearable or TV 선택

t%ec%84%a0%ed%83%9d

                     <사진11. Device 인증 절차2>

4. Create a new certificate profile에 name 추가

name

                     <사진12. Device 인증 절차3>

5. Create a new author certificate

asdasdasd

                     <사진13. Device 인증 절차4>

6. Name과 Password 추가

naemnc

                     <사진14. Device 인증 절차5>

7. Samsung developer에 등록된 id로 로그인

%eb%a1%9c%ea%b7%b8%ec%9d%b8

         <사진15. Device 인증 절차6>

8. Browse를 클릭하여 Tizen Studio의 author추가

%ec%9d%b8%ec%a6%9d%ec%84%9c

                     <사진16. Device 인증 절차7>

9. Create a new distributor certificate

123

                     <사진17. Device 인증 절차8>

10. DUID 입력

234

                     <사진18. Device 인증 절차9>

DUID는 device와 connect 되어 있을 경우 자동으로 삽입됩니다.

next를 클릭하면 다음과 같은 인증이 완료되었다는 메시지를 확인할 수 있습니다.

345

                     <사진19. Device 인증 절차10>

이후 아래와 같이 연결된 device를 우클릭하여 Permit to install applications를 하면 Galaxy Gear S2를 통해 디버깅 및 APP업로드가 가능합니다.

456

         <사진20. Device Permit to Install applications>

실제로 Galaxy Gear S2에 위에서 만든 Text및 사각형 출력을 올려보겠습니다.

%eb%a7%88%eb%ac%b4%eb%a6%ac

                     <사진21. Galaxy Gear S2 APP>

위와 같은 절차를 거치면 에물레이터와 동일하게 APP이 올라간 것을 확인할 수 있습니다.

감사합니다.

Prepared by : 신재규

Tizen Native Application Life-Cycle

Tizen Native App을 개발하기 위해서는 App이 어떻게 실행되는지에 대해 알아야하는 중요한 부분입니다.

그럼 Tizen Native App은 어떻게 실행되는지에 대한 Life-Cycle에 대해 설명하겠습니다.

1.Tizen App Life-Cycle

Tizen App Life-Cycle은 그림1과 같이 구성되어 있습니다. 그림1을 보듯이 5가지의 콜백으로 Tizen App은 실행이 되어집니다.

5가지의 콜백은 다음과 같이 구성되어있습니다.

 app_lifecycle

<그림1. Tizen App Life-Cycle>

①  app_create

· 프로세스가 시작 될 때 호출됩니다.

· 프로세스가 시작되고 첫번째 명령으로 app_create에서 UI를 구성하는 것이 좋습니다.

② app_control

· 프로세스가 시작될 때 app_create 후에 호출되거나 프로세스가 running중에 실행 요청이 있을 경우 호출됩니다.

· 다른 App이 해당 App을 Launch 요청시 app_control 콜백 함수가 호출됩니다.

· 파라미터를 통해 App_control 데이터를 수신할 수 있습니다.

· ex) 다른 App과 연동되어 있는 App이 있다고 예를 들겠습니다.

        App(1)과  App(2)가 있습니다. App(2)는 App(1)과 연동이 되어 App(1)에서 실행이 가능합니다. 또한, 홈에서도 직접 실행이 가능합니다.

       그러므로 App(2)는 홈에서 직접 실행, App(1)에서 호출 두 가지 방법으로 실행시킬 수 있는 App입니다.

        App(2)는 홈에서 직접 실행될때랑, App(1)에서 호출되어 실행할 경우 다른 이벤트를 실행된다고 가정하겠습니다.

        이때 App(2)를 app_control을 통해 홈에서 실행하였는지, App(1)에서 실행하였는지 파라미터를 통해 정보를 보낼 수 있습니다.

        즉, App(2)는 app_control를 통해 어디서 실행을 호출하였는지 알 수 있어 해당되는 이벤트 또는 화면 구성 등을 할 수 있습니다.

③ app_resume(UI 어플리케이션에만 적용)

· 어플리케이션의 window가 화면에 출력될 때 호출됩니다.

④ app_pause(UI 어플리케이션에만 적용)

· 어플리케이션의 window가 화면에 출력되지 않을 때 호출됩니다.

⑤ app_terminate

· 어플리케이션의 프로세스가 종료되는 동안 호출됩니다.

· Main Loop 종료.

※ Tizen Natieve App은 UI가 없는 Service App 개발도 가능합니다. app_pause와 app_resume은 window와 함께 동작하는 피쳐이기 때문에

     service App에서는 호출되지 않습니다.

2. Tizne Native App Life-Cycle FlowChart

application_lifecycle_flowchart

<그림2. Tizen Application Life_Cycle FlowChart>

Tizen App은 UI App과 UI가 없는 Service App 두가지를 구성할 수 있습니다.

모든 App은 그림2의 왼쪽 프레임의 기본적인 Life-Cycle을 가지게 됩니다.

UI App의 경우, 추가적으로 그림2의 오른쪽 프레임의 Life-Cycle이 추가 생성되며 AddFrame()메소드가 호출 될 때 초기화 됩니다.

App이 실행되면 OnAppInitializing() 이벤트가 호출되고 이때 AddFrema() 메소드를 통해 그림2의 우측 프레임이 추가되어 초기화( OnIntializing() ) 및 생성됩니다. 만약 OnAppInitializing() 이벤트가 실패하면 App은 강제종료가됩니다.

App이 초기화에 성공하면, App은 running 상태가 되며, Event를 수행할 수 있습니다.

요약하자면,

App 실행 -> App 초기화 -> Frame 생성 -> App running 상태 -> 제거(App 종료)

로 볼 수 있습니다.

※ App이 종료되는 경우

① OnAppInitializing() 이벤트의 실패로 False가 반환되는 경우(AddFrame 실패)

② 시스템자원이 부족할 경우

③ Running 상태에서 디바이스의 End버튼을 클릭하는 경우

④ OnAppTerminating()가 호출되는 경우

이상으로 이번 포스터를 마치겠습니다.

Life-Cycle을 잘 이해하신다면 Tizen Native App 개발에 정말 많은 도움이 될 수 있습니다.

감사합니다.

Prepared by : 신재규

EFL 라이브러리

Tizen Native APP의 핵심인 EFL의 각 라이브러리에서 제공하는 기능과 특징에 대해 알아보겠습니다.

그림4

                                                                                           <ELF 블록 다이어그램>

EFL 블록 다이어그램을 보듯이, EFL은 많은 라이브러리로 구성되어있습니다. 그만큼 EFL은 다양한 기능을 제공하며 확작성을 고려하여 모듈화가 잘 되어있다고 볼 수 있습니다.

위 그림은 EFL 모듈 간의 빌딩 순서를 명확하게 보여주고 있습니다. 예를 들어, Evas의 경우에는 Eet, Eina에 의존하고 있으며, Ecore의 경우 Evas, Eina에 의존하게 됩니다. EFL은 OS를 기반으로 작동하며 EFL 어플리케이션은 EFL의 각 라이브러리가 제공하는 기능들을 이용하여 구연할 수 있습니다. 그럼 각 모듈의 역할에 대해 알아보겠습니다.

1. Eina

Eina는 자료구조 라이브러리입니다. C++의 STL과 같이 배열, 리스트, 해시, 트리 그리고 공유 문자열과 같은 복잡한 로직을 사용자가 쉽고 빠르게 구현할 수 있도록 유용한 기능을 제공합니다.

2. Eet

Eet는 데이터 인코딩 및 디코딩의 역할을 제공합니다. 임의의 자료구조나 이미지 데이터 등을 압축하여 파일로 저장하거나 네트워크를 통해 전송할 수 있습니다. 또한 Eet를 통해 압축된 파일을 읽고 디코딩할 수 있습니다. Zip과 유사한 압축기법을 제공하며 파일로부터 임의의 위치의 데이터에 빠르게 접근할 수 있습니다.

 3. Evas

Evas는 EFL의 가장 핵심으로 볼 수 있는 기능으로 하나의 캠버스 또는 렌더링 엔진으로 불립니다. 사용자는 Evas를 통해 윈도우 내에 이미지, 사각형, 선, 텍스트 등을 표현할 수 있으며 출력물 개별은 모두 객체화가 되어있습니다. Evas_Object 타입으로 객체화 하여 제공하며, Evas_Object 인터페이스로 접근하고 이를 통해 화면 상에 그래픽 객체들을 표현할 수 있습니다. 또한, Evas는 사용자 입력 이벤트 전달 메커니즘도 담당하여 각 오브젝트가 사용자 입력 이벤트에 적절하게 반응할 수 있도록 인터페이스도 제공합니다.

Evas는 렌더링 방식을 리테인 모드(retain mode)를 채택하였으며, 내부적으로 장면그래프(Scene-Graph)를 통해 오브젝트를 관리하며 화면상에 보여야 할 객체들을 적절히 최적화하여 알아서 렌더링을 해준다는 특징을 가지고 있습니다. 이를 통해 사용자는 복잡한 렌더링 메커니즘으로부터 자유로워져 어플리케이션의 주 로직의 구현에 집줄 할 수 있게 도와줍니다.

또한, evas는 기본적으로 소프트웨어 렌더링 방식을 지원하지만, 플랫폼 환경에 따라 오픈지엘 등과 같은 그래픽 H/W 가속 기능을 벡엔드로 지원합니다.

Evas

<Evas의 기본 Workflow>

4. Ecore

Ecore는 사용자들의 편의를 위해 제공되는 시스템 기반 라이브러리입니다. 메인 루프, 타이밍, 이벤트, 스레드, 윈도우 시스템 등과 관련된 기능들을 제공합니다. 복잡한 설정 및 사용단계들을 내부적을 처리해주고 쉽고 단순화하여 사용자에게 제공되므로 사용자들이 직접 시스템 기능들을 구현할 때 시간과 노력을 단축될 수 있도록 도와줍니다.

5. Edje

Edje는 복잡한 GUI 구성을 위한 기능들을 제공합니다. EDC라는 스크립트 언어를 제공하며 사용자는 EDC스크립트를 통해 프로그램 코드로부터 GUI부분을 분리하여 프로그램을 작성이 가능합니다. EDC는 edje_cc 컴파일러를 통해 EDJ바이너리 형태로 변환됩니다. 프로그램은 EDJ파일을 런타임시에 읽어 Evas_Object로 바인딩하여 GUI를 구축할 수 있습니다.

edje

<Edje의 기본 Workflow>

6. Embryo

Embryo는 일종의 바이트코드 가상 머신으로 EDC파일 내에서 구현될 수 있는 작은 프로그램을 위해 이용됩니다. EDC 내에 간단한 기능(단순 계산, 오브젝트 상태 바꾸기 등)을 구현하기 위해 C언어 스타일의 Embryo 스크립트 언어를 추가로 사용할 수 있습니다. 이러한 Embryo 스크립트는 폰(PAWN)컴파일러를 통해 폰 바이너리로 변환됩니다. 폰 프로그램은 기기 환경에 의존하지 않고 Embryo의 AMX(Abstract Machine eXecutive) 가상머신에 의해 해석되어 작동이 가능합니다. 즉, 하나의 출력물을 가지고 다른 기기 환경에서도 동일하게 동작을 보장합니다.

7. Emotion

Emotion은 비디오/오디오 플레이백 라이브러리입니다. Emotion은 Gstreamer, Xine와 같은 다른 비디오 재생 플러그인 등을 이용하여 영상을 재생하고 이러한 영상 출력결과물을 Evas_Object에 연동하여 사용자에게 제공합니다. 사용자는 이를 통해 동영상 재생과 함께 GUI를 결합한 화면 구성을 쉽고 간단하게 구현할 수 있습니다.

8. Elementary

Elementary는 위젯 툴킷 라이브러리입니다. 버튼, 리스트, 레이블, 슬라이더 등과 같은 범용 위젯들을 제공하며, 다양한 룩 앤 필(Look & Feel)을 지원하기 위한 동적 테마 변경, 다양한 스크린 해상도 지원을 제공합니다.

9. Efreet

Efreet는 아이콘, 데스크톱, 파일, 메뉴 등과 관련하여 Freedesktop.org의 표준에 맞춰 작동할 수 있도록 기능을 제공합니다.

10. Eio

Eio는 비동기 입출력을 위한 라이브러리입니다.

11. Ethumb

Ethumb는 frame 이미지를 더한 썸네일 이미지를 생성해주는 기능을 제공합니다.

12. Eeze

Eeze는 udev를 통하여 하드웨어 장비를 조작합니다. 예를 들어 CPU 온도, 전원 배터리와 같은 장비의 상태 및 정보를 얻고 조작하는데 사용됩니다.

13. Eldbus

Eldbus는 메시지 버스 시스템입니다.

14. Languauge Bindings

EFL은 기본적으로 C언어를 지원하며, 그 외에 JavaScript, 파이썬, C++ 등의 랭귀지 바인딩 또한 제공하고 있습니다.

감사합니다.

Prepared by : 신재규