NativeScript로 안드로이드 셋탑용앱 리모콘으로 컨트롤하기

네이티브스크립트로 안드로이드 셋탑용 앱을 만들어 볼 일이 있어 테스트 중

난관에 부딛힌 일이 바로 셋탑용 리모콘의 신호를 받아 컨트롤 하는일이였다.

안드로이드 네이티브로 개발한다면 크게 문제가 없지만 NativeScript로는 관련

샘플을 찾지 못해 해매던 도중 알아낸 방법이 있어 남겨본다.

 

리모콘도 일반 키보드와 같이 누르면 키코드가 발생한다.  다만 이게 셋탑 회사마다

리모콘 키코드를 다르게 셋팅되어 있어 한번씩 눌러보고 맵핑해서 써야한다.

 

우선 NativeScript 에서 해야할일은

기본 엑티비티를 상속받아 기능을 구현하면 된다.

여기까지의 샘플은

docs.nativescript.org/angular/core-concepts/android-runtime/advanced-topics/extend-application-activity#extending-activity

Extending Application and Activity - NativeScript Docs

위의 소스를 기본으로 추가한 부분

const frame = require("tns-core-modules/ui/frame");

const superProto = androidx.appcompat.app.AppCompatActivity.prototype;
androidx.appcompat.app.AppCompatActivity.extend("com.grimtong.MainActivity", {
  onCreate: function(savedInstanceState) {
    this.isNativeScriptActivity = true;
    if(!this._callbacks) {
      frame.setActivityCallbacks(this);
    }
    this._callbacks.onCreate(this, savedInstanceState, this.getIntent(), superProto.onCreate);
  },
  onSaveInstanceState: function(outState) {
    this._callbacks.onSaveInstanceState(this, outState, superProto.onSaveInstanceState);
  },
  onStart: function() {
    this._callbacks.onStart(this, superProto.onStart);
  },
  onStop: function() {
    this._callbacks.onStop(this, superProto.onStop);
  },
  onDestroy: function() {
    this._callbacks.onDestroy(this, superProto.onDestroy);
  },
  onBackPressed: function() {
    this._callbacks.onBackPressed(this, superProto.onBackPressed);
  },
  onRequestPermissionsResult: function (requestCode, permissions, grantResults) {
    this._callbacks.onRequestPermissionsResult(this, requestCode, permissions, grantResults, undefined);
  },
  onActivityResult: function (requestCode, resultCode, data) {
    this._callbacks.onActivityResult(this, requestCode, resultCode, data, _super.prototype.onActivityResult);
  },
  dispatchKeyEvent: function (event) {
    var action = event.getAction();
    var keyCode = event.getKeyCode();
    if( action == 1 ){
      global.EventBus.$emit("keyEvent", { "action": action, "keyCode": keyCode });
    }
    return false;
  }
});

dispatchKeyEvent 부분이 추가된 부분으로 키 입력을 받아 다시 Vue의 EventBus를 통해 Broadcast를 하면 끝이다.

필요한 페이지에서 이벤트 캐치해서 사용하면 된다.

action == 1 을 넣은건 누를때와 뗄때 이벤트가 발생함으로 필요할때만 받을수 있도록 넣었다.

AndroidManifest.xml 파일의 엑티미디명과 웹팩에서 해당파일을 번들링 빌드 할수 있도록 맞춰서 수정해줘야한다.

//키이벤트가 필요한 부분에 삽입
global.EventBus.$on("keyEvent", (e)=>{
	console.log(e);
});

위의 소스는 필요한 페이지에서 등록후 사용하면 되며 다른페이지로 이동할때는 페이지가 distroy 되기전에 이벤트는 off 해줘야한다.^^

 

위에서 global.EventBus 부분은 프로젝트에 맞춰 사용하면 되며 vue.js의 EventBus 활용법을 이용한 방법이다.