diff options
Diffstat (limited to 'docs/html/resources/tutorials/views/hello-webview.jd')
-rw-r--r-- | docs/html/resources/tutorials/views/hello-webview.jd | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/docs/html/resources/tutorials/views/hello-webview.jd b/docs/html/resources/tutorials/views/hello-webview.jd new file mode 100644 index 0000000..c4388ea --- /dev/null +++ b/docs/html/resources/tutorials/views/hello-webview.jd @@ -0,0 +1,118 @@ +page.title=Hello, WebView +parent.title=Hello, Views +parent.link=index.html +@jd:body + +<p>A {@link android.webkit.WebView} allows you to create your own web browser Activity. In this tutorial, +we'll create a simple Activity that can view web pages.</p> + +<ol> + <li>Create a new project/Activity called HelloWebView.</li> + <li>Open the layout file. Insert a WebView so it looks like so: +<pre> +<?xml version="1.0" encoding="utf-8"?> +<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:orientation="vertical"> + + <WebView + android:id="@+id/webview" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + /> + +</LinearLayout> +</pre></li> + + <li>Now open the HelloWebView.java file. + At the top of the class, instantiate a WebView object: +<pre>WebView webview;</pre> + <p> Then add the following at the end of the <code>onCreate()</code> method:</p> +<pre> +webview = (WebView) findViewById(R.id.webview); +webview.getSettings().setJavaScriptEnabled(true); +webview.loadUrl("http://www.google.com"); +</pre> + + <p>This captures the WebView we created in our layout, then requests a + {@link android.webkit.WebSettings} object and enables JavaScript. + Then we load a URL.</p></li> + + <li>Because we're accessing the internet, we need to add the appropriate + permissions to the Android manifest file. So open the AndroidManifest.xml file + and, add the following as a child of the <code><manifest></code> element: + + <pre><uses-permission android:name="android.permission.INTERNET" /></pre></li> + + <li>Now run it.</li> +</ol> +<p> You now have the world's simplest web page viewer. + It's not quite a browser yet. It only loads the page we've requested.</p> + +<hr/> + +<p>We can load a page, but as soon as we click a link, the default Android web browser +handles the Intent, instead of our own WebView handling the action. So now we'll +override the {@link android.webkit.WebViewClient} to enable us to handle our own URL loading.</p> + +<ol> + <li>In the HelloAndroid Activity, add this nested private class: +<pre> +private class HelloWebViewClient extends WebViewClient { + @Override + public boolean shouldOverrideUrlLoading(WebView view, String url) { + view.loadUrl(url); + return true; + } +}</pre></li> + + <li>Now, in the <code>onCreate()</code> method, set an instance of the <code>HelloWebViewClient</code> + as our WebViewClient: + <pre>webview.setWebViewClient(new WebViewClientDemo());</pre> + + <p>This line should immediately follow the initialization of our WebView object.</p> + <p>What we've done is create a WebViewClient that will load any URL selected in our +WebView in the same WebView. You can see this in the <code>shouldOverrideUrlLoading()</code> +method, above—it is passed the current WebView and the URL, so all we do +is load the URL in the given view. Returning <var>true</var> says that we've handled the URL +ourselves and the event should not bubble-up.</p> + <p>If you try it again, new pages will now load in the HelloWebView Activity. However, you'll notice that +we can't navigate back. We need to handle the back button +on the device, so that it will return to the previous page, rather than exit the application.</p> + </li> + + <li>To handle the back button key press, add the following method inside the HelloWebView +Activity: +<pre> +@Override +public boolean onKeyDown(int keyCode, KeyEvent event) { + if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { + webview.goBack(); + return true; + } + return super.onKeyDown(keyCode, event); +}</pre> + <p>The condition uses a {@link android.view.KeyEvent} to check + whether the key pressed is the BACK button and whether the + WebView is actually capable of navigating back (if it has a history). If both are + <em>not</em> true, then we send the event up the chain (and the Activity will close). + But if both <em>are</em> true, then we call <code>goBack()</code>, + which will navigate back one step in the history. We then return true to indicate + that we've handled the event.</p> +</li> +</ol> +<p>When you open the application, it should look like this:</p> +<img src="images/hello-webview.png" width="150px" /> + +<h3>Resource</h3> +<ul> +<li>{@link android.webkit.WebView}</li> +<li>{@link android.webkit.WebViewClient}</li> +<li>{@link android.view.KeyEvent}</li> +</ul> + + + + + |