타이젠 네이티브 애플리케이션 개발

네이티브 UI 애플리케이션
네이티브 UI 애플리케이션은 네이티브 애플리케이션 프레임워크와 네이티브 UI 프레임워크 기반으로C++ 언어를 사용하여 개발할 수 있다[1]. 네이티브 애플리케이션 프레임워크는 Tizen::App 네임스페이스로 구현되어 있는데, 이 안의 Tizen::App:App클래스가 네이티브 UI 애플리케이션의 실행과 라이프 사이클을 관리한다.

그림 1.
네이티브 UI, 그래픽 아키텍처(출처 : 자체 제작)

표 1.
Tizen::Ui 네임스페이스
그림 1은 타이젠 네이티브 UI와 그래픽 프레임워크의 아키텍처를 보여준다.
타이젠은 EFL(Enlightenment Foundation Li braries)[2]을 코어 UI 프레임워크로 사용한다. EFL은 2D와 2.5D UI 렌더링을 지원하는 라이브러리로서, 일반적인 GUI 위젯 뿐만 아니라 입력 처리, 데이터 관리 및 이벤트 관리 기능 등을 제공한다.
네이티브 UI 프레임워크는 EFL 라이브러리 중 하나인 Evas를 캔버스 그래픽을 위해 사용하고, ECore를 메인 이벤트 루프(loop)로 사용한다. 그 외에 OpenGL 및 OpenGL-ES 2.0은 게임과 같은 Open GL 기반 네이티브 애플리케이션을 작성할 때 쓰인다.
그래픽을 처리하기 위해 Cairo를 벡터 그래픽 기반의 2D 그래픽 라이브러리로 사용한다. Cairo와 EFL은 옵션에 따라 내부적으로 EGL (OpenGL)과 OpenGl-ES를 사용하거나 소프트웨어 렌더러를 사용한다. EGL은 OpenGL ES API와 2D, 3D 렌더링을 위한 그 기반에 깔려 있는 윈도우 시스템간의 인터페이스이며, OpenGL-ES는 OpenGL 3D 그래픽 API 중 임베디드 용으로 일부분을 뽑아놓은 API이다.
타이젠 네이티브 UI 프레임워크는 이러한 코어 UI 프레임워크에 기반하여 표 1과 같은 Tizen::Ui::* 네임스페이스들을 제공한다.

그림 2. 윈도우 구조(출처: developer.tizen.org)
네이티브 UI 애플리케이션의 종류
타이젠 아키텍처를 개괄적으로 살펴보면 크게 네이티브 UI 애플리케이션의 종류는 폼 기반(form-based), 테마(theme), 입력기(IME), OpenGL 기반, 탭 기반이 있다.
그 중에서 폼 기반 애플리케이션이 가장 기본이 되는 UI 애플리케이션이며, 다른 애플리케이션 템플릿들은 폼 위에 추가적인 사항들을 더했다고 생각하면 되겠다.
그림 2는 폼 기반 애플리케이션의 구조를 보여준다. 폼 기반 애플리케이션은 프레임, 폼, 컨트롤로 구성되는데, 프레임은 자동으로 생성 되는 최상위 윈도우이며 자신이 가지고 있는 폼을 화면에 보여주는 역할을 한다.
또한 Frame은 Form을 포함한 모든 UI 컨트롤 클래스들의 최상위 클래스로서 애플리케이션이 초기화 될 때 반드시 생성되어야 한다.
폼은 화면 전체에 표시되는 컨트롤로서 인디케이션 바, 헤더, 푸터, 그리고 다른 UI 컨트롤들로 이루어져 있다. 헤더와 푸터는 화면의 상단과 하단에 각각 배치된다.
서비스 애플리케이션(Service Application)
타이젠 네이티브 애플리케이션 프레임워크는 UI 애플리케이션 외에 서비스 애플리케이션을 제공한다. 서비스 애플리케이션은 사용자 인터페이스 없이 백그라운드에서 실행되는 애플리케이션을 말한다. 이러한 프로그램은 센서 데이터를 얻어내는 것처럼 지속적으로 실행되어야 하는 프로그램을 개발하는데 적당하다. 서비스 애플리케이션은 네이티브 UI 애플리케이션이나 웹 애플리케이션과 함께 패키징이 가능하다.
표 2. 서비스 애플리케이션 개념
네이티브 UI 애플리케이션 라이프 사이클
네이티브 애플리케이션 프레임워크는 프로그램 실행이나 전화 걸기와 같은 내장된 시스템 서비스 애플리케이션에 관련된 사항을 관리한다. 또한 메모리 경고나 배터리 사용량, 화면 오리엔테이션 전환, 푸시 알림과 같은 일반적인 이벤트들을 알려준다.
이러한 사항들은 Tizen::App 네임스페이스가 구현하고 제공한다.

