하이브리드 앱도 앱이기 때문에 웹 페이지로 구성이 되어있지만 앱의 기능을 어느 정도는 사용하게 됩니다. 그렇기 때문에 앱에서는 웹에서 어떠한 신호를 받기 위한 로직이 필요했으며, 그에 따라 생겨난 것이 Javascript를 통해 데이터를 주고받을 수 있도록 한, Android Bridge Interface
1. WebView(웹뷰) 세팅
<span style="font-size: 14pt;">
/ 웹뷰 위젯 연결
webView1 = (WebView)findViewById(R.id.webView1);
// 클리기 새창 안뜨게...
webView1.setWebViewClient(new WebViewClient());
// 세부 세팅객체 가져오기
WebSettings mWebSettings = webView1.getSettings();
// 자바스크립트 사용 허용
// 웹뷰 내에서 자바스크립트 실행해 자바스크립트에서 안드로이드 함수
// 실행시킬려면 필수로 세팅필요
mWebSettings.setJavaScriptEnabled(true);
// 안드로이드에서 제공하는 줌 아이콘을 사용할 수 있도록 설정
mWebSettings.setBuiltInZoomControls(true);
// 캐시 사용 여부 설정
mWebSettings.setAppCacheEnabled(false);
// 로드할 주소를 입력
webView1.loadUrl("http://192.168.0.8:8080/");
</span>
2. 자바스크립트에서 호출시 수행할 안드로이드 메서드를 작성
자바스크립트와 안드로이드를 중간에서 인터페이스 역할을 할 클래스를 작성해서 그 내부에
메서드를 정의
// 인터넷 작업 해야함
<!-- manifest에 인터넷 접속 권한 추가 -->
<uses-permission android:name="android.permission.INTERNET" />네트워크 작업은 백그라운드 쓰레드로 해야하며, 백그라운드 쓰레드에서는 메인 뷰의 화면 제어를 할 수 없음으로handler에게 대신해달라고 요청을 해야한다.
앞에선 계속 그렇게 해왔는데 이 2가지를 한번에 하는 것이 handler.post(new Runnable(){ run() }) 을 이용한 방식이다. 이런식으로해서 JavascriptInterface 클래스를 만들도록 한다.
public class WebViewActivityextends AppCompatActivity {
WebView webView1;
Handler handler =new Handler();
TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
// 웹뷰 위젯 연결
webView1 = (WebView)findViewById(R.id.webView1);
// 클리기 새창 안뜨게...
webView1.setWebViewClient(new WebViewClient());
// 세부 세팅객체 가져오기
WebSettings mWebSettings = webView1.getSettings();
// 자바스크립트 사용 허용
// 웹뷰 내에서 자바스크립트 실행해 자바스크립트에서 안드로이드 함수
// 실행시킬려면 필수로 세팅필요
mWebSettings.setJavaScriptEnabled(true);
// 안드로이드에서 제공하는 줌 아이콘을 사용할 수 있도록 설정
mWebSettings.setBuiltInZoomControls(true);
// 캐시 사용 여부 설정
mWebSettings.setAppCacheEnabled(false);
// 로드할 주소를 입력
webView1.loadUrl("http://192.168.0.8:8080/");
// 텍스트 뷰 위젯 연결
textView = (TextView)findViewById(R.id.textView);
}
final class JavascriptInterface {
@android.webkit.JavascriptInterface // 최근에는 이 어노테이션을 붙여줘야 동작하게 되어 있다
public void callMethodName(final String str){// 반드시 final이어야 한다.
// 네트워크를 통한 작업임으로 백그라운드 스레드를 써서 작업해야한다.
// 또한, 백그라운드 스레드는 직접 메인 뷰에 접근해 제어할 수 없음으로
// 핸들러를 통해서 작업해야하는데
// 이 때문에 한번에 handler.post()를 통해서 내부에 Runnable을 구현해 작업한다.
handler.post(new Runnable() {
@Override
public void run() {
// handle를 통해서 화면에 접근하는 것임으로 가능함
textView.setText("자바스크립트에서 전달받은 문자열을 쓴다 : " + str);
}
});
}
}
}
3. 만들어준 JavascriptInterface 클래스를 웹뷰에 등록
<span style="font-size: 14pt;">
webView1.addJavascriptInterface(new JavascriptInterface(),"myJSInterfaceName");
</span>webView1.addJavascriptInterface(new JavascriptInterface(),"myJSInterfaceName"); 에서
두번째 매개변수란에 myJSInterfaceName 처럼 인터페이스 이름을 지정하게 되어 있는데,
이 이름을 이용해서 자바스크립트에서 호출
