이번시간에는 Tizen Native IDE 를 사용하여 간단한 to do app 을 만들어 보도록 하겠습니다.
만들앱의 최종 모습은 다음과 같습니다.
(1) To do 화면에서 할 일을 생성 (New 버튼클릭 -> Input to do 에서 할일 입력 -> OK 클릭 -> To do 리스트에 등록)
(2) 할일 (to do) 을 끝내거나 또는 삭제 (To do list 에서 todo 클릭 -> 일 끝내기(Finish) 또는 삭제(Delete) )
* finish 를 누리면 해당 일은 done 으로 이동합니다.
(2) Done 화면에서 끝낸 일을 보기/삭제 를 할 수 있습니다. (Done list 에서 해당 done 클릭 -> 삭제(delete))
app 자체는 별로 어렵지 않지만.. TIzen Native 앱의 개발 환경은 모바일 에다가 C++ 기반이기 떄문에
C++ 개발에 관한 지식이 필요합니다. 모바일 app 개발 경험이 있으면 더 좋구요~
이제 Tizen Native IDE 를 사용하여 App 을 만들어 보도록 하겠습니다.
1. Tizen UI app 의 Life cycle 에 관한 이해
우선 코딩 하기 앞서 Tizen app , UI 에 관한 구조에 대해 간략히 설명을 드리면~
일반적인 Tizen UI App 은 다음과 같은 Life Cycle 을 가지고 있습니다.
이걸 다 알아야 app 개발을 할 수 있느냐? 아닙니다 ㅎㅎ
중요한 것만 알아두고 나중에 필요할 때 찾아 보면 됩니다. 참고만 하시고 필요할 때 필요한 부분만 구현해 주시면 됩니다.
크게 보아 왼쪽은 하나의 App 자체의 생성 소멸과 관련된 Life cycle 이고 오른쪽은 App 에서 사용하는 UI Frame 의 Life cycle 입니다.
App 의 OpAppInitialized() 에서 AddFrame()을 호출하여 App 에서 사용하는 UI 를 등록하게 됩니다.
Frame 은 뒤에서 자세히 설명하겠지만 모든 UI 요소의 최상위 부모이고 하위에 UI 요소를 포함하는 프로그램의 메인 Container 입니다.
2. TIzen UI 구조의 이해
위에서 Frame 이 프로그램의 최상위 UI 요소라고 그랬죠?
Frame 이외에 하위 UI 요소로 Form, Panel, Contol 이 있습니다.
말로 설명하는 것보다 아래그림으로 이해하시는게 편한거 같네요
위 그림에서 보듯이 한 화면의 UI container 가 Form 이고 , Contol 은 버튼 이나 라벨 등의 구체적인 외향? 이있는 UI 입니다.
쉽게 하나의 화면 = Form 이고 버튼, label, text view… = Control 로 생각하시면 됩니다~
그럼 panel 은 머냐구요?
Panel 은 Form 안에서 일정 Control 을 포함하여 묶어서 관리할 때 쓰이는 UI container 입니다.
주로 보통 Tab 으로 구성된 App 일경우 하나의 Tab 마다 보이는 control 을 묶어 관리하기 위해 하나의 panel 을 사용하게 됩니다.
아래 app 은 1개의 form (한 화면)과 form 안에 3개의 panel 로 구성되어 있습니다.
그럼 위의 todo 앱은 어떤 UI 요소가 사용되었는지 짐작 하시겠죠?
Frame 은 1개, Form 은 화면이 2개 니까 2개, 버튼 , 리스트 뷰, label 등의 여러 Control 등이 사용되었습니다.
panel 은 tab 구조 을 사용하지 않아 panel 은 사용을 안했습니다.
3. TIzen Native Project 생성
이제 본격적으로 Tizen Native IDE 를 실행하여 todo 프로젝트를 만들어 보도록 하겠습니다.
IDE의 Project Template 을 이용하면 위의 life cycle 에 기술된 일을 담당하는 class 와 UI 등이 구현된 template 을 생성할 수 있습니다.
todo app에는 화면이 tab 기반이 아니라 form 기반이기 때문에 다음의 프로젝트를 선택하여 app tempate 을 생성합니다.
File > New > Tizen > Tizen Native Project > Form-based Application > With SceneManager
프로젝트 생성이 끝나면 다음과 같은 프로젝트 파일이 생성됩니다.
중요한 파일만 살펴보면..
C++ 개발 환경이므로 소스와 헤더가 프로젝트 하위의 src 와 inc 폴더에 에 각각 구분해서 들어가 있습니다.
그리고 UI 를 정의하는 xml 파일이 res/screen-size-normal 에 들어가 있습니다.
또한 app 의 버전, 이름 등 설정 정보 등을 기록하는 manifest 파일이 있습니다.
src 폴더안 에는 기본적으로 프로젝트 명에 더해 Entry, Frame, FormFactory 등의 접미사가 붙어 파일이 생성 됩니다.
해당 파일의 기능을 간략히 요약하면
(1) TizenToDoEntry : 처음 진입점이 되는 OspMain 함수를 실행합니다. 이 메인함수에서 TizenToDo 인스턴스를 생성합니다.
(2) TizenToDo : App life cycle 을 관리합니다. OnAppInitialized 함수를 실행하여 프로그램을 실행합니다. OnAppInitialized 에서는 프로그램 UI 틀이 되는 TizenToDoFrame 인스턴스를 생성합니다.
(3) TizenToDoFrame : Frame 의 하위 요소를 생성을 관리합니다. SceneManager 를 사용할 경우 SceneManager 및 FormFactory, PanelFactory, Scene flow 등의 생성 및 관리를 합니다. (Scene Manager 의 역활은 아래에서 자세히 설명 드리겠습니다.)
(4) TizenTodoFormFactory : form 생성 요청이 들어오면 해당 form 인스턴스 생성을 합니다.
(5) TizenTodoMainForm : 1개의 폼입니다. 폼안의 pannel, control 등의 UI 요소의 생성 관리 , 이벤트 핸들링 를 담당합니다.
(6) TizenTodoPanelFactory : panel 생성 요청이 들어오면 해당 panel 인스턴스 생성을 합니다. (이 프로그램에서는 참고로 panel 을 사용하지 않으므로 이 소스는 필요가 없습니다.)
4. Native UI builder 를 이용하여 form 디자인하기
우선 하나의 화면으로 구성되는 form 을 디자인 하도록 하겠습니다.
디자인은 위 TizenTodoMainForm 소스 에서 직접 하셔도 되지만 Tizen SDK에서 제공하는 UI Builder 툴을 이용하면 눈으로 보면서 쉽게 UI 를 제작하실수 있습니다.
위의 파일 구조에서 설명 드렸듯이 Form 의 디자인이 기술된 파일이 프로젝트 폴더 밑 screen-size-normal/IDF_FORM.xml 에 있습니다.
Project Explorer 에서 이 파일을 클릭하면 Tizen UI Builder 를 실행하실 수 있습니다.
실행하시면 UI Builder 프로그램이 다른 윈도우에서 실행됩니다. 다음과 같은 화면을 보실 수 있습니다.
현재 중간에 보이는 화면이 프로그램 실행시 실행되는 Main form 화면입니다.
실행하면 기본 디자인이 보이게 됩니다. 여기서 사용자가 원하는 디자인으로 편집 해주시면 됩니다.
사용법은 직접 써보시면 쉽게 적응될 정도로 쉽습니다. 먼저 todo 화면을 아래와 같이 디자인 합니다.
todo 화면에는 새 work 를 생성하는 todo 버튼, done 화면으로 이동하기 위한 done 버튼, 그리고 todo list 를 보여줄 list view 가 필요합니다.
해당 contorl 요소는 왼쪽에 Toolbox 에서 drag하셔서 오른쪽 화면 view에다 drop 하시면 바로 생성이 됩니다.
todo 프로그램은 todo 와 done form 으로 form 이 2개입니다. 따라서 done form 을 디자인을 위해 폼 을 하나 더 생성 및 디자인이 필요합니다.
왼쪽 Resouce 창에서 New Form 을 통해서 생성 후 todo form 와 같이 done form 을 디자인을 합니다.
5. form class 에서 디자인 form 을 사용하기
이제 대략적인 form 화면 디자인이 끝났습니다. 이제 디자인한 내용(xml 형태) 을 소스에서 가져다가 생성해서 사용하시면 됩니다.
해당 form의 구현은 TizenTodoMainForm 클래스 에서 담당합니다. 보통 1 form = 1 class 형태로 파일로 나누어 관리합니다. 따라서 위에서 새로 만든 form 은 그에 맞게
C++클래스를 생성하신 후 TizenTodoMainForm 형태를 복사하셔서 사용하시면 됩니다.
여기서는 todo form 은 TizenTodoMainFrom 소스에서, 그리고 done form 은 TizenTodoDoneForm 소스에서 구현합니다.
TizenTodoMainFrom 는 하나의 form 이며 form 은 app 과 비슷하게 life cycle 이 있습니다.
Initialize 메소드에서 Construct 명령어를 통해 해당 form 를 id 를 읽어서 form UI 를 정의한 xml 을 로딩한 후
OnInitializing 에서는 xml 에 정의된 하위 control id 를 읽어 control id 을 등록 하고 해당 control 에 대한 이벤트 처리를 이해 이벤트 핸들러 등록 작업을 합니다.
< TizenTodoMainForm 중 Innitialzie , OnInitializing 메소드 일부>
6. 팝업 다이어로그 생성
Form, Popup 등은 Tizen UI Builder 를 통해 디자인 할 수도 있지만, 해당 form class 소소상에도 가능합니다.
popup 은 아래와 같이 form class에서 직접 디자인 하였습니다.
아래 poup 은 New 버튼 클릭시 호출되는 이벤트 핸들러 함수에서 호출됩니다.
< TizenTodoMainForm 중 CreatePopup 메소드>
7. 이벤트 핸들러 등록 및 구현
기본적으로 템플릿을 통해 form 생성시 다음의 Form Class 이외에 다음의 이벤트 핸들러 인터페이스 상속하게 됩니다.
해당 인터페이스의 의미는 대략 다음과 같습니다.
(1) Tizen::Ui::IActionEventListener ->form 에 존재하는 UI 의 action event 를 처리합니다. 관련 메소드는 OnActionPerformed 입니다.
(2) Tizen::Ui::Controls::IFormBackEventListener -> form에서 back 버튼을 누를 경우 event 를 처리합니다. 관련 메소드는 OnFormBackRequested 입니다.
여기서는 back 버튼을 누를경우 app 이 종료되도록 하였습니다.
(3) Tizen::Ui::Scenes::ISceneEventListner -> Scene 간의 transition 이 일어날 경우 event 를 처리합니다. 관련 메소드는 OnSceneActivatedN, OnSceneDeactivated 입니다.
(4) 기타
위의 todo 화면에서 new, done 버튼을 클릭했을때 처리는 Tizen::Ui::IActionEventListener 의 onActionPerformed 에서 처리하시면 됩니다.
하지만 list view 에서 클릭하였 을때 , list view에 todo 일감 등록 등의 이벤트 처리는 다른 이벤트 listner 인터페이스를 상속받아 처리합니다.
이를 위해 다음의 인터페이스를 상속합니다.
Tizen::Ui::Controls::IListViewItemEventListener -> listview 에서 에서 일어나는 action에 관한 event 를 처리합니다. 관련 주요 메소드는 OnListViewItemStateChanged 입니다.
여기서는 list view 의 아이템이 선택된 경우에만 해당 list view 를 업데이트 하도록 구현하였습니다.
Tizen::Ui::Controls::IListViewItemProvider -> listview 에 list item 의 등록 ,삭제 등을 관리합니다. 주요 메소드로 CreateItem, DeleteItem, GetItemCount 등이 있고 Create Item 에서는 연관된 데이터 구조체(객체)를 참조하여 데이터를 listview 에 등록하게 됩니다. CreateItem 은 Listview 인스턴스의 updateList 메소드를 통해 내부적으로 호출을 할 수 있습니다.
8. Scene Manager 를 이용하여 Scene 관리하기
Scene Manager 는 Scene 의 등록 및 생성, Scene 간의 화면 전환, scene 간의 transition 시 effect 추가 , scene 간의transition history 관리를 담당합니다.
물론 Scene Manager 를 쓰지 않아도 scene 간의 전환을 할 수 있지만 scene Manager 를 사용하면 Scene 간의 화면 전환을 하나의 transition id 로 할 수 있고 여러 부가적인 transition effect 추가 및 histroy 관리도 되기 때문에 이 기능이 필요할 때 사용하면 유용하겠네요.
여기서 하나의 Scene 은 화면 전환의 단위입니다. 위의 to do 프로그램은 2개의 scene 이 필요합니다.
todo 프로그램에서 1 scene 은 1 form 과 연관됩니다. (tab based 프로그램일 경우에는 화면 전환의 단위가 panel 입니다.. 이때는 1 scene 은 1 panel 과 연관 되겠죠)
Scene Manager 의 생성은 일반적으로 Frame class 를 상속한 클래스에 하게되며 (여기서는 TizenTodoFrame)
Transiton 관리는 소스로 할 수 있지만 이또한 Tizen UI Builder 를 이용해 UI 로 쉽게 transition 을 표현할 수 있습니다.
project explore 상에서 res/screen-size-normal/workflow.xml 을 더블 클릭하면 Tizen UI Builder 가 실행되고 workflow 를 수정 할 수 있습니다.
아래는 flow 를 수정한 화면입니다.
IDSCN_1 의 scene ID 를 가지는 Scene 은 IDF_FORM form ID 를 가지는 form 과 연관이 됨을 알 수 있습니다.
또한 아래 굵은 회색 화살표는 app 시작시의 IDSCN_1 로의 화면전환을 의미하며 인는 IDSCNT_1 의 transition ID 로 표현됩니다.
소스상에서는 IDSCNT_1 의 transition id 를 사용하여 app 시작시 IDSCN_1 로의 화면 전환을 쉽게 할 수 있습니다.
SceneManager GoForward 메소드를 사용해 화면 전환을 하게 되며 이때 해당되는 scene 과 연관된 form 생성이 필요하면
등록된 formfactory 클래스를 통해 form 인스턴스 생성을 하게 됩니다.
즉 formfactory 에서 자동적으로 scene id 와 연관된 form id 를 가진 form 을 생성해 주게 됩니다.
완성된 소스는 github 에 공유 되어 있으며, 아래 위치에서 확인 하실 수 있습니다.
https://github.com/shingil/tizen
다음 시간에는 Tizen Web app을 만들어 보도록 하겠습니다.
Posted by shingil.kang