그림 3.
네이티브 UI 애플리케이션 상태 전환 흐름도(출처 : developer.tizen.org)
그림 3은 네이티브 UI 애플리케이션의 기본적인 라이프 사이클을 UiApp과 Frame 클래스에서 발생하는 콜백을 기반으로 보여준다.
초기 상태에서 애플리케이션 프레임워크는 말 그대로 애플리케이션을 초기화시킨다. 이 시점에 저장된 애플리케이션 데이터를 복구시킬 수 있고, 애플리케이션의 프레임이 생성되어야 한다. 실행 중에는 사용자가 UI와 상호작용 할 수 있으며, 네이티브 애플리케이션은 백그라운드(background)와 포어그라운드(foreground) 상태를 반복 이동한다.
애플리케이션은 종료 단계에서 리소스를 해제하고 저장해야 할 사항들을 저장한다. 종료가 완료된 후에는 애플리케이션 프레임워크가 애플리케이션을 메모리로부터 제거한다.

그림 4.
UiApp 상태 변화(출처 : 자체 제작)
<애플리케이션의 실행, 종료>
사용자는 디바이스의 메인 메뉴나, 태스크 스위처(task switcher) 혹은 다른 애플리케이션을 통해 네이티브 UI 애플리케이션을 실행할 수 있다.
사용자가 현재 실행되지 않고 있는 애플리케이션을 메인 메뉴에서 선택할 때, 애플리케이션이 실행된다. 만약 이미 실행되고 있는 애플리케이션을 메인 메뉴나 태스크 스위처에서 실행하면, 백그라운드에 있던 애플리케이션은 포어그라운드로 상태로 전환된다.
애플리케이션의 진입점은 OspMain() 함수다. 애플리케이션 초기화 단계에서 Tizen::App::App의 OnAppInitializing() 이벤트 핸들러가 호출되며, 이곳에서 전에 저장했던 애플리케이션 데이터를 Tizen::App::AppRegistry 클래스를 통해 얻어낼 수 있다. 이 이벤트 핸들러가 호출된 이후에, 애플리케이션은 리소스를 할당하고 UI 컨트롤들을 생성하게 된다.
애플리케이션 초기화가 끝나면, App::On Ap pInitialized() 이벤트 핸들러가 호출되며, 이 함수가 끝나기 전까지 프레임이 생성되고, 추가되어 있어야 한다.
실행되고 있는 애플리케이션은 Tizen::App:: App의 Terminate() 함수를 호출하면 스스로를 종료시킬 수 있다.
또한, 가용 메모리가 매우 적거나, 배터리가 없을 때, 시스템은 애플리케이션을 강제 종료시킬 수도 있다. 애플리케이션 종료 시에는 App 클래스의 OnAppTerminating() 이벤트 핸들러가 호출된다. 이 함수가 호출될 때, 직접 생성한 리소스들을 해제해 주어야 한다. 폼을 비롯한 그 자식 UI 컨트롤들은 Tizen::Ui:: Controls::Frame 클래스의 OnTerminating() 이벤트 핸들러가 호출될 때 해제된다.
<포어그라운드, 백그라운드>
네이티브 UI 애플리케이션의 윈도우는 그림 4와 같은 상태를 갖는다. Tizen::App::UiApp 클래스의 GetAppUiStates() 함수는 현재 애플리케이션의 상태를 반환한다.
Tizen::App::UiApp 클래스의 OnBackground() 이벤트 핸들러는 홈 키가 눌렸거나, 다른 애플리케이션이 실행되었거나, 잠금 화면이 되어 현재 애플리케이션이 활성화되지 않을 때 호출 된다. 이 함수가 호출될 때는, 진행 중이던 그래픽 처리나 미디어 처리, 센서, 위치 업데이트 등을 중지시키고, 현재의 데이터를 저장하는 것이 좋다.
OnForeground() 이벤트 핸들러는 UI 애플리케이션이 포어그라운드로 변경되었을 때 호출되며, 이 때부터 사용자 상호작용이 허용되며, 그래픽 처리 혹은 진행중인 미디어 재생과 같은 동작을 이전에 백그라운드로 전환될 때 저장한 데이터에 기반하여 다시 진행시키면 된다.

