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