[Android] Webview와 Javascript 연동(Eclipse, Tomcat, Jquery)

WebView ??

Webview는 안드로이드에서 Web을 제어하기 위한 개념이다. 다시말해, 안드로이드 앱에서 웹사이트에 접근이 가능하도록 만든 것이다. 앱 안에 웹뷰를 띄우고 네이버를 사용할 수 있다는 의미이다.

그런데 네이버가 아니고 자체 개발한 버튼이나 alert 등 웹에서 동작하는 기능들을 앱에서 연동시켜 구현이 가능하다. alert이면 안드로이드 경고 다이얼로그가 나오게되고 그런 식이다.

암튼, Webview를 사용하므로서 웹에 구축된 버튼이나 여러가지 속성들을 앱(네이티브)에서 구현한 것 처럼 사용이 가능하게 만들어 webview를 활용할 수 있다. 그러면 네이티브와 web언어가 같이 공존이 가능하다는 의미인데 맞다. 웹(javascript)는 정확히 서버에서 동작하긴 하나 javascript를 제어하여 안드로이드에서 동작시킬 수 있다. 이러한 개념을 하이브리드 앱이라 한다.

지금부터 Javascript에서 안드로이드를 호출하는 예제를 살펴볼 것이다.

안드로이드 부분

본 예제는 android api 29, java기반으로 동작한다.

manifest 설정

<uses-permission android:name="android.permission.INTERNET"/>

    <application
    ...
    />

    ...

웹을 사용하기 위해 INERNET 권한을 설정해야한다.

MainActivity

public class MainActivity extends AppCompatActivity {

    private WebView webview;
    private TextView txt;

    Handler mHandler = new Handler();

    private String url = "http://localhost/Test_Webview/hello.html";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        txt = (TextView) findViewById(R.id.textView);
        webview = (WebView)findViewById(R.id.webView);
        //javascript 연결 허용
        webview.getSettings().setJavaScriptEnabled(true);
        //webview 실행
        webview.loadUrl(url);

        //Android name을 갖은 interface 연결
        webview.addJavascriptInterface(new javaScriptInterface(), "Android");

    }

    class javaScriptInterface{
        @JavascriptInterface
        public void makeToast() {
            Toast.makeText(MainActivity.this, "호출 성공!", Toast.LENGTH_SHORT).show();
        }
    }
}

WEB은 local file로 하지 않고 톰캣을 사용해서 local 서버로 돌려서 만들었다.

먼저 url을 알고 있어야한다. local file로 접근하려면 file://경로로 해야할 것이다. 여기서는 local 서버의 주소로 접근해야한다.

하지만 localhost/~ 로 url을 작성하면 안될것이다. 안드로이드는 컴퓨터 로컬이 아니기 때문에 이더넷 또는 무선랜의 아이피를 가져와야한다.

cmd -> ipconfig -> ip를 가져온 후 base url에 작성한다.

webView

webView는 안드로이드에서 web에 작성된 web페이지를 불러오는 기능을 수행한다.

webView 객체 생성 및 아이디 등록

private WebView webview;
...
webview = (WebView)findViewById(R.id.webView);

webView 설정

webview.getSettings().setJavaScriptEnabled(true);

getSettings : webView에 대한 설정을 가져온다.
setJavaScriptEnabled(true) : 웹뷰에서 자바스크립트 사용을 허용한다.
webview.loadUrl(url) : url을 통해 웹뷰를 실행시킨다.
webview.addJavascriptInterface(new javaScriptInterface(), "Android") : 웹뷰를 자바스크립트로 연결시키는 인터페이스를 추가한다. 첫 번째 인자는 클래스가 들어가고, 두 번째 인자는 name으로 사용자가 임의로 설정한다.

추가 (goBack())

  @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // Check if the key event was the Back button and if there's history
        if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
            myWebView.goBack();
            return true;
        }
        // If it wasn't the Back key or there's no web page history, bubble up to the default
        // system behavior (probably exit the activity)
        return super.onKeyDown(keyCode, event);
    }
    }

웹페이지에서 뒤로가기를 넣는 기능이다. 안드로이드에서 뒤로가기를 누르면 실제 웹페이지에서의 뒤로가기가 동작하도록 한다.

자바스크립트 인터페이스

class javaScriptInterface{
        @JavascriptInterface
        public void makeToast() {
            Toast.makeText(MainActivity.this, "호출 성공!", Toast.LENGTH_SHORT).show();
        }
    }

실제 자바스크립트에서 실행시키는 함수가 여기에 작성된다.

@javaScriptInterface 어노테이션을 추가하여 자바스크립트에서 사용가능하게끔 만든다.

WEB 부분

본 예제는 이클립스와 Tomcat 8.5, Jquery 기반으로 진행된다.

html 작성

<!DOCTYPE html>
<html>
  <head>
    <meta charset="EUC-KR" />
    <title>Webview Test</title>
  </head>

  <style>
    .container {
      width: 100%;
    }

    #btn {
      display: block;
      width: 100px;
      height: 50px;
      background-color: #bbbbbb;
      color: black;
      margin: 0 auto;
      border: none;
      border-radius: 5px;
    }

    #btn:hover {
      border: 2px solid black;
    }
  </style>

  <body>
    <div class="container">
      <div class="content">
        <button id="btn" onClick="javascript:makeToast()">
          <b>토스트 버튼</b>
        </button>
      </div>
    </div>
  </body>

  <script type="text/javascript">
    function makeToast() {
      window.Android.makeToast()
    }
  </script>
</html>

html 파일에는 별 내용이 안들어있다.

핵심은 버튼과 script부분이다. 버튼 안에 onClick 속성을 추가했다. 클릭이 동작 할 때, makeToast라는 함수가 동작하고,

makeToast함수는 window.Android.makeToast()를 호출한다.

window.Android는 이후 안드로이드에서 name을 설정하게 되는데 이 Android(name은 아무렇게 지어도 됨.)를 인식해서 메서드를 찾게된다.

March 25, 2020