그림 5.
빈 애플리케이션 생성하기(출처 : 자체 제작)

그림 6.
폼 클래스의 생성(출처 : 자체 제작)
폼 생성과 이벤트 핸들링 예제
타이젠 IDE에서 템플릿을 이용하여 폼 기반의 애플리케이션을 만들 수 있다.
이번 예제에서는 템플릿 대신에 Empty Application을 선택하여 사용해 보도록 하자. IDE의 메뉴에서, File ->New -> Tizen Native Project를 선택하자. 그 다음 나타난 New Tizen Native Project 창에서 Template 탭을 선택하고, Empty Application을 선택한다. 그림 5와 같이 프로젝트 이름으로 “FormAndEvent”이라 입력하고 Finish 버튼을 클릭하자.
앞서 언급했듯이 Tizen::Ui 네임스페이스는 그래픽 유저 인터페이스를 생성하기 위해 사용된다. 또한 UI 관련 이벤트를 처리하기 위한 클래스와 인터페이스도 포함하고 있다.
보통, 폼을 생성하기 위해 Form 클래스를 상속받아 클래스를 구현한 후 해당 클래스를 프레임에 추가한다.

표 3. 프레임에 폼을 추가하는 예제

표 4. OnInitializing 및 OnTerminating 구현

표 5. Onlnitializing 및 OnTerminating 구현(2)
1. Project Explorer에서 FormAndEvent 프로젝트를 오른쪽 클릭하자.
2. 나타나는 팝업 메뉴에서 New -> Class를 선택하자.
3. 그림 6과 같이 클래스에 “MyForm”이라 입력하고, Form을 베이스 클래스로 선택하자.
4.  이제 Project Explorer에 새로 추가된 MyForm.cpp과 MyForm.h을 확인할 수 있을 것이다. 폼이 동작하기 위해 폼을 프레임에 추가한 후, 현재 사용 폼으로 설정해야 한다. FormAndEventFrame.cpp에 표 3의 빨간색으로 표시한 부분을 코드에 추가하도록 하자.
5. OnInitializing과 OnTerminating 이벤트를 처리하기 위해 Form::OnInitializing()과 Form::On Terminating()을 구현해야 한다. 표 4의 빨간색으로 표시된 코드를 MyForm.h에 추가하자.
6. 표 5의 내용을 참고하여 MyForm.cpp을 수정한다.
7.  프로젝트를 빌드하고 에뮬레이터나 디바이스에서 실행하면 그림 7과 같은 아무것도 없는 빈 폼을 화면에서 볼 수 있을 것이다(그림 7).
8. 현재는 애플리케이션의 종료에 대해서 처리하지 않았기 때문에 해당 앱을 쉽게 종료시킬 수가 없다. 대신에, 홈 버튼을 길게 누르면 나타나는 태스크 스위처에서 FormAndEvent 애플리케이션을 찾아 End 버튼을 눌러서 종료시키도록 하자(그림 8).

그림 7. 비어 있는 폼(출처 : 자체 제작, 좌 그림)
그림 8. FormAndEvent 애플리케이션을 종료하기 위해 불러낸 태스크 스위처(출처 : 자체 제작, 우 그림)
위에서 OnInitializing()과 OnTerminating()에 AppLog를 넣었기 때문에, 그림 9와 같이 Log 창에서 로그를 확인할 수 있다. Tag 명에 애플리케이션 이름을 입력하면 내 애플리케이션에서 출력한 메시지만 필터링해서 볼 수 있다.

그림 9.
Log 창에서 FormAndEvent 애플리케이션 로그만 필터링한 상태(출처 : 자체 제작)

