Tizen WebApp App Control Example and Tip - Media 파일 pick 하기!

알고나면 정말 간단한 것인데, 알기까지 좀 힘들었다. 그래서 다른 누군가를 위해 정리해둔다. 타이젠 웹앱에서 App Control로 Media 파일 가져오기!

목표

어플리케이션에서 사용자가 선택한 사진 또는 동영상을 다루고 싶을때, App Control의 Implicit Launch 기능으로 특정 앱을 런치하여 Media 파일을 선택하고 그 파일의 정보를 전달받는 것

이론

이론은 생략한다.ㅋㅋㅋ App Control 과 Implicit Launch, Explicit Launch는 다른 플랫폼에서도 일반적으로 사용되는 것이니...아래 링크로 대신한다.

Application Information and Controls

모범 예제

마음 급한 분들을 위해서 모범 예제를 먼저...

//1. App Control Interface 생성
//쉽게 말하자면 기본 설정값
var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
    null,
    "image/*",
    null, 
    [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode",
                ["multiple"])]);

//2. ApplicationControlDataArrayReplyCallback Interface 생성
//App Control 로 App을 Launch 한 후에 정보를 건내받아서 처리할 정보
//당연히 Async 
var appControlReplyCallback = 
{
   /* Provider application sent a reply */
   onsuccess: function(data) 
   {
      for (var i = 0; i < data.length; i++) 
      {
         if (data[i].key == "http://tizen.org/appcontrol/data/selected") 
         {
            console.log('First Selected image is ' + data[i].value[0]);
            console.log('Second Selected image is ' + data[i].value[1]);
         }
      }
   },

   /* Provider application returned a failure */
   onfailure: function() 
   {
      /* Error handling */
   }
}

//3. 실제 App Control 실행
tizen.application.launchAppControl(appControl, null,
     function() {console.log("launch application control succeed");},
     function(e) {console.log("launch application control failed. reason: " + e.message);},
     appControlReplyCallback);

해설

주석으로 기술한 3단계가 전부다. App Control에 대한 설정, Reply Callback 설정, 그리고 런치!

정말 간단하다. 근데, 몇가지 난관이 있었다.

우선, 대부분의 Code Example에 Step 2가 없다. 사실 처음엔 당연히 tizen.application.launchAppControl 파라미터가 reply callback 일것이라고 생각했었는데, 아니였다.

그 다음 난관은 tizen.ApplicationControlData 이었다. pick 하는 동작에 대해서는 설명된 곳이 많은데, pick 동작의 옵션을 어떻게 정할 수 있는지 나와있는 곳이 없는듯 했지만 있기는 다 있다!ㅋ

아래 링크를 보면 표로 자세하게 설명이 되어 있다. 내가 원한 multiple select 옵션도 있다.

Common Application Controls

근데...Extra Input 을 어떻게 전달해야 하지...?

그 고민의 산물이 Step 1의 마지막 파라미터이다. [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode", ["multiple"])] key:value 형식을 주의해야하고, value 가 string인지 array인지도 주의 해야 한다. []이다. Extra Input을 ApplicaionControlData 배열로 만들어서 넘겨야 하는 것이다.

이런 모든 내용은 아래 API reference 에 설명되어 있다. 다만, 조금 찾기 어려웠을 뿐이다. 익숙해지면 다른 API 사용할 때는 더 쉽게 찾을 수 있을 것 같다.

Application API

마지막으로 푸념을 하나 더 남긴다면, 이 포스팅처럼 간결한 예제가 많아졌으면 좋겠다. 음...그것은 블로거들의 몫인가...