타이젠(Tizen) 앱의 구조

 최초의 앱 만들어보기

---

 타이젠을 설치하고 나면 IDE에서 최초의 프로젝트를 하나 만들어 보자.

 메뉴에서 File --> New --> Tizen Web Project를 선택하면 아래와 같은 화면을 볼 수 있다. 

 Mobile은 2.3.1 버전과 2.4 버전 두가지를 제공한다. 이유는 인도 지역에 출시된 최초의 타이젠 단말인 Z1이 2.3 기반으로 출시되었고 이 후에 Z3가 2.4로 출시되었기 때문이다. 

 Samsung Gear S2의 경우 2.3.1 버전을 제공하며 아직 2.4로 업데이트되지 않았다.  Mobile과 Wearable의 앱개발 방법이 크게 다르지 않다.

일단 최신 버전인 MOBILE-2.4에서 Basic Application을 선택한 후 하단의 Finish버튼을 눌러 프로젝트하나를 만들어보자.

 타이젠(Tizen) 앱의 구조

---

 타이젠 프로젝트를 만들고 나면 아래와 같은 타이젠 앱의 구조를 Project Explorer 상에서 확인할 수 있다.

 아래와 같은 5개의 주요 파일을 볼 수 있다.

* style.css - 스타일 관련된 내용이 들어가 있는 파일로 앱개발 초기에는 크게 손댈 필요가 없다. 

* main.js - JavaScript 내용이 들어가는 파일. 하드웨어 버튼 (hwkey)이 눌렸을 때 처리하는 부분이 미리 들어가 있고 별다른 내용 없음.

* config.xml - 타이젠 관련 버전 이름과 같은 일반적인 정보나 정책 및 권한 관련된 부분을 설정하는 곳으로 안드로이드의 manifest와 같은 역할을 한다.

* icon.png - 동그란 모양의 타이젠 아이콘. 특이하다.  

* index.html - 화면 관련 부분을 담당하는 부분.

파일들의 내용은 아래와 같다.

Style.css

* {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    margin: 0px auto;
}

header h1 {
    font-size: 36px;
    margin: 0px;
}

header h2 {
    font-size: 18px;
    margin: 0px;
    color: #888;
    font-style: italic;
}

nav ul {
    list-style: none;
    padding: 0px;
    display: block;
    clear: right;
    background-color: #666;
    padding-left: 4px;
    height: 24px;
}

nav ul li {
    display: inline;
    padding: 0px 20px 5px 10px;
    height: 24px;
    border-right: 1px solid #ccc;
}

nav ul li a {
    color: #EFD3D3;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}

nav ul li a:hover {
    color: #fff;
}

article > header h1 {
    font-size: 20px;
    margin-left: 14px;
}

article > header h1 a {
    color: #993333;
}

article > header h1 img {
    vertical-align:middle;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

footer p {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 24px;
}

index.html

Tizen app
      
An empty template of tizen
    
  

  

    

       
Home
       
About Us
       
Contact Us
    
  

  

    

      

         Application Name
      
    
    
This is an empty template of Tizen Web Application. Tizen will support multiple device categories:
    

      
smartphones, tablets and smart TVs
      
netbooks, in-vehicle infotainment devices
    
    

      
This is a basic section of a document.
      
The following button displays a time using JavaScript.
      

        
      
    
  

  

    
© 2012 Company Name. All rights reserved.
  
    

main.js

var startTime;
var checkTime;

//Initialize function
var init = function () {
	// TODO:: Do your initialization job
	console.log('init() called');

	// add eventListener for tizenhwkey
	document.addEventListener('tizenhwkey', function(e) {
		if(e.keyName === 'back') {
			try {
				tizen.application.getCurrentApplication().exit();
			} catch (error) {
				console.error('getCurrentApplication(): ' + error.message);
			}
		}
	});
};
// window.onload can work without 
window.onload = init;

function startTime() {
	var today = new Date();
	var h, m, s, t;

	h = today.getHours();
	m = today.getMinutes();
	s = today.getSeconds();

	m = checkTime(m);
	s = checkTime(s);
	document.getElementById('divbutton1').innerHTML='Current time: ' + h + ':' + m + ':' + s;
	t = setTimeout(startTime, 250);
}

function checkTime(i) {
	if (i < 10) {
		i='0' + i;
	}
	return i;
}