표 6.
터치 이벤트 처리(MyForm.h)

표 7.
터치 이벤트 처리 (MyForm.cpp)
UI 이벤트 처리
UI 이벤트를 처리할 수 있어야만 터치, 키 입력, 사용자 동작, 애니메이션, 윈도우 변화 등과 같은 이벤트를 받아 처리할 수 있고, 비로소 애플리케이션이 사용자와 상호작용 할 수 있게 된다.
UI이벤트를 처리하기 위해 타이젠에서는 리스너(listener) 인터페이스를 사용하고 있다. 터치 이벤트는 ITouchEventListener를 상속받아 구현해야 하고, 키 이벤트는IKeyEventListener를 사용한다.
ITouchEventListener 인터페이스를 사용하여 터치 이벤트를 받기 위해 MyForm.h 파일에 표 6의 빨간색으로 표시된 코드를 입력해보자.
터치 프레스와 터치 릴리스 이벤트를 처리하기 위해 OnTouchPressed()와 OnTouchReleased()를 구현해야 한다. MyForm.cpp 파일에 표 7의 빨간색으로 표시된 부분을 입력하자.
이제 애플리케이션을 빌드하고 실행시킨 후 그림 8과 같은 빈 폼 위를 터치해보자.
Log 창에 OnTouchPressed와OnTouchReleased 로그가 애플리케이션의 폼 영역을 터치할 때마다 나타날 것이다. 위의 코드에서는 화면의 좌측 상단을 터치하면 애플리케이션을 종료하게 했다. 표 8은 애플리케이션이 실행된 후부터 종료할 때까지의 로그를 보여준다.

표 8. 애플리케이션 실행부터 종료 시점까지 로그

 

UI 컨트롤이란?
폼, 버튼, 리스트, 에디트 필드와 같은 사용자 인터페이스 요소들을 말하며, 이들은 애플리케이션 레이아웃을 작성하기 위한 기본적인 부품이 된다. 타이젠 웹 프레임워크를 비롯하여 다른 플랫폼에서는 이를 위젯이라고 부르기도 한다. 타이젠 네이티브에서는 약 40여개의 UI 컨트롤이 있다.
클래스 계층 구조를 보면, 모든 컨트롤은 추상 클래스인 Tizen::Ui::Control 부터 상속된다. 이 클래스는 다음과 같은 인터페이스를 포함한다.
• 크기, 위치와 같은 프로퍼티
• Draw, Show와 같은 함수
• 사용자 입력에 반응하는 인터페이스
• 키 입력, 포커스, 터치 입력, 제스처, 드래그 앤 드롭과 같은 이벤트를 처리하고 전달하는 구조
컨테이너 컨트롤
이름에서 의미하듯이, 컨테이너 컨트롤은 다른 컨트롤을 담을 수 있다. 가장 기본적인 컨트롤은 GroupContainer인데, 이 컨트롤은 격자와 배경색을 통해 컨트롤을 그룹 지어 놓는다. 자식 컨트롤들은 그룹 컨테이너가 가지고 있는 각 격자에 추가 될 수 있으며, 격자를 서로 병합시킬 수도 있다. 팝업 컨테이너, 테이블 뷰 컨테이너 등은 이번호에서 자세히 다루도록 할 것이다.
<팝업>
Popup, MessageBox, ProgressPopup은 스크린 중앙에 모달(modal)이나 모달리스(modale ss) 대화창으로 나타난다. MessageBox는 Popup과 비슷한데, 다만 좀 더 설정 가능하다. Popup은 모달과 모달리스를 모두 지원하지만, MessageBox는 모달만 지원한다.
표 1은 메시지상자를 열고 사용자로부터 응답을 받는 방법을 보여준다.


<패널>
Panel 패널은 일반적인 사각형 컨테이너로서 컨트롤이나 다른 패널들까지도 그룹 지을 수 있다. Panel은 정의된 영역에 원하는 색상을 줄 수도 있으며, 자식 컨트롤을 정렬할 수도 있다. 기본적으로는 폼과 패널 모양이 같지만, 레이아웃 프로퍼티를 설정하면 룩앤필을 바꿀 수도 있다. 표 2는 Panel을 생성하는 코드이다.
그림 1.
Popup, MessageBox, ProgressPopup(출처 : 타이젠 공식 웹사이트, 이하 동일)

