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>
|