frameworks/base/docs/html/resources/articles/using-webviews.jd

   1 page.title=Using WebViews
   2 @jd:body
   3
   4 <p>A small application called <a title="WebViewDemo"
   5 href="http://code.google.com/p/apps-for-android/source/browse/#svn/trunk/Samples
   6 /WebViewDemo">WebViewDemo</a> shows how you can add web content to your
   7 application. You can find it in the <a title="apps-for-android"
   8 href="http://code.google.com/p/apps-for-android/">apps-for-android</a> project.
   9 This application demonstrates how you can embed a {@link android.webkit.WebView}
  10 into an activity and also how you can have two way communication between your
  11 application and the web content. </p>
  12
  13 <p>A
  14 WebView uses the same rendering and JavaScript engine as the browser,
  15 but it runs under the control of your application. The WebView can be
  16 full screen or you can mix it with other Views. The content for your
  17 WebView can come from anywhere. The WebView can download content from
  18 the web, or it can come from local files stored in your assets
  19 directory. The content can even be dynamically generated by your
  20 application code. For this example, the HTML comes from a local file
  21 called <a title="demo.html" href="http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/WebViewDemo/assets/demo.html">demo.html</a>.</p>
  22
  23 <p>This application does not do very much: when you click on the
  24 android, he raises his arm.</p>
  25
  26 <div style="text-align: center;"><img style="width: 322px; height: 482px;" src="images/webview.png"></div>
  27
  28 <p>This
  29 could, of course, easily be accomplished with a little bit of
  30 JavaScript. Instead, though, WebViewDemo takes a slightly more
  31 complicated path to illustrate two very powerful features of WebView.</p>
  32
  33 <p>First,
  34 JavaScript running inside the WebView can call out to code in your
  35 Activity. You can use this to have your JavaScript trigger actions like
  36 starting a new activity, or it can be used to fetch data from a
  37 database or {@link android.content.ContentProvider}. The API for this
  38 is very simple: just call the
  39 {@link android.webkit.WebView#addJavascriptInterface(java.lang.Object, java.lang.String) addJavascriptInterface()}
  40 method on your WebView. You pass an object whose methods you want to
  41 expose to JavaScript and the name to use when making calls. You can see
  42 the exact syntax in <a title="WebViewDemo.java"
  43 href="http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/
  44 WebViewDemo/src/com/google/android/webviewdemo/WebViewDemo.java">WebViewDemo.
  45 java</a>. Here we are making our DemoJavascriptInterface object available to
  46 JavaScript where it will be called "window.demo".</p>
  47
  48 <p>Second, your Activity can invoke JavaScript methods. All you have to do
  49 is call the {@link android.webkit.WebView#loadUrl(java.lang.String) loadUrl}
  50 method with the appropriate JavaScript call:</p>
  51
  52 <p><code style="padding-left: 25px;">mWebView.loadUrl("javascript:wave()");</code></p>
  53
  54 <p>Our <a title="WebViewDemo"
  55 href="http://code.google.com/p/apps-for-android/source/browse/#svn/trunk/Samples
  56 /WebViewDemo">WebViewDemo</a> uses both techniques: when you click on the
  57 android, it calls out to the activity, which then turns around and calls back
  58 into the JavaScript. WebViews are very powerful, and they may be a valuable tool
  59 to help you build your application – especially if you already have a lot of
  60 HTML content. As it happens, we've used exactly this approach in some of the
  61 applications we've written.</p>