62 lines
3.3 KiB
Plaintext
62 lines
3.3 KiB
Plaintext
page.title=Using WebViews
|
||
@jd:body
|
||
|
||
<p>A small application called <a title="WebViewDemo"
|
||
href="http://code.google.com/p/apps-for-android/source/browse/#svn/trunk/Samples
|
||
/WebViewDemo">WebViewDemo</a> shows how you can add web content to your
|
||
application. You can find it in the <a title="apps-for-android"
|
||
href="http://code.google.com/p/apps-for-android/">apps-for-android</a> project.
|
||
This application demonstrates how you can embed a {@link android.webkit.WebView}
|
||
into an activity and also how you can have two way communication between your
|
||
application and the web content. </p>
|
||
|
||
<p>A
|
||
WebView uses the same rendering and JavaScript engine as the browser,
|
||
but it runs under the control of your application. The WebView can be
|
||
full screen or you can mix it with other Views. The content for your
|
||
WebView can come from anywhere. The WebView can download content from
|
||
the web, or it can come from local files stored in your assets
|
||
directory. The content can even be dynamically generated by your
|
||
application code. For this example, the HTML comes from a local file
|
||
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>
|
||
|
||
<p>This application does not do very much: when you click on the
|
||
android, he raises his arm.</p>
|
||
|
||
<div style="text-align: center;"><img style="width: 322px; height: 482px;" src="images/webview.png"></div>
|
||
|
||
<p>This
|
||
could, of course, easily be accomplished with a little bit of
|
||
JavaScript. Instead, though, WebViewDemo takes a slightly more
|
||
complicated path to illustrate two very powerful features of WebView.</p>
|
||
|
||
<p>First,
|
||
JavaScript running inside the WebView can call out to code in your
|
||
Activity. You can use this to have your JavaScript trigger actions like
|
||
starting a new activity, or it can be used to fetch data from a
|
||
database or {@link android.content.ContentProvider}. The API for this
|
||
is very simple: just call the
|
||
{@link android.webkit.WebView#addJavascriptInterface(java.lang.Object, java.lang.String) addJavascriptInterface()}
|
||
method on your WebView. You pass an object whose methods you want to
|
||
expose to JavaScript and the name to use when making calls. You can see
|
||
the exact syntax in <a title="WebViewDemo.java"
|
||
href="http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/
|
||
WebViewDemo/src/com/google/android/webviewdemo/WebViewDemo.java">WebViewDemo.
|
||
java</a>. Here we are making our DemoJavascriptInterface object available to
|
||
JavaScript where it will be called "window.demo".</p>
|
||
|
||
<p>Second, your Activity can invoke JavaScript methods. All you have to do
|
||
is call the {@link android.webkit.WebView#loadUrl(java.lang.String) loadUrl}
|
||
method with the appropriate JavaScript call:</p>
|
||
|
||
<p><code style="padding-left: 25px;">mWebView.loadUrl("javascript:wave()");</code></p>
|
||
|
||
<p>Our <a title="WebViewDemo"
|
||
href="http://code.google.com/p/apps-for-android/source/browse/#svn/trunk/Samples
|
||
/WebViewDemo">WebViewDemo</a> uses both techniques: when you click on the
|
||
android, it calls out to the activity, which then turns around and calls back
|
||
into the JavaScript. WebViews are very powerful, and they may be a valuable tool
|
||
to help you build your application – especially if you already have a lot of
|
||
HTML content. As it happens, we've used exactly this approach in some of the
|
||
applications we've written.</p>
|