그림 2.
ScrollPanel과 Panel

ScrollPanel은 스크롤바를 자동으로 생성해주는 패널이며, SplitPanel은 여러 페인(pane)으로 구분된 패널이다. 일반적으로 왼쪽 페인에는 선택 가능한 아이템을 놓고, 오른쪽에는 그것에 관한 자세한 정보를 보여주는데 사용되기도 한다. SplitPanel의 인스턴스를 만들려면, 페인을 나눌 방향이 수직인지 수평인지 정해야 한다.

그림 3.
SplitPanel

<레이아웃>
컨테이너를 사용하여 컨트롤을 그룹 지었다면, 자식 컨트롤을 원하는 레이아웃으로 만들기 쉽다.
예를 들면 ‘OK’ 와 ‘Cancel’ 버튼은 수평으로 배치되며, 화면의 아래쪽에 오른 정렬로 배치될 수 있다.
Tizen::Ui::RelativeLayout 클래스는 각 자식 컨트롤의 크기와 위치를 컨테이너 안의 다른 자식 컨트롤의 크기와 위치에 자동으로 비례하여 바뀌도록 할 수 있다. 컨테이너에 레이아웃을 적용하려면 표 4와 같이 RelativeLayout을 컨테이너의 Construct()에 인자로 명시하여야 한다.

RelativeLayout은 SetHeight(), SetCenterAligned(), SetMargin(), SetRelation(), SetWidth() 메소드를 제공한다. 표 5와같이 이 메소드를 통해, 컨트롤을 다른 컨트롤에 상대적으로 배치하거나 수직이나 수평 중앙에 배치할 수 있다.

그 외에도 다른 레이아웃 컨트롤이 더 있는데, CardLayout은 자식 컨트롤을 부모 컨트롤의 영역에 꽉 차도록 하며, HorizontalBoxLa yout과 VerticalBoxLayout은 수직이나 수평으로 컨트롤을 정렬한다. 또한 GridLayout은 자식 컨트롤을 격자로 나뉘어진 영역에 배치할 수 있다.
기본 UI 컨트롤
이번 절에서는 Button, EditField, CheckBox 등과 같은 기본적인 UI 컨트롤에 대해서 설명한다.
<버튼>
버튼컨트롤은 더 이상의 설명이 필요 없을 만큼 우리에게 친숙한 컨트롤이다. 버튼 위에 텍스트를 쓸 수도 있으며, 색을 바꾸거나 이미지를 입힐 수도 있다.
버튼은 normal, highlighted, pressed, disabled와 같이 여러 상태가 있을 수 있으며, 버튼의 이벤트를 처리하기 위해서는 표 6과 같이 OnActionPerformed()라는 이벤트 핸들러를 사용하면 된다.

<텍스트박스 등>
EditArea, EditField, Textbox, ExpandableEditArea는 간단한 숫자에서부터 복잡한 URL까지 여러 가지 종류의 텍스트 입력을 받을 수 있다. 사용자가 각 컨트롤의 입력 부분을 터치하면, 키패드와 커서가 자동으로 나타난다. 이러한 컨트롤 역시 배경 이미지를 입히거나 색상을 바꿀 수 있다.
각 컨트롤의 차이점을 설명하자면 EditField는 한 줄 입력만 가능하고, EditArea는 여러 줄 입력이 가능하다.
ExpandableEditArea는 여러 줄 입력이 가능하면서 현재 라인 수에 따라 컨트롤의 높이가 자동으로 조정된다. TextBox는 텍스트를 보여주기만 하고 수정할 수는 없다.
<갤러리>
Gallery는 이미지를 한 장씩 보여주는 UI 컨트롤이다. 또한 자동으로 다음 사진을 보여주는 ‘슬라이드 쇼’ 방식으로도 이미지를 보여줄 수 있다. Gallery는 더블 클릭이나 핀치 제스처를 이용하여 이미지의 확대 축소가 가능하다.
Gallery를 통해 이미지를 추가, 삭제, 얻어오기를 할 수 있는데, Gallery의 각 아이템은 Galle ryItem 클래스로 표현된다. GalleryItem을 갤러리 인스턴스에 추가하기 위해서는 IGalleryIte mProvider 인터페이스를 구현해야 한다.
표 7의 코드는 IGalleryItemProvider 인터페이스의 CreateItem() 구현 예제다.
그림 4.
EditFiled, EditArea, ExpandableEditArea, TextBox

