Tizen의 HTML5 기능
PUBLISHED
1 Tizen에 HTML5가 있는 이유
2008년 W3C(World Wide Web Consortium, 월드 와이드 웹 컨소시엄)가 표준 사양에서 작업하기 시작했습니다. 당시에 PC 브라우저에서만 HTML5 규격 초안의 일부를 구현했습니다. 웹 기반 응용 프로그램에 대한 지원을 제공하는 모바일 장치 수가 매우 적었습니다. 그 상황에 대한 주요 이유는 다음과 같습니다.
- HTML 4.01은 모바일 장치에 대한 UI를 만들기에 충분하지 않았습니다.
- 장치 성능은 웹 기반 응용 프로그램에 대한 부드러운 UX를 제공하기에 충분하지 않았습니다.
- HTML 4.01은 네이티브 API와 비슷한 웹 API를 제공하지 않았습니다.
W3C가 새로운 HTML5 초안을 게시한 2010년부터 Web Worker, Web Storage, Web Socket 및 Geolocation API 등의 유망한 API가 등장했습니다. 개발자에게 HTML5가 모바일 응용 프로그램 개발을 위한 좋은 대안이 될 수 있다는 것이 명백해집니다. 이제 모바일 장치는 거의 네이티브 응용 프로그램처럼 빨리 실행되는 웹 응용 프로그램을 사용하여 웹 브라우저를 실행하는 데 충분히 효율적입니다. HTML5 기반 웹 응용 프로그램의 가장 눈에 띄는 장점은 크로스 플랫폼 경험입니다.
|
샘플 응용 프로그램 스크린 샷 |
2 필수 구성 요소
예제 응용 프로그램은 다음 HTML5 API를 활용합니다: Web Socket, Web Storage, Web Worker. 또한 Tizen에서 HTML5 비디오 요소 및 API를 사용하는 방법을 보여주는 코드 샘플도 있습니다. 예의 응용 프로그램은 jQuery 모바일 1.2.0 프레임 워크를 기반으로 사용자가 직관적이고 일관된 사용자 인터페이스 확장성이 높은 웹 응용 프로그램을 만들 수 있도록 합니다. jQuery Mobile을 사용하려면 응용 프로그램에 jQuery 1.8.0 라이브러리가 포함되어 있어야 합니다. 샘플 응용 프로그램은 Tizen SDK 2.1.0에서 테스트되었습니다.
|
팁
jQuery 응용 프로그램에서 JSON.stringify(object) 메서드를 사용하여 JSON 개체를 문자열에 일련화할 수 있습니다.
JSON.stringify(object) method. 문자열을 JSON 개체에 비일련화하기 위해 $.parseJSON(문자열)을 사용합니다. $.parseJSON(string). |
|
팁
Tizen 응용 프로그램이 FILE 프로토콜을 통해 제공되는 동안 jQuery Mobile 프레임워크는 HTTP 프로토콜을 통해 HTTP 서버에서 웹 페이지를 처리하도록 설계되었습니다. 이러한 사실 때문에 FILE 프로토콜에 대한 실패로 AJAX 페이지 요청을 해제하는 것이 좋습니다. 이러한 차이는 jQuery Mobile 프레임워크의 페이지 전환에 대새허만 유효하고 모든 AJAX 요청에 대해서는 유효하지 않습니다.
|
3 Tizen에서 선택한 HTML5 기능
HTML5는 HTML에 대한 새로운 태그뿐만 아니라 새로운 웹 API도 도입합니다. 웹 API는 별도의 W3C 문서에 정의되어 있습니다. 첨부된 예제는 Tizen에서 W3C 웹 API 일부를 활용하는 방법을 보여줍니다.
Web Socket을 사용하면 브라우저 기반 응용 프로그램이 WS 또는 WSS 프로토콜을 지원하는 서버와 양방향 통신을 할 수 있습니다. HTML4.01은 한 방향 통신인 AJAX를 도입했습니다. AJAX와 함께 클라이언트만 서버에 요청을 보낼 수 있습니다. 예를 들어 개발자가 채팅 응용 프로그램을 만들어야 할 때 유일한 방법은 XHR 통해 요청을 폴링하는 것이었습니다. 이제 Web Socket 덕분에 개발자는 서버에서 받은 새 메시지를 받자마자 트리거될 수신기 이벤트를 첨부할 수 있습니다.
Web Storage는 브라우저에 내장된 저장소 영역입니다. 예를 들어 웹 응용 프로그램 또는 웹 사이트에 의해 키 값 쌍을 저장하는 데 사용될 수 있습니다. 저장 영역은 다음으로 구분될 수 있습니다.
- 로컬 저장소– 이 저장소는 브라우저 세션에 관계없이 모든 응용 프로그램에서 사용할 수 있습니다. Tizen 장치에서 웹 응용 프로그램을 제거할 때 제거됩니다.
- 세션 저장소 – 지속되는 세션에 대해서만 보관되는 저장소
로컬 저장소는 파일 시스템에서 쿠키 또는 데이터 저장을 위한 훌륭한 대안이 될 수 있습니다. 세션 저장소에 대해 제한은 없지만 Tizen에서 로컬 저장소의 크기는 응용 프로그램당 5MB로 제한됩니다. Web Storage는 문자열 값만 허용합니다. 웹 저장소를 사용하여 JSON 개체를 저장하려면 문자열에 일련화하고 검색 시에는 비일련화해야 합니다.
Web Worker는 웹 환경의 다중 스레드 기능을 사용하기 위한 웹 기반 응용 프로그램용 솔루션입니다. 그들은 주로 CPU 집약적인 작업에 대 한 반응 되 고 UI 신청서를 방지 하기 위해 사용 됩니다. . 웹 작업자 사용 예제는 다음과 같습니다. 개발자는 JSON 개체와 웹 작업자를 초기화하고 웹 작업자는 별도 이벤트 루프에서 몇 가지 계산을 수행한 다음 결과를 반환합니다.
터치 이벤트는 2D 표면으로 반응이 뛰어난 웹 게임을 만드는 데 게임 개발자가 광범위하게 사용할 수 있습니다. W3C 사양에 정의된 3개의 기본적인 터치 이벤트가 있습니다.
- touchstart: 손가락이 DOM 요소에 배치됩니다.
- touchmove: 손가락이 DOM 요소를 따라 드래그됩니다.
- touchend: 손가락이 DOM 요소에서 제거됩니다.
개발자는 터치 이벤트를 통해 선택한 HTML 요소에 있는 화면과 사용자 손가락 사이의 터치 포인트 수를 검색할 수 있습니다. 최대 3개의 터치 포인트를 검색할 수 있습니다.
비디오 태그와 AV API 덕분에 HTML5는 웹 응용 프로그램의 비디와 오디오 콘텐츠 포함도 지원합니다.
다음 문서 일부의 JavaScript 코드 조각(HTML 코드가 포함되지 않음)이 응용 프로그램에 복사 및 붙여 넣을 준비가 되어 있습니다.
웹 소켓
WS 프로토콜을 통해 사용 가능한 무료 웹 소켓 서버(ws://echo.websocket.org) 또는 온라인에서 사용 가능한 WSS 프로토콜(wss://echo.websocket.org)이 있습니다. 샘플 웹 소켓 응용 프로그램에 대한 소켓을 사용합니다. 샘플 Tizen 응용 프로그램을 WSS 프로토콜을 사용하여 wss://echo.websocket.org 에코 서버에 연결하고 메시지를 보냅니다. JavaScript 모듈 tizenWebSocket을 생성하여 메시지를 보냅니다.
var tizenWebSocket = (function (options) {
var states, state, wsUri, output, websocket;
states = {
CONNECTED : 1,
DISCONNECTED : 2,
ERROR : 3
};
state = states.DISCONNECTED;
wsUri = (options && options.server) ? options.server : "wss://echo.websocket.org/";
output = function (txt) {
$('#display').append("" + txt + "");
};
return {
connect : function (callback) {
var that = this;
websocket = new WebSocket(wsUri);
websocket.onopen = function (evt) {
that.onOpen(evt);
if (typeof callback === "function") {
callback();
}
};
websocket.onclose = function (evt) {
that.onClose(evt);
};
websocket.onmessage = function (evt) {
that.onMessage(evt);
};
websocket.onerror = function (evt) {
that.onError(evt);
};
},
disconnect : function () {
websocket.close();
},
onOpen : function () {
output("CONNECTED");
state = states.CONNECTED;
},
onClose : function () {
output("DISCONNECTED");
state = states.DISCONNECTED;
},
onMessage : function (evt) {
output("RECEIVED: " + evt.data);
},
onError : function (evt) {
output("ERROR: " + evt.data);
state = states.ERROR;
},
/**
* Sends message via web socket
* @param txt {String} message to be sent
* @returns {Boolean} true if successfully sent message, false otherwise
*/
send : function (txt) {
if (state === states.CONNECTED) {
output("SEND: " + txt);
websocket.send(txt);
return true;
} else {
view.showPopup("Unable to send message");
return false;
}
}
};
}());
// connects with WS/WSS server
tizenWebSocket.connect(
function () {
// sends Hello message only when connected
tizenWebSocket.send('Hello');
}
);웹 스토리지
이 샘플 응용 프로그램은 Web Storage 기능을 사용하는 방법을 보여줍니다. 사용자는 목록에서 친구 이름을 추가하고 삭제할 수 있습니다. 목록도 지울 수 있습니다. 샘플 응용 프로그램은 항목 추가, 모든 항목 읽기 및 나열, 항목 제거, 전체 로컬 저장소 지우기 등 4개의 기본 로컬 저장소 작업을 사용합니다. 아래의 예에서 2개의 항목이 로컬 저장소에 추가되고 표시됩니다.
var item = { name : "Tom"};
var key = (new Date()).getTime();
localStorage.setItem(key, JSON.stringify(item));
var item = { name : "Carol" };
var key = (new Date()).getTime();
localStorage.setItem(key, JSON.stringify(item));
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var element = $.parseJSON(localStorage.getItem(key));
console.log(element);
}웹 작업자
웹 작업자 샘플은 실시간으로 소수를 계산합니다. 새로운 소수가 계산되고 주요 이벤트 루프로 전달될 때마다 해당 DOM 요소가 업데이트됩니다. 웹 작업자는 DOM에 대한 액세스 권한이 없기 때문에 이 데이터 흐름이 도입되었습니다. webWorker.js 코드:
var running = false;
this.addEventListener('message', function (msg) {
run();
}, false);
function run () {
var n = 1, i;
search: while (true) {
n += 1;
for (i = 2; i <= Math.sqrt(n); i += 1) {
if (n % i === 0) {
continue search;
}
}
// found a prime!
this.postMessage(n);
}
}다음 JavaScript 코드는 주요 이벤트 루프 코드입니다.
var worker = new Worker('./webWorker.js');
// in this event worker returns data
worker.addEventListener('message', function(msg) {
console.log(msg.data);
}, false);
// empty message send to worker in order to start calculations
worker.postMessage();터치 이벤트
터치 이벤트는 사용자가 선택한 DOM 요소에 대한 사용자의 손가락 터치 횟수를 인식합니다. 터치 이벤트는 터치 사용 장치를 위해 주로 설계되었으므로 아래 샘플 코드는 일반 PC 브라우저에서 작동하지 않습니다. 터치 이벤트를 활용하기 위해 특수 JavaScript 모듈 touchEvent가 개발되었습니다.
touchEvents = (function ($) {
var touch;
return {
setElement : function (id) {
touch = document.getElementById(id);
},
bindEvents : function () {
/**
* Currently there is no possibility to bind touch events with
* jQuery.bind method so we need to use pure ECMAScript
* approach.
*/
touch.addEventListener('touchmove', function () {
$('#moving').text('YES');
});
touch.addEventListener('touchstart', function (ev) {
var touchPoints = ev.targetTouches.length;
if (touchPoints >= 3) {
$('#touchNo').text('3 or more fingers');
} else {
$('#touchNo').text(touchPoints);
}
}, false);
touch.addEventListener('touchend', function () {
$('#touchNo').text('0 fingers');
$('#moving').text('No');
}, false);
}
};
}(jQuery));
// here we add myTouch element to body $('body').append(' '); // here we attach touch events to element touchEvents.setElement('myTouch');멀티미디어 지원
HTML5 비디오 태그는 Tizen 웹 응용 프로그램의 멀티미디어 콘텐츠를 포함하는 강력한 도구입니다. 비디오 파일에 사용되는 컨테이너는 이 샘플에서 MP4입니다. 비디오 기초 스트림은 H.264 코덱을 사용하여 인코딩되고 오디오 기초 스트림은 AAC Audio를 사용하여 인코딩됩니다. 샘플 응용 프로그램에서 tizenVideo 모듈은 HTML5 비디오 요소 API를 활용하여 비디오를 조작합니다.
비디오 콘텐츠를 포함하는 HTML5 코드:
아래 tizenVideo 모듈 및 샘플 코드는 위의 비디오 파일을 재생합니다.
tizenVideo = (function ($) { var videoInstance; return { getVideoInstance : function () { return videoInstance; }, setVideoInstance : function (id) { videoInstance = document.getElementById(id); }, play : function () { videoInstance.play(); }, pause : function () { videoInstance.pause(); }, stop : function () { try { videoInstance.pause(); videoInstance.currentTime = 0; } catch (e) { tlib.logger.err("Unable to stop the Video!"); } }, /** * Key binders method * @param elements {Object} JSON stores all available keys for which the actions can be hooked */ bind : function (elements) { var that = this; elements.play.unbind().bind({ click : function (event) { event.preventDefault(); that.play(); } }); elements.stop.unbind().bind({ click : function (event) { event.preventDefault(); that.stop(); } }); elements.pause.unbind().bind({ click : function (event) { event.preventDefault(); that.pause(); } }); elements.fullscreen.unbind().bind({ click : function (event) { event.preventDefault(); that.fullscreen(true); } }); }, /** * Method used to turn on/off fullscreen mode for video * @param flag {Boolean} If true we turn one fullscreen mode otherwise we turn it off */ fullscreen : function (flag) { var that = this; if (flag) { videoInstance.webkitEnterFullscreen(); /** * When we enter fullscreen mode we should handle some event to allow user * to leave fullscreen mode, because browser doesn't do it automatically. * We use either swipeLeft or swipeRight for this. */ $(document).bind('webkitfullscreenchange', function () { $('html').bind({ swipeleft : function () { tlib.logger.info("In FullScreen swipe left"); that.fullscreen(false); }, swiperight: function () { tlib.logger.info("In FullScreen swipe right"); that.fullscreen(false); } }); }); } else { document.webkitCancelFullScreen(); $('html').unbind(); } }, /** * Method used to set callbacks * @param errorCB {Function} Callback invoked in case of playback error * @param endCB {Function} Callback invoked in case of playback end */ setCallbacks : function (errorCB, endCB) { videoInstance.addEventListener('ended', endCB); videoInstance.addEventListener('error', errorCB); } }; }($)); // here we bind tizenVideo module with video element container // that has id = video tizenVideo.setVideoInstance('video'); // starts playback of video content tizenVideo.play();
TIP Tizen은 WebKit 브라우저에서 웹 응용 프로그램을 실행합니다. 전용된 메서드를 전체 화면 모드로 비디오 재생 시작 사용할 수 있습니다. videoDOMElement.webkitEnterFullscreen(); 전체 화면 모드 개발자를 종료 하려면 사용 해야 합니다: document.webkitCancelFullScreen(); |
주요 차이점은 다른 브라우저에서 HTML5 비디오 태그 구현에 대한 코덱 지원이라는 점을 유의하시기 바랍니다. 샘플 응용 프로그램에서 비디오 파일은 Tizen 웹 킷 웹 브라우저와 호환 하지만 그것은 또한 구글 크롬 21에 발사 시험 되었다.
4 요약
위의 샘플로부터 웹 사이트에서 사용한 것과 거의 동일한 방식으로 Tizen 웹 응용 프로그램에서 HTML5 API를 사용할 수 있음을 알 수 있습니다. 몇 가지 흥미로운 HTML5 웹 응용 프로그램을 수행한 경우 Tizen 웹 응용 프로그램으로 쉽게 전송할 수 있을 것입니다.
