141 Embedding the WebKit Browser Other GUI toolkits let you use HTML for presenting information, from limited HTML renderers e.g., Java/Swing and wxWidgets to embedding Internet Explor
Trang 1141
Embedding the WebKit
Browser
Other GUI toolkits let you use HTML for presenting information, from limited HTML
renderers (e.g., Java/Swing and wxWidgets) to embedding Internet Explorer into NET
applications Android is much the same, in that you can embed the built-in web
browser as a widget in your own activities, for displaying HTML or full-fledged
browsing The Android browser is based on WebKit, the same engine that powers
Apple’s Safari web browser
The Android browser is sufficiently complex that it gets its own Java package
(android.webkit) Using the WebView widget itself can be simple or powerful, based on
your requirements, as you’ll learn in this chapter
A Browser, Writ Small
For simple stuff, WebView is not significantly different than any other widget in Android
You pop it into a layout, tell it which URL to navigate to via Java code, and you’re
finished
For example (WebKit/Browser1), here is a simple layout with a WebView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView android:id="@+id/webkit"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
As with any other widget, you need to tell it how it should fill up the space in the layout
In this case, it fills all remaining space
13
Trang 2CHAPTER 13: Embedding the WebKit Browser
142
The Java code is equally simple:
package com.commonsware.android.browser1;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class BrowserDemo1 extends Activity {
WebView browser;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
browser=(WebView)findViewById(R.id.webkit);
browser.loadUrl("http://commonsware.com");
}
}
The only unusual bit with this edition of onCreate() is that we invoke loadUrl() on the WebView widget, to tell it to load a web page (in this case, the home page of some random firm)
However, we also need to make one change to AndroidManifest.xml, requesting permission to access the Internet:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.commonsware.android.browser1">
<uses-permission android:name="android.permission.INTERNET" />
<application android:icon="@drawable/cw">
<activity android:name=".BrowserDemo1" android:label="BrowserDemo1">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
If we fail to add this permission, the browser will refuse to load pages Permissions are covered in greater detail in Chapter 28
The resulting activity looks like a web browser, but with hidden scrollbars, as shown in Figure 13–1
Trang 3Figure 13–1 The Browser1 sample application
As with the regular Android browser, you can pan around the page by dragging it The
D-pad moves you around all the focusable elements on the page
What is missing is all the extra stuff that makes up a web browser, such as a
navigational toolbar
Now, you may be tempted to replace the URL in that source code with something that
relies on JavaScript, such as Google’s home page By default, JavaScript is turned off in
WebView widgets If you want to enable JavaScript, call
getSettings().setJavaScriptEnabled(true); on the WebView instance
Loading It Up
There are two main ways to get content into the WebView One is to provide the browser
with a URL and have the browser display that page via loadUrl(), as described in the
previous section The browser will access the Internet through whatever means are
available to that specific device at the present time (Wi-Fi, cellular network,
Bluetooth-tethered phone, well-trained tiny carrier pigeons, etc.)
The alternative is to use loadData() Here, you supply the HTML for the browser to view
You might use this to do the following:
Display a manual that was installed as a file with your application
package
Display snippets of HTML you retrieved as part of other processing,
such as the description of an entry in an Atom feed
Trang 4CHAPTER 13: Embedding the WebKit Browser
144
Generate a whole UI using HTML, instead of using the Android widget set
There are two flavors of loadData() The simpler one allows you to provide the content, the MIME type, and the encoding, all as strings Typically, your MIME type will be text/html and your encoding will be UTF-8 for ordinary HTML
For example, you could replace the loadUrl() invocation in the previous example with the following:
browser.loadData("<html><body>Hello, world!</body></html>",
"text/html", "UTF-8");
The result would be as shown in Figure 13–2
Figure 13–2 The Browser2 sample application
This is also available as a fully buildable sample, as WebKit/Browser2
Navigating the Waters
As you’ve seen, the WebView widget doesn’t come with a navigation toolbar This allows you to use it in places where such a toolbar would be pointless and a waste of screen real estate That being said, if you want to offer navigational capabilities, you can, but you need to supply the UI
WebView offers ways to perform garden-variety browser navigation, including the following methods:
reload(): Refreshes the currently viewed web page
goBack(): Goes back one step in the browser history
Trang 5canGoBack(): Determines if there is any history to go back to
goForward(): Goes forward one step in the browser history
canGoForward(): Determines if there is any history to go forward to
goBackOrForward(): Goes backward or forward in the browser history
A negative number as an argument represents a count of steps to go
backward A positive number represents how many steps to go
forward
canGoBackOrForward(): Determines if the browser can go backward or
forward the stated number of steps (following the same
positive/negative convention as goBackOrForward())
clearCache(): Clears the browser resource cache
clearHistory(): Clears the browsing history
Entertaining the Client
If you are going to use the WebView as a local UI (versus browsing the Web), you will
want to be able to get control at key times, particularly when users click links You will
want to make sure those links are handled properly, by loading your own content back
into the WebView, by submitting an Intent to Android to open the URL in a full browser,
or by some other means (see Chapter 18)
Your hook into the WebView activity is via setWebViewClient(), which takes an instance
of a WebViewClient implementation as a parameter The supplied callback object will be
notified of a wide range of activities For example, it will be notified when parts of a page
have been retrieved (e.g., onPageStarted()), as well as when you, as the host
application, need to handle certain user- or circumstance-initiated events (e.g.,
onTooManyRedirects() or onReceivedHttpAuthRequest())
A common hook will be shouldOverrideUrlLoading(), where your callback is passed a
URL (plus the WebView itself), and you return true if you will handle the request or false if
you want default handling (e.g., actually fetch the web page referenced by the URL) In
the case of a feed reader application, for example, you will probably not have a full
browser with navigation built into your reader In this case, if the user clicks a URL, you
probably want to use an Intent to ask Android to load that page in a full browser But if
you have inserted a “fake” URL into the HTML, representing a link to some
activity-provided content, you can update the WebView yourself
As an example, let’s amend the first browser demo to make it an application that, upon
a click, shows the current time From WebKit/Browser3, here is the revised Java:
public class BrowserDemo3 extends Activity {
WebView browser;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
Trang 6CHAPTER 13: Embedding the WebKit Browser
146
setContentView(R.layout.main);
browser=(WebView)findViewById(R.id.webkit);
browser.setWebViewClient(new Callback());
loadTime();
}
void loadTime() {
String page="<html><body><a href=\"clock\">"
+new Date().toString()
+"</a></body></html>";
browser.loadDataWithBaseURL("x-data://base", page,
"text/html", "UTF-8",
null);
}
private class Callback extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
loadTime();
return(true);
}
}
}
Here, we load a simple web page into the browser (loadTime()) that consists of the current time, made into a hyperlink to the /clock URL We also attach an instance of a WebViewClient subclass, providing our implementation of shouldOverrideUrlLoading()
In this case, no matter what the URL, we want to just reload the WebView via loadTime() Running this activity gives the result shown in Figure 13–3
Figure 13–3 The Browser3 sample application
Trang 7Selecting the link and clicking the D-pad center button will select the link, causing the
page to be rebuilt with the new time
Settings, Preferences, and Options (Oh My!)
With your favorite desktop web browser, you have some sort of settings, preferences, or
options window Between that and the toolbar controls, you can tweak and twiddle the
behavior of your browser, from preferred fonts to the behavior of JavaScript
Similarly, you can adjust the settings of your WebView widget as you see fit, via the
WebSettings instance returned from calling the widget’s getSettings() method
There are a lot of options on WebSettings to play with Most appear fairly esoteric (e.g.,
setFantasyFontFamily()) However, here are some that you may find more useful:
Control the font sizing via setDefaultFontSize() (to use a point size)
or setTextSize() (to use constants indicating relative sizes like LARGER
and SMALLEST)
Control JavaScript via setJavaScriptEnabled() (to disable it outright)
and setJavaScriptCanOpenWindowsAutomatically() (to merely stop it
from opening pop-up windows)
Control web site rendering via setUserAgent() A value of 0 means the
WebView gives the web site a user-agent string that indicates it is a
mobile browser A value of 1 results in a user-agent string that
suggests it is a desktop browser
The settings you change are not persistent, so you should store them somewhere (such
as via the Android preferences engine, discussed in Chapter 21) if you are allowing your
users to determine the settings, rather than hard-wiring the settings in your application
Trang 8CHAPTER 13: Embedding the WebKit Browser
148