IGalleryItemProvider를 구현한 클래스의 인스턴스는 표 8과 같이 갤러리 인스턴스에 추가되어야 한다.

<체크버튼>
CheckButton은 선택/해제 할 수 있는 상태를 보여주고, 입력을 받는다. 그림 6과 같은 스타일의 체크 버튼이 가능하다. 상세 버튼 (  )은 추가적인 선택을 제공하고자 할 때 주로 사용하는 인터페이스이다.
라디오 스타일의 체크버튼은 여러 개의 버튼 중 한 개만 선택할 수 있다. 슬라이딩 스위치 스타일의 체크 버튼은 ON/OFF와 같은 상태를 표시하는데 유용하며 다음과 같은 모양을 하고 있다.
체크 박스나 레이블 부분을 터치하면 체크 상태가 토글 되면서 이벤트가 발생하며, 상세 버튼은 다른 이벤트를 발생시킨다.
Tizen::Ui::Controls::RadioGroup은 여러 개의 체크 박스를 그룹으로 묶어서 라디오 버튼으로 만들어주는데, 다음 코드는 체크 박스를 생성하고 라디오 버튼으로 그룹 짓는 과정을 보여준다.
<컨텍스트 메뉴, 옵션 메뉴>
ContextMenu와 OptionMenu 모두 옵션을 보여주기 위해 사용된다. 컨텍스트 메뉴는 아이콘 버튼을 포함할 수 있으며 서브 메뉴를 가질 수 있다.
ContextMenu의 인스턴스를 생성할 때, 앵커(  )가 가리키는 포인터의 위치를 지정해야 한다. 일반적으로 그림 7에서처럼, 메뉴를 부른 컨트롤의 중앙 위에 위치시키면 된다.
ContextMenu는 표 10과 같이 Construct(  )에서 CONTEXT_MENU_STYLE_LIST 혹은 CON TEXT_MENU_STYLE_ICON로 지정할 수 있다. 메뉴 아이템은 표 11과 같이 추가한다.
컨텍스트 메뉴를 보여주기 위해서는 표 12와 같이 SetShowState(true)를 호출한다.
OptionMenu는 하드웨어 메뉴 키가 눌릴 때만 활성화 되는데, 타이젠 디바이스에서 메뉴 키의 존재는 필수 사항이다. OptionMenu는 Contex tMenu와는 달리 OptionMenu의 특정 위치에만 나타나며, 서브 메뉴를 가질 수 있지만, 서브 메뉴의 서브 메뉴는 가질 수 없다. OptionMenu의 서브 메뉴를 보여줄 필요가 있으면 그림 8과 같이 ContextMenu가 서브 메뉴로서 나타난다.
<헤더와 푸터>
Header와 Footer 컨트롤은 애플리케이션 안에서 화면 전환을 하는데 용이하게 쓰인다. Header와 Footer는 많은 스타일을 포함하고 있으며, 이름처럼 애플리케이션 레이아웃 상단과 하단에 위치한다. 예를 들어 Header는 애플리케이션의 타이틀을 표시해주기도 하며, 탭이나 버튼을 보여주는데 사용된다.
표현 형식에 따라 Header는 그림 9와 같이 다양한 스타일을 가질 수 있다. 기본 헤더는 텍스트만 들어간 모습이지만, 텍스트, 아이콘, 버튼, 애니메이션, 로딩 상태 등을 표시할 수도 있다.
그림 5.
Gallery 컨트롤

그림 6.
다양한 체크버튼(출처 : 타이젠 공식 웹사이트)

‘검색’ 이나 ‘새로고침’과 같은 버튼을 넣는 것도 좋은 방법이며, 화면에 따라 휴지통 버튼 같은 것을 넣는 것도 좋겠다. 탭을 넣을 수도 있는데, 탭은 여러 화면간 전환이나, 내용을 구분하거나 할 때 사용하면 좋다.
푸터는 그림 10과 같으며, 헤더와 같이 여러 가지 용도로 사용된다.
그림 7.
Context Menu

