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