그림 8.
옵션 메뉴와 옵션 메뉴의 서브 메뉴로 나타난 컨텍스트 메뉴

Header와 Footer를 생성하기 위해서는 Form 인스턴스를 생성할 때 표 13과 같이 지정해주어야 한다.
헤더와 푸터의 인스턴스를 얻어내기 위해서 GetHeader()와 GetFooter() 메소드를 사용하며, 표 14와 같이 얻어낸 인스턴스에 원하는 스타일을 설정할 수 있다.
Header와 Footer는 ButtonItem과 FooterItem 인스턴스를 각각 가지고 있으며 아이템을 추가하는 방법은 표 15와 같다.
Header와 Footer 모두 클라이언트 영역의 크기에 영향을 받으며, 폼 클라이언트 영역에 잡히지 않기 때문에, 두 컨트롤을 삽입하면 실제 클라이언트 영역은 줄어들게 된다.
리스트 뷰와 테이블 뷰
<리스트 뷰>
ListView, GrupedListView, IconListView는 리스트를 표시한다.
ListView는 비트맵, 글자 등과 같은 단순한 아이템 및 애플리케이션에서 정의한 커스텀 아이템을 출력한다. GroupedListView는 리스트 내에 아이템을 그룹화시켜 보여주며, IconListView는 비트맵 이미지나 아이콘을 2차원으로 보여준다(그림 11).
그림 9.
Header의 다양한 스타일

그림 10.
Footer의 다양한 스타일(출처 : 타이젠 공식 웹사이트)

그림 11.
ListView, GroupedListView, IconListView

<테이블 뷰>
TableView는 사용자가 설정한 간단한 아이템들을 표시한다.
ListView는 컨테이너 컨트롤이 아니지만, TableView는 컨테이너 컨트롤이므로 더 다양한 컨트롤들을 아이템으로 가질 수 있다.
그림 12에서 보듯이, 세 가지 타입종류의 테이블 뷰가 있다. GroupedTableView는 그룹을 관리할 수 있으며, 그룹들은 선으로 구분된 영역에 표시된다. SectionTableView는 네모난 상자로 아이템들을 그룹 지어서 표시한다.
TableView를 생성하기 위해서 Construct()를 부를 때, 표 16과 같이 TableView 크기와 아이템 구분선의 존재 여부, 스크롤 스타일 등을 지정해 주어야 한다.
리스트의 아이템을 관리하기 위해서는 모든 리스트 뷰는 아이템 프로바이더를 가져야 한다.
구현된 아이템 프로바이더가 대신 아이템의 생성, 삭제, 업데이트 기능을 제공하게 된다. 각 형태의 테이블뷰는 ITableViewItemProvider,  IGroupedListViewItemProvider, ISectionTable ViewItemProvider와 같은 인터페이스를 가지고 있다.
예를 들어 ITableViewItemProvider를 구현해보면 표 17과 같다.
이제 표 18과 같이 TableView에 해당 아이템 프로바이더를 추가하면 된다.
아이템의 이벤트를 처리하기 위해서는 ITableV iewItemEventListener, IGroupedTableViewItem EventListener, ISectionTableViewItemEventLis tener 인터페이스를 각각 구현해야 한다.
OnTableViewItemStateChanged() 이벤트 핸들러는 사용자가 아이템을 선택하거나, 체크, 해제할 때 발생한다. 리스너인스턴스는 표 19와 같이 추가하면 된다.
테이블 뷰 아이템은 그림 13처럼 수평으로 쓸어내리는 제스처에 대해서 표시할 수 있는 컨텍스트 아이템을 가지고 있다. 컨텍스트 아이템은 리스트 아이템에서 숨겨진 추가 기능을 제공한다. 컨텍스트 아이템은 텍스트, 비트맵 등이 될 수도 있다(표 20).
그림 12.
테이블 뷰의 종류

 

 

Original Link:

http://www.embeddedworld.co.kr/atl/view.asp?a_id=6662

http://www.embeddedworld.co.kr/atl/view.asp?a_id=